Structuration XHTML 1 : Réstructurer un site avec XHTML

L'un des titres que nous avons écrit pour cette section était : "XHTML : des règles simples, des directives faciles." Une des raisons est que les règles et les directives discutées dans cette section sont simples et faciles. Une autre raison est qu'un livre simple et facile sur la conception WEB, comme les produits gratuits neufs dans les supermarchés, bien que courants, peut attirer l'attention des gens de manière efficace, et cela peut stimuler l'intérêt des gens et encourager les gens à essayer.

Je suis vraiment espérant que le contenu de cette section puisse susciter votre intérêt et vous encourager à essayer. Pourquoi est-ce ainsi ? Parce que une fois que vous avez maîtrisé les idées simples et faciles incluses dans ce chapitre, vous allez repenser la manière dont les pages Web fonctionnent et commencer à les construire différemment. Cependant, je ne veux pas que vous ne soyez que le réécriture du code. J'espère que vous pourriez réellement penser et travailler d'une autre manière.

D'autre part, la refonte est la véritable signification de XHTML.

Dans ce chapitre, nous allons étudier le mécanisme et la signification des balises structurées. Si vous intégrez des normes de site Web dans votre projet de développement, vous pourriez trouver le contenu de ce chapitre familier. Cependant, même les experts dans ce domaine pourront découvrir des surprises ici.

Résumé des règles XHTML

Convertir le HTML traditionnel en XHTML 1.0 est rapide et sans douleur, tant que vous suivez quelques règles simples et des directives faciles. Peu importe si vous avez utilisé HTML auparavant, cela ne vous empêchera pas d'utiliser XHTML.

  • Utilisez la déclaration de type de document appropriée et l'espace de noms.
  • Utilisez l'élément meta pour déclarer le type de contenu de votre page.
  • Écrivez tous les éléments et les propriétés en minuscules.
  • Encadrez les valeurs des propriétés entre guillemets.
  • Affectez une valeur à toutes les propriétés.
  • Fermez toutes les balises.
  • Fermez les balises vides avec des espaces et des barres obliques.
  • Ne pas écrire de doubles traits de soulignement dans les commentaires.
  • Assurez-vous que les symboles de moins et et sont < et &

Unicode et d'autres jeux de caractères

Les documents XML, XHTML et HTML 4.0 utilisent par défaut le jeu de caractères Unicode, une norme définie par l'Union Unicode. Unicode est un jeu de caractères complet qui attribue un nombre unique spécifique à chaque caractère, indépendamment de la plate-forme, du programme et de la langue. Unicode est également la chose la plus proche d'un alphabet universel que nous avons, bien que ce ne soit pas un alphabet, mais un ensemble de schémas de correspondance numériques.

Bien que Unicode soit le jeu de caractères par défaut des documents Web, les développeurs peuvent librement choisir d'autres jeux de caractères plus adaptés à leurs besoins. Par exemple, les sites Web américains et européens utilisent souvent l'encodage ISO-8859-1 (Latin-1), tandis que la norme nationale de la République populaire de Chine est gb2312.

Marquez le document pour exprimer la sémantique, pas pour le style

Rappelez-vous : utilisez CSS au maximum pour le layout. Dans le monde des normes Web, les balises XHTML sont indépendantes de la présentation, elles concernent uniquement la structure du document.

Un document bien structuré peut communiquer le plus de sémantique possible au navigateur, que ce soit un navigateur sur un PDA ou un navigateur graphique de bureau moderne. Un document bien structuré peut communiquer des sémantiques visuelles à l'utilisateur, même dans les anciens navigateurs ou dans les navigateurs modernes où l'utilisateur a désactivé CSS.

Pas tous les sites peuvent immédiatement abandonner la mise en page en tableau HTML. Le créateur de CSS, W3C, n'a converti son site officiel en mise en page CSS qu'en novembre 2002. Cependant, même les tenants des normes rigides ne séparent pas toujours la présentation de la structure, au moins dans XHTML 1. Mais maintenant, nous pouvons faire un grand pas vers cet idéal, en séparant la présentation de la structure (ou en séparant les données de la conception), même les conceptions traditionnelles mixtes peuvent en bénéficier.

Voici quelques conseils qui peuvent vous aider à penser de manière plus structurée :

Les couleurs dans le plan

Dans les écoles de grammaire, la plupart d'entre nous ont été forcés d'écrire des articles en utilisant le format de plan standard. Maintenant, en tant que designers, nous pouvons nous affranchir de la limitation du plan avec tant de liberté et nous engager dans le domaine de la liberté d'expression personnelle unique (peut-être que nos brochures et nos sites commerciaux ne sont pas si uniques et personnels). Mais au moins, nous ne serons plus perturbés par le plan.

En fait, selon HTML, nous devrions structurer le contenu en niveaux organisés. Pendant les périodes où les navigateurs ne supportaient pas CSS, nous ne pouvions pas livrer des conceptions de vente prêtes à l'emploi tout en faisant cela. Mais aujourd'hui, en mettant en œuvre notre design sans faille, nous avons la capacité de livrer des documents bien structurés.

Lorsque vous marquez du texte destiné au réseau ou lorsque vous convertissez un document texte existant en page Web, pensez à ces entrées de plan traditionnel.

<h1>Mon thème</h1>
<p>Texte introductif</p>
<h2>Avis complémentaire</h2>
<p>Texte pertinent</p>

En même temps, évitez d'utiliser des éléments HTML obsolètes tels que <font>, ou des éléments sans sens sémantique tels que <br />, pour simuler des structures logiques inexistantes.

Par exemple, n'agissez pas ainsi :

Mon thème<br /><br />
Texte introductif<br /><br />
Avis complémentaire<br /><br />
Texte pertinent<br />

Utilisez les éléments en fonction de leur sens, plutôt qu'en fonction de leur apparence

Certains d'entre nous sont tombés dans une mauvaise habitude : utiliser h1 lorsqu'il ne faut qu'un texte en grand, ou utiliser li lorsqu'il faut ajouter un point. Comme nous l'avons discuté dans le chapitre précédent, les navigateurs ont toujours l'habitude d'imposer des attributs de conception aux éléments HTML. Nous avons tous l'habitude de penser que h1 signifie un texte en grand, et li signifie un point, ou que blockquote signifie un texte en retrait. La plupart d'entre nous écrivons HTML de manière désordonnée, en simulant des effets de présentation avec des éléments structurés.

De même, si un designer souhaite que tous les titres aient la même taille, il mettra tous les titres en h1, même si cela n'a pas de sens sémantique structuré.

C'est le titre principal, lorsque j'ai organisé le texte selon le format de l'outline.
Ce n'est pas le titre principal, mais je souhaite qu'il utilise la même police que le titre ci-dessus, mais je ne sais pas comment utiliser CSS.
Cela n'est pas vraiment un titre. Mais je souhaite que le texte de la page utilise la même police, pour atteindre l'effet que je souhaite,
Si je comprends CSS, je peux atteindre ce design sans perturber la structure du document.

Nous devons mettre de côté nos petits tours et commencer à les utiliser en fonction du sens des éléments, plutôt que de leur apparence. En réalité, h1 peut devenir ce que vous souhaitez. Grâce à CSS, h1 peut devenir une police romaine petite et non-gras, tandis que le texte p peut devenir un texte gras et grand, et li peut ne pas avoir de point (vous pouvez également utiliser des images PNG, GIF ou JPEG de petits chats, de petits chiens ou de logos d'entreprise à la place) etc.

À partir d'aujourd'hui, nous utiliserons CSS pour déterminer l'apparence des éléments. Nous pouvons même changer leur apparence en fonction de leur position dans la page ou sur le site. CSS peut complètement détacher l'expression de la structure et vous permet de formatter n'importe quel élément selon votre goût.

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, palatino, "New Century Schoolbook",
	times, serif;
	font-weight: normal;
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 0;
	}

Pourquoi faites-vous cela ? Le but est d'obtenir une apparence et une sensation brandées dans les navigateurs graphiques, tout en préservant la structure du document dans les navigateurs de texte, les appareils sans fil, et les e-mails au format HTML.

Nous ne voulons pas parler de plus de CSS dans le chapitre sur XHTML. Nous voulons simplement montrer que la structure du document et l'expression visuelle sont deux choses complètement différentes, et que les éléments structurés devraient être utilisés pour transformer le texte, pas pour imposer des effets d'affichage.

Utilisez des éléments structurés plutôt que du brouillard inutile

Puisque nous avons oublié ou ne savons pas du tout l'utilisation de HTML et XHTML pour transmettre des significations structurées, de nombreux détracteurs de HTML utilisent les balises pour insérer des listes :

Projet un<br />
Projet deux<br />
Projet trois<br />

Considérez l'utilisation de listes ordonnées ou non ordonnées à la place :

<ul>
<li>Projet un</li>
<li>Projet deux</li>
<li>Projet trois</li>
</ul>

"Mais li me donne un point, et je n'en ai pas besoin !" vous pourriez dire. Selon le chapitre précédent, CSS ne fait aucune hypothèse sur l'apparence attendue des éléments. Il attend que vous lui disiez ce que vous attendez de l'apparence des éléments. Le fermer est la capacité la plus fondamentale de CSS. Il a la capacité de faire paraître une liste comme du texte ordinaire, ou comme une barre de navigation graphique, avec un effet de rétroversion complet.

Ainsi, utilisez des éléments de liste pour marquer des listes. De même, utilisez strong à la place de b, em à la place de i, etc. Dans la plupart des navigateurs de bureau par défaut, l'affichage de strong est identique à celui de b, et em et i sont identiques, tout en pouvant créer l'effet visuel attendu sans détruire la structure du document.

Bien que CSS ne fasse aucune hypothèse sur l'affichage des éléments, les navigateurs font beaucoup d'hypothèses, et nous n'avons encore rencontré aucun navigateur qui affiche strong autrement que en gras (sauf si le CSS indiqué par le designer l'affiche différemment). Si vous avez peur qu'un navigateur inconnu n'affiche pas strong en gras, vous pouvez écrire une règle CSS comme suit :

strong {
	font-weight: bold;
	font-style: normal;
	}

Éléments visuels et structure

Les normes web ne demandent pas seulement ce type de technologie à utiliser, mais aussi de suivre la manière d'utiliser ces technologies. Utiliser XHTML pour écrire des balises, en utilisant CSS pour traiter une partie ou la totalité de la mise en page, ne rend pas nécessairement le site plus facile à utiliser et plus léger, ni ne réduit nécessairement la bande passante. Comme pour les technologies que nous avons utilisées à l'époque, XHTML et CSS peuvent être mal utilisés et mal utilisés. Un XHTML long et un HTML long gaspillent la bande passante et le temps de l'utilisateur. Un CSS long et excessif ne peut pas remplacer complètement le code HTML de présentation ; cela ne fait que remplacer une mauvaise chose par une autre.