Les balises conteneurs
Il existe un ensemble de balises qui ne sont pas pour afficher directement un élément particulier, mais qui vont contenir d'autres éléments à afficher.
![Arthur, l'apprenti développeur](/Img/Shared/arthur.png)
On va commencer avec un exemple parlant tu vas comprendre.
Liste à puces
Il y a une balise pour créer des listes à puces, c'est la balise <ul>. Elle n'affiche rien elle même, elle est juste prévue pour contenir une liste d'éléments à puce.
Par exemple si on fait :
Hé bien ça n'affiche rien. Il y a une deuxième balise qui est <li>, et qui représente un élément de liste, on peut donc mettre plusieurs <li> dans une balise <ul> par exemple :
![Arthur, l'apprenti développeur](/Img/Shared/arthur.png)
C'est exactement ça. Et d'ailleurs on ne peut pas mettre n'importe quoi dans une balise <ul>, étant donné que c'est une balise de liste, il faut obligatoirement mettre des éléments de liste et rien d'autre.
![Arthur, l'apprenti développeur](/Img/Shared/arthur.png)
Tout à fait, mais on peut aussi faire des sous-listes en mettant un <ul> dans un <li>.
![Arthur, l'apprenti développeur](/Img/Shared/arthur.png)
Oui, les <li> peuvent contenir n'importe quel type de contenu, comme des liens :
![Arthur, l'apprenti développeur](/Img/Shared/arthur.png)
C'est exact.
Liste numérotée
La liste numérotée, elle, fonctionne exactement comme la liste à puce, mais au lieu d'avoir des puces, on aura des numéros croissants. C'est la balise <ol>, et elle contient elle aussi des éléments de liste <li>
De la même façon on peut créer un <ol> dans un li, qui va faire une sous-liste et recommencer la numérotation.
Et on peut aussi faire des <ul> dans des <ol> et inversement :
![Arthur, l'apprenti développeur](/Img/Shared/arthur.png)
Oui il en existe de nombreuses autres, mais il y en a deux en particulier qui sont très utilisées en HTML.
Conteneur de bloc et de ligne
Il existe une balise pour créer un contenu en bloc, cette balise n'affiche rien de particulier, elle prévoit juste que ce qu'elle contient sera un bloc sur la page, c'est la balise <div>
![Arthur, l'apprenti développeur](/Img/Shared/arthur.png)
Le meilleur moyen est de te montrer, mais avant ça il faut savoir qu'il existe aussi une balise équivalente pour le contenu en ligne, c'est la balise <span>
Et pour te montrer la différence, voici un exemple des deux balises avec le même contenu, j'ajoute des couleurs pour que la balise div s'affiche en bleu et la span en vert :
![Arthur, l'apprenti développeur](/Img/Shared/arthur.png)
Il existe d'autres conteneurs, mais pour certains nous les verrons plus tard, et d'autres sont trop rarement utiles, je ne les évoquerai pas. J'ai terminé cette partie