Structuration XHTML 2 : Cas d'étude : Marquage structuré de W3school

En tout cas, ne sautez pas cette section. La lecture de ce chapitre améliorera vos compétences, mincera votre page web et vous donnera une meilleure compréhension des différences entre le code et le design. Les idées de ce chapitre sont faciles à apprendre, mais elles peuvent grandement améliorer les performances du site, ainsi que la facilité de conception, de création et de mise à jour du site.

Dans cette section, vous apprendrez à écrire des balises logiques et compactes qui vous permettront de réduire le trafic de bande passante d'environ 50%, tout en réduisant la charge et la pression du serveur et en abrégeant le temps de chargement du site. En éliminant les éléments superflus et en corrigeant les mauvaises habitudes sans aucun avantage, nous pouvons atteindre cet objectif.

Ces mauvaises habitudes affectent de nombreux sites sur le web, en particulier ceux qui mélangent le code CSS avec un agencement basé principalement sur des tableaux. Cette approche est grossière et coûteuse, même pour les designers expérimentés dans d'autres domaines. De plus, la probabilité de ce problème est égale, que ce soit pour les sites qui écrivent manuellement le code, ou pour ceux qui utilisent des outils d'édition visuels, comme Dreamweaver et GoLive, pour créer des sites.

Cette section présentera ces erreurs courantes afin que vous puissiez les identifier et les prévenir, et apprendre comment les corriger. Nous expliquons en détail l'attribut d'identifiant unique (id) - et montrons comment il vous permet d'écrire un code XHTML extrêmement compact, que vous créiez un agencement mixte ou un agencement pur CSS.

Doit-on structurer chaque élément ?

Comme nous l'avons expliqué dans la section précédente, chaque élément peut être structuré, CSS peut rendre une liste ordonnée ou non ordonnée une barre de navigation complète, avec un effet de bouton de retournement. Le contenu du document peut être marqué avec des éléments ordinaires, qui indiquent leur rôle sémantique dans la conception du site par des attributs structurés spécifiques.

Nous avons créé la première version de test en chinois de CodeW3C.com en l'an 2006, et nous avons utilisé CSS pour le布局 dès le départ, et XHTML pour structurer le document. Chaque élément est structuré, allant des titres aux listes, en passant par les paragraphes. Vous pouvez voir sur chaque page de CodeW3C les boutons d'accueil et les boutons de menu de niveau deux avec un effet de retournement. Voici le code XHTML de ces deux composants :

<div id="header"><h1><a href="/">codew3c en ligne tutoriel</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="tutoriel html">tutoriel html</a></li>
<li id="x"><a href="/x.asp" title="tutoriel XML">tutoriel XML</a></li>
<li id="b"><a href="/b.asp" title="script de navigateur">script de navigateur</a></li>
<li id="s"><a href="/s.asp" title="Scripts serveurs">Scripts serveurs</a></li>
<li id="d"><a href="/d.asp" title="Tutoriels dot net">Tutoriels dot net</a></li>
<li id="m"><a href="/m.asp" title="Tutoriels multimédias">Tutoriels multimédias</a></li>
<li id="w"><a href="/w.asp" title="Manuel de création de site">Manuel de création de site</a></li>
</ul>
</div>

div, id et autres assistants

Si utilisé correctement, le div peut devenir un excellent assistant pour les balises structurées, tandis que l'id est un outil surprenant qui vous permet d'écrire un XHTML extrêmement compact, de tirer le meilleur parti de CSS de manière ingénieuse et d'ajouter des comportements complexes et raffinés au site via le modèle d'objet de document standard (DOM).

W3C définit ainsi le div dans le modèle de structure XHTML de son dernier projet XHTML2 :

L'élément div, en coordination avec les attributs id, class et role, fournit un mécanisme universel pour ajouter de la structure supplémentaire au document. Cet élément ne définit pas le style de présentation du contenu. Par conséquent, les créateurs peuvent utiliser cet élément en coordination avec les feuilles de style, xml:lang et d'autres attributs pour rendre XHTML adapté à leurs besoins et goûts personnels.

div est l'abréviation de division. Division signifie division, zone, groupe. Par exemple, lorsque vous assemblez une série de liens, vous créez une division de document.

Mécanisme universel de structure

Tous ceux qui écrivent du HTML sont familiers avec des éléments courants tels que les paragraphes et les titres, mais certains peuvent ne pas être aussi familiers avec le div. Dans la description de W3C, nous pouvons trouver la clé pour comprendre l'élément div, "un mécanisme universel d'ajout de structure."

Sur la page d'accueil de ce site, nous encapsulons la liste des tutoriels dans un div, car la liste des tutoriels n'est pas intégrée à aucun élément du texte. Les éléments h2 marquent chaque titre de tutoriel, tandis que les éléments ul marquent chaque liste détaillée des tutoriels. Cependant, dans un sens plus large et plus spécifique, ce répertoire de tutoriels joue un rôle structuré, c'est-à-dire celui de composant de navigation secondaire. Pour souligner ce rôle, nous utilisons l'id navsecond pour noter ce div.

<div id="navsecond">
<h2>Tutoriel HTML</h2>
<ul>
<li><a href="/html/index.asp" title="Tutoriel HTML">HTML</a></li>
<li><a href="/xhtml/index.asp" title="Tutoriel XHTML">XHTML</a></li>
<li><a href="/css/index.asp" title="Tutoriel CSS">CSS</a></li>
<li><a href="/tcpip/index.asp" title="Tutoriel TCP/IP">TCP/IP</a></li>
</ul>
<h2>Tutoriel XML</h2>
<ul>
<li><a href="/xml/index.asp" title="Tutoriel XML">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="Langages XSL">XSL</a></li>
... ...
... ...
</div>

Vous pouvez utiliser tout nom. "Gladys" et "orangebox" sont parfaitement conformes aux règles de nommage XHTML. Cependant, les noms sémantiques ou méta-structurés (c'est-à-dire ceux qui expliquent la fonction des éléments) sont les meilleurs.

Quand le client décide d'utiliser le bleu, vous trouvez que nommer une partie du site "orangebox" (boîte orange) est très stupide. Dans le cas suivant, vous vous sentirez encore plus stupide, lorsque vous n'avez que six mois avant la livraison finale, vous commencez à ajuster les feuilles de style, et vous ne vous rappelez pas du tout que "Gladys" (nom féminin) représente la zone de navigation, la barre latérale ou le champ de recherche.

Par conséquent, marquer id comme "menu", "content" ou "searchform" vous aidera à vous souvenir. De plus, la balise ne signifie pas la conception ; une page bien structurée peut être formatée de la manière que vous souhaitez. Le résultat est que, que vous utilisiez un enchaînement pur CSS ou un enchaînement mixte, vous allez définitivement changer l'habitude de penser et de créer en utilisant des balises de présentation.

id vs. class

l'attribut id n'est pas nouveau pour XHTML ; l'attribut class ou l'élément div en est de même. Tous deux peuvent être remontés à l'époque de HTML. L'attribut id attribue un nom unique à un élément. Chaque nom ne peut être utilisé qu'une seule fois sur la page assignée à (par exemple, si votre page contient un div avec l'id content, aucun autre div ou autre élément ne peut utiliser ce nom. En revanche, l'attribut class peut être utilisé à plusieurs reprises dans la page (par exemple, les cinq paragraphes de la page peuvent utiliser le nom de class "small" ou "footnote"). Les balises suivantes aideront à clarifier la différence entre id et class :

<div id="searchform">Les composants du formulaire de recherche vont ici. Cela
une section de la page est unique.</div>
<div class="blogentry">
   <h2>Article de blog d'aujourd'hui</h2>
   <p>Le contenu du blog va ici.</p>
   <p>Ici se trouve un autre paragraphe de contenu de blog.</p>
   <p>Comme il peut y avoir de nombreux paragraphes sur une page, de même
   Il peut y avoir de nombreuses entrées dans un blog. Une page de blog pourrait utiliser
   Il y a plusieurs instances de la classe "blogentry" (ou toute autre
   class).</p>
</div>
<div class="blogentry">
   <h2>Article de blog d'hier</h2>
   <p>En fait, ici nous sommes à l'intérieur d'un autre div de classe
   "blogentry."</p>
   <p>Elles se reproduisent comme des lapins.</p>
   <p>Il peut y avoir dix articles de blog sur cette page, il pourrait
   Il y a aussi dix divs de classe "blogentry".</p>
</div>

Dans cet exemple, le div nommé searchform est utilisé pour encapsuler la zone de la page contenant le formulaire de recherche, tandis que le div class="blogentry" est utilisé pour encapsuler chaque entrée d'article dans le blog. Il n'y a qu'un seul formulaire de recherche sur la page, donc nous choisissons l'ID pour ce composant unique. Cependant, le blog a de nombreux entrées d'articles, donc l'attribut class est utilisé dans ce cas. De la même manière, les sites d'actualités ont généralement plusieurs div, et ces div peuvent être nommés "newsitem" ou autre chose.

Cependant, tous les sites ne nécessitent pas de div. Un site blog peut utiliser simplement les titres h1, H2 et h2 et les paragraphes <p>. Les sites d'actualités sont également similaires. Nous montrons ici le div avec la classe blogentry, non pas pour vous encourager à remplir votre site de div, mais simplement pour vous montrer ce principe : dans le même document HTML, utilisez plusieurs classes, mais ne utilisez qu'une seule fois l'ID.

Théorie des autocollants adhésifs

Il peut être utile de penser à l'attribut ID comme à un autocollant adhésif. Je vais coller un autocollant sur le réfrigérateur pour me rappeler d'acheter du lait, un autre sur le téléphone pour me rappeler d'appeler un client en retard de paiement. Et encore un autre, collé sur le carnet de comptes, pour me rappeler que je dois payer les factures avant le 15e de ce mois.

L'ID peut également annoter des zones spéciales du document pour vous rappeler quelles zones nécessitent un traitement spécial. À cet égard, l'attribut ID est similaire aux autocollants adhésifs. Pour réaliser ce que l'on appelle un traitement spécial, vous devez utiliser cet ID spécial pour écrire plusieurs règles dans le tableau de styles ou ajouter quelques lignes de code dans le fichier JavaScript. Par exemple, si vous avez des règles spécifiques dans votre fichier CSS, ces règles ne s'appliquent qu'aux éléments du div nommé searchform.

Lorsque l'attribut id est utilisé comme une chose magnétique (aimant) dans une série de règles CSS spécifiques, il est appelé sélecteur CSS. Il y a de nombreuxCréation de sélecteursde méthodes, mais l'id est facile à utiliser et a de multiples usages.

La puissance de l'id

L'attribut id est incroyablement puissant. Il possède les capacités suivantes :

  • En tant que sélecteur de feuille de style, nous permettant de créer un XHTML compact et minimisé.
  • En tant que cible hypertexte, remplaçant l'ancienne propriété name.
  • En tant que méthode pour localiser des éléments spécifiques à partir de scripts basés sur DOM.
  • En tant que nom d'élément objet.
  • En tant qu'outil de traitement polyvalent (outil de traitement général) (dans les exemples de W3C, "lorsque les données sont extraites d'une page HTML vers une base de données, ou lorsque le document HTML est converti en un autre format, etc., en tant qu'outil de reconnaissance de domaine.").

Règles de l'id

Les valeurs d'id doivent commencer par une lettre ou un trait de soulignement ; elles ne peuvent pas commencer par un chiffre. Bien que la validation W3C ne capture pas cette erreur, c'est le cas des analyseurs XML. De plus, si vous utilisez id avec JavaScript dans un formulaire, les noms et valeurs d'id doivent être des variables JavaScript valides. Les espaces et les tirets, en particulier les tirets, ne sont pas autorisés. De plus, l'utilisation d'un trait de soulignement dans les noms de class ou d'id n'est pas une bonne idée, en raison des restrictions de CSS2.0 (et de certains navigateurs).

Marques sémantiques et accessibilité

Maintenant, nous avons déjà discuté des éléments XHTML polyvalents (en particulier div et id), regardons donc des exemples concernant la page d'accueil de ce site. Pour commencer, revenons sur ce menu situé dans l'en-tête :

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="tutoriel html">tutoriel html</a></li>
<li id="x"><a href="/x.asp" title="tutoriel XML">tutoriel XML</a></li>
<li id="b"><a href="/b.asp" title="script de navigateur">script de navigateur</a></li>
<li id="s"><a href="/s.asp" title="Scripts serveurs">Scripts serveurs</a></li>
<li id="d"><a href="/d.asp" title="Tutoriels dot net">Tutoriels dot net</a></li>
<li id="m"><a href="/m.asp" title="Tutoriels multimédias">Tutoriels multimédias</a></li>
<li id="w"><a href="/w.asp" title="Manuel de création de site">Manuel de création de site</a></li>
</ul>
</div>

Nous avons sept liens, chacun étant assigné un id pour correspondre au contenu correspondant : par exemple, l'id 'h' correspond à la leçon HTML, et ainsi de suite. Ces liens sont encapsulés dans un élément de liste nommé 'menu', l'id 'menu' indiquant la fonction de cette liste - une liste de menu, tandis que le div plus externe nommé 'navfirst' est utilisé pour identifier cette section dans la page, la différenciant des éléments tels que le contenu principal (maincontent), la barre latérale (sidebar) et le pied de page (footer).

Les éléments div et ul fournissent une structure réelle, indiquant la fonction du contenu (barre de navigation) et sa position dans le document (emplacement de l'en-tête de page). En revanche, la mise en page traditionnelle en tableau ne peut fournir aucune information sémantique sur les données et consomme facilement trois fois plus de bande passante.

Veuillez noter que ces balises ne contiennent pas de balise img, donc elles ne sont pas impliquées dans des propriétés telles que width, height, background ou border, etc. De plus, elles ne utilisent pas de cellules de tableau et ne sont pas impliquées dans une série de propriétés associées. Elles sont très propres et petites, tout en fournissant toutes les informations nécessaires pour les comprendre.

En utilisant CSS, ces balises fournissent aux visiteurs du site une mise en page fiable et rapide à charger. Elles offrent également la possibilité de créer une apparence plus flexible et variée pour les visiteurs. De plus, sans CSS, nos balises bien structurées peuvent toujours fournir tous les contenus sans confusion.

Les lecteurs attentifs ont peut-être remarqué que le texte contenu dans l'élément 'a' n'est pas affiché par le navigateur, ce qui est dû à la parfaite combinaison de balisage structuré et de CSS, qui nous permet de définir un mécanisme déclencheur en quelques règles CSS. Lorsque l'utilisateur utilise un navigateur graphique, il voit des boutons de navigation jolis, et lorsqu'il utilise un lecteur de texte pur, il peut toujours obtenir tout le texte. De cette manière, le contenu est le même pour tous les utilisateurs.

Et, étant donné que les balises ne contiennent pas d'images et de cellules de tableau, ce composant de navigation peut être appelé par n'importe quelle page du site sans changer la structure, tout en lui conférant des effets visuels différents. En résumé, en modulant le code, nous avons amélioré la réutilisabilité du code.