Aide mémoire HTML : Eléments de Blocs

Nous allons voir dans cette page comment utiliser les élément de bloc pour structurer notre page web.

Ces éléments n'ont pas d'attributs spécifiques : nous avons donc choisi de vous donner un simple aperçu de leur rendu à l'écran. Ces balises acceptent quand même des attributs dits standards (on peut les appliquer dans toutes les balises) : id, class, name, style et title.

Il existe 4 types d'éléments de bloc : 

1. Les titres
2. Les divisions
3. Les paragraphes
4. Les énumérations

1. Les Titres : <h1>...</h1> à <h6>...</h6>

Titres Syntaxe Aperçu
de niveau 1 <h1>Un titre principal</h1>

Un titre principal

de niveau 2 <h2>Titre niveau 2</h2>

Titre niveau 2

de niveau 3 <h3>Titre niveau 3</h3>

Titre niveau 3

de niveau 4 <h4>Titre niveau 4</h4>

Titre niveau 4

de niveau 5 <h5>Titre niveau 5</h5>
Titre niveau 5
de niveau 6 <h6>Titre niveau 6</h6>
Titre niveau 6

2. Les divisions : <div>...</div>.

Les balises <div> et <\div> délimitent une partie du document. Cela correspond à un bloc sur lequel on peut appliquer un style particulier.

Exemple Aperçu
<div style="color:blue;">
  <p>Un paragraphe compris dans une division</p>
  <table>
    <tr>
      <td>et une cellule d'un tableau.</td>
    </tr>
  </table>
</div>

Un paragraphe compris dans une division

et une cellule d'un tableau.

3. Les paragraphes : <p>...</p>

Les balises <p> et </p> permettent de délimiter un paragraphe. Par exemple ces quelques lignes sont incluses dans un paragraphe.

4. Les énumérations : <ul><li>..</li></ul>.

Il existe 2 types de listes: les listes non ordonnées (avec des puces) et les listes ordonnées (les éléments de la liste sont numérotés). On utilise 2 balises distinctes en fonction du type de liste (cf. les exemples dans le tableau ci-dessous). Les éléments des listes sont quant à eux délimités par une balise ouvrante <li> et une balise fermante </li>.

Exemples Syntaxe Aperçu
Liste non ordonnée <ul>
  <li>élément n°1 de la liste</li>
  <li>élément n°2 de la liste</li>
</ul>
  • élément n°1 de la liste
  • élément n°2 de la liste
Liste ordonnée <ol>
  <li>élément n°1 de la liste</li>
  <li>élément n°2 de la liste</li>
</ol>
  1. élément n°1 de la liste
  2. élément n°2 de la liste
compteur