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.Example from Mozilla –
<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.Example from Mozilla –
by Damien Flandrin (@dam62500) on CodePen. <progress>– Similaire à<meter>mais représente un pourcentage de progression.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.html<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.
···
Ces balises supposent que les bases du langage sont acquises. Si vous débutez, commencez par les 7 choses à savoir avant d’apprendre le HTML : vocabulaire, squelette d’un document et structure sémantique.
