Sémantique HTML5 : nouveaux éléments pour remplacer div

La sémantique parfaite était et sera toujours la polaire dorée pour les développeurs Web. HTML5 a fait un long chemin pour devenir un "messie" qui donne de l'espoir pour un meilleur avenir à la technologie HTML. Ce langage a incontestablement évolué en dévoilant 30 nouveaux éléments qui ont amené la sémantique à un niveau supérieur.

De nouveaux tags ont été développés pour nous aider à créer plus de structure sémantique. Comme vous le savez peut-être, la version précédente du langage HTML (Hyper Text Markup Language) contenait le tag div universel qui était largement utilisé pour effectuer diverses tâches dans la structure HTML. Ce vétéran HTML présente un inconvénient majeur: les utilisateurs non qualifiés se perdent dans le code car il ressemble souvent à une mosaïque de div.

Avec la sortie de HTML5, les nouvelles balises, telles que article, section, header, footer, nav et figure sont apparues, de nombreux développeurs Web ont décidé que ces éléments sont destinés à remplacer entièrement notre ancien ami div. Ce point de vue n'est pas tout à fait correct et il est trop tôt pour retirer la balise div. Cette balise reste un élément entièrement fonctionnel de la cinquième génération de HTML. Selon W3C, la balise div définit une division ou une section dans un document HTML et peut être utilisée pour regrouper des éléments de bloc et les formater avec CSS.

Près de 20 nouveaux éléments HTML5 ont été créés pour être utilisés dans l'aperçu du document, qui est la structure d'un document, y compris les en-têtes, les titres de formulaire, les titres de tables et autres. Aujourd'hui, nous voulons clarifier les choses et vous parler des balises HTML5 les plus populaires qui peuvent être utilisées dans la structure du document comme alternative à l'élément div. Encore une fois, nous voulons faire attention à ce que ces éléments ne peuvent pas être appelés "les tueurs de div", ils ne remplacent que partiellement l'utilisation de div dans le code de balisage, car vous pouvez toujours utiliser l'élément div lors du codage d'une nouvelle page. Voici un petit guide pour vous aider à utiliser les nouveaux éléments sémantiques HTML5.

Article et Section

Le tag article est un fragment indépendant du contenu. Un article de blog, un article d'actualité ou d'autres types de contenu textuel illustrent clairement la zone à utiliser le tag article. Fondamentalement, vous pouvez utiliser cet élément pour baliser le composant de page qui doit être largement utilisé et distribué.

Le tag section est l'élément le plus trompeur qui est largement déployé par les développeurs Web comme une alternative à div. Vous devez savoir que cette balise est étroitement liée à article et est utilisée pour regrouper du contenu différent des autres groupes de contenu de la page. L’exemple d’un chapitre dans un livre est l'illustration parfaite de la fonction principale de section. En d'autres termes, cet élément est utilisé pour créer plusieurs zones thématiquement différentes sur une même page ou pour créer des chapitres logiques dans les articles.

Header et Footer

L'élément header a été créé pour une présentation plus sémantique des outils de navigation et d'autres données importantes placées dans l'en-tête de la page Web. Vous pouvez utiliser cet élément autant de fois que vous le souhaitez en ajoutant des balises supplémentaires comme nav pour ajouter des éléments de menu de navigation, des rubriques, des tables des matières et d'autres choses. Le tag footer est similaire à header et il est utilisé pour créer le pied de page. Vous pouvez également utiliser cet élément plusieurs fois sur une page pour différents blocs. Cette balise peut être utilisée non seulement pour baliser le "pied de page" classique de la page Web avec toutes les informations requises comme le Copyright, les Conditions d'utilisation et autres, mais aussi pour marquer certaines informations sur l'auteur de l'article, par exemple.

Nav

Cet élément permet de créer des menus de navigation avec des liens vous permettant de naviguer dans la page et le site Web. Bien que tous les liens de la page Web ne doivent pas être entourés de l'élément nav. Vous pouvez avoir, par exemple, un bloc avec des liens sponsorisés ou des liens avec les résultats de la recherche. N'oubliez pas que l'élément nav peut également être utilisé à plusieurs reprises. Souvent, cette balise permet de marquer une liste de liens non ordonnée et d’autres avec nos amis ul et li.

Figure et Figcaption

Selon la référence du W3C, cet élément est utilisé pour présenter un bloc de contenu avec une légende, généralement référencée comme une seule unité dans le flux principal du document. En d'autres termes, vous pouvez l'utiliser pour baliser différents types de contenu multimédia, tels que des illustrations, des photos, des exemples de code et des diagrammes.

Aside

L'élément  Aside est utilisé pour le contenu secondaire lorsqu'il n'est pas imbriqué dans un élément article. L'exemple le plus approprié d'utilisation d'élément aside est l'insert de typographie. Nous pouvons utiliser cet élément pour éléments nav, encarts typographiques, bannières publicitaires et simplement pour le contenu qui doit être placé séparément du contenu principal.

* * *

Il ne fait aucun doute que tous ces nouveaux éléments présentés ci-dessus vous feront réfléchir à deux fois avant d'utiliser le tag div. Eh bien oui, ils sont tous super cool et ajoutent beaucoup plus de valeur sémantique à votre code en comparaison avec div. Mais n'oubliez pas que officiellement l'élément div reste dans HTML5 et vous pouvez toujours l'utiliser si vous ne trouvez aucune autre balise. Nous pensons que c'est une sage décision de ne pas oublier ce tag en raison de sa polyvalence et de sa flexibilité à long terme. Alors, codez bien, profitez d'un superbe code sémantique HTML5 et n'oubliez pas de sourire plus souvent.