Balise ul

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

  1. Cours HTML
  2. Cours CSS
  3. 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