web-dev-qa-db-fra.com

quand utiliser UL ou OL en html?

Semble interchangeable?

htmlsemantics
62
omg

UL signifie "liste non ordonnée". OL signifie "liste ordonnée".

UL vous obtient des puces. OL vous obtient des numéros.

Certainement pas interchangeable.

83
Randolpho

En termes mathématiques (hé, pourquoi pas?), Un <ol> représente une séquence, tandis que <ul> représente un ensemble. Réorganiser les éléments d'une liste ordonnée change la signification de la liste. Les réorganiser dans une liste non ordonnée ne le fait pas.

Il s'agit d'une bonne règle de base pour le type de liste à utiliser. Si la modification de l'ordre des éléments rend la liste incorrecte, vous souhaitez utiliser <ol>. Si la commande n'a pas d'importance, utilisez <ul>.

54
Ben Blank

Avec <ol> l'ordre des données est important et sera affiché (par défaut) tandis qu'avec <ul>, l'ordre n'est pas aussi important. Exemple:

<p>Tomorrow I will</p>
<ol>
 <li>Wake up</li>
 <li>Have breakfast</li>
 <li>Go to sleep</li>
</ol>
<p>During breakfast, I will eat</p>
<ul>
 <li>Butter</li>
 <li>Eggs</li>
 <li>Bacon</li>
</ul>
46
basaundi

L'une est la liste ordonnée (OL), c'est pour les choses qui ont un ordre défini et distinct. Il y a une raison pour laquelle ils sont organisés.

L'autre (UL) est une liste non ordonnée, qui est juste une collection de choses dans aucun ordre spécifié. Leur organisation est banale.

26
Ian Elliott

Haha, tant de réponses!

Lorsque HTML est sorti pour la première fois, il y avait OL et UL , qui, comme tous des autres affiches ont dit, signifiait la liste ordonnée et la liste non ordonnée.

La différence était facile. OLs affiché ... un numéro à côté d'eux. Ou un chiffre romain, ou une lettre! Vous pouvez même contrôler s'il utilise des symboles en majuscules ou en minuscules! Cool!

Les UL vous ont donné des balles. 3 types de balles, même - disques (cercles creux), carrés (carrés remplis), cercles (cercles remplis.)

Il n'y avait pas de CSS. Au-delà de ces attributs, il n'y avait pas vraiment de moyen de personnaliser les formats de liste (et les marges et les indentations et tout le reste.) Donc, cette distinction était importante.

De nos jours, tout est CSS. En fait, les gens de w3 veulent que vous utilisiez des styles plutôt que l'attribut html "type" que vous utilisiez auparavant. Donc, utiliser UL vs OL n'a pas vraiment d'importance, si vous êtes l'un d'entre eux de nouveaux utilisateurs CSS.

CSS vous permet de modifier le type de puce, ou d'utiliser une image, ou de modifier les marges/styles/indentations, ou même de ne pas afficher de puce du tout.

Modifier à nouveau: Cette réponse n'est pas vraiment destinée à répondre aux mérites sémantiques de UL vs OL. Mais techniquement (vous savez, au niveau des bits et octets), ce qui précède décrit les différences de comportement.

20
poundifdef

OL:

  1. Élément de liste 1
  2. Élément de liste 2

UL:

  • Élément de liste 1
  • Élément de liste 2

OL est une liste ordonnée, UL est une liste non ordonnée

13
Zach

Comme la question demande "quand les utiliser", j'ai pensé approprié d'offrir des exemples de quand, je décide généralement d'utiliser OL quand je veux une série d'étapes, et UL quand je veux offrir les choix:

Liste ordonnée

Ici, les étapes sont critiques pour l'analyse de rentabilisation, nous devons effectuer les étapes dans cet ordre, donc une liste ordonnée est utilisée.

Les étapes de paiement sur le commerce électronique, ces étapes seront dans cet ordre.

<ol>
    <li>shipping</li>
    <li>billing</li>
    <li>summary</li>
    <li>confirmation</li>
</ol>

Liste non ordonnée

Un utilisateur peut décider de l'ordre dans lequel il choisit d'interagir avec ces choix

<ul>
    <li>Contact Us</li>
    <li>Newsletter Signup</li>
    <li>Terms</li>
    <li>Log out</li>
</ul>
7
Neil

Je pense que c'est un problème sémantique, car les numéros/puces peuvent être modifiés par CSS.

Les listes ordonnées doivent être des choses comme des instructions ou toute information séquentielle.

Les listes non ordonnées devraient être tout le reste.

7
Matthew Groves

Utilisez OL lorsque vous répertoriez les étapes qui doivent être effectuées dans un certain ordre. Utilisez UL lorsque vous répertoriez des articles sans ordre d'importance particulier.

3
joebert

http://techuap.com/category/tips/computer-programming-tips

Utilisez OL lorsque vous répertoriez les étapes à effectuer dans un certain ordre. Utilisez UL lorsque vous répertoriez des éléments sans ordre d'importance particulier. Par défaut, ul vous donne des listes à puces. et ol listes numérotées, bien que cela puisse être édité en css. merci ..

1
arya sm

ul signifie liste non ordonnée. C'est pour les listes en whick, peu importe l'ordre dans lequel les éléments de la liste sont.

ol signifie liste ordonnée. C'est pour les listes qui sont numérotées ou qui montrent d'une manière ou d'une autre qu'elles ont un ordre spécifique.

Par défaut, ul vous donne des listes à puces et des listes numérotées, bien que cela puisse être modifié en CSS.

1
Andrew Marsh

Dans certains cas (spécifiquement utilisés par les lecteurs d'écran pour les personnes ayant des besoins spéciaux), vous souhaiterez peut-être avoir une liste commandée, mais aucun numéro ne leur sera associé en raison de la conception visuelle. Ex. lorsque vous avez dit des instructions sur une page pour remplir un formulaire et que vous souhaitez que les lecteurs d'écran profitent des articles commandés dans les instructions, cela sera utile. À toutes fins visuelles, elles peuvent être exactement identiques par le biais de CSS. Ce sont les sémantiques (non visuelles, mais utiles au lecteur d'écran) qui sont différentes et parfois utiles.

1
karora