Élément d'une liste HTML

Introduction

Les listes HTML sont utilisées pour afficher des éléments sous forme de liste et elles jouent un rôle crucial dans le développement web. La balise HTML li est utilisée pour définir un élément dans une liste. La balise li est utilisée avec la balise ul ou ol et elle est parfaite pour créer des listes non ordonnées et ordonnées. Ce laboratoire vous fournira des instructions étape par étape sur la manière de créer des listes HTML à l'aide de la balise li.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

Créer une liste non ordonnée

Nous pouvons créer une liste non ordonnée à l'aide de la balise HTML ul. Pour ajouter des éléments à la liste, nous devons utiliser la balise li. Créons une liste non ordonnée avec trois éléments.

<!-- index.html -->

<ul>
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
</ul>

Dans le code ci-dessus, nous avons utilisé la balise ul pour créer une liste non ordonnée et la balise li pour définir chaque élément de la liste.

Créer une liste ordonnée

Créer une liste ordonnée est très similaire à créer une liste non ordonnée, la seule différence étant l'utilisation de la balise ol au lieu de la balise ul. Créons une liste ordonnée avec trois éléments.

<!-- index.html -->

<ol>
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
</ol>

Dans le code ci-dessus, nous avons utilisé la balise ol pour créer une liste ordonnée et la balise li pour définir chaque élément de la liste.

Ajout d'attributs à la balise li

La balise li prend en charge plusieurs attributs qui peuvent être utilisés pour modifier le style du point de la liste. Un attribut couramment utilisé est l'attribut type qui peut être utilisé pour changer le point de l'élément de liste. Mettons à jour la liste non ordonnée de l'étape 1 en utilisant l'attribut type.

<!-- index.html -->

<ul>
  <li type="circle">Élément 1</li>
  <li type="disc">Élément 2</li>
  <li type="square">Élément 3</li>
</ul>

Dans le code ci-dessus, nous avons utilisé l'attribut type pour ajouter différents points aux éléments de liste. Nous avons utilisé la valeur circle pour rendre le point un cercle non rempli, la valeur disc pour rendre le point un cercle rempli et la valeur square pour rendre le point un carré rempli.

Incrustation de listes

Nous pouvons incruster plusieurs listes à l'intérieur d'une seule liste. Créons une liste ordonnée et ajoutons une liste non ordonnée à l'intérieur du deuxième élément de la liste ordonnée.

<!-- index.html -->

<ol>
  <li>Élément 1</li>
  <li>
    Élément 2
    <ul>
      <li>Sous-élément 1</li>
      <li>Sous-élément 2</li>
    </ul>
  </li>
  <li>Élément 3</li>
</ol>

Dans le code ci-dessus, nous avons utilisé la balise ul pour créer une liste non ordonnée et la balise li pour définir chaque élément de la liste. Nous avons également incrusté une liste non ordonnée à l'intérieur du deuxième élément de la liste ordonnée.

Récapitulatif

Dans ce laboratoire, nous avons appris à créer des listes HTML à l'aide de la balise li. Nous avons commencé par créer une liste non ordonnée à l'aide des balises ul et li. Nous avons ensuite créé une liste ordonnée à l'aide des balises ol et li. Nous avons également appris à ajouter des attributs à la balise li pour modifier le style du point de l'élément de liste. Enfin, nous avons appris à incruster plusieurs listes à l'intérieur d'une seule liste.