
20 Balises HTML5 à connaître !
Nous allons voir ensemble une liste de 20 balises HTML5, certaines sont connues, d'autres beaucoup moins, ainsi que leur comptabilité avec les navigateurs, Chrome, Firefox, Safari et Internet explorer.
8 Balises de Disposition
En général ces balises sont surtout là pour faciliter la lecture de votre site par les moteurs de recherches.
<article>
- Définit l'emplacement d'un article, d'un commentaire de blog ou de forum, il est généralement composé d'un titre et d'un paragraphe.<section>
- Définit une section représentant une thématique, un<article>
peut être composée de plusieurs thématiques (<section>
), l'inverse est vrai. Elle est également composée d'un titre et d'une introduction. on peut lui attribuer un label via l'attributaria-label
.<aside>
- Permet de définir une section devant être à côté de votre contenu principal, idéal pour placer les sidebars ou les régies publicitaires.<figure>
- Figure est un conteneur fonctionant avec la balise<figcaption>
, figure sert à afficher une image ou une vidéo suivies d'une légende (<figcaption>
).<footer>
- Définit l'emplacement du pied de page de votre page.<header>
- Définit l'emplacement de l'en-tête de votre page.<hgroup>
- Une balise qui permet de grouper plusieurs titre. (<h1> à <h6>
).<nav>
- Représente une section contenant des liens, Elle est fréquemment utilisée dans le<header>
pour définir le menu principal ou dans le<footer>
pour les mentions légales, etc.
4 Balises Médias
<vidéo>
- Permet d'afficher un lecteur vidéo en HTML5, il faudra indiquer la source de votre vidéo avec l'attributsrc
.<audio>
- Même chose que pour la balise précédente mais dans le cas d'un fichier audio uniquement.<picture>
- La moins connus car elle est pour certains navigateurs au stade expérimentale, la balise<picture>
permet d'utiliser différentes<source>
destinées à un élément<img>
, le navigateur choisira ensuite l'image la plus pertinente à afficher en fonction de la résolution.<source>
- Permet de définir différentes sources de fichiers médias, on peut l'utiliser avec<vidéo>
,<audio>
et<picture>
.
8 Balises fonctionnelle
<details>
- Va de paire avec<summary>
, cette balise permet de définir un contenu déroulant.Des détails
Plus d'infos à propos des détails.
<dialog>
- Dialog est une fenêtres modales native en HTML5.See the Pen Example from Mozilla - by Damien Flandrin (@dam62500) on CodePen.
<embed>
- La balise embed permet d'utiliser un conteneur pour afficher des ressources externes, elle a été utilisée notamment pour afficher du flash mais également du SVG même si on préférera d'autres méthodes à celle-ci.<mark>
- Permet de surligner votre texte.<meter>
- Représente une jauge comprise entre deux valeurs fixe.See the Pen Example from Mozilla -
by Damien Flandrin (@dam62500) on CodePen. <progress>
- Similaire à<meter>
mais représente un pourcentage de progression.See the Pen Example from Mozilla - by Damien Flandrin (@dam62500) on CodePen.
<time>
- Permet de représenter de manière sémantique une date, elle accepte comme attributdatetime
.<p>Le concert a eu lieu le<time datetime="2001-05-15T19:00">15 Mai</time>.</p>
<wbr>
- Une des balises les moins connues du HTML5 mais néanmoins utile,<wbr>
permet d'indiquer à votre navigateur de réaliser si besoin un retour à la ligne à partir de cette balise.
···