Überschrift strassencoder.ch
Logo strassencoder.ch
Überschrift Listen

Listen in HTML verwenden

Dazu müssen wir uns zunächst fragen warum verwenden wir Listen in HTML. Alles im Kopf behalten ist bei komplexen Abläufen schwierig. Warum arbeiten Unternehmen zum Beispiel mit Checklisten? Listen geben Sicherheit und minimieren Fehler. Listen sind wie ein roter Faden dem du folgen kannst. Helfen dir organisiert zu bleiben und den Überblick nicht zu verlieren. Die Vorteile sind also keinesfalls zu unterschätzen.

Ungeordnete HTML Listen

Eine ungeordnete Liste beginnt <ul> Start-Tag und endet mit dem </ul> End-Tag. Dazwischen befindet sich die Listen Element beginnend mit dem <li> Start-Tag und dem </li> End-Tag. Die Listen-Elemente werden dargestellt mit Aufzählunszeichen (kleine schwarze Kreise ist Standard). Das CSS list-style-type Eigenschaft wird verwendet zum definieren der Aufzählungseinheit:
disc Setzt das Listen Merkmal auf einen gefüllten Kreis (Vorlage)
circle Setzt das Listen Merkmal auf einen Kreis
square Setzt das Listen Merkmal auf einen Viereck
none Setzt das Listen Merkmal auf kein Zeichen
list-style-image: url('...'); Das Listen Merkmal wird dargestellt mit einem Bild
list-style-position: inside; Das Listen Merkmal wird innerhalb der Aufzählungen dargestellt
list-style-position: outside; Das Listen Merkmal wird ausserhalb der Aufzählungen dargestellt

Geordnete HTML Listen

Das HTML-Element vom <ol> Start-Tag und dem </ol> End-Tag definiert eine geordnete Listen. Dazwischen befinden sich die Listen Element beginnt mit dem <li> Start-Tag und dem </li> End-Tag . Die Listen-Elemente werden dargestellt mit Aufzählunszeichen (Nummerierung ist Standard). Das CSS list-style-type Eigenschaft wird verwendet zum definieren der Aufzählungseinheit:
list-style-type:decimal; Das Listen Merkmal wird nummeriert mit Nummern (Vorlage)
list-style-type:upper-alpha; Das Listen Merkmal wird nummeriert mit Grossbuchstaben
list-style-type:lower-alpha; Das Listen Merkmal wird nummeriert mit Kleinbuchstaben
list-style-type:upper-roman; Das Listen Merkmal wird nummeriert mit römischen Grosszeichen
list-style-type:lower-roman; Das Listen Merkmal wird nummeriert mit römischen Kleinzeichen
list-style-image: url('...'); Das Listen Merkmal wird dargestellt mit einem Bild
list-style-position: inside; Das Listen Merkmal wird innerhalb der Aufzählungen dargestellt
list-style-position: outside; Das Listen Merkmal wird ausserhalb der Aufzählungen dargestellt

HTML Definitionslisten

Auflistungen von Definitionen treten meistens in Glossaren auf – sprich Begriffe und deren Erklärungen. Die Definitionsbeschreibung <dd> wird standardmäßig ein wenig eingerückt angezeigt.
<dl> Englisch für „definition list“ – Definitionsliste.
<dt> Englisch „definition term“ – Definitionsbegriff.
<dd> Englisch „definition description“ – Definitionsbeschreibung.
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<style>
.mainmenu {
width: 80px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h3 style="color: dodgerblue; text-align:center">Ungeordnete Listen</h3>
<ul class="mainmenu" style="list-style-type:disc">
<li>Apfel</li>
<li>Birnen</li>
<li>Bananen</li>
</ul>
<ul class="mainmenu" style="list-style-type:circle">
<li>Milch</li>
<li>Kaffee</li>
<li>Zucker</li>
</ul>
<ul class="mainmenu" style="list-style-type:square">
<li>Hammer</li>
<li>Nagel</li>
<li>Holz</li>
</ul>
<ul class="mainmenu" style="list-style-type:none">
<li>Orangen</li>
<li>Kiwi</li>
<li>Bananen</li>
</ul>
<ul class="mainmenu" style="list-style-image: url('Bilder/Logo12Marker.png');">
<li>Orangen</li>
<li>Apfel</li>
<li>Bananen</li>
</ul>
<ul class="mainmenu" style="list-style-position: inside;">
<li>Orange</li>
<li>Apfel</li>
<li>Kiwi</li>
</ul>
<ul class="mainmenu" style="list-style-position: outside;">
<li>Kiwi</li>
<li>Apfel</li>
<li>Orangen</li>
</ul>
</body>
</html>
Überschrift BrowserAusgabe

Ungeordnete Listen

Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<style>
.mainmenu {
width: 80px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h3 style="color: dodgerblue; text-align:center">Geordnete Listen</h3>
<ol class="mainmenu" style="list-style-type:decimal">
<li>Milch</li>
<li>Kaffee</li>
<li>Zucker</li>
</ol>
<ol class="mainmenu" style="list-style-type:upper-roman">
<li>Brot</li>
<li>Butter</li>
<li>Marmelade</li>
</ol>
<ol class="mainmenu" style="list-style-type:lower-roman">
<li>Orangen</li>
<li>Kiwi</li>
<li>Trauben</li>
</ol>
<ol class="mainmenu" style="list-style-type:upper-alpha">
<li>Tomaten</li>
<li>Spargeln</li>
<li>Gurken</li>
</ol>
<ol class="mainmenu" style="list-style-type:lower-alpha">
<li>Hamburger</li>
<li>Pommes</li>
<li>Ketchup</li>
</ol>
<ol class="mainmenu" style="list-style-image: url('Bilder/Logo12Marker.png');">
<li>Orangen</li>
<li>Apfel</li>
<li>Bananen</li>
</ol>
<ol class="mainmenu" style="list-style-position: inside;">
<li>Birne</li>
<li>Apfel</li>
<li>Kiwi</li>
</ol>
<ol class="mainmenu" style="list-style-position: outside;">
<li>Kiwi</li>
<li>Apfel</li>
<li>Orangen</li>
</ol>
</body>
</html>
Überschrift BrowserAusgabe

Geordnete Listen

  1. Milch
  2. Kaffee
  3. Zucker
  1. Brot
  2. Butter
  3. Marmelade
  1. Orangen
  2. Kiwi
  3. Trauben
  1. Tomaten
  2. Spargeln
  3. Gurken
  1. Hamburger
  2. Pommes
  3. Ketchup
  1. Orangen
  2. Apfel
  3. Bananen
  1. Birne
  2. Apfel
  3. Kiwi
  1. Kiwi
  2. Apfel
  3. Orangen
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body>
<h3 style="color:dodgerblue; text-align:center">HTML Definitionsliste</h3>
<dl>
<dt>Kaffee</dt>
<dd>heisses schwarzes Getränk</dd>
<dt>Milch</dt>
<dd>kaltes weisses Getränk</dd>
</dl>
</body>
</html>
Überschrift BrowserAusgabe

HTML Definitionsliste

Kaffee
heisses schwarzes Getränk
Milch
kaltes weisses Getränk
Überschrift strassencoder.ch