HTML – Listen

Was sind Listen in HTML?

Listen werden verwendet, um Informationen übersichtlich und strukturiert darzustellen. HTML bietet drei wichtige Listenarten: ungeordnete Listen, geordnete Listen und Beschreibungslisten.

1. Ungeordnete Listen

Eine ungeordnete Liste wird mit dem HTML-Element <ul> erstellt. Die einzelnen Einträge stehen innerhalb von <li>. Die Reihenfolge ist dabei nicht wichtig.

HTML-Code

<ul>
    <li>Apfel</li>
    <li>Banane</li>
    <li>Orange</li>
</ul>

Ergebnis

• Apfel
• Banane
• Orange

2. Geordnete Listen

Eine geordnete Liste wird mit <ol> erstellt. Die Einträge werden automatisch nummeriert. Diese Listenart eignet sich besonders für Anleitungen und Arbeitsschritte.

HTML-Code

<ol>
    <li>Computer einschalten</li>
    <li>Browser öffnen</li>
    <li>Webseite aufrufen</li>
</ol>

Ergebnis

1. Computer einschalten
2. Browser öffnen
3. Webseite aufrufen

3. Nummerierung verändern

Mit dem Attribut type kann die Nummerierung einer geordneten Liste verändert werden.

HTML-Code

<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>PHP</li>
</ol>

Ergebnis – Buchstaben

1. HTML
2. CSS
3. PHP

HTML-Code – römische Zahlen

<ol type="I">
    <li>HTML</li>
    <li>CSS</li>
    <li>PHP</li>
</ol>

Ergebnis – römische Zahlen

1. HTML
2. CSS
3. PHP

4. Verschachtelte Listen

Eine Liste kann weitere Listen enthalten. Diese werden als verschachtelte Listen bezeichnet. Damit können Hauptpunkte und Unterpunkte dargestellt werden.

HTML-Code

<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>PHP</li>
            <li>MySQL</li>
        </ul>
    </li>
</ul>

Ergebnis

• Frontend
  • HTML
  • CSS
• Backend
  • PHP
  • MySQL

5. Beschreibungslisten

Beschreibungslisten werden mit <dl> erstellt. Mit <dt> wird ein Begriff angegeben und mit <dd> die dazugehörige Beschreibung.

HTML-Code

<dl>
    <dt>HTML</dt>
    <dd>Struktur einer Webseite</dd>

    <dt>CSS</dt>
    <dd>Gestaltung einer Webseite</dd>

    <dt>PHP</dt>
    <dd>Serverseitige Programmierung</dd>
</dl>

Ergebnis

HTML

Struktur einer Webseite

CSS

Gestaltung einer Webseite

PHP

Serverseitige Programmierung

6. Listen mit CSS gestalten

Mit CSS kann das Aussehen einer Liste verändert werden. Beispielsweise können quadratische Aufzählungszeichen verwendet werden.

HTML- und CSS-Code

<ul style="list-style-type: square;">
    <li>Rot</li>
    <li>Grün</li>
    <li>Blau</li>
</ul>

Ergebnis

• Rot
• Grün
• Blau

7. Übersicht der HTML-Listen

8. Praktische Übungen

<ul></ul>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>PHP</li>
</ul>

<ol></ol>

<ol>
    <li>Planung</li>
    <li>Programmierung</li>
    <li>Testen</li>
</ol>

Listeneintrag

<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>PHP</li>
</ol>

<ol type="I">
    <li>HTML</li>
    <li>CSS</li>
    <li>PHP</li>
</ol>

<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </li>
</ul>

<dl>

<dl>
    <dt>HTML</dt>
    <dd>Struktur einer Webseite</dd>

    <dt>CSS</dt>
    <dd>Gestaltung einer Webseite</dd>
</dl>

list-style-type

<ul style="list-style-type: square;">
    <li>Rot</li>
    <li>Grün</li>
    <li>Blau</li>
</ul>

Zusammenfassung

HTML bietet verschiedene Möglichkeiten, Listen zu erstellen. Ungeordnete Listen verwenden Aufzählungszeichen, geordnete Listen verwenden Nummerierungen. Beschreibungslisten eignen sich besonders für Begriffe und Erklärungen. Mit CSS kann das Aussehen der Listen individuell angepasst werden.