20 Balises HTML5 à connaître !

il y a 3 ans · 3 MIN DE LECTURE
#HTML 

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'attribut aria-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 attribut datetime.

  <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.

···