Pourquoi choisir des balises sémantiques HTML5 plutôt que des balises div ?

Question

Pourquoi utiliser des balises sémantiques HTML5 telles que headers, section, nav au lieu d'utiliser simplement div et de le définir sur le css préféré ?

J'ai créé une page et utilisé ces balises, mais elles ne sont pas différentes de div. Quel est leur objectif principal ?

Fournissent-ils simplement le nom d'étiquette approprié lorsqu'ils sont utilisés, ou font-ils autre chose ?

Veuillez expliquer. J'ai consulté de nombreux sites Web mais je n'ai pas trouvé ces bases.

Answer 1

Il y a un bel article sur la sémantique HTML5 sur HTML5Doctor.

La sémantique a toujours fait partie du HTML, sous une forme ou une autre. Cela vous aide à comprendre ce qui se passe sur la page.

Auparavant, quand presque tout était utilisé <div>, nous obtenions encore la sémantique en lui donnant un nom de classe « sémantique » ou un nom d'identification.

Ces balises aident à structurer et à comprendre correctement la mise en page.

Si vous le faites :

<div class="nav"></div>

et

<nav></nav>

ou

<div class="sidebar"></div>

et

<aside></aside>

Il n'y a aucun problème avec l'un ou l'autre, mais ce dernier offre une meilleure lisibilité pour vous et pour les robots d'exploration, les lecteurs, etc.

Answer 2

Le dictionnaire Oxford déclare ce qui suit :

Comme leur nom l'indique, ces balises sont conçues pour rehausser le sens de vos pages web. Une bonne sémantique joue un rôle important dans le traitement automatique des documents. Ce traitement automatique se produit plus souvent que vous ne le pensez : chaque site Web classé par les moteurs de recherche est dérivé du traitement automatique de tous les sites Web.

Si vous visitez une page Web (bien conçue), en tant que lecteur humain, vous pouvez immédiatement (visuellement) distinguer tous les éléments de la page et, plus important encore, comprendre le contenu. En haut à gauche, vous pouvez voir le logo de l'entreprise, à côté de la navigation sur le site, il y a une barre de recherche et du texte sur l'entreprise, un lien vers les produits que vous pouvez acheter et une mention légale en bas.

Cependant, les machines sont stupides et ne peuvent pas faire ça : En regardant la même page que la vôtre, un robot d'exploration Web ne verra qu'une image, une série de balises d'ancrage, un nœud de texte, un champ de saisie et une image avec un lien. Il y a un autre nœud de texte en bas. Maintenant, comment sont-ils censés savoir quelle partie du document vous souhaitez constituer la navigation, l'article principal, ou une note de bas de page moins importante ? Ils peuvent deviner des indices sur des éléments spécifiques en analysant la structure de votre document à l'aide de critères communs. Par exemple, la

liste de liens internes est très probablement une sorte de navigation dans les pages, et le texte à la fin du document est un contenu nécessaire mais pas trop important pour les téléspectateurs quotidiens (avertissement légal).

Imaginez maintenant si un élément

normal était utilisé à la place de l'élément

- la machine sait immédiatement à quoi sert cet élément :

// 机器：好的，这个结构看起来可能是一个导航元素？
<div><ul><li><a href="internal_link">...</div>

// 机器：啊，一个导航元素！
<nav><ul><li><a>...</nav>

Maintenant, le texte à l'intérieur de la balise

- c'est évidemment l'information la plus importante de la page ! À gauche, ce nœud de texte, l'image et le nœud d'ancrage appartiennent tous au même groupe car ils sont tous regroupés dans la balise

, tandis qu'en bas il y a du texte dans l'élément

(ils ne savent toujours pas ce que signifie ce texte, mais maintenant ils peuvent en déduire qu'il s'agit d'une sorte de petits caractères).

Exemple :
En tant qu'utilisateur (lisant la page sans regarder le balisage réel), vous ne vous souciez pas de savoir si un élément est contenu dans une balise ou . Dans la plupart des navigateurs, les deux onglets s'afficheront de manière identique - sous forme de texte en italique - et tant qu'ils sont mis en surbrillance entre le texte environnant, ils remplissent leur fonction.

Cependant, il y a une grande différence d'un point de vue sémantique :
signifie italique - c'est juste une indication pour le navigateur de le restituer (en italique) et ne contient pas nécessairement d'informations sémantiques plus profondes.
signifie emphase - cela indique une information importante. Désormais, les navigateurs ne se limitent plus aux instructions en italique et peuvent les afficher en italique, en gras, souligné ou dans une couleur différente... Pour les malvoyants, les lecteurs d'écran peuvent amplifier leur voix - selon la méthode qui semble la meilleure dans une situation donnée. Parfait pour souligner ce message important.

Réflexions finales :
Le marquage sémantique n’est pas la fin. Il existe également des métadonnées, des ontologies, des langages de description de ressources, etc., qui aident à connecter les données entre différentes pages Web et peuvent même aider à créer de nouvelles connaissances !

Par exemple, Wikipédia fait un travail épouvantable en matière de présentation sémantique des données.

https://en.wikipedia.org/wiki/Barack_Obama
https://en.wikipedia.org/wiki/Donald_Trump
https://en.wikipedia.org/wiki/Joe_Biden

Ces trois sont tous des personnages qui ont été Président des États-Unis à un moment donné.

Les trois articles incluent une barre latérale qui affiche ces informations et vous pouvez les comparer (ouvrez les deux pages et basculez d'avant en arrière), mais ils ne sont pas décrits sémantiquement. Au lieu de cela, si Wikipédia utilise une ontologie pour décrire une personne : http://dbpedia.org/ontology/Person

<!-- President是Politician的子类，Politician是Person的子类 -->
<President> 
    <birthname>Barrack Hussein Obama II</birthname>
    <birthdate>1961-08-04</birthdate>
    <headOf>country::USA</headOf>
    <tenure>2009-01-20 – 2017-01-20</tenure>
</President>

Maintenant, vous (et la machine) pouvez comparer ces trois directement (sur une page générée dynamiquement !) et même créer de nouvelles connaissances, comme afficher une liste de tous les présidents américains - assez ennuyeux mais aussi sympa, comme les dirigeants mondiaux actuels. Combien y a-t-il des gens, combien y a-t-il de femmes dirigeantes du monde, qui sont les plus jeunes dirigeants, combien de types de dirigeants existe-t-il (président/empereur/reine/dictateur), qui a servi le plus longtemps, combien de personnes mesurent plus de 175 cm et ont yeux marrons, etc.

En conclusion, une bonne sémantique, c'est très cool (mais techniquement difficile à mettre en œuvre et à maintenir).