Avec la sortie de\u00a0HTML5, les nouvelles balises, telles que article<\/strong>,\u00a0section<\/strong>,\u00a0header<\/strong>,\u00a0footer<\/strong>,\u00a0nav<\/strong>\u00a0et\u00a0figure<\/strong> sont apparues,\u00a0de nombreux d\u00e9veloppeurs Web ont d\u00e9cid\u00e9 que ces \u00e9l\u00e9ments sont destin\u00e9s \u00e0 remplacer enti\u00e8rement notre ancien ami div<\/strong>. Ce point de vue n'est pas tout \u00e0 fait correct et il est trop t\u00f4t pour retirer la balise div<\/strong>. Cette balise reste un \u00e9l\u00e9ment enti\u00e8rement fonctionnel de la cinqui\u00e8me g\u00e9n\u00e9ration de HTML. Selon W3C, la balise div<\/strong> d\u00e9finit une division ou une section dans un document HTML<\/em> et peut \u00eatre utilis\u00e9e pour regrouper des \u00e9l\u00e9ments de bloc et les formater avec CSS<\/em>.<\/p>\n Pr\u00e8s de 20 nouveaux \u00e9l\u00e9ments HTML5 ont \u00e9t\u00e9 cr\u00e9\u00e9s pour \u00eatre utilis\u00e9s dans l'aper\u00e7u du document, qui est la structure d'un document, y compris les en-t\u00eates, 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 \u00eatre utilis\u00e9es dans la structure du document comme alternative \u00e0 l'\u00e9l\u00e9ment div<\/strong>. Encore une fois, nous voulons faire attention \u00e0 ce que ces \u00e9l\u00e9ments ne peuvent pas \u00eatre appel\u00e9s \"les tueurs de div\", ils ne remplacent que partiellement l'utilisation de div dans le code de balisage, car vous pouvez toujours utiliser l'\u00e9l\u00e9ment div<\/strong> lors du codage d'une nouvelle page. Voici un petit guide pour vous aider \u00e0 utiliser les nouveaux \u00e9l\u00e9ments s\u00e9mantiques HTML5.<\/p>\n Le tag\u00a0article<\/strong> est un fragment ind\u00e9pendant du contenu.\u00a0Un article de blog, un article d'actualit\u00e9 ou d'autres types de contenu textuel illustrent clairement la zone \u00e0 utiliser le tag\u00a0article<\/strong>. Fondamentalement, vous pouvez utiliser cet \u00e9l\u00e9ment pour baliser le composant de page qui doit \u00eatre largement utilis\u00e9 et distribu\u00e9.<\/p>\n Le tag\u00a0section<\/strong>\u00a0est l'\u00e9l\u00e9ment le plus trompeur qui est largement d\u00e9ploy\u00e9 par les d\u00e9veloppeurs Web comme une alternative \u00e0 div<\/strong>.\u00a0Vous devez savoir que cette balise est \u00e9troitement li\u00e9e \u00e0 article<\/strong>\u00a0et est utilis\u00e9e pour regrouper du contenu diff\u00e9rent des autres groupes de contenu<\/em> de la page. L\u2019exemple d\u2019un chapitre dans un livre est l'illustration parfaite de la fonction principale de\u00a0section<\/strong>. En d'autres termes, cet \u00e9l\u00e9ment est utilis\u00e9 pour cr\u00e9er plusieurs zones th\u00e9matiquement diff\u00e9rentes sur une m\u00eame page ou pour cr\u00e9er des chapitres logiques dans les articles. L'\u00e9l\u00e9ment header<\/strong>\u00a0a \u00e9t\u00e9 cr\u00e9\u00e9 pour une pr\u00e9sentation plus s\u00e9mantique des outils de navigation et d'autres donn\u00e9es importantes plac\u00e9es dans l'en-t\u00eate de la page Web. Vous pouvez utiliser cet \u00e9l\u00e9ment autant de fois que vous le souhaitez en ajoutant des balises suppl\u00e9mentaires comme nav<\/strong>\u00a0pour ajouter des \u00e9l\u00e9ments de menu de navigation, des rubriques, des tables des mati\u00e8res et d'autres choses. Le tag\u00a0footer<\/strong>\u00a0est similaire \u00e0 header<\/strong> et il est utilis\u00e9 pour cr\u00e9er le pied de page. Vous pouvez \u00e9galement utiliser cet \u00e9l\u00e9ment plusieurs fois sur une page pour diff\u00e9rents blocs. Cette balise peut \u00eatre utilis\u00e9e 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.<\/p>\n Cet \u00e9l\u00e9ment permet de cr\u00e9er 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 \u00eatre entour\u00e9s de l'\u00e9l\u00e9ment nav<\/strong>.\u00a0Vous pouvez avoir, par exemple, un bloc avec des liens sponsoris\u00e9s ou des liens avec les r\u00e9sultats de la recherche. N'oubliez pas que l'\u00e9l\u00e9ment nav<\/strong>\u00a0peut \u00e9galement \u00eatre utilis\u00e9 \u00e0 plusieurs reprises. Souvent, cette balise permet de marquer une liste de liens non ordonn\u00e9e et d\u2019autres avec nos amis\u00a0ul<\/strong>\u00a0et\u00a0li<\/strong>.<\/p>\n Selon la r\u00e9f\u00e9rence du W3C, cet \u00e9l\u00e9ment est utilis\u00e9 pour pr\u00e9senter un bloc de contenu avec une l\u00e9gende, g\u00e9n\u00e9ralement r\u00e9f\u00e9renc\u00e9e comme une seule unit\u00e9 dans le flux principal du document. En d'autres termes, vous pouvez l'utiliser pour baliser diff\u00e9rents types de contenu multim\u00e9dia, tels que des illustrations, des photos, des exemples de code et des diagrammes.<\/p>\n L'\u00e9l\u00e9ment\u00a0 Aside<\/strong>\u00a0est utilis\u00e9 pour le contenu secondaire lorsqu'il n'est pas imbriqu\u00e9 dans un \u00e9l\u00e9ment article<\/strong>.\u00a0L'exemple le plus appropri\u00e9 d'utilisation d'\u00e9l\u00e9ment aside<\/strong> est l'insert de typographie.\u00a0Nous pouvons utiliser cet \u00e9l\u00e9ment pour \u00e9l\u00e9ments\u00a0nav<\/strong>, encarts typographiques, banni\u00e8res publicitaires et simplement pour le contenu qui doit \u00eatre plac\u00e9 s\u00e9par\u00e9ment du contenu principal.<\/p>\n * * *<\/p>\n Il ne fait aucun doute que tous ces nouveaux \u00e9l\u00e9ments pr\u00e9sent\u00e9s ci-dessus vous feront r\u00e9fl\u00e9chir \u00e0 deux fois avant d'utiliser le tag div<\/strong>.\u00a0Eh bien oui, ils sont tous super cool et ajoutent beaucoup plus de valeur s\u00e9mantique \u00e0 votre code en comparaison avec\u00a0div<\/strong>.\u00a0Mais n'oubliez pas que officiellement l'\u00e9l\u00e9ment div<\/strong> reste dans HTML5 et vous pouvez toujours l'utiliser si vous ne trouvez aucune autre balise. Nous pensons que c'est une sage d\u00e9cision de ne pas oublier ce tag en raison de sa polyvalence et de sa flexibilit\u00e9 \u00e0 long terme. Alors, codez bien, profitez d'un superbe code s\u00e9mantique HTML5 et n'oubliez pas de sourire plus souvent.<\/p>\n","protected":false},"excerpt":{"rendered":" La s\u00e9mantique parfaite \u00e9tait et sera toujours la polaire dor\u00e9e pour les d\u00e9veloppeurs Web. HTML5 a fait un long chemin pour devenir un \"messie\" qui donne de l'espoir pour un meilleur avenir \u00e0 la technologie HTML. Ce langage a incontestablement \u00e9volu\u00e9 en d\u00e9voilant 30 nouveaux \u00e9l\u00e9ments qui ont amen\u00e9 la s\u00e9mantique \u00e0 un niveau sup\u00e9rieur. […]<\/p>\n","protected":false},"author":1672325,"featured_media":1228,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[29],"tags":[68,54],"yoast_head":"\n![\"HTML5-semantics\"](\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2012\/04\/HTML5-semantics-1.jpg?x54449\" "\\"HTML5-semantics-1\\"")
<\/p>\n<\/h3>\n
Article et Section<\/h3>\n
\n<\/span><\/p>\n<\/h3>\n
Header et Footer<\/h3>\n
Nav<\/h3>\n
<\/h3>\n
Figure et Figcaption<\/h3>\n
<\/h3>\n
Aside<\/h3>\n