HTML & CSS pour débutants (Partie 06): Listes

Il existe différents types de listes en HTML. D'abord, il y a les listes à puces. Avec ce type de liste, chaque élément de la liste est équipé d'un point d'insertion, également appelé puce.

Les listes à puces sont introduites par l'élément ul. Les éléments individuels de la liste sont marqués par l'élément li.

<p>Atuelle Themen aus dem Forum</p>
<ul>
  <li>CSS wird nicht weiter ausgeführt</li>
  <li>Showroom Hollywood Stil der 40er</li>
  <li>Ausklappliste CSS</li>
  <li>PHP connect/disconnect</li>
  <li>Mein kleiner Showroom - Anfänger bittet um Tipps!</li>
</ul>

Voici un aperçu du résultat dans le navigateur :

Un point d'insertion est ajouté avant chaque élément. L'apparence par défaut est définie par les navigateurs. Bien qu'il existe des attributs pour influencer l'apparence des listes, ceux-ci ne devraient plus être utilisés. À la place, les propriétés CSS entrent en jeu.

Il est possible de nester des listes à puces. Jetez d'abord un coup d'œil à l'image suivante :





Cela illustre ce qu'implique un tel imbriquement.

La syntaxe se présente comme suit :

<ul>
  <li>Tutorials
    <ul>
      <li>2D</li>
      <li>3D</li>
      <li>Web</li>
    </ul>
  </li>
  <li>Videotrainings
    <ul>
      <li>3D</li>
      <li>Mediengestaltung</li>
      <li>Web</li>
    </ul>
  </li>
  <li>Tipps</li>
  <li>Shops</li>
</ul>

À l'intérieur d'un élément de liste, une autre liste peut être présente. Il n'est d'ailleurs pas nécessaire que cela soit toujours une liste à puces. En réalité, d'autres types de listes - qui seront présentés dans ce tutoriel - peuvent également être insérés.

D'ailleurs, dans HTML5, il n'est pas obligatoire d'utiliser la balise de fermeture </li>. Malgré une meilleure lisibilité, je recommande toujours de la fermer. Cependant, quelque chose comme ceci serait tout de même syntaxiquement correct :

<p>Die aktuellen Themen aus dem Forum</p>
<ul>
  <li>CSS wird nicht weiter ausgeführt
  <li>Showroom Hollywood Stil der 40er
  <li>Ausklappliste CSS
  <li>PHP connect/disconnect
  <li>Mein kleiner Showroom - Anfänger bittet um Tipps!
</ul>

Listes numérotées

En plus des listes à puces, il est possible de définir des listes numérotées. Encore une fois, voici une image montrant ce que sont ces listes numérotées.

Les éléments de liste se voient assigner des numéros séquentiels. Les listes numérotées sont introduites par l'élément ol.

L'exemple suivant montre comment utiliser cet élément.

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>XML</li>
</ol>

Tout comme pour les listes à puces, les éléments individuels sont marqués par l'élément li.

Théoriquement, il est également possible de nester des listes à puces.

<ol>
  <li>Tutorials
    <ol>
      <li>2D</li>
      <li>3D</li>
      <li>Web</li>
    </ol>
  </li>
  <li>Videotrainings
    <ol>
      <li>3D</li>
      <li>Mediengestaltung</li>
      <li>Web</li>
    </ol>
  </li>
  <li>Tipps</li>
  <li>Shops</li>
</ol>

Cependant, le résultat dans le navigateur est décevant.





Ce schéma de numérotation n'est pas atteint de cette manière :

1. Tutorials 2D

1.1 3D

1.2 Web

2. Videotrainings 3D
   
   2.1 Mediengestaltung
   
   2.2 Web
3. Tipps
4. Shops
   
   Ce n'est pas possible avec du HTML pur. En réalité, il est nécessaire de recourir au CSS pour numéroter automatiquement le contenu selon ce schéma.
   
   

Listes de définitions

Une autre variante de liste sont les listes de définitions. Voici un exemple montrant à quoi ressemble une telle liste dans le navigateur :





Les glossaires sont le principal domaine d'application des listes de définitions. Voici la syntaxe ayant conduit à la sortie précédemment montrée :

<dl>
   <dt>AM</dt>
      <dd>AM - Courrier aérien</dd>
      <dd>AM - Marshal de l'air</dd>
      <dd>AM - Amberg</dd>
      <dd>AM - Américium</dd>
      <dd>AM - Amstetten</dd>
   <dt>AN</dt>
      <dd>AN - ci-dessus nommé</dd>
      <dd>AN - Nœud d'Accès</dd>
      <dd>AN - Ancône</dd>
</dl>

Bei Definitionslisten hat man es immer mit drei Elementen zu tun. Eingeleitet werden die Listen durch das dl-Element. Das ist also die äußere Struktur. Der zu definierende Ausdruck wird durch ein dt-Element gekennzeichnet. Das ist im Endeffekt der Definitionsbegriff. Die Definitionsbeschreibung wiederum wird über das dd-Element angegeben.

Eine Verschachtelung von Definitionslisten ist übrigens ebenfalls möglich. Das funktioniert dann genauso, wie das bei den anderen Listenvarianten gezeigt wurde.

Wie die Definitionslisten standardmäßig aussehen, wird wieder durch die Browser bestimmt. Letztendlich könnt ihr dann aber über CSS das gewünschte Layout selbst festlegen.

In früheren HTML-Versionen gab es übrigens noch Menü- und Verzeichnislisten. Verwendet wurden dafür die beiden Elemente menu und dir. Das dir-Element ist in HTML5 nicht mehr enthalten. Anders sieht es mit menu aus. Dieses Element wurde neu implementiert und soll künftig für Kontextmenüs und Toolbars verwendet werden können. Hier ein Beispiel dafür, wie sich das W3C eine typische menu-Anwendung vorstellt:

<menu type="toolbar">
 <li>
  <menu label="File">
   <button type="button" onclick="fnew()">Nouveau...</button>
   <button type="button" onclick="fopen()">Ouvrir...</button>
   <button type="button" onclick="fsave()">Enregistrer</button>
   <button type="button" onclick="fsaveas()">Enregistrer sous...</button>
  </menu>
 </li>
 <li>
  <menu label="Edit">
   <button type="button" onclick="ecopy()">Copier</button>
   <button type="button" onclick="ecut()">Couper</button>
   <button type="button" onclick="epaste()">Coller</button>
  </menu>
 </li>
 <li>
  <menu label="Help">
   <li><a href="help.html">Aide</a></li>
   <li><a href="about.html">À propos</a></li>
  </menu>
 </li>
</menu>

Momentan wird das in dieser Form allerdings noch von keinem Browser unterstützt.





Daher sollte menu zum jetzigen Zeitpunkt auch noch nicht eingesetzt werden.

Listen gestalten

Ein Hinweis noch zu den Listen. Auf vielen Webseiten wird für die Gestaltung von Listen auf entsprechende HTML-Attribute gesetzt. So kann man beispielsweise über <ul type="square"> dafür sorgen, dass vor den Einträgen der Aufzählungslisten Rechtecke angezeigt werden.





Ebenso lässt sich für nummerierte Listen die Art der Nummerierung festlegen.

<ol type="A">

Hier gilt aber, dass man eben nicht alles einsetzen sollte, was angeboten wird. Besser geeignet sind die entsprechenden CSS-Eigenschaften. Ihr solltet diese also tatsächlich nutzen, um die Listen euren Wünschen gemäß anzupassen. Ausführliche Informationen zu CSS folgen im Rahmen dieser Reihe.