An unordered list in HTML gives you the possibility of listing the contents of your web pages clearly and without numbering. In addition to the basic HTML tag , il est également important de connaître la balise de liste
type.
What are unordered lists and what are they used for?
HTML Unsorted Lists Or Unordered Lists are HTML elements used to create lists in which the order of the different elements of the list plays no role. Convenient lists can be embedded using the HTML tag. tag) , un introductif marquant le point de départ de la liste et un la fin. Chaque élément de la liste est encadré par la balise HTML
HTML lists conviennent à la représentation structurée des contenus les plus divers, comme les suivants :
- Listes classiques de choses à faire : to-do list, liste d’ingrédients
- Fonctions : liste de caractéristiques de produits ou de performances
- Liens : liste de liens vers des pages externes ou des profils de réseaux sociaux
- Tags : liste de mots-clés populaires
- Listes de prix : présentation des prix des services ou des produits sous forme de liste
- Dates : présentation structurée des rendez-vous à venir
Conseil
L’inverse des listes non ordonnées en HTML sont les HTML Ordered Lists, c’est-à-dire les listes HTML ordonnées. Celles-ci se caractérisent par le fait que les différents points de la liste sont numérotés et donc soumis à une hiérarchie claire.
Si vous souhaitez intégrer une liste non ordonnée en HTML, vous pouvez le faire à n’importe quel endroit de la zone de vos pages Web. Comme nous l’avons déjà mentionné, une balise d’introduction () et une balise de fermeture () servent de repères pour le début et la fin de la liste, tandis que vous définissez les différents points de la liste avec la balise d’introduction
- Point de liste 1
- Point de liste 2
- Point de liste 3
- ...
html
Since no specific indication was given for the list symbol in this case, HTML uses the standard bullet symbol (bullet), i.e. the typical centered point.
Web Hosting
State-of-the-art web hosting at the best price
- 3x faster, 60% savings
- High availability >99.99%
- Only at IONOS: up to 500 GB included
Unordered and nested lists in HTML
Although hierarchical lists in HTML are generally made with ordered lists, HTML offre également la possibilité de subordonner structurellement des éléments de liste. Pour de telles listes imbriquées, il suffit d’insérer d’autres listes non ordonnées à l’intérieur d’un élément existant, comme dans l’exemple suivant avec deux listes subordonnées :
Liste non ordonnée imbriquée :
- Fruits
- Pommes
- Oranges
- Navel
- Orange sanguine
- Mandarine
html
The main category “Fruit” is thus subdivided into subcategories “Apples” and “Oranges”, in which different varieties are in turn listed. For the user in the browser, everything looks something like this:
- `different ones are used.
Adapt list symbols list-style-type
CSS property list-style-typewhich can be applied via the HTML attribute style or an external style sheet, allows you to adapt the list symbols of unordered lists in HTML at any time. In this way, you can, for example, define the following symbols:
valeur-list-style-type |
Description |
|---|---|
disc
|
Filled circle; standard HTML choice without attributes style
|
circle
|
Unfilled circle |
square
|
Square |
none
|
No list symbol |
In the code, this stylistic adaptation looks like this if you want to use unfilled circles:
Note
For a more modular and reusable design, it is advisable to define CSS styles in a separate file or in the tag located in the section . This helps maintain a clear separation between content and formatting, while making code easier to manage and maintain.
