x

HTML Grundkurs: Listen erstellen

In diesem Tutorial zeigen wir dir, wie du sortierte und unsortierte Listen erstellst. Darüber hinaus zeigen wir dir, wie du Listen verschachtelst.

Play Video

Die 3 verschiedenen Listentypen

Man unterscheidet im HTML zwischen 3 verschiedenen Listentypen. Es gibt geordnete Listen, ungeordnete Listen und Beschreibungslisten. Alle Listentypen verfügen über ein öffnendes und ein schließendes Tag.

Geordnete Listen, sind nummerierte Listen, bei denen die Reihenfolge der Elemente wichtig ist. Für geordnete Listen verwenden man das OL-Tag. „OL“ steht dabei für „ordered list“, was auf Deutsch „geordnete Liste“ bedeutet.

Bei ungeordneten Listen ist die Reihenfolge der Elemente nicht so wichtig. Standardmäßig werden ungeordnete Listen mit Aufzählungszeichen (englisch: bullet points) versehen. Für ungeordnete Listen verwendet man das UL-Tag. „UL“ steht dabei für „unordered list“, was auf Deutsch „ungeordnete Liste“ bedeutet. Diese Liste verwendet man zum Beispiel für die Auflistung der Menüpunkte einer Navigationsleiste.

Der 3. Listentyp sind Beschreibungslisten. Diese Liste kann man zum Beispiel für Glossare verwenden. Für Beschreibungslisten verwendet man das DL-Tag. Da Beschreibungslisten selten zum Einsatz kommen, gehen wir in diesem Tutorial nicht weiter auf diesen Listentyp ein.

Eine sortierte Liste erstellen

Wir werden dir jetzt zeigen, wie du im HTML eine Liste erstellst.

Öffne dazu deine index.html Datei. Erstelle dann eine geordnete Liste, indem du ein öffnendes und ein schließendes OL-Tag erstellst. Innerhalb des öffnenden und des schließenden OL-Tag erstellst du 4 Einträge, die du jeweils mit einem öffnenden und mit einem schließenden LI-Tag von einander trennst.

Speichere dann deine Datei ab und öffne Sie in einem Browser.

<ol> <li>Eintrag 01</li> <li>Eintrag 02</li> <li>Eintrag 03</li> <li>Eintrag 04</li> </ol>

Eine verschachtelte Liste erstellen

Jetzt möchten wir dir noch zeigen, wie du deine Liste verschachtelst. Das bedeutet, wir erstellen jetzt in deiner Liste eine neue Liste. Verschachtelte Listen verwendet man zum Beispiel, um einem Listepunkt Unterpunkte hinzuzufügen.

Öffne deine index.html Datei und füge dem 3. Eintrag deiner sortierten Liste innerhalb der LI-Tags eine neue und unsortierte Liste hinzu. Falls deine Liste nun genau wie meine aussieht, hast du alles richtig gemacht.
Speichere deine Datei ab und öffne Sie wieder in deinem Browser, um das Ergebnis deiner verschachtelten Liste zu sehen.

<ol> <li>Eintrag 01</li> <li>Eintrag 02</li> <li>Eintrag 03 <ul> <li>Eintrag A</li> <li>Eintrag B</li> <li>Eintrag C</li> </ul> </li> <li>Eintrag 04</li> </ol>

 

Im nächsten Tutorial zeigen wir dir, wie du eine Menüstruktur erstellst. Eine Menüstruktur oder auch Navigationsleiste genannt, ist für eine Webseite mit mehreren Unterseiten extrem wichtig.

Die index.html Datei:

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.3, user-scalable=yes"> <meta name="description" content="Das ist die index.html Datei aus dem SIFA Digital HTML Grundkurs."> <meta name="keywords" content="html, grundkurs, tutorial, youtube, sifa digital"> <title>Index - HTML Grundkurs</title> </head> <body> <header> <a href="#katze">Link zum Katzenfoto</a> </header> <div> <h1>Überschrift 1</h1> <h2>Überschrift 2</h2> <h3>Überschrift 3</h3> <h4>Überschrift 4</h4> <h5>Überschrift 5</h5> <h6>Überschrift 6</h6> <p>Das ist der erste Textabschnitt</p> <p>Das ist der zweite Textabschnitt</p> b-Tag: <b>Test</b> <br> strong-Tag: <strong>Test</strong> <br><br> i-Tag: <i>Test</i> <br> em-Tag: <em>Test</em> <br><br> u-Tag: <u>Test</u> <br> s-Tag: <s>Test</s> <br><br> <img id="katze" src="./bilder/katze_beim_markt.jpg" alt="Foto von einer Katze"> <br><br> <img src="https://www.sifa-digital.de/wp-content/uploads/2017/01/html_grundkurs_video_03_aufbau_einer_html-datei.jpg" alt="Thumbnail HTML Grundkurs Video 03"><br><br> <a href="https://www.youtube.com/">YouTube</a><br><br> <ol> <li>Eintrag 01</li> <li>Eintrag 02</li> <li>Eintrag 03 <ul> <li>Eintrag A</li> <li>Eintrag B</li> <li>Eintrag C</li> </ul> </li> <li>Eintrag 04</li> </ol> </div> <footer></footer> </body> </html>

Verpasse keine neuen Inhalte!

Um keine zukünftigen Inhalte zu verpassen, kannst du dich kostenlos in unseren E-Mail Newsletter eintragen. Als Mitglied des E-Mail Newsletter bekommst du exklusive Inhalte sowie eine Übersicht der neuen Tutorials von uns zugesendet.
Du kannst jederzeit deine E-Mail-Adresse aus dem Newsletter wieder austragen.

Für aktuelle Inhalte und Neuigkeiten findest du uns auch bei YouTube, Facebook und Instagram.

E-Mail Newsletter:

Aktuell ist unser Newsletter deaktiviert.

Social Media: