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.
C'est à dire ?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 :
Ok, donc la balise <ul> est un conteneur dans le sens ou elle est prévue pour contenir d'autres balises.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.
Donc que des <li>Tout à fait, mais on peut aussi faire des sous-listes en mettant un <ul> dans un <li>.
Donc on peut mettre autre chose que du texte dans un <li>?Oui, les <li> peuvent contenir n'importe quel type de contenu, comme des liens :
Ok, donc les enfants directs d'une balise <ul> sont obligatoirement des éléments de liste <li>, par contre les enfants de <li> peuvent être n'importe quel balise HTMLC'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 :
Ok les listes c'est compris ! Il y a d'autres balises conteneurs ?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>
Tu entends quoi par bloc ?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 :
Ah oui, je vois bien la différence.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