• HTML und XHTML
• CSS
• JavaScript und DHTML
• PHP und MySQL
• Andere

Nummerierte oder ungeordnete Aufzählung

Listen werden unterschieden in nummerierte Listen (orderd list), unnummerierte Listen (unnumbered list) und definitions Listen.

<ol><li></li ></ol> oder <ul><li></li ></ul>

<ol>..</ol> Tags stehen für Ordered list, <ul>...</ul> Tags produzieren unnumbered lists. Die Brauser erstellen die Listen (inklusive Einrücken und die Zahlen oder Bullets) selbstständig, nur die einzelnen Listenelemente müssen noch mit <li>-Tags gekennzeichnet werden, darin folgt der Eintrag </li> und dann der Endtag:

<ol>
  <li>Erstens,</li>
  <li>Zweitens,</li>
  <li>Drittens,</li>
  <li>Viertens.</li>
</ol>

1. Erstens,
2. Zweitens,
3. Drittens,
4. Viertens.

• So,
• So,
• So,
• Oder so.

Listen können in einander verschachtelt werden wie Inhaltsverzeichnise, indem zwischen die beiden li-Tags eine ganze Liste geschoben wird:

1. Teil
   1. Kapitel
   2. Kapitel
   3. Kapitel
2. Teil
   • Kapitel
   • Kapitel
   • Kapitel

oder auch so:

• Lied
  • Strophe 1
    • Zeile
    • Zeile
    • Zeile
  • Strophe 2
    • Zeile
    • Zeile
    • Zeile

Attribute in Listen

type="...", start="...", value="..."

Eine Navigation ist eigentlich eine Link-Liste

Wir können die Art der Bullets in der Unnummerierten Liste auch vorherbestimmen (allerdings ist auch dies mit CSS besser zu lösen):

• <ul type="sqare"> <li>...</li> </ul>

• <ul type="disc"> <li>...</li> </ul>

• <ul type="circle"> <li>...</li> </ul>

Wir können auch die Art der Zahlen in der geordneten Liste vorherbestimmen:

1. <ol type="1"> <li>...</li> </ol> default sind Arabische Zahlen

1. <ol type="A"> <li>...</li> </ol> alphabetisch, versal

1. <ol type="a"> <li>...</li> </ol> alphabetisch, klein

1. <ol type="I"> <li>...</li> </ol> römisch, gross

1. <ol type="i"> <li>...</li> </ol> römisch, klein

Wir müssen eine geordnete Liste nicht mit 1. starten:

6. <ol start="6"><li>Bla</li>
7. <li>Bla</li>
8. <li>Bla</li></ol>

Wir können Attribute auch in die <li> Tags der <ol> Tags tun, um zu bestimmen, mit welcher Zahl oder mit welchem Buchstaben die Listenelemente in der Aufzählung fortfahren sollen.

6. <ol type="A">
6. <li value="6">...</li>
7. <li>...</li>
8. <li>...</li>
9. </ol>

6. <ol type="i">
6. <li value="6">...</li>
7. <li>...</li>
8. <li>...</li>
9. </ol>

Definitionsliste

<dl><dt>...</dt> <dd>...</dd> </dl>

Es gibt noch eine sogenannte Definition Liste (oder Glossary Liste) mit dem <dl></dl> -Tag, die 2 Listen-Teile hat: eine Definition <dt>...</dt> (definition term), und etwas Definiertes <dd>...</dd> (definition data):

Mann

Wie geht's?

Frau

Danke gut.

Kind

Mir auch!

Die Definitionsliste eignet sich hervorragend für Dialoge und Theaterstücke. Die Definition und der Inhalt kommen dabei auf 2 Zeilen, die zweite etwas eingerückt. Semantisch entspräche dies einer Tabelle mit 2 Kolonnen.

Eine brauchbare, einzeilige Darstellung erreicht man mit CSS:
>> DL durch css wie Zwei-Kollonen-Tabelle dargestellt

Ruby - phonetische Anmerkung

<ruby>...</ruby>

Die Ruby-Tags (seit HTML 5) dienen zur Auszeichnung von phonetischen (z.B. japanischen) Anmerkungen und stellen diese übereinander in einer Zeile dar. Im Ruby-Tag stehen das rb-Tag für rubyBase (die Basis, welche einer Anmerkung bedarf), das rt-Tag (der rubyText welcher als Anmerkung über die Base gestellt wird) und das rp-Tag (rubyParenthesis z.B. Klammern, welche in Browsern angezeigt werden, die Ruby einzeilig darstellen).

<ruby>
<rb>WWW</rb><rp> (</rp><rt>World Wide Web</rt><rp>)</rp>
</ruby>
Bild:

Falls Ruby nicht verstanden wird, stellt der Browser folgendes dar:
WWW (World Wide Web)
Test:
Frtz&Frnz (Fritz & Fränzi)