Le Tutoriel de HTML List

View more Tutorials:

1- HTML Lists

En  HTML afin de créer une liste (List) vous pouvez utiliser la paire de l'étiquette  <ul>, <li> ou celle de  <ol>, <li> :
<h3>Unordered List (UL + LI)</h3>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

<h3>Ordered List (OL + LI)</h3>

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>
  • <UL> est l'abréviation de Unordered List, qui vous permet de créer une liste non ordonnée.
  • <OL> est l'abréviation de Ordered List, qui vous permet de créer une liste ordonnée.
  • <LI> est l'abréviation de List Item. Un élément (item) de la liste.
Les listes peuvent être imbriquées ensemble :
nested-example.html
<h3>Nested Unordered List</h3>

<ul>
    <li>HTML</li>
    <li>CSS
        <ul>
            <li>Basic CSS</li>
            <li>Advanced CSS</li>
        </ul>
    </li>
    <li>Javascript</li>
</ul>

<h3>Nested Ordered List</h3>

<ol>
    <li>HTML</li>
    <li>CSS
        <ol>
            <li>Basic CSS</li>
            <li>Advanced CSS</li>
        </ol>
    </li>
    <li>Javascript</li>
</ol>

<h3>Nested List (3)</h3>
<ol>
    <li>HTML</li>
    <li>CSS
        <ul>
            <li>Basic CSS</li>
            <li>Advanced CSS</li>
        </ul>
    </li>
    <li>Javascript</li>
</ol>

<h3>Nested List (4)</h3>
<ul>
    <li>HTML</li>
    <li>CSS
        <ol>
            <li>Basic CSS</li>
            <li>Advanced CSS</li>
        </ol>
    </li>
    <li>Javascript</li>
</ul>

2- Ordered-List Attributes

Contrairement à l'étiquette <UL>, l'étiquette <OL> possède plusieurs attributs (attribute) importants dont :
  • type
  • start
  • reversed

type

L'attribut  type  spécifie le type de numérotation (numbering type), qui peut prendre l'une des valeurs suivantes :
Type Description
"1" Utilise les chiffres (1,2, ..) pour numéroter la liste. (Par défaut)
"a" Utilise des minuscules (lowercase) pour numéroter la liste.
"A" Utilise des majuscules (uppercase) pour numéroter la liste.
"i" Utilise des chiffres romains (Roman numerals) minuscules (lowercase) pour numéroter la liste.
"I" Utilise des chiffres romains (Roman numerals) majuscule (uppercase) pour numéroter la liste.
<h3>OL type="1" (Default)</h3>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

<h3>OL type="i"</h3>
<ol type="i">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

<h3>OL type="I"</h3>
<ol type="I">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

<h3>OL type="a"</h3>
<ol type="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

<h3>OL type="A"</h3>
<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

reversed

L'attribut  reversed a la valeur  true/false. Si la valeur est  true, la liste sera numérotée dans l'ordre inverse.
ol-reversed-example.html
<h3>OL reversed = "false" (Default)</h3>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

<h3>OL reversed = "true"</h3>
<ol reversed="true">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

start

L'attribut  start spécifie la valeur de départ pour numéroter la liste.
ol-start-example.html
<h3>OL start ="3" type="1"</h3>
<ol start="3">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

<h3>OL start ="3" type="i"</h3>
<ol start="3" type="i">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

<h3>OL start ="3" type="a"</h3>
<ol start="3" type="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

3- CSS list-style-type

La propriété (property) CSS list-style-type est utilisée pour l'étiquette  <UL> (Unordered List) pour définir le style des éléments (item) de la liste.
CSS list-style-type peut obtenir une des valeurs :
  • disc
  • circle
  • square
  • none
ul-styles-example.html
<h3>list-style-type: dist (Default)</h3>

<ul style="list-style-type: dist;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

<h3>list-style-type: circle</h3>

<ul style="list-style-type: circle;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

<h3>list-style-type: square</h3>

<ul style="list-style-type: square;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

<h3>list-style-type: none</h3>

<ul style="list-style-type: none;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

4- CSS list-style-image

La propriété (property) CSS list-style-image  est utilisé pour l'étiquette  <UL> pour afficher une image alternative pour les​​​​​​​ ::marker.
Remarque : list-style-image a priorité sur le list-style-type. Si l'image fournie par list-style-image n'existe pas ou ne peut pas afficher le list-style-type à utiliser.
<ul style="list-style-image: URL('../../_testdatas_/right-arrow-16.png')">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

5- CSS list-style-position

La propriété (property) CSS list-style-position est utilisé pour les étiquettes  <UL>, <OL> afin de définir la position des  ::marker.
Les valeurs possibles de  CSS list-style-position ​​​​​​​sont :
  • outside
  • inside
  • initial
  • inherit
list-style-position Description
outside Des ::marker sont situé à l'extérieur des éléments (item) de la liste.
inside Des ::marker sont situé à l'intérieur des éléments (item) de la liste.
list-style-position-example.html
<h3>list-style-position: outside (Default)</h3>

<ul style="list-style-position: outside">
    <li>
        Coffee - A brewed drink prepared from roasted coffee beans,
        which are the seeds of berries from the Coffea plant
    </li>
    <li>
        Tea - An aromatic beverage commonly prepared by pouring hot
        or boiling water over cured leaves of the Camellia sinensis,
        an evergreen shrub (bush) native to Asia
    </li>
</ul>

<h3>list-style-position: inside</h3>

<ul style="list-style-position: inside">
    <li>
        Coffee - A brewed drink prepared from roasted coffee beans,
        which are the seeds of berries from the Coffea plant
    </li>
    <li>
        Tea - An aromatic beverage commonly prepared by pouring hot
        or boiling water over cured leaves of the Camellia sinensis,
        an evergreen shrub (bush) native to Asia
    </li>
</ul>

6- CSS margin, padding

L'image ci-dessous montre la structure de la HTML List et vous pouvez utiliser CSS pour modifier son margin/padding.

Voici un exemple de margin/padding personnalisée de la HTML List :
margin-padding-example.css
ul {
  background: #3399ff;
  padding: 20px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}

ol {
  background: #ff9999;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
margin-padding-example.html
<!DOCTYPE html>
<html>

<head>
    <title>CSS List</title>
    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="margin-padding-example.css" />
</head>

<body>

    <h3>ul {padding: 20px;} ul li {margin: 5px}</h3>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>

    <h3>ol {padding: 20px;} ol li {margin-left: 35px; padding: 5px;}</h3>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ol>

</body>

</html>

View more Tutorials: