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 :
 |
Les titres |
 |
Les divisions |
 |
Les paragraphes |
 |
Les énumérations |
1. Les Titres : <h1>...</h1> à <h6>...</h6>
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
|
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> |
|
| Liste ordonnée |
<ol> <li>élément n°1 de la liste</li> <li>élément n°2 de la liste</li> </ol> |
|