Que signifie "sémantiquement correct"?
Je l'ai souvent vu en css talk. Que signifie sémantiquement correct?
Étiqueter correctement
Cela signifie que vous appelez quelque chose ce que c'est réellement. L'exemple classique est que si quelque chose est une table, il devrait contenir des lignes et des colonnes de données. Utiliser cela comme mise en page est sémantiquement incorrect - vous dites "ceci est un tableau" alors que ce n'est pas le cas.
Autre exemple: une liste (<ul> ou <ol>) devrait généralement être utilisée pour regrouper des éléments similaires (<li>). Vous pourriez utilisez une div pour le groupe et un <span> pour chaque élément, et donnez à chaque span le soin de figurer sur une ligne distincte avec un point, ce qui pourrait vous donner l’impression que vous souhaitez. Mais "ceci est une liste" donne plus d'informations.
Convient à l'idéal derrière HTML
HTML signifie "HyperText Markup Language"; son but est de baliser ou d'étiqueter votre contenu. Plus vous le marquez avec précision, mieux c'est. De nouveaux éléments sont introduits dans HTML5 pour étiqueter plus précisément les parties de page Web courantes, telles que les en-têtes et les pieds de page.
Le rend plus utile
Tout cet étiquetage sémantique aide les machines à analyser votre contenu, ce qui aide les utilisateurs. Par exemple:
- Savoir ce que vos éléments sont permet aux navigateurs d’utiliser des valeurs par défaut sensibles pour leur apparence et leur comportement . Cela signifie que vous avez moins de travail de personnalisation à effectuer et que vous avez plus de chances d'obtenir des résultats cohérents dans différents navigateurs.
- Les navigateurs peuvent appliquer correctement votre CSS (Cascading Style Sheets), en décrivant l’apparence de chaque type de contenu. Vous pouvez proposer des styles alternatifs ou les utilisateurs peuvent utiliser leurs propres styles. tant que vous avez étiqueté vos éléments sémantiquement, des règles telles que "Je veux que les titres soient énormes" seront utilisables.
- Les lecteurs d'écran pour les aveugles peuvent les aider à remplir un formulaire plus facilement si les sections logiques sont décomposées en
fieldsetsavec unlegendpour chaque élément. Un utilisateur aveugle peut entendre le textelegendet décider, "oh, je peux sauter cette section", comme le ferait un utilisateur voyant en le lisant. - Les téléphones mobiles peuvent passer à un clavier numérique lorsqu'ils voient une entrée de formulaire de
type="tel"(pour les numéros de téléphone).
La sémantique signifie fondamentalement "l'étude du sens".
Habituellement, lorsque les gens parlent du code sémantiquement correct, ils font référence à un code décrivant de manière précise quelque chose.
Dans (x) HTML, certaines balises donnent un sens au contenu qu'elles contiennent. Par exemple:
Une balise H1 décrit les données qu’elle contient sous la forme d’un en-tête de niveau 1. Une balise H2 décrit les données qu’elle contient sous la forme d’un en-tête de niveau 2. La signification implicite derrière cela est que chaque H2 sous un H1 est en quelque sorte lié (c'est-à-dire un titre et un sous-titre).
Lorsque vous codez de manière sémantique, vous donnez une signification aux données que vous décrivez.
Considérez les 2 exemples suivants de SV sémantique non sémantique:
<h1>Heading</h1>
<h2>Subheading</h2>
VS un équivalent non sémantique:
<p><strong>Heading</strong></p>
<p><em>Subheading</em></p>
Parfois, dans un débat, vous pouvez entendre des personnes dire «Vous ne faites que parler de la sémantique maintenant», ce qui fait généralement référence à l'acte de dire le même sens que l'autre personne, mais en utilisant des mots différents.
"Une utilisation sémantiquement correcte des éléments signifie que vous les utilisez pour ce pour quoi ils sont censés être utilisés. Cela signifie que vous utilisez des tableaux pour les données tabulaires mais pas pour la présentation, cela signifie que vous utilisez des listes pour lister les em pour donner une emphase au texte, etc. "
De: http://www.codingforums.com/archive/index.php/t-53165.html
Les éléments HTML ont un sens. "Sémantiquement correct" signifie que vos éléments signifient ce qu'ils sont supposés faire.
Par exemple, vos listes de définitions sont représentées par des listes <dl> dans le code, vos abréviations sont <abbr>s, etc.
Cela signifie que les éléments HTML sont utilisés dans le bon contexte (contrairement aux tableaux utilisés à des fins de conception), les classes CSS sont nommées de manière compréhensible pour l'homme et le document lui-même a une structure qui peut être traitée par des clients autres que les navigateurs, comme screen -lecteurs, analyseurs automatiques essayant d'extraire l'information et sa structure du document, etc.
Par exemple, vous utilisez des listes pour créer des menus. De cette façon, un lecteur d'écran pour personnes handicapées saura que ces éléments de la liste font partie du même niveau de menu; il les lira donc en séquence pour qu'une personne puisse faire son choix.
Je ne l'ai jamais entendu dans un contexte purement CSS, mais lorsque l'on parle de CSS et de HTML, cela signifie que vous devez utiliser les balises appropriées (par exemple, éviter d'utiliser la balise table pour des données non tabulaires), en fournissant des valeurs appropriées pour la classe. et id qui identifient les données contenues (et en utilisant microformats selon le cas), etc.
Il s’agit de faire en sorte que vos données puissent être comprises par les humains (tout est affiché correctement) et les ordinateurs (tout est correctement identifié et annoté).