Les balises sémantiques

Présentation au sujet: "Les balises sémantiques"— Transcription de la présentation:

1 Les balises sémantiques
HTML Les balises sémantiques

2 Qu’est-ce que c’est? L’adoption du HTML 5 a introduit plusieurs nouvelles balises, notamment les balises sémantiques. La sémantique, c’est le sens des mots. Ces balises permettent de regrouper plusieurs éléments HTML. Permet d’améliorer le référencement.

3 Balises de position Par exemple…
<header> spécifie un en-tête de la page ou d’une section <main> regroupe les éléments du contenu principal <footer> indique un bas de page ou d’une section

4 Balises de position

5 Balises de position Par exemple… <article> spécifie un article
<aside> colonne de droite, commentaire, exergue, glossaire, pub. Contenu non nécessaire pour comprendre l’essentiel. <section> une partie de la page ou un chapitre d’une série d’articles.

6

7 Référence des balises sémantiques
Tag Description <article> Un article de la page. <aside> Contenant en marge du contenu principal. <bdi> Partie du texte formatté d’une façon différente. <details> Détails additionnels que l’utilisateur peut cacher. <dialog> Boite de dialogue ou fenêtre modale. <figcaption> Légende d’une balise <figure>. <figure> Ilustration, diagramme, photo etc. <footer> Pied de page ou de section. <header> Haut de page de la page ou d’une section. <main> Contenu principal de la page. <mark> Texte mis en valeur. <menuitem>  Élément d’un menu. <meter> Spécifie une portée entre deux nombres. <nav> Liens de navigation. <progress> Progrès d’une tâche. <section> Section d’une page. <summary> En-tête visible d’une balise <details>. <time> Date/heure. <wbr> Saut de ligne possible.