HTML-Elemente: Listen
Details, Bearbeiten in Web-Editoren

Auflistungen, Aufzählungen und Definitionslisten mit Einrückungen, sowie deren passende Listeneinträge

zum Anfang der SeiteÜberblick Elemente

Es gibt drei Formen von Listen:
Auflistung mittels Punkten: <ul> unordered list (im selfhtml "Aufzählungsliste" genannt)
Aufzählung mittels Zahlen: <ol> ordered list (im selfhtml "Nummerierte Liste" genannt)
Definitionsliste mit Einrückungen: <dl> definition list (im selfhtml "Definitionsliste" genannt)

Die einzelnen Listeneinträge der unordered list und der ordered list heißen <li> list item, die der definition list treten paarweise auf und heißen <dt> definition list term und <dd> definition list definition.

Tag Elementname original deutsche Übersetzung
<ul> unordered list Auflistung mittels Punkten "Aufzählungsliste"
<ol> ordered (numbered) list Aufzählung mittels Zahlen "Nummerierte Liste"
<dl> definition list / description list Definitionsliste, Beschreibungsliste
<li> list item Listeneintrag
<dt> definition list term / description list term …Ausdruck
<dd> definition list definition / description list description …Definition / …Beschreibung

zum Anfang der SeiteTypische Darstellung

Tag Beispiel, wie es dargestellt wird
<ul>
  • erster Listeneintrag
  • zweiter Listeneintrag
  • dritter Listeneintrag
<ol>
  1. erster Listeneintrag
  2. zweiter Listeneintrag
  3. dritter Listeneintrag
<dl>
HTML
Hypertext Markup Language
CSS
Cascading Style Sheets

zum Anfang der SeiteBeschreibung

Die einzelnen Listeneinträge der Listen <ul> und <ol> werden durch das HTML-Element <li> list item (im selfhtml "Listeneintrag" genannt) eingeschlossen.

Beispiel: Der HTML-Quellcode 

<ul>
   <li>erster Listeneintrag</li>
   <li>zweiter Listeneintrag</li>
   <li>dritter Listeneintrag</li>
</ul>

ergibt

Die Zeilen der Liste <dl> werden Paarweise abwechselnd durch die HTML-Elemente <dt> definition (list) term und <dd> definition (list) definition (im selfhtml "Ausdruck in der Definitionsliste" und "Definition in der Definitionsliste" genannt) eingeschlossen.

Beispiel: Der HTML-Quellcode 

<dl>
   <dt>HTML</dt>
   <dd>Hypertext Markup Language</dd>
   <dt>CSS</dt>
   <dd>Cascading Style Sheets</dd>
</dl>

ergibt

HTML
Hypertext Markup Language
CSS
Cascading Style Sheets

Listen können auch verschachtelt sein. Es können auch verschiedene Listen gemischt werden.
Zu beachten ist: Eine Unterliste muss innerhalb eines Listeneintrages vorkommen, da sie Teil dieses Listeneintrages ist! Sie muss also als gesamtes vor dem Endtag </li> stehen. Dabei darf vor und nach der Unterliste noch Text vom Listeneintrag stehen.
Eine Unterliste darf jedoch nicht zwischen zwei Listeneinträgen vorkommen: also nicht zwischen einem vorhergehenden </li> und einem nachfolgenden <li>.

Beispiel: Der HTML-Quellcode 

<ol>
   <li>erster Listeneintrag</li>
   <li>zweiter Listeneintrag
      <ul>
         <li>erster Listeneintrag der Unterliste vom zweiten Listeneintrag</li>
         <li>zweiter Listeneintrag der Unterliste vom zweiten Listeneintrag</li>
      </ul>
      noch ein Text vom zweiten Listeneintrag</li>
   <li>dritter Listeneintrag</li>
</ol>

ergibt

  1. erster Listeneintrag
  2. zweiter Listeneintrag
    • erster Listeneintrag der Unterliste vom zweiten Listeneintrag
    • zweiter Listeneintrag der Unterliste vom zweiten Listeneintrag
    noch ein Text vom zweiten Listeneintrag
  3. dritter Listeneintrag

zum Anfang der SeiteWeb-Editoren

Expression Web | BlueGriffon | Dreamweaver 8

Expression Web

Einfügen/Erstellen einer Liste
<ul>, <ol>, <dl>
Menü: nicht verfügbar
Symbolleiste Allgemein: "Formatvorlage"
Anmerkung: Für <dl> muss man anstelle von <dl> den ersten Eintrag, also "Definierter Begriff" <dt> wählen.
Tastenkombination: Strg+Umschalt+S (springt zur Symbolleister)
oder: Symbolleiste Allgemein: "Nummerierung" für <ol>, "Aufzählungszeichen" für <ul>

Einfügen eines weiteren Listeneintrages, auch in der Mitte der Liste (Einfügemarke steht am Ende des Eintrages, der oberhalb ist)
innerhalb einer <ul> bzw. <ol>):
Tastatur: Eingabetaste erzeugt ein neues <li> (in der Zeile darunter)
innerhalb einer <dl>
Tastatur: Eingabetaste erzeugt ein neues <dd> (in der Zeile darunter), wenn Einfügemarke in einem <dt> stand, also in einer ungeraden Zeile: 1., 3. usw.
Tastatur: Eingabetaste erzeugt ein neues <dt> (in der Zeile darunter), wenn Einfügemarke in einem <dd> stand, also in einer geraden Zeile: 2., 4. usw.

Beenden einer Listeneingabe
entweder Tastatur: zweimal Eingabetaste (Vorsicht: Funktioniert bei Definitionslisten <dl> nicht korrekt.)
oder einmal Eingabetaste, danach Rückschritttaste (Backspace)

Löschen eines Listeneintrages (ganzen Eintrag mit gesamten Text)
<ul> und <ol>: gesamten Listeneintrag <li> mit der Maus (linker Rand, Mauszeiger zeigt nach rechts-oben, klicken) oder in der Strukturleiste markieren, Entf-Taste oder Rückschritt-Taste;
oder alle Zeichen löschen und im leeren Listeneintrag zweimal zusätzlich die Entf-Taste oder Rückschritt-Taste drücken
<dl>: wie oben, nur je einmal für <dt> und einmal für <dd> oder gleich beide markieren

"Löschen" einer Liste (Umwandeln in Text)
alle Listen: ganze Liste markieren (mit Maus darüberziehen; oder irgendwo in Liste klicken und in der Strukturleiste je nach vorhandenen Listentyp <ul>, <ol> oder <dl> markieren)
danach: Symbolleiste Allgemein:  "Formatvorlage" Absatz auswählen; (Vorsicht: nicht Eingabetaste verwenden, sonst ist der gesamte Listentext gelöscht.)
oder Symbolleiste Allgemein: "Nummerierung" für <ol> bzw. "Aufzählungszeichen" für <ul> ausschalten

Ändern des Listentypes (Umwandeln in einen anderen Listentyp)
alle Listen: ganze Liste markieren (mit Maus darüberziehen; oder irgendwo in Liste klicken und in der Strukturleiste je nach vorhandenen Listentyp <ul>, <ol> oder <dl> markieren)
danach: Symbolleiste Allgemein:  "Formatvorlage" einen anderen Listentyp auswählen; (Vorsicht: nicht Eingabetaste verwenden, sonst ist der gesamte Listentext gelöscht.)
oder Symbolleiste Allgemein: "Nummerierung" für <ol> bzw. "Aufzählungszeichen" für <ul> anklicken 

Anmerkung: Umschalt+Tab funktioniert nicht.

Unterlisten
später

BlueGriffon

Einfügen/Erstellen einer Liste
<ul>
Menü: Einfügen | HTML 5 Element
Symbolleiste oben: Punkte (ungeordnete Liste)
<ol>
Menü: Einfügen | HTML 5 Element
Symbolleiste oben: Zahlen (geordnete Liste)
<dl>
Menü: Einfügen | HTML 5 Element (eher nicht machen)
Symbolleiste oben: lange waagrechte Striche=Zeilen (Definition Titel)
Symbolleiste Listen

Einfügen eines weiteren Listeneintrages, auch in der Mitte der Liste (Einfügemarke steht am Ende des Eintrages, der oberhalb ist)
innerhalb einer <ul> bzw. <ol>):
Tastatur: Eingabetaste erzeugt ein neues <li> (in der Zeile darunter)
innerhalb einer <dl>
Tastatur: Eingabetaste erzeugt ein neues <dd> (in der Zeile darunter), wenn Einfügemarke in einem <dt> stand, also in einer ungeraden Zeile: 1., 3. usw.
Tastatur: Eingabetaste erzeugt ein neues <dt> (in der Zeile darunter), wenn Einfügemarke in einem <dd> stand, also in einer geraden Zeile: 2., 4. usw.

Beenden einer Listeneingabe
entweder Tastatur: zweimal Eingabetaste
oder bei allen Listen: mit Eingabetaste einen neuen Listeneintrag erzeugen ("einen zuviel")
danach: Symbolleiste oben: eingeschaltene Liste durch nochmals anklicken ausschalten
danach: neue Auszeichnung (z.B. <p>, <h1> etc.) auswählen

Löschen eines Listeneintrages (ganzen Eintrag mit gesamten Text)
<ul> und <ol>: Listeneintrag <li> in der Strukturleiste markieren, Entf-Taste oder Rückschritt-Taste;
oder Listeneintrag <li> in der Strukturleiste markieren, Kontextmenü (rechte Maustaste) | Element löschen
oder alle Zeichen löschen und im leeren Listeneintrag einmal zusätzlich die Entf-Taste oder Rückschritt-Taste drücken
<dl>: wie oben, nur je einmal für <dt> und einmal für <dd>

"Löschen" einer Liste (Umwandeln in Text)
Alle Listeneinträge markieren und in der Symbolleiste die Schaltfläche Punkte (ungeordnete Liste) bzw. Zahlen (geordnete Liste) ausschalten - geht bei Definitions-/Beschreibungslisten nicht, da keines der beiden Symbole eingeschalten dargestellt wird.
Oder mit der Tastenkombination Umschalt+Tab-Taste die Listenebene verringern - da es aber die höchste Listenebene ist (es ist keine Unterliste) wird es zu einer Textstelle, aber ohne HTML-Element ("Inhalt Text"). Daher danach als "Absatz" festlegen.

Falls das ganze Element (mit der F2-Taste oder mittels der Strukturleiste) markiert ist, muss man die Schaltflächen in der Symbolleiste zwei mal anklicken (zuerst wird die Liste eingeschalten und erst beim zweiten mal ausgeschalten). Die Tastenkombination Umschalt+Tab-Taste funktioniert auch nicht.

Ändern des Listentypes (Umwandeln in einen anderen Listentyp)
Alle Listeneinträge markieren, entweder mit der Maus bzw. Tastatur, oder auch das ganze Element mit der F2-Taste oder mittels der Strukturleiste. Danach in der Symbolleiste die Schaltfläche Punkte (ungeordnete Liste) bzw. Zahlen (geordnete Liste) auswählen.
Anmerkung: Ändern in eine Definitions-/Beschreibungsliste geht nicht, da alle Listeneinträge <li> entweder in Titel <dt> oder in Definitionen/Beschreibungen <dd> umgewandelt wird, je nachdem welches Symbol man anklickt. Man kann nur in einem zweiten Arbeitsschritt jeden zweiten Listeneintrag entsprechend verändern.

Unterlisten
später
Tab-Taste und Umschalt+Tab-Taste

Dreamweaver

Einfügen einer Liste
<ul> Menü: Text | Liste | Ungeordnete Liste; oder Fenster: Eigenschaften | Punkte
<ol> Menü: Text | Liste | Geordnete Liste; oder Fenster: Eigenschaften | Zahlen
<dl> Menü: Text | Liste | Definitionsliste

Einfügen eines weiteren Listeneintrages, auch in der Mitte der Liste (Einfügemarke steht am Ende des Eintrages, der oberhalb ist)
<li> Taste: Eingabetaste (innerhalb von <ul> bzw. <ol>)
<dt>Taste: Eingabetaste (innerhalb von <dl>, wenn erste Einfügemarke in einer geraden Zeile steht: 2., 4. usw.)
<dd> Taste: Eingabetaste (innerhalb von <dl>, wenn erste Einfügemarke in einer ungeraden Zeile steht: 1., 3. usw.)

Beenden einer Listeneingabe
entweder Tastatur: zweimal Eingabetaste
oder alle Listen: mit Eingabetaste einen neuen Listeneintrag erzeugen ("einen zuviel")
danach: Menü: Text | Liste | Keine;
oder auch bei <ul>: Fenster: Eigenschaften | Punkte ausschalten
oder auch bei <ol>: Fenster: Eigenschaften | Zahlen ausschalten

Löschen eines Listeneintrages (ganzen Eintrag mit gesamten Text)
<ul> und <ol>: Listeneintrag <li> in der Statusleiste markieren, Entf-Taste; oder alle Zeichen löschen und im leeren Listeneintrag einmal zusätzlich die Entf-Taste drücken
<dl>: wie oben, nur je einmal für <dt> und einmal für <dd>
Vorsicht beim letzten Listeneintrag: nicht Zeichenweise mit der Entf-Taste arbeiten. Ist der Listeneintrag schon leer, so wird er nicht gelöscht, sondern bleibt erhalten und die nachfolgenden Zeilenumbrüche werden gelöscht! Daher rückt der nachfolgende Text vor und kommt so in die Liste, was ja nicht beabsichtigt ist.

"Löschen" einer Liste (Umwandeln in Text)
alle Listen: ganze Liste markieren (mit Maus darüberziehen; oder irgendwo in Liste klicken und in der Statusleiste je nach vorhandenen Listentyp <ul>, <ol> oder <dl> markieren)
danach: Menü: Text | Liste | Keine; (Vorsicht: nicht Eingabetaste verwenden, sonst ist der gesamte Listentext gelöscht.)
oder auch bei <ul>: Fenster: Eigenschaften | Punkte ausschalten
oder auch bei <ol>: Fenster: Eigenschaften | Zahlen ausschalten

Ändern des Listentypes (Umwandeln in einen anderen Listentyp)
alle Listen: ganze Liste markieren (mit Maus darüberziehen; oder irgendwo in Liste klicken und in der Statusleiste <ul>, <ol> oder <dl> markieren)
danach: Menü: Text | Liste | … und gewünschten Listentyp wählen
oder auch wenn <ul> gewünscht: Fenster: Eigenschaften | Punkte
oder auch wenn <ol> gewünscht: Fenster: Eigenschaften | Zahlen

Unterlisten
später

zum Anfang der SeiteBearbeitung im Quellcode

Listen (% lists)

nach unten ul
nach unten ol
nach unten li
nach unten dl
nach unten dt
nach unten dd