HTML - Listes
HTML offre aux auteurs Web trois façons de spécifier des listes d'informations. Toutes les listes doivent contenir un ou plusieurs éléments de liste. Les listes peuvent contenir -
<ul>- Une liste non ordonnée. Cela listera les éléments en utilisant des puces simples.
<ol>- Une liste ordonnée. Cela utilisera différents schémas de nombres pour lister vos articles.
<dl>- Une liste de définitions. Cela organise vos éléments de la même manière qu'ils sont disposés dans un dictionnaire.
Listes HTML non ordonnées
Une liste non ordonnée est une collection d'éléments associés qui n'ont pas d'ordre ou de séquence spécial. Cette liste est créée en utilisant HTML<ul>marque. Chaque élément de la liste est marqué d'une puce.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Cela produira le résultat suivant -
L'attribut de type
Vous pouvez utiliser typeattribut pour la balise <ul> pour spécifier le type de balle que vous aimez. Par défaut, c'est un disque. Voici les options possibles -
<ul type = "square">
<ul type = "disc">
<ul type = "circle">Exemple
Voici un exemple où nous avons utilisé <ul type = "square">
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Cela produira le résultat suivant -
Exemple
Voici un exemple où nous avons utilisé <ul type = "disc"> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Cela produira le résultat suivant -
Exemple
Voici un exemple où nous avons utilisé <ul type = "circle"> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Cela produira le résultat suivant -
Listes ordonnées HTML
Si vous devez placer vos éléments dans une liste numérotée au lieu de puces, alors la liste ordonnée HTML sera utilisée. Cette liste est créée en utilisant<ol>marque. La numérotation commence à un et est incrémentée de un pour chaque élément de liste ordonnée successif étiqueté <li>.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Cela produira le résultat suivant -
L'attribut de type
Vous pouvez utiliser typeattribut pour la balise <ol> pour spécifier le type de numérotation que vous aimez. Par défaut, c'est un nombre. Voici les options possibles -
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.Exemple
Voici un exemple où nous avons utilisé <ol type = "1">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Cela produira le résultat suivant -
Exemple
Voici un exemple où nous avons utilisé <ol type = "I">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Cela produira le résultat suivant -
Exemple
Voici un exemple où nous avons utilisé <ol type = "i">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Cela produira le résultat suivant -
Exemple
Voici un exemple où nous avons utilisé <ol type = "A">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Cela produira le résultat suivant -
Exemple
Voici un exemple où nous avons utilisé <ol type = "a">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Cela produira le résultat suivant -
L'attribut de départ
Vous pouvez utiliser startattribut pour la balise <ol> pour spécifier le point de départ de la numérotation dont vous avez besoin. Voici les options possibles -
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.Exemple
Voici un exemple où nous avons utilisé <ol type = "i" start = "4">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Cela produira le résultat suivant -
Listes de définitions HTML
HTML et XHTML prennent en charge un style de liste qui est appelé definition listsoù les entrées sont répertoriées comme dans un dictionnaire ou une encyclopédie. La liste de définitions est le moyen idéal pour présenter un glossaire, une liste de termes ou une autre liste de noms / valeurs.
La liste de définition utilise les trois balises suivantes.
- <dl> - Définit le début de la liste
- <dt> - Un terme
- <dd> - Définition du terme
- </dl> - Définit la fin de la liste
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>Cela produira le résultat suivant -