41Mag - HTML5 : Améliorer votre sémantique en remplaçant les balises <DIV> par de nouveaux éléments

HTML5 : Améliorer votre sémantique en remplaçant les balises <DIV> par de nouveaux éléments

Un développeur Web sera toujours à la recherche de la Sémantique parfaite. Cette nouvelle version HTML5 rend encore plus puissant le  HTML. Ce langage a évolué et offre 30 nouveaux éléments visant a amené la sémantique à un niveau supérieur. De nouvelles balises ont été développés pour nous aider à mieux structurer notre document.

Comme vous le savez, la version précédente de ce langage de balisage hypertexte – le HTML4 – offrait la balise  <div> qui a été largement (trop)  utilisé pour structuré le document HTML. Cela présente un inconvénient majeur : Un code trop souvent difficile à lire, où s’y retrouver parmi toutes les balises <div> est un vrai cauchemar !

Avec la sortie des nouvelles balises HTML5, comme <article>, <footer>, <nav> … de nombreux développeurs Web ont décidés que ces éléments seraient destinés à remplacer nos bonnes vieilles <div>. Ca aurait pu être la solution magique mais à quelques nuances près car il est trop tôt pour retirer toutes les balises <div>. Cette balise reste un élément entièrement fonctionnelle de la cinquième génération du HTML.

Selon le W3C, la balise <div> définit une division ou une section dans un document HTML et il peut être utilisé pour regrouper des blocs-éléments et les formater en CSS.

Près de 20 nouveaux éléments HTML5 ont été créées pour être utilisées dans la structuration d’un document, y compris les titres, formulaire, tableau, … Aujourd’hui, pour éclaircir les choses, voici les balises HTML5 les plus populaires qui peuvent être utilisés dans la hiérarchisation d’un document en remplacement de la balise <div>.

Attention, ces balises ne sont pas des killeurs de <div> !

En savoir plus sur les nouvelles balises HTML5, les nouveaux éléments de formulaires, conseils pour coder proprement et techniques et astuces HTML5.

Les éléments <article> et <section>

l’élément <article> est un fragment indépendant du contenu général. Billet de blog, nouvelle article ou autres types de contenu du texte . Fondamentalement, vous pouvez utiliser cet élément pour le balisage d’un composant destiné à être largement utilisé et distribué.

L’élément <section> est assez trompeur car il est largement trop employé par les développeurs Web comme une alternative à <div>. Vous devriez savoir que cette balise est étroitement liée à la balise <article> et qu’elle est utilisé pour regrouper un contenu qui diffère d’un autre groupement de contenu sur la page. Généralement, les groupes sont fait par thèmes ou sujet identique.

Les éléments <header> et <footer>

L’élément <header> a été créé pour une présentation plus sémantique des outils de navigation et des 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. Ajoutez lui quelques balises supplémentaires comme <nav> pour les éléments du menu de navigation, <h1,2,3…6> pour les titres …

La balise <footer> est similaire à <header>, elle est utilisé pour créer la structure de pied de page de votre document web. Vous pouvez également utiliser cet élément plusieurs fois sur une seule page pour des blocs différents. Cette balise peut être utilisée, par exemple, pour marquer le droit d’auteur, Conditions d’utilisation et autres, mais aussi pour le marquage de certaines informations sur l’auteur de l’article …

La balise <nav>

L’élément <nav> est utilisé pour créer des menus avec des liens vous permettant de naviguer sur les pages du site Web.

Vous pouvez avoir, par exemple, un bloc avec des liens sponsorisés, un autre pour les différentes catégories … N’oubliez pas que l’élément <nav> peut également être utilisé pour plusieurs fois. Bien souvent cette balise est associée à une liste,  ordonnée ou non, de liens : <ul> et <ol>.

Les éléments <figure> et <figcaption>

Selon les références du W3C,les éléments <figure> et <figcaption> sont utilisés pour présenter un bloc de contenu avec une légende, qui est généralement référencé comme une seule unité à partir du flux principal du document. En d’autres termes, vous pouvez l’utiliser pour marquer divers types de supports de contenu comme des illustrations, des photos, des exemples de code et des diagrammes.

La balise <figure> définit un contenu autonome, comme des illustrations, des diagrammes, des photos, des listes de codes, etc 

La balise <figcaption> définit une légende pour un élément <figure>.

La balise <aside>

L’élément <aside> est utilisé pour un contenu secondaire qui n’est pas emboîtée dans aucun élément du document (<article> …). L’exemple le plus approprié pour utiliser l’élément <aside> est la fameuse Sidebar ou colonne latéral. Nous pouvons utiliser cet élément avec l’éléments <nav>,  les bannières publicitaires ou tout simplement pour le contenu qui doit être placés séparément du contenu principal.

 
[cadreHTML5]

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 la balise <div>. Ils sont tous très pratique et ajoute de la valeur à votre sémantique. Mais n’oubliez pas que officiellement l’élément <div> reste dans l’équipe du HTML5 et vous pouvez toujours l’utiliser si vous ne trouvez pas d’autres balises. Nous pensons que c’est une sage décision que de ne pas oublier la balise <div> en raison de sa polyvalence et de sa flexibilité à long terme. 

Article du même thême : ..

  • Balthazhare

    De lecture fastidieuse à cause des erreurs de français. Dommage..

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.