# 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