La balise ul permet de créer une liste à puces non numérotée.
L’élément <ul> se caractérise par une présentation de liste d’éléments désordonnés. Ces éléments se désignent par un élément HTML appelé <li>.
Les mots listés se démarquent par la présence de baliseurs sous forme de puce. Toutefois, afin d’améliorer le style et l’aspect de ces marqueurs, opter pour les propriétés CSS list-style-type est recommandé.
L’élément <ul> ne compte aucun attribut particulier. Il est cependant pris en charge par tous les attributs universels.
Il est à noter que l’élément <ul> est assez similaire à l’élément <ol>. Lorsque la transposition des éléments modifie le contenu, l’élément <ol> est nécessaire. Ainsi, l’élément <ul> est utilisé quand l’ordre des éléments n’est pas considéré.
L’élément de bloc <dd> peut inclure d’autres éléments tels que les paragraphes, des images ou des liens.
Par défaut, le contenu de la balise dd possède une marge externe à gauche.
Il peut notamment être utilisé pour créer une boite de dialogue.
L’utilisation de la balise dl est choisie par certains pour la facilité de mise en forme CSS par rapport à une balise table.
Voici un résumé des autres balises de liste :
- <ol> : La balise <ol> sert à créer une liste à puces numérotée.
- <li> : L’élément <li> représente un contenu dans une liste. Il doit être présent dans un élément parent tel que <ul> ou <ol>.
- <dl> : La balise <dl> permet de présenter une liste de définitions.
- <dt> : L’élément <dt> sert à identifier un terme dans la liste de définitions
- <dd> : Cette balise sert à fournir la définition, la valeur ou la description du terme <dt> dans la liste <dl>.
Voici un code d’exemple :
<ul>
<li>Balises HTML</li>
<li>Attributs HTML</li>
<li>Liste attributs HTML</li>
</ul>
<ol>
<li>Cours HTML</li>
<li>Cours CSS</li>
<li>Cours JS</li>
</ol>
- Balises HTML
- Attributs HTML
- Liste attributs HTML
- Cours HTML
- Cours CSS
- Cours JS
Voici un code utilisant les balises de définition :
<dl>
<dt>HTML</dt>
<dd>- HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>- Cascading Style Sheets</dd>
<dt>JS</dt>
<dd>- JavaScript</dd>
</dl>
- HTML
- – HyperText Markup Language
- CSS
- – Cascading Style Sheets
- JS
- – JavaScript