Cette page présente une liste des balises HTML essentielles à connaître. 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 (un contenu autonome) (MDN)
<h1> - <h6> Définit un titre, sous-titre ou inter-titre (headings).
<header> Définit l’en-tête d’un document ou d’une section
<footer> Définit le pied d’un document ou d’une section
<nav> Définit une section destinée à la navigation

É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.
<p> Un paragraphe de texte
<em> Du texte avec “emphase”, rendu en italique.
<strong> Du texte avec ume importance forte, rendu en gras.
<br> Un retour de ligne simple (line break).

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.

<!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.
<head> Une section (invisible) en début de document, contenant des informations au sujet du document.
<meta> Définit des métadonnées.
<title> Définit le titre du document (affiché dans la barre du navigateur, pas dans le contenu de la page).
<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é).
<body> Délimite le contenu visible du document.

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 ont été établies sur la base des analyses suivantes:

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