Tutoriel HTML

ACCUEIL HTML Introduction HTML Éditeurs HTML HTML de base Éléments HTML Attributs HTML En-têtes HTML Paragraphes HTML Styles HTML Formatage HTML Citations HTML Commentaires HTML Couleurs HTML HTMLCSS Liens HTML Images HTML Icône de favori HTML Tableaux HTML Listes HTML Bloc HTML et Inline Cours HTML Identifiant HTML Iframes HTML HTMLJavaScript Chemins d'accès aux fichiers HTML Tête HTML Mise en page HTML HTML réactif Code informatique HTML Sémantique HTML Guide de style HTML Entités HTML Symboles HTML Émojis HTML Jeu de caractères HTML Encodage d'URL HTML HTML contre XHTML

Formulaires HTML

Formulaires HTML Attributs de formulaire HTML Éléments de formulaire HTML Types d'entrée HTML Attributs d'entrée HTML Attributs du formulaire de saisie HTML

Graphiques HTML

Canevas HTML HTML SVG

Médias HTML

Médias HTML Vidéo HTML Audio HTML Modules externes HTML YouTube HTML

API HTML

Géolocalisation HTML Glisser/déposer HTML Stockage Web HTML Travailleurs Web HTML HTML SSE

Exemples HTML

Exemples HTML Questionnaire HTML Exercices HTML Certificat HTML Résumé HTML Accessibilité HTML

Références HTML

Liste de balises HTML Attributs HTML Attributs globaux HTML Prise en charge du navigateur HTML Événements HTML Couleurs HTML Canevas HTML HTML Audio/Vidéo Doctypes HTML Jeux de caractères HTML Encodage d'URL HTML Codes de langue HTML Messagerie HTTP Méthodes HTTP Convertisseur PX en EM Raccourcis clavier

Listes HTML non ordonnées


La balise HTML <ul>définit une liste non ordonnée (à puces).


Liste HTML non ordonnée

Une liste non ordonnée commence par la <ul>balise. Chaque élément de la liste commence par la <li>balise.

Les éléments de la liste seront marqués par des puces (petits cercles noirs) par défaut :

Exemple

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>


Liste HTML non ordonnée - Choisissez un marqueur d'élément de liste

La propriété CSS list-style-typeest utilisée pour définir le style du marqueur d'élément de liste. Il peut prendre l'une des valeurs suivantes :

Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

Exemple - Disque

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Exemple - Cercle

<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Exemple - Carré

<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Exemple - Aucun

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>


Listes HTML imbriquées

Les listes peuvent être imbriquées (liste dans la liste) :

Exemple

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Remarque : Un élément de liste ( <li>) peut contenir une nouvelle liste et d'autres éléments HTML, comme des images et des liens, etc.


Liste horizontale avec CSS

Les listes HTML peuvent être stylisées de différentes manières avec CSS.

Un moyen populaire consiste à styliser une liste horizontalement, pour créer un menu de navigation :

Exemple

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Astuce : vous pouvez en apprendre beaucoup plus sur CSS dans notre didacticiel CSS .


Résumé du chapitre

  • Utilisez l'élément HTML <ul>pour définir une liste non ordonnée
  • Utilisez la propriété CSS list-style-typepour définir le marqueur d'élément de liste
  • Utiliser l'élément HTML <li>pour définir un élément de liste
  • Les listes peuvent être imbriquées
  • Les éléments de liste peuvent contenir d'autres éléments HTML
  • Utilisez la propriété CSS float:leftpour afficher une liste horizontalement

Balises de liste HTML

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list

Pour une liste complète de toutes les balises HTML disponibles, consultez notre Référence des balises HTML .