Récapitulatif des balises principales du HTML

Balises de premier niveau:

Les balises de premier niveau sont les principales balises qui structurent une page HTML.
Elles sont indispensables pour réaliser le « code minimal » d’une page web.
Balises Description
<html> Balise principale de toute page web. Doit englober tout le code de votre page web.
<head> En-tête de la page
<body> Corps de la page
<title> Le titre de la page qui sera affiché dans l'onglet du navigateur

Le code minimal d’une page HTML:

Vous trouverez ci-dessous le code minimal d’une page XHTML.

Code : XHTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Titre</title>
    </head>
    <body>
    </body>
</html>

Balises d’en-tête:

Ces balises sont toutes situées dans l’en-tête de la page web, c’est-à-dire entre <head> et </head> :
Balise Description
<meta /> Cette balise permet de définir les propriétés de la page web.
On s’en sert pour une foule de choses. Voici quelques exemples pratiques
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!-- Table de caractères -->
<meta charset="utf-8" />
<!-- Auteur de la page -->
<meta name="author" content="Elie M" />
<!-- Description de la page -->
<meta name="description" content="La page personnelle d' Elie M" />
<!-- Mots-clés de la page -->
<meta name="keywords" content="education, SaaS, expériences, recherche, Scrum" />
<!-- Adresse de contact -->
<meta name="reply-to" content="monadresse@email.com" />
<!-- Empêcher la mise en cache de la page par le navigateur -->
<meta http-equiv="pragma" content="no-cache" />
<!-- Rafraîchissement automatique au bout de 10 secondes -->
<meta http-equiv="refresh" content="10; URL=http://www.eliematta.com" />

En général, on utilise surtout le meta pour la table de caractères.

<title> Titre de la page web.
Choisissez bien votre titre car il a beaucoup d’importance pour les moteurs de recherche (ils donnent de l’importance aux mots qui se trouvent dans le titre).
1
<title>Le Titre</title>

Balises de structuration du texte:

Type:
Inline - L'élément est affiché dans le flot, sans retour à la ligne.
Block - Un retour à la ligne est généré avant l'affichage de l'élément, et après. L'élément fonctionne comme une boite.

Balise Type Description
<abbr> Inline Abréviation. Utiliser l’attribut title pour indiquer sa signification.
<blockquote> Block Citation (longue)
Vous devez obligatoirement mettre une balise de paragraphe à l’intérieur du blockquote.
1
2
3
4
5
<blockquote>
    <p>
        Texte de la citation
    </p>
</blockquote>
<cite> Inline Citation du titre d’une oeuvre ou d’un évènement.
<q> Inline Citation (courte)
<sup> Inline Mise en exposant
<sub> Inline Mise en indice
<strong> Inline Mise en valeur (forte)
Le texte est généralement mis en gras.
<mark> Inline (HTML5) Mise en valeur visuelle.
Le texte est généralement surligné.
<em> Inline Mise en valeur (faible)
Le texte est généralement mis en italique.
<h6> Block Titre de niveau 6
<h5> Block Titre de niveau 5
<h4> Block Titre de niveau 4
<h3> Block Titre de niveau 3
<h2> Block Titre de niveau 2
<h1> Block Titre de niveau 1
<img /> Inline Insère une image.
Utilisez les attributs src (pour indiquer l’adresse de l’image) et alt (pour indiquer un texte de remplacement).
Ces 2 attributs sont obligatoires.
Exemple :
1
<img src="./images/smiley.png" alt=":)" />
<figure> Block Indique la présence d’une figure (image, code…) illustrant le texte.
<figcaption> Inline Description de la figure.
<audio> Inline Insère un son.
<video> Inline Insère une vidéo.
<source> - (HTML5) Indique un format possible pour les balises <audio> et <video>
<a> Inline Lien hypertexte.
Indiquez l’url de destination grâce à l’attribut href :
1
<a href="autrepage.html">Rendez-vous sur l'autre page</a>
<br /> Inline Retour à la ligne
<p> Block Paragraphe
<hr /> Block Crée une ligne de séparation horizontale
<address> Block Permet d’indiquer une adresse, ou éventuellement l’auteur d’un document.
Le texte est généralement mis en italique.
<del> Inline Permet d’indiquer un texte qui a été supprimé.
Le texte est généralement barré.
<ins> Inline Permet d’indiquer un texte qui a été inséré.
Le texte est généralement souligné.
<dfn> Inline Permet d’indiquer une définition.
<kbd> Inline Permet d’indiquer un code que doit taper le visiteur.
<pre> Block Le texte à l’intérieur de la balise <pre> sera affiché tel qu’il a été tapé dans le code (espaces et entrées compris).
Une police de taille fixe est utilisée.
<progress> Inline (HTML5) Affiche une barre de progression. A utiliser conjointement avec les attributs value et max.
<time> Inline (HTML5) Pour indiquer une date ou une heure.

Balises de liste:

Cette partie énumère toutes les balises HTML permettant de créer des listes (listes à puces, listes numérotées, listes de définitions…)
Balise Type Description
<ul> Block Liste à puces non numérotée. Vous devez mettre un <li></li> par élément de la liste.
1
2
3
4
<ul>
<li>Un élément</li>
<li>Un autre élément</li>
</ul>
<ol> Block Liste à puces numérotée. Vous devez mettre un <li></li> par élément de la liste.
1
2
3
4
<ol>
<li>Elément n°1</li>
<li>Elément n°2</li>
</ol>
<li> list-item Permet de créer un élément de liste.
Le type de la balise est particulier car elle n’est ni block ni inline. On dit qu’elle est de type list-item.
<dl> Block Liste de définitions. Vous devez alterner chaque terme <dt> par sa définition <dd>.
1
2
3
4
5
6
<dl>
<dt>Porte</dt>
<dd>Ouverture dans un mur permettant d'entrer et de sortir</dd>
<dt>Théâtre</dt>
<dd>Lieu où l'on représente des ouvrages dramatiques</dd>
</dl>
<dt> Block Terme à définir
<dd> Block Définition du terme

Balises de tableau:

Balise Type Description
<table> Block Délimite un tableau. Voici un exemple de tableau simple :
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<table>
   <caption>Passagers du MEA 212</caption>

   <tr>
       <th>Nom</th>
       <th>Age</th>
       <th>Pays</th>
   </tr>

   <tr>
       <td>Cyril</td>
       <td>33 ans</td>
       <td>Liban</td>
   </tr>
   <tr>
       <td>Marc</td>
       <td>26 ans</td>
       <td>Etats-Unis</td>
   </tr>
   <tr>
       <td>François</td>
       <td>43 ans</td>
       <td>France</td>
   </tr>
</table>
<caption> - Permet de donner un titre au tableau
<tr> - Ligne de tableau
<th> - Cellule d’en-tête du tableau (généralement mise en gras)
<td> - Cellule du tableau
<thead> - Balise non obligatoire permettant d’insérer l’en-tête du tableau.
<tbody> - Balise non obligatoire permettant d’insérer le corps du tableau
<tfoot> - Balise non obligatoire permettant d’insérer le pied du tableau

Balises sectionnantes: (HTML5)

Ces balises permettent de construire le squelette de notre site web :
Balise Type Description
<header> Block En-tête
<nav> Block Liens principaux de navigation
<footer> Block Pied de page
<section> Block Section de page
<article> Block Contenu ayant un sens propre (billet de blog, actualité…) pouvant être repris sur un autre site.
<aside> Block Informations complémentaires

Balises génériques:

Les balises génériques sont des balises qui n’ont pas de sens sémantique.
En effet, toutes les autres balises HTML ont un sens : <p> signifie « Paragraphe », <h2> signifie « Sous-titre » etc.
Parfois, on a besoin d’utiliser des balises génériques (aussi appelées balises universelles) car aucune des autres balises ne convient.
On utilise le plus souvent des balises génériques pour construire son design.
Il y a 2 balises génériques : l’une est inline, l’autre est block.
Balise Type Description
<span> Inline Balise générique de type inline
<div> Block Balise générique de type block