HTML: Liste erstellen – So gehts!


Wenn du eine Liste in HTML erstellen möchtest dann geht das relativ einfach. Im nachfolgenden Beispiel zeige ich dir wie eine HTML Liste funktioniert.

Ungeordnete HTML Liste erstellen

Eine einfache Liste mit HTML sieht folgendermaßen aus. Hierbei handelt es sich um eine ungeordnete Liste. Eine ungeordnete Liste startet mit

<ul>

und endet wieder mit dem selben Zeichen und einem Forwardslash.

<ul>
  <li>Peter</li>
  <li>Mathias</li>
  <li>Olaf</li>
</ul>

Ergebnis

    • Peter
    • Mathias
    • Olaf

Geordnete HTML Liste

Eine weitere Möglichkeit ist eine geordnete Liste mit HTML zu erstellen. Dies kannst du Anhand der Zahlenreihenfolge erkennen. Eine geordnete Liste startet mit

<ol>

und endet wieder mit dem selben Zeichen und einem Forwardslash.

<ol>
  <li>Peter</li>
  <li>Mathias</li>
  <li>Olaf</li>
</ol>

Ergebnis

    1. Peter
    2. Mathias
    3. Olaf

Beschreibungslisten in HTML

Eine weitere Art von Liste ist die sogenannte beschreibenden Listen. Diese sehen folgendermaßen aus.

<dl>
  <dt>Thomas</dt>
  <dd>- cooler Typ</dd>
  <dt>Saskia</dt>
  <dd>- extrem ruhig</dd>
</dl>

Ergebnis

Thomas
– cooler Typ
Saskia
– extrem ruhig

Jetzt HTML lernen

Fazit

Perfekt du bist jetzt Meister im HTML Listen erstellen. Wie du siehst gibt es gar nicht so viele verschiedene Arten von Listen. Jetzt wünsche ich dir noch viel Spaß mit HTML

Weitere Beiträge zu HTML

HTML: Text in Zwischenablage kopieren – So gehts
HTML: Grundgerüst – Webseite erstellen
HTML: Textarea erstellen – So gehts
PHP in HTML einfügen – So gehts!
HTML: Rahmen um Text – So gehts

HTML Datei öffnen – Kostenloser Editor 2021
HTML: Anker erstellen – So wirds gemacht!
HTML: 302 Redirect – So einfach gehts!
HTML: URL Parameter Erklärung
HTML: Bild einfügen – So gehts!

Jquery in HTML einbinden : So wirds gemacht!
HTML: Zurück Button & Link erstellen: So gehts!
HTML: Versteckter und Unsichtbarer Text : So gehs
HTML: Großbuchstaben schreiben: So gehts!
HTML: Icons einfügen: So gehts!

HTML: iFrame in Webseite einbinden – So gehts!
HTML: Liste erstellen – So gehts!
HTML: Erzwungenes Leerzeichen einfügen – So gehts!
CSS in HTML einbinden – So gehts!
HTML: Leerzeichen erstellen – So einfach gehts!

HTML: Auskommentieren – So gehts!
HTML: Bild zentrieren und mittig ausrichten
HTML: Fett schreiben – So einfach gehts!
HTML Text ausrichten: rechtsbündig & linksbündig
HTML: Zeilenabstand einstellen – So gehts!

HTML: Trennlinie einfügen – So gehts!
HTML: Absatz einfügen – So gehts!
HTML: Horizontale Linie – So gehts
HTML: Tabellen erstellen – So gehts!
HTML: Datum & Uhrzeit anzeigen – So gehts!

  • Hat dir der Beitrag gefallen?

    Du hast bereits abgestimmt!
        html liste   

    Das könnte dich interessieren!




  • weitere Beiträge zum Thema HTML


    HTML: Text gelb markieren – So gehts


    PHP: For Loop erstellen – So gehts


    HTML/CSS – Mauszeiger Cursor ändern – So gehts


    HTML: Marquee Lauftext, Laufschrift erstellen


    HTML: klickbare Telefonnummer einfügen


    HTML: DIV Container zentrieren: So gehts


    WordPress: Besten Restaurant Themes


    WordPress Theme herausfinden: So gehts


    WordPress: RSS Feed einrichten – So gehts!


    WordPress: Memory Limit erhöhen


    Schreibe einen Kommentar