# Recapitulatif des principales Balises 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

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
--- | ---
<link /> | Cette balise permet d’indiquer certaines informations sur la page web. On l’utilise le plus souvent pour inclure une feuille de style CSS, comme ceci :
    1
    <link rel="stylesheet" href="style.css" />
<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="Jean Dupont" />
    <!-- Description de la page -->
    <meta name="description" content="La page personnelle de Jean Dupont" />
    <!-- Mots-clés de la page -->
    <meta name="keywords" content="expériences, recherche, laboratoire, chimie" />
    <!-- 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.monsite.com" />
En général, on utilise surtout le meta pour la table de caractères.
<style> | Permet de définir du code CSS pour la page. Exemple :
    1
    2
    3
    <style type="text/css">
    /* Votre code CSS ici */
    </style>
<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 de formulaire:

Balise | Type | Description
--- | --- | ---
<form> | Block | Délimite un formulaire. Vous devrez généralement donner 2 attributs à la balise <form> method : indique la méthode d’envoi du formulaire (get ou post). Si vous ne savez pas quoi utiliser, mettez post. action : la page vers laquelle le visiteur doit être redirigé lorsqu’il a validé votre formulaire.
<fieldset> | Block | Permet de regrouper plusieurs éléments d’un formulaire. On l’utilise généralement dans de grands formulaires.Pour donner un titre à votre groupe, utilisez la balise <legend>
<legend> | Inline | Titre d’un groupe dans un formulaire. A utiliser à l’intérieur d’un <fieldset>
<label> | Inline | Titre d’un élément de formulaire. Généralement, vous devrez mettre l’attribut for sur cette balise pour indiquer l’ID de l’élément auquel correspond le label.
<input /> | Inline | Champ de formulaire. Il existe de nombreux types de champs différents. Vous choisissez le type de champ que vous désirez grâce à l’attribut type :
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!-- Zone de texte d'une ligne -->
    <input type="text" />
    <!-- Mot de passe (le texte est caché) -->
    <input type="password" />
    <!-- Envoi de fichier -->
    <input type="file" />
    <!-- Case à cocher -->
    <input type="checkbox" />
    <!-- Bouton d'option -->
    <input type="radio" />
    <!-- Bouton -->
    <input type="button" />
    <!-- Bouton d'envoi -->
    <input type="submit" />
    <!-- Bouton de remise à zéro -->
    <input type="reset" />
    <!-- Champ caché -->
    <input type="hidden" />
Pensez à donner un nom à vos champs grâce à l’attribut name
<textarea> | Inline | Zone de saisie multiligne. Vous pouvez définir sa taille grâce aux attributs rows et cols (nombre de lignes et colonnes) ou bien le faire en CSS grâce aux propriétés width et height.
<select> | Inline | Liste déroulante. Utilisez la balise <option> pour créer chaque élément de la liste :
    1
    2
    3
    4
    5
    <select name="pays">
        <option value="france">France</option>
        <option value="espagne">Espagne</option>
        <option value="italie">Italie</option>
    </select>
<option> | Block | Element d’une liste déroulante
<optgroup> | Block | Groupe d’éléments d’une liste déroulante. A utiliser dans le cas d’une grande liste déroulante. Vous devez utiliser l’attribut label pour donner un nom au groupe.

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

Ces balises ont un intérêt uniquement si vous leur donnez un attribut class, id ou style :

- class : indique le nom de la classe CSS à utiliser.
- id : donne un nom à la balise. Ce nom doit être unique sur toute la page car il permet d’identifier la balise.
  Vous pouvez vous servir de l’ID pour de nombreuses choses, comme par exemple pour un lien vers une ancre, pour un style CSS de type ID, etc.
- style : cet attribut vous permet d’indiquer directement le code CSS à appliquer.
  Vous n’êtes donc pas obligés d’avoir une feuille de style à part, vous pouvez juste mettre directement les attributs CSS.
  Notez qu’il est préférable de ne pas utiliser cet attribut et de passer à la place par une feuille de style externe car cela rend votre site plus facile à mettre à jour par la suite.