En HTML, nous avons trois principaux types de listes : les listes ordonnées, les listes non ordonnées et les listes de définition.
Les listes ordonnées sont utilisées lorsque l'ordre des éléments est important. Ils sont créés à l'aide de la balise <ol>. Chaque élément de la liste est placé dans une balise <li>. Voir l'exemple ci-dessous :
<ol>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ol>
Les listes non ordonnées sont utilisées lorsque l'ordre des éléments n'a pas d'importance. Ils sont créés à l'aide de la balise <ul>. Comme pour les listes ordonnées, chaque élément est placé dans une balise <li>. Voir l'exemple :
<ul>
<li>Article</li>
<li>Autre article</li>
<li>Un élément supplémentaire</li>
</ul>
Les listes de définitions sont utilisées pour répertorier les termes et leurs définitions. Ils sont créés à l'aide des balises <dl>, <dt> (pour terme) et <dd> (pour définition). Voir l'exemple :
<dl>
<dt>HTML</dt>
<dd>Langage de balisage utilisé pour structurer le contenu sur le Web.</dd>
<dt>CSS</dt>
<dd>Langage de style utilisé pour décrire la présentation d'un document écrit en HTML.</dd>
≪/dl>
Les tableaux sont utilisés pour présenter les données en lignes et en colonnes. Ils sont créés à l'aide de diverses balises, notamment <table> (pour créer le tableau), <tr> (pour créer une ligne), <td> (pour créer une cellule) et <th> (pour créer un en-tête de tableau).
Voir un exemple de création d'un tableau en HTML :
<tableau>
<tr>
<th>Nom</th>
<th>Âge</th>
≪/tr>
<tr>
<td>John</td>
<td>25</td>
≪/tr>
<tr>
<td>Maria</td>
<td>30</td>
≪/tr>
</tableau>
En plus de ces balises de base, il existe plusieurs autres balises et attributs que vous pouvez utiliser pour contrôler l'apparence et le comportement de vos tables. Par exemple, vous pouvez utiliser l'option <légende> Pour ajouter un titre à votre tableau, le <colgroup> pour spécifier les propriétés de plusieurs colonnes à la fois, et l'attribut 'colspan' pour qu'une cellule s'étende sur plusieurs colonnes.
Nous espérons que ce chapitre vous a permis de bien comprendre comment utiliser les listes et les tableaux en HTML. N'oubliez pas que la pratique est la clé pour devenir un développeur Front End efficace, alors assurez-vous d'essayer ce que vous avez appris sur vos propres projets. Dans le prochain chapitre, nous explorerons CSS, le langage que nous utilisons pour styliser nos sites Web et les rendre visuellement attrayants.