Damien Flandrin

Développeur Web

20 Balises HTML5 à connaître !

il y a 5 mois · 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.

infographie-20-balises-a-connaitre.png

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.

···

Damien Flandrin

Je suis développeur web pour l'agence Carredas, je fais principalement du PHP avec Laravel et de l'intégration sur des projets Wordpress.
comments powered by Disqus


Développeur Web - Damien Flandrin