Mes listes UL, OL, ou listes imbriquées ne sont pas valides

Astucehtml

Publié par le , mis à jour le (125042 lectures)

xhtml html liste imbrication

Les principales listes en CSS sont les listes non ordonnées <ul> et les listes ordonnées <ol>.

Listes simples

Pour écrire des listes valides, il faut retenir les points suivants:

  1. Un élément <ul> ou un élément <ol> ne peuvent contenir que des éléments <li> (items de liste) en guise d'enfants directs.
  2. Un élément <li>  peut contenir du texte, des éléments de type en-ligne, ou encore des éléments de type bloc. On peut donc placer une série de paragraphes dans un item de liste.

Voici un exemple de liste valide (précédée d'un titre):

<h2>Nos services</h2>
<ul>
  <li>Conception de sites web</li>
  <li>Hébergement</li>
  <li>Développement d'applications web</li>
</ul>

Celle-ci est valide également:

<h2>Nos services</h2>
<ul>
  <li>
    <h3>Conception de sites web</h3>
    <p>Nous concevons des sites funs et branchés, frais et bigarrés.</p>
    <p>Nous travaillons avec des technologies qui fleurent bon le bisounours.</p>
  </li>
  <li>
    <h3>Hébergement</h3>
    <p>Besoin de caser vos pages quelque part?</p>
  </li>
  <li>
    <h3>Développement d'applications web</h3>
    <p>Plus agile que nos applications, tu meurs (ou bien tu te reconvertis comme contorsionniste extraordinnaire).</p>
  </li>
</ul>

Le choix entre liste non ordonnée <ul> et liste ordonnée <ol> n'est pas toujours évident. Les listes ordonnées sont utiles pour une liste d'éléments dont l'ordre ne doit pas être modifié (les étapes d'une procédure, par exemple). Mais on les utilise aussi lorsqu'on veut marquer plus fortement une énumération.

Jet li

Listes imbriquées

On utilise les listes imbriquées essentiellement pour:

  • des tables des matières;
  • des listes de liens hiérarchisées (plan du site ou menu déroulant).

La syntaxe valide des listes imbriquées découle des règles que nous avons rappelé plus haut: les <ul> et <ol> ne peuvent contenir que des <li>, et les <li> peuvent contenir tout élément de type en-ligne ou de type bloc. Ce qui signifie qu'une liste de deuxième niveau devra forcément être placée dans un <li>.

Voici un exemple qui pourrait correspondre à un menu déroulant, à un plan de site, ou à un menu latéral où les sous-menus sont affichés en léger décalage, par exemple.

<ul>
  <li>
    <a href="/">Accueil</a>
  </li>
  <li>
    <a href="/services/">Nos services</a>
    <ul>
      <li><a href="/services/web/">Conception de sites web</a></li>
      <li><a href="/services/hebergement/">Hébergement</a></li>
      <li><a href="/services/developpement/">Développement d'applications web</a></li>
    </ul>
  </li>
  <li>
    <a href="/entreprise/">L'entreprise</a>
    <ul>
      <li><a href="/entreprise/equipe/">Notre équipe</a></li>
      <li><a href="/entreprise/historique/">Historique</a></li>
    </ul>
  </li>
  <li>
    <a href="/contact/">Nous contacter</a>
  </li>
</ul>

Pour vérifier que vos listes imbriquées sont bien codées, n'oubliez pas d'utiliser le validateur http://validator.w3.org/

Quiz

Testez vos connaissances avec un Quiz HTML

Commentaires

Si on me rajoute 12 heures dans la journée (réservées donc pour le sommeil !) je m'y mets de suite. Là c'est dans ma "To Be Learned List" :D

Bonjour Raphaël,

Selon quel(s) critère(s) déclares-tu un site comme étant "accessible" dans ta liste des "sites web professionnels conformes" ?

Je me suis posé la question en voyant que le site de la BNF obtient cette mention alors qu'il ne remplit pas tous les critères AccessiWeb Bronze...

Effectivement personnellement niveau accessibilité je lui mettrais plus du simple A que du double voir rien.

Système de menu deroulant non navigable au clavier, texte qui disparait si ont grossi la taille des caratères, design non redimensionnable, typo peu lisibile par moment (taille et contraste). Utilisation massive des titles alors que ce n'est pas nécessaire.
système de frame non accessible
www.bnf.fr/pages/zNavigat...
formulaire non accessibe (sans fieldset ni label etc)
pop non accessible ni averti

Et pour info les pages intérieures sont encore en table

Pourquoi "sans Warning" ? ça n'aurait aucun sens. Les avertissements sont là justement pour dire "ça peut être correct mais ça peut aussi ne pas l'être, vérifiez donc". Or le principe d'un avertissement c'est justement que ça peut être correct, donc qu'il n'y a aucune raison de l'éviter.

Pour exemple, un des avertissements que met "Accès pour tous" sur une de mes pages :
"""Variable ! Priorité 2 - Vérifiez que vous utilisez bien les balises <q> <cite> <blockquote> pour introduire une citation."""

Mon blockquote est effectivement là pour une citation, il me met un avertissement. Pour ne pas avoir l'avertissement il faudrait que je dégrade ma page en retirant certaines informations utiles (la balise <blockquote>), et ça ne la rendra pas plus accessible.

Puis bon, je suis de ceux qui doutent fortement qu'on puisse faire une "validation" d'accessibilité de manière automatique. L'accessibilité si ça se résolvait et détectait automatiquement ça ne serait plus un problème à la base (vu que ça pourrait être géré automatiquement).

"Ho, du dublin core dans la source de la page....Je coyais qu'ils ne voulaient pas s'y mettre..."

Jamais entendu parlé d'un refus de Dublin Core par la Bnf, ils en parlent même un peu sur le site, la première référence datant de 2000:
www.bnf.fr/pages/liens/do...

Les bibliothèques disposent de métadonnées depuis bien avant la naissance du web ;-)

@François Palaci : "Selon quel(s) critère(s) déclares-tu un site comme étant "accessible" dans ta liste des "sites web professionnels conformes" ?"

--> J'utilise le Validateur d'Accès Pour Tous, même si les validateurs automatiques d'accessibilité ne vaudront jamais des véritables tests à la main.

Je rejoins Goetsu sur avis d'accéssibilité.
J'aimerais savoir comment un menu déroulant parfois déroutant pour un utilisateur "normal" peut passer les critères d'accés pour tous ?
D'autant que sur cette page par exemple, le menu déroulant est tout simplement désactivé sur Firefox 1.0!
www.bnf.fr/pages/zNavigat...
Et sur beaucoup d'autres pages aussi.
Par ailleurs, le site ne semble tableless que sur sa page d'accueil.
Il comporte des tableaux et des frames quasiment partout.

Si je puis me permettre une petite remarque aussi ... Les menus sont complétement décalé sous Opéra...

Mais cependant, la présentation est bien faite, et l'ensemble donne bien ! Il semble léger et très attrayant !

C'est « Bibliothèque nationale de France ». Il est inutile de rappeler le sigle quand on cite le nom complet de l'institution. Son site Web l'écrit bien ainsi et même le logo en tête de page le rappelle en mettant BnF ce qui constitue une faute pour un sigle. Certains acceptent l'écriture des acronymes (ce qui n'est pas le cas ici) avec juste une majuscule en tête ou même tout en minuscule pour les très courants, mais jamais en mélangeant minuscules et majuscules à l'intérieur du sigle.

Merci pour ce petit tuto, je rajouterai juste ça pour les listes numérotées.

type = "1" Les éléments de la liste seront numérotés avec des numéros (par défaut)

type = "A" Les éléments de la liste seront numérotés en majuscules

type = "a" Les éléments de la liste seront numérotés en minuscules

type = "I" Les éléments de la liste seront numérotés avec des chiffres romains en majuscule

type = "i" Les éléments de la liste seront numérotés avec des chiffres romains minuscules

Exemple

<ol type="1">

<li>Pendentifs</li>

<li>Boucles d'oreilles</li>

<li>Colliers</li>

</ol>

https://www.krossin.fr/