hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Un regard sur la sémantique HTML5 appropriée

Si vous planifiez soigneusement la structure de vos documents HTML, vous pouvez aider les ordinateurs à comprendre la signification de votre contenu . Une syntaxe correcte est certes importante, mais elle ne fournit essentiellement que des parseurs, des moteurs de recherche et des technologies d'assistance avec un tas de données sans signification.

Si vous améliorez votre flux de travail frontal en faisant attention à la sémantique, vous pouvez créer un contenu de qualité supérieure qui attire plus de visiteurs. La sémantique est l' é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, nous parlons de contenu sémantique lorsque les ordinateurs comprennent la structure d'un document et les rôles des éléments à l'intérieur de celui-ci . Si nous voulons créer une sémantique correcte, nous devons comprendre en profondeur la structure de notre contenu et les capacités des technologies frontend.

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

Il existe de nombreuses techniques de développement frontales différentes qui permettent aux développeurs d'obtenir une structure de page sémantique. Ce post vous fournira une brève introduction aux balises HTML sémantiques et au concept du contour du document.

Balises HTML sémantiques et non sémantiques

Le concept de sémantique n'est pas aussi nouveau qu'il 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 qui peut être traité par des machines.

Cela signifie principalement que les éléments HTML distincts doivent avoir leurs rôles structurels distinctifs . Selon la définition de 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 déjà avant HTML5, mais dans la plupart des cas, les développeurs n'étaient pas conscients que certaines des balises qu'ils utilisaient étaient réellement sémantiques . Pensez juste à la

ou la Mots clés.

Leurs rôles sont clairs pour nous et 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).

le

element, et ses balises associées telles que les lignes de table, les cellules de tableau, etc. sont également des balises sémantiques qui existaient avant HTML5, mais en raison de la disposition basée sur les tables qui a été utilisée pendant de nombreuses années, la plupart des développeurs ne les utilisaient pas. manière sémantique. Cela a conduit à un web qui a sacrifié la structure logique pour la mise en page .

Les listes ordonnées et non ordonnées, les paragraphes, les balises d'en-tête h1-h6 sont tous des éléments sémantiques précédant 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 largement utilisés de balises HTML non sémantiques sont les

et le Mots clés.

Si votre site a déjà attrapé l'horrible maladie de la divinité, vous savez 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 magnifiquement quel est le vrai problème avec l'utilisation excessive et déraisonnable de la
marque. L'essentiel est que si nous incluons une div à l'intérieur d'une div, il semble que la div extérieure soit l'élément parent de l'interne, alors qu'en réalité ce n'est pas le cas .

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

Ne paniquez pas si vous vous sentez encore attaché à

-s et -s cependant, car vous n'avez pas à les abandonner complètement . Ils sont toujours le meilleur choix pour regrouper le contenu uniquement à des fins stylistiques et dans d'autres cas de dernier recours.

Sémantique du texte en HTML5

HTML5 a introduit de nombreux nouveaux éléments sémantiques qui facilitent l'organisation du contenu. Ils vous aident non seulement à organiser le contenu au niveau du document entier (voir les détails dans la section suivante), mais aussi à l'intérieur des blocs de texte, en tant que balises en ligne.

Probablement les étiquettes sémantiques au niveau du texte les plus populaires sont et , mais ils existaient aussi avant HTML5. Parmi les nouveaux éléments sémantiques inline on peut trouver par exemple le , tag pour les dates-heures lisibles par l'homme, et pour le texte en surbrillance .

Voir cette liste pour tous les éléments sémantiques au niveau du texte qui sont actuellement utilisés.

Document Outline en HTML5

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

En HTML5, l'algorithme de décodage a été amélioré par de nouveaux éléments de sectionnement, à savoir:

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

Il y a un cinquième élément de section en HTML5, mais ce n'est pas nouveau, c'est le marque. 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 section (corps, article, section, nav et de côté) peut avoir son propre en-tête et pied de page .

Conseils pour le contenu structuré sémantiquement

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 marque.

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

3. Chaque section a sa propre hiérarchie de titres. Chacun d'entre eux (même la section imbriquée la plus interne) peut avoir une étiquette h1 .

4. Bien que l'esquisse du document soit principalement définie par les 5 éléments de sectionnement, elle nécessite également des en-têtes appropriés pour chaque section.

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

6. Les sections définies par le

, et le Les tags n'appartiennent pas au contour principal du document HTML, ils ne sont généralement pas rendus initialement par les technologies d'assistance.

7. Chaque section (corps, section, article, de côté, nav) peut avoir leur propre

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

Exemple: un aperçu sémantique

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

Et voici le code avec sectionnement sémantique approprié:

Bienvenue sur notre site!

Voici notre logo et notre slogan.

Titre de l'article

Sous-titre de l'article

Première partie logique (par exemple "Théorie")

Paragraphe 1 de la première section

Certains 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 d'article

  • 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 si nous voulons les utiliser ou non, mais il est fortement recommandé d'inclure un en-tête pour chaque section . section sera "Sans titre" dans le document.

Heureusement, il existe de nombreux outils sur Internet qui nous permettent de vérifier les grandes lignes du document, cette fois nous utiliserons l'outil Outliner de html5.org.

Si nous insérons notre extrait de code dans le formulaire fourni par l'outliner, et que nous cliquons sur le bouton "Outline this!", Nous verrons le résultat suivant:

Ceci est l' aperçu du document de notre exemple de code, c'est ainsi que les moteurs de recherche le voient, et les lecteurs d'écran le lisent à leurs utilisateurs malvoyants. C'est sémantique, bien structuré, et il n'y a pas de mauvaises sections "Untitled" dedans.

Si vous voulez voir à quoi ressemble une section Untitled dans l'Outliner, supprimez simplement les balises d'en-tête dans l'exemple de code.

Autres aspects de la sémantique Web

Les balises HTML sémantiques et les contours de documents ne représentent 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.

10 La technologie futuriste qui peut devenir réalité très bientôt

10 La technologie futuriste qui peut devenir réalité très bientôt

La technologie ne s'arrête jamais : elle change, s'adapte et progresse toujours, et souvent des choses qui semblaient improbables (voire impossibles) une année peuvent rapidement devenir possibles seulement quelques années après.Les ordinateurs portables ne semblaient être une idée fantaisiste que récemment, mais maintenant ils sont à peu près la prochaine grande chose à devenir mainstream. L'ém

(Conseils techniques et de conception)

Parcourir les cadres WordPress Open Source sur IncludeWP

Parcourir les cadres WordPress Open Source sur IncludeWP

Des concepteurs de thèmes WordPress aux développeurs de plugins, ils bénéficient tous de la construction de frameworks . Cela économise du temps pour travailler avec le code WP existant et vous n'avez pas besoin de vous soucier des bogues ou des failles de sécurité.Au cours de la dernière décennie, l'écosystème WordPress a beaucoup évolué. Il existe d

(Conseils techniques et de conception)