Cette page présente une liste d’environ 30 balises HTML essentielles. Ce sont les plus fréquemment utilisées (selon les sources de données en bas de page).

Eléments de structure

Éléments de structure sémantiques:

<section> Définit une section dans un document (MDN)
<article> Définit un article (une section de contenu indépendante) (MDN)
<h1> - <h6> Définit un titre, sous-titre ou inter-titre (heading). Permet d’instaurer une structure interne à un document.
<header> Section d’introduction d’un article, d’une autre section ou du document entier (par exemple: en-tête de page)
<footer> Section de conclusion d’une section ou d’un article, voire du document entier (par exemple: pied de page)
<nav> Une section destinée à la navigation, possédant des liens de navigation principaux (au sein du document ou vers d’autres pages)

Éléments de structure génériques:

<div> Définit une section dans un document (formaté en display:block).
<span> Définit une section dans un texte (formaté en display:inline).

Eléments de contenu

<a> Un hyperlien, avec l’attribut href indiquant la cible. Permet de pointer vers une autre ressource en ligne
<p> Un paragraphe de texte
<em> Du texte avec “emphase”, rendu en italique.
<strong> Du texte avec une importance forte, rendu en gras.
<br> Un retour de ligne simple (line break).

Un exemple de balise hyperlien:

<a href="https://example.com">Un Lien</a>

Listes

Balises pour les listes:

<ul> Définit une liste (“unordered list”)
<li> Définit un élément à l’intérieur d’une liste (“list item”)

Exemple de navigation formatée avec les éléments NAV et UL :

<nav class="menu">
  <ul>
    <li><a href="#Accueil">Accueil</a></li>
    <li><a href="#Apropos">À propos</a></li>
    <li><a href="#Contact">Contact</a></li>
  </ul>
</nav>

Balises de médias

Balises pour les images:

<img> Définit une image
<picture> Un conteneur d’image pouvant inclure différentes variantes – W3C / MDN
<figure> Permet de grouper une image avec la légende qui l’accompagne
<figcaption> Permet de définir une légende, à l’intérieur d’un élément <figure>

Balises pour les médias:

<audio> Définit un contenu sonore.
<video> Définit un contenu vidéo.
<svg> Définit une image dans le format vectoriel SVG.
<canvas> Conteneur pour des visuels codés en Javascript.

Balises générales ( méta-éléments)

Ces balises se situent avant le contenu. Certaines de ces balises sont obligatoires pour un document HTML valide:

<!DOCTYPE> Définit le type de document. Doit se trouver tout en début du code.
<html> Définit la racine d’un document HTML. Englobe tout le document (au début et à la fin du code).
<head> L’en-tête, qui ne sera pas affiché, et contient diverses méta-informations au sujet du document (titre, auteur, mots-clés, liens vers des ressources à charger).
<title> C’est le titre document. Il ne sera pas affiché dans le contenu de la page, mais dans la barre du navigateur (et dans les résultats de recherche Google).
<body> Le corps du document. Tout le contenu visible se trouve dans cette balise.

Eléments optionnels mais fréquents:

<meta> Définit des métadonnées.
<link> Définit une relation entre un document et une ressource externe (le plus souvent, des feuilles de styles CSS).
<script> Définit un script qui sera exéctué par le navigateur.
<style> Définit des styles pour le document.
<!--...--> Définit un commentaire (code qui ne sera pas affiché).

Exemple:

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <meta charset="utf-8">
  <meta name="description" content="A description of my page.">
  <link rel="stylesheet" href="style.css">
  <style>
    h1 { color: #424242; }
  </style>
  <script src="https://jquery.com/base.js"></script> 
</head>
<body>
  <!-- Ici commence le contenu de la page -->
  <h1>Welcome to my page!</h1>
</body>
</html>

Ressources

Les balises essentielles présentées sur cette page ont été choisies sur la base des analyses suivantes:

Selon l’analyse de 2016, les sites web utilisent en moyenne 26 éléments différents (la moyenne était de 19 dans la statistique de 2005).