HTML sémantique : bonnes pratiques pour 2019
Publié: 2019-08-31Le HTML sémantique est plus important que jamais, d'autant plus que Google modifie constamment les algorithmes de classement des pages. Les premières places dans chaque requête deviennent de plus en plus compétitives. Vous avez besoin d'une arme secrète, et le HTML sémantique est une bonne arme à avoir dans votre arsenal. Vous pouvez utiliser du code sémantique sur vos sites Web, mais plus vous pouvez insérer de contenu important, mieux les moteurs de recherche peuvent explorer votre site et savoir ce que vous proposez aux visiteurs potentiels.
Qu'est-ce que le HTML sémantique ?
En un mot, le HTML sémantique est du HTML que les humains peuvent lire et comprendre. Tout humain, pas seulement les codeurs et les développeurs, et si les humains peuvent le lire plus facilement, les robots le peuvent aussi. Si les robots peuvent lire la structure de votre site plus facilement, ils peuvent alors prendre une décision plus éclairée quant à la capacité de votre site à répondre à diverses requêtes de recherche.
En gros, vous dites aux robots des moteurs de recherche « ceci est un article de blog » ou « ceci est un menu de navigation » ou
Mais comment fait-il cela ? Eh bien, il utilise une multitude de balises HTML5 spéciales qui sont très spécifiques. Examinons quelques exemples, et vous pourrez voir par vous-même.
Formatage de texte
Le formatage de texte est le HTML sémantique le plus courant, et vous le voyez tous les jours. Auparavant, des lettres simples étaient utilisées pour indiquer la mise en forme, représentant soit gras , italique , souligné , etc.
<p>This is <b>bold text</b></p> <p>While <i>this is italics</i>, and this is <u>underlined</u>.</p>
Avec le HTML sémantique, vous utilisez du texte fort à gras et montrez sa forte importance ou em pour mettre en italique (ou souligner) le texte. Fait intéressant, U est toujours utilisé pour souligner le texte ; cependant, le MDN suggère de le styliser via CSS avec une décoration de texte : soulignement ; pour le différencier.
<p>This is <strong>bold text</strong>, while <em>this is italics</em>.</p> <p>This would be <u style=text-decoration: #222000 wavy underline;">underlined</u>.</p>
Nous aimons aussi del à montrer barré texte supprimé.
<p>We are also fond of <em>del</em> to show <del>strikethrough</del> deleted text.</p>
Et nous avons pensé que nous terminerions notre regard sur le formatage sémantique du texte HTML par un point culminant. Littéralement. Si vous utilisez une marque autour du texte, vous mettrez en surbrillance tout ce que vous incluez.
<p>Make sure that you remember <strong>this term for your test</strong>. <p>But you should remember <mark>this information about how to use it in context</mark>.</p> <p>If you do that, you will be fine.</p>
Le MDN dit que cela ne doit pas être utilisé de la même manière que vous utilisez strong . Vous utilisez fort pour indiquer quelque chose d'important dans le texte, et vous utilisez la marque pour mettre en évidence quelque chose qui est pertinent pour la compréhension de celui-ci.
Sections, en-têtes et menus
Peut-être que la meilleure façon de commencer est d'utiliser des en-têtes et des pieds de page. Vous savez, les parties préférées de tout le monde des sites Web à créer et à gérer. Avec le HTML traditionnel, vous pourriez avoir un en-tête codé comme ceci :
<div>
<h1>Page Title Goes here</h1>
<p>Tagline!</p>
<div>
<ul>
<li><a href="example.com">Home Page Link</a></li>
<li><a href="example.com">Blog Page Link</a></li>
<li><a href="example.com">Podcast Page Link</a></li>
</ul>
</div>
</div>
En regardant ce code, vous pouvez voir ce que tout est. Cependant, ce n'est que si vous savez ce que vous regardez. Vous avez quelques divs (conteneurs) imbriqués qui séparent le titre, le slogan et le menu (incroyablement basique). Il n'y a rien de mal avec cette configuration, mais il n'y a certainement rien de vraiment correct non plus. Si vous allez plus loin, vous pouvez utiliser l'identifiant CSS et le balisage de classe pour que les choses restent un peu plus lisibles.
<div class="header" id="hero-section">
<h1 class="page-title">Page Title Goes here</h1>
<p>Tagline!</p>
<div class="header-menu">
<ul>
<li><a href="example.com">Home Page Link</a></li>
<li><a href="example.com">Blog Page Link</a></li>
<li><a href="example.com">Podcast Page Link</a></li>
</ul>
</div>
</div>
Avec le HTML sémantique, les choses ont l'air beaucoup plus propres et plus faciles à lire, vous n'avez pas à vous fier aux divs, et les classes et les identifiants que vous choisissez peuvent être uniquement pour le style.
<header>
<h1>Page Title Goes Here</h1>
<p>Tagline!</p>
<nav>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
</nav>
</header>
N'est-ce pas beaucoup plus facile à lire et à dire ce qui se passe ? Vous avez une balise d'en- tête qui vous permet de savoir qu'il s'agit de l'en-tête de la page et une balise de navigation qui indique un menu de navigation. (C'est même assez intelligent pour ne pas avoir besoin de style supplémentaire pour répertorier les entrées horizontalement.)
Techniquement, vous pouvez également utiliser le code suivant, si vous voulez vous assurer que vos styles s'appliquent correctement, ainsi que d'avoir un moyen de créer un lien vers une section particulière du site Web. Dans ce cas, la balise section fonctionne de la même manière que la balise div dans les exemples précédents. Sauf, bien sûr, qu'il est lisible et a du sens aux yeux de l'homme.
<section id="hero-section">
<header>
<h1>Page Title Goes Here</h1>
<p>Tagline!</p>
<nav>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
</nav>
</header>
</section>
De plus, notez l'utilisation de id="hero-section" , qui est une étape facultative de l'étape facultative, mais vous pouvez styliser la section en tant que sélecteur CSS seul.
Plats à emporter
- Utilisez la section aux endroits où vous pourriez être tenté d'utiliser un div externe.
- Utilisez peut utiliser l'en- tête pour indiquer quelle partie de la page est votre en-tête. Vous pouvez également l'utiliser dans un article ou une publication pour indiquer l'en-tête de cette publication, qui est distinct du site Web lui-même.
- Utilisez nav lorsque vous définissez un menu de navigation principal pour le site. Nav n'est pas un moyen pour les moteurs de recherche de trouver des liens, mais de trouver le principal moyen par lequel les utilisateurs peuvent naviguer sur votre site. Toute collection de liens (tels que les fils d'Ariane, etc.) peut également être inclus dans la navigation
Bas de page
Il n'y a pas grand-chose à dire sur le pied de page, mais nous devons le mentionner. À bien des égards, c'est un analogue direct à l'en-tête. Un pied de page traditionnel de base pourrait ressembler à ceci :
<div class="site-footer>
<p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
<a href="example.com/contact">Contact Us!</a>
<img src="/logo.png">
</div>
Alors qu'un pied de page sémantique peut ressembler à ceci :
<footer>
<p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
<a href="example.com/contact">Contact Us!</a>
<img src="/logo.png">
</footer>
Certes, il n'y a pas beaucoup de différence ici dans la configuration de base, mais les robots qui voient votre site apprécieront la clarification. Gardez également à l'esprit que vous pouvez utiliser le pied de page pour les pieds de page, de publication ou de site.
Principal, articles et apartés
Un autre composant principal du HTML sémantique est la balise article . A côté de ça, le côté aussi. Ces deux éléments vous permettent de structurer le contenu réel de votre site afin que les moteurs de recherche sachent quel est le texte principal, ce qui leur permet de se concentrer sur le problème que vous résolvez et le sujet sur lequel vous vous concentrez.
Normalement, un article ou une page de blog est un simple document HTML, mais l'en-tête, le pied de page, le contenu, les barres latérales, les encarts, etc. peuvent être regroupés.
<body>
<div class="post-header>
<h1>Article title</h1>
</div>
<div class="post-content>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div class="article-aside">
<p>Text block</p>
</div>
</div>
<div class="post-footer">
<img src="/subscribe.png">
</div>
</body>
Maintenant, ce n'est pas du joli code, mais ça marche. Cependant, ce n'est pas joli, et cela nécessite une quantité assez décente de CSS pour être presque lisible lors du rendu. En utilisant main , article et apart , vous pouvez facilement structurer la page pour qu'elle soit plus lisible.
<main>
<article>
<header>
<h1>Article title</h1>
</header>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<aside>
<p>Text block</p>
</aside>
<footer>
<img src="/subscribe.png">
</footer>
</article>
</main>
Notez cependant que vous ne pouvez indiquer le contenu principal de la page qu'une seule fois. Cela signifie que vous ne pouvez utiliser qu'une seule page principale par page. Vous pouvez imbriquer plusieurs articles sous un seul article principal pour indiquer une table des matières ou un répertoire de contenu autonome (vous pouvez même utiliser plusieurs balises H1 de cette façon pour montrer aux moteurs de recherche que ces articles sont autonomes.
Plats à emporter
- Utilisez une seule balise principale par page
- Plusieurs balises d' article peuvent être utilisées par page pour identifier un contenu distinct et autonome (y compris plusieurs H1 par page)
- A côté peut être utilisé comme barre latérale ou insérer dans un article ou une page
Autres éléments moins utilisés
Certes, les éléments et les balises dont nous discutons ci-dessus sont les parties les plus utilisées du HTML sémantique. Après tout, presque tous les sites Web sur Internet en contiennent une combinaison, tandis que les autres balises sémantiques prises en charge sont plus spécifiques et limitées. Ils ne sont cependant pas moins utiles lorsqu'ils remplissent leur fonction, et ils aident énormément à l'interaction et à l'indexation de la recherche.
Détails et résumé
Les détails et les éléments de résumé créent une couche de contenu extensible qui peut être masquée aux utilisateurs à moins qu'ils ne l'activent spécifiquement (comme un module d'accordéon dans Divi ou d'autres constructeurs de pages).
<details>
<summary>Headline that will be shown and clicked on</summary>
<p>Content that will be hidden</p>
<a href="example.com">Link that will be hidden</a>
</details>
Tous les enfants du résumé seront masqués et extensibles, et vous pouvez ajouter du texte supplémentaire en fermant l'élément de détails .
Figure et légende
Ceux-ci sont assez explicites. La figure est une sorte d'aide visuelle dans votre message. Photo, graphique, une vidéo YouTube intégrée, peut-être. La figcaption , alors, est la légende que vous ajoutez pour expliquer l'utilisation de la figure ci-dessus. Bien qu'ils soient de nature technique pour l'utilisation de la sémantique, vous pouvez l'utiliser pour tout contenu que vous souhaitez indexer spécifiquement comme aide dans la publication ou la page principale.
<figure>
<img src="/chart.jpg">
<figcaption>Explanation of this chart in short text</figcaption>
</figure>
Ces balises sont un excellent moyen d'obtenir un extrait en vedette sur Google, par exemple, lorsque vous indiquez spécifiquement la solution ou l'explication d'un problème. Nous vous conseillons de les utiliser car cela réduit non seulement le code que vous utilisez pour ajouter une légende et le style, mais il conserve également la figure et la légende comme un seul élément de la page, et non comme des éléments séparés.
Temps
L'heure est l'une des balises les plus rarement utilisées, mais lorsque vous avez un événement ou une occasion spéciale où vous avez spécifiquement besoin que le moteur de recherche sache qu'une heure ou une date est impliquée, utilisez-la au lieu de simplement mettre en gras ou d'accentuer le texte.
<article> <h1>Title</h1> <p>The event will begin on <time datetime="2019-12-25">December 25th</time> and last for <time datetime="PT12H30M0S">12 and a half hours</time>.</p> </article>
L'utilisation de datetime avec l'élément time donne à votre développement une bien meilleure adhérence à l'heure, ce qui vous permettra ensuite de vous intégrer aux calendriers et à diverses autres API. Vous pourrez envoyer des rappels depuis votre site, et les gens reviendront plus souvent.
Conclusion
Bien qu'il ne soit pas mal d'utiliser du HTML non sémantique, si vous prenez l'habitude pendant que vous travaillez, vous constaterez que votre classement dans les moteurs de recherche s'améliorera. C'est important, mais ce qui pourrait être encore plus important, c'est que vous gagnerez du temps dans la façon dont vous structurez et stylisez votre site, tout en évitant de nombreux maux de tête et dettes techniques pour les personnes qui vous suivent sur le projet. .
Quelles bonnes pratiques pour le HTML sémantique suivez-vous ?
Article présenté en image par whiteMocca / shutterstock.com