Regard sur la sémantique HTML5

Si vous planifiez soigneusement la structure de vos documents HTML, vous pouvez aidez les ordinateurs à comprendre le sens de votre contenu. Une syntaxe correcte est certes importante, mais elle fournit essentiellement aux analyseurs syntaxiques, aux moteurs de recherche et aux technologies d'assistance un ensemble de données sans signification..

Si vous améliorez votre flux de travail frontal en prêtant attention à la sémantique, vous pouvez créer un contenu de qualité supérieure qui attire plus de visiteurs. La sémantique est la étude du sens, dans un contexte plus large c'est une branche de la logique et de la linguistique.

Dans le monde du développement Web, on parle de contenu sémantique lorsque les ordinateurs comprennent la structure d’un document et rôles des éléments à l'intérieur de celui-ci. Si nous voulons créer une sémantique appropriée, nous devons profondément comprendre la structure de notre contenu et la capacités des technologies frontend.

Alors, quels sont les avantages tangibles? Une sémantique correcte signifie un contenu plus consultable qui mène à un meilleur classement dans les moteurs de recherche. Nous augmentons également l’accessibilité, car les technologies d’aide telles que les lecteurs d'écran peuvent mieux interpréter la signification de notre contenu.

Il existe de nombreuses techniques de développement front-end permettant aux développeurs d’obtenir une structure de page sémantique. Cet article vous fournira une brève introduction aux balises HTML sémantique et au concept de la structure du document..

Balises HTML sémantiques et non sémantiques

Le concept de sémantique n'est pas aussi nouveau qu'il y paraît, il existait bien avant l'ère du HTML5. Le terme de web sémantique a été inventé dès 2001 par Sir Tim Berners-Lee. Sous “Web sémantique” il voulait dire un réseau de données pouvant être traitées par des machines.

Cela signifie principalement que les éléments HTML distincts doivent avoir leurs rôles structurels distincts. Selon la définition du W3C “un élément sémantique décrit clairement sa signification à la fois pour le navigateur et le développeur”.

Éléments sémantiques avant HTML5

Les éléments sémantiques existaient également avant HTML5, mais dans la plupart des cas, les développeurs ne savaient pas que certaines des étiquettes qu'ils utilisaient étaient en réalité sémantiques. Il suffit de penser à la

ou la Mots clés.

Leurs rôles sont clairs pour nous et pour l'agent utilisateur:

contient simplement une forme, tout comme contient une image. Personne ne placera jamais une table ou un titre à l'intérieur et tag (ou du moins espérons-le).

élément et ses balises associées, telles que rangées de tableau, cellules de tableau, etc., sont également des balises sémantiques antérieures à HTML5; manière sémantique. Cela a conduit à un site Web qui sacrifie la structure logique pour la mise en page.

Commandé et listes non ordonnées, paragraphes, balises de titre h1-h6 sont tous des éléments sémantiques qui ont précédé HTML5.

Éléments non sémantiques

Les éléments non sémantiques n'ont pas de signification particulière, les relations hiérarchiques entre eux sont simplement illusoires. Les exemples les plus utilisés de balises HTML non sémantiques sont les suivants:

et le Mots clés.

Si votre site attrape l’horrible maladie de divitis, tu sais de quoi je parle. Oui. Les divs ne sont pas nécessairement faux, mais divitis doit être combattu si nous voulons écrire du code HTML maintenable, modulaire et significatif.

Smashing Magazine explique admirablement quel est le véritable problème de l’utilisation excessive et déraisonnable du

étiquette. L'essentiel est que si nous inclure un div à l'intérieur d'un div, il semble que la div externe serait l'élément parent de l'intérieur, tandis que en réalité ce n'est pas le cas.

Il n'y a pas de relation entre les deux, comme dans le cas de la balise qui fonctionne de la même manière, juste au niveau en ligne.

Ne paniquez pas si vous vous sentez toujours attaché à

-le sable -s si, comme vous ne devez pas les abandonner complètement. Ils restent le meilleur choix pour grouper du contenu uniquement à des fins de style et dans d'autres cas de dernier recours..

Sémantique textuelle en HTML5

HTML5 a introduit de nombreux nouveaux éléments sémantiques permettant une organisation facile du contenu. Ils vous aident non seulement à organiser le contenu au niveau de l'ensemble du document (voir les détails dans la section suivante), mais aussi à l'intérieur de blocs de texte, comme des balises inline.

Les balises sémantiques de niveau texte les plus populaires sont probablement et , mais ils existaient aussi avant HTML5. Parmi les nouveaux éléments sémantiques en ligne, on trouve par exemple le , tag pour heures lisibles par l'homme, et pour texte surligné.

Voir cette liste pour tous les éléments sémantiques de niveau texte actuellement utilisés.

Structure du document en HTML5

Le contour du document est la structure d'un document HTML. Il montre comment les éléments sont liés les uns aux autres. Le plan du document a été généré uniquement par des éléments de mappage, tels que des en-têtes, des titres de tableaux, des titres de formulaires et autres dans les versions antérieures de HTML, telles que HTML4.01 et XHTML..

En HTML5, l'algorithme de traçage a été amélioré par de nouveaux éléments de sectionnement, à savoir:

pour sections regroupées autour d'un thème spécifique
pour compositions complètes ou autonomes comme un article de blog ou un widget
pour blocs de navigation
pour contenu complémentaire tel que les barres latérales.

Il y a un cinquième élément de sectionnement dans HTML5, mais ce n'est pas nouveau, c'est le étiquette. le

et Les balises sont également nouvelles, mais elles ne génèrent pas de nouvelles sections dans un document, elles divisent le contenu à l'intérieur des sections. Cela signifie que chaque élément de sectionnement (corps, article, section, navigation et aparté) peut avoir ses propres en-tête et pied de page.

Astuces pour le contenu sémantiquement structuré

Si nous voulons créer un plan de document bien structuré, nous devons prêter attention aux règles suivantes:

1. L'élément de sectionnement le plus externe est toujours le étiquette.

2. Les sections en HTML5 peuvent être imbriquées.

3. Chaque section a sa propre hiérarchie de titres. Chacune d’elles (même la partie la plus intérieure imbriquée) peut avoir une h1 étiquette.

4. Bien que le contour du document soit principalement défini par les 5 éléments de sectionnement, il doit également comporter des en-têtes appropriés pour chaque section..

5. C’est toujours le premier élément d’en-tête (qu’il s’agisse de h1 ou d’une balise d’en-tête de rang inférieur) qui définit l’en-tête de la section donnée. Les balises de titre suivantes dans la même section doivent être relatives à cela. (Si le premier en-tête est un h3 dans un élément de section, ne mettez pas un h3 après cela.)

6. Les sections définies par le

, et le les balises n'appartiennent pas au contour principal du document HTML, elles ne sont généralement pas restituées initialement par les technologies d'assistance.

7. Chaque section (corps, section, article, à part, nav) peut avoir son propre

et les balises, qui définissent l'en-tête (logo, nom de l'auteur, dates, méta-informations, etc.) et le pied de page (copyright, notes, liens, etc.) de cette section.

Exemple: un contour sémantique

Voyons un exemple de contour de document sémantique pour voir plus clairement comment cela fonctionne. Notre exemple de code donnera la structure de document suivante:

Et voici le code avec le bon découpage sémantique:

   Bienvenue sur notre site web!
 Voici notre logo et slogan.
 
   Choisissez votre intérêt
 
  Menu 1
 Menu 2
 Menu 3
 
 
   Titre de l'article
 Sous-titre de l'article
 
  Première partie logique (par exemple "Théorie")
 Paragraphe 1 de la première section
 Quelques autres sous-titres dans la première section
 Paragraphe 2 de la première section
 
  Deuxième partie logique (par exemple, "pratique")
 Paragraphe 1 de la deuxième section
 Paragraphe 2 de la deuxième section
 
  Auteur Bio
 Paragraphe dans le pied de page de l'article
 
 
  Apprenez à mieux nous connaître
  Messages populaires
 … 
 
  Les partenaires
 … 
 
  Témoignages
 … 
 
 
   droits d'auteur
 Liens de médias sociaux

Si vous regardez l'extrait de code ci-dessus, vous verrez que les en-têtes et les pieds de page sont facultatifs. Nous pouvons choisir librement de les utiliser ou non. fortement recommandé de toujours inclure un titre pour chaque section, sinon la section sera “Sans titre” dans le plan du document.

Heureusement, il existe de nombreux excellents outils sur Internet qui nous permettent de vérifier le plan du document. Cette fois, nous allons utiliser l'outil Outliner de html5.org..

Si nous insérons notre extrait de code dans le formulaire fourni par l’outline, puis cliquez sur le bouton “Décrivez cette!” bouton, nous verrons le résultat suivant:

C'est le aperçu du document de notre exemple de code, C'est ainsi que les moteurs de recherche le voient et que les lecteurs d'écran le lisent à leurs utilisateurs malvoyants. C'est sémantique, bien structuré, et il n'y a pas de méchant “Sans titre” sections en elle.

Si vous voulez voir à quoi ressemble une section sans titre dans l’outliner, supprimez quelques balises de titre dans le code de l’exemple..

Autres aspects de la sémantique Web

Les balises HTML sémantiques et les contours de document ne constituent qu'une petite partie de la sémantique Web. Le contenu d'une page Web peut être rendu encore plus significatif à l'aide du protocole d'accessibilité WAI-ARIA et de données structurées pouvant être utilisées avec le protocole RDFa, les microdonnées ou le balisage JSON-LD..

Regard sur l'animation SVG (Scalable Vector Graphics)

Un coup d'oeil dans Scalable Vector Graphics (SVG)

Un aperçu des plugins WordPress Premium