In die­sem Arti­kel will ich einen kur­zen Über­blick über die ver­schie­de­nen Mög­lich­kei­ten zur Struk­tu­rie­rung von Tex­ten in HTML-Dokumenten geben. Zusätz­lich wird auf die ver­schie­de­nen Mög­lich­kei­ten ein­ge­gan­gen, Text­ab­schnitte in HTML aus­zu­zeich­nen, um ein­zelne Bestand­teile hervorzuheben.

Auf andere HTML-Elemente und Mög­lich­kei­ten, die nicht in direk­ten Zusam­men­hang mit Tex­ten ste­hen – etwa Bil­der oder Ele­mente zur Sei­ten­struk­tu­rie­rung – gehe ich hier nicht wei­ter ein. Dafür gibt es bes­sere Quel­len. Ins­ge­samt wer­den Grund­kennt­nisse in HTML vor­aus­ge­setzt. Ein Hin­weis an die­ser Stelle noch zu Block-Elementen:

Inner­halb von inline-Elementen dür­fen keine Blo­ckele­mente stehen!

Texte struk­tu­rie­ren

Über­schrif­ten (h1 — h6)

Mit ‹h#›-Tags, wobei Raute für die Zah­len von 1 bis 6 steht, las­sen sich Über­schrif­ten erzeu­gen. Die Zahl steht dabei für die Ord­nung der Über­schrift: ‹h1› ist die Über­schrift mit der höchs­ten Ordnung.

‹h›-Tags sind Block-Elemente.

   
Lorem ipsum
   
Lorem ipsum
   
Lorem ipsum
   
Lorem ipsum
   
Lorem ipsum
   
Lorem ipsum

Text­ab­satz (​p​)

Mit dem ‹p›-Tag wer­den Text­ab­sätze defi­niert. Das Anfangs-Tag erzeugt einen Zei­len­um­bruch und eine Absatz­schal­tung und ist somit das Äqui­va­lent zum Absatz in Satz­pro­gram­men wie InDesign.

Das ‹p›-Tag ist ein Block-Element. Im Inne­ren dür­fen aber nur inline-Elemente ver­wen­det werden.

In der Stan­dard­ein­stel­lung der Brow­ser wei­sen Absätze einen Abstand (mar­gin) über der ers­ten und nach der letz­ten Zeile auf.

Zei­len­um­bruch erzwingen (br)

Mit dem ‹br /›-Tag wird ein Zei­len­um­bruch erzwun­gen, der nicht zu einer Ände­rung des Absatz­for­ma­tes führt.

Nor­ma­ler­weise ist das ‹br›-Tag nicht nötig, da der Brow­ser abhän­gig von der Zei­len­breite selbst­stän­dig umbricht. Ledig­lich wo ein Zei­len­um­bruch erzwun­gen wer­den soll, ist ein ‹br›-Tag not­wen­dig. Es kön­nen auch meh­rere br-Tags hin­ter­ein­an­der ange­ge­ben wer­den um Leer­zei­len zu erzeu­gen, was aber nor­ma­ler­weise nie nötig sein sollte und sich immer anders lösen lässt.

Das ‹br›-Tag hat kein schlie­ßen­des Tag und muss immer in sich selbst geschlos­sen wer­den. Dies erreicht man durch einen Schräg­strich vor der schlie­ßen­den Klam­mer. Die­ser Schrägstich kann in der Syntax-Vorschau lei­der nicht ange­zeigt werden, ‹br› müsste hier ‹br /› sein.

   Die erste Zeile
   <​br />
   Die zweite Zeile unabhängig von der Zeilenbreite

Die Zei­len­um­brü­che im obi­gen Quell­text wer­den vom Brow­ser nicht aus­ge­ge­ben. Brow­ser fil­tern Zei­len­um­brü­che aus dem Source­code her­aus. Meh­rere auf­ein­an­der fol­gende Leer­zei­chen und Tabu­la­to­ren wer­den vom Brow­ser zu einem Leer­zei­chen zusam­men­ge­fasst. Eine Aus­nahme stellt das ‹pre›-Tag dar.

Text vor­for­ma­tiert ausgeben (pre)

Mit dem ‹pre›-Tag lässt sich Text genauso aus­ge­ben, wie er in der Quell­da­tei for­ma­tiert wurde, also inklu­sive aller Weiß­räume, Tabu­la­to­ren und Zei­len­um­brü­che. Das ‹pre›-Tag wird meis­tens zur Dar­stel­lung von Source­code ver­wen­det, kann aber auch zu ande­ren Zwe­cken ein­ge­setzt wer­den, etwa für mit Tabu­la­to­ren ange­legte „Tabellen“.

Das ‹pre›-Tag ist ein Block-Element, aber inner­halb des Tags soll­ten keine ande­ren Ele­mente stehen.

Stan­dard­mä­ßig stel­len Brow­ser Text inner­halb eines ‹pre›-Tags in einer nicht­pro­por­tio­na­len (mono­s­pace) Schriftart an.

Lange Zitate (blockquote)

Mit dem ‹blockquote›-Tag wer­den Zitate aus­ge­zeich­net. Dabei wird der Text­block vom rest­li­chen Text abgesetzt.

Inner­halb eines blockquote-Elements kön­nen belie­bige andere Tags ste­hen. Text inner­halb eines blockquote-Elements muss zusätz­lich (z.B. p-Tag) aus­ge­zeich­net werden.

Mit dem cite-Attribut kann man zusätz­lich die Quelle eines Zita­tes angeben:

 
   
It is the designer/typographer’s task
   to match form with content;
   to create an authoritative document.
   - Nick Shinn

Hori­zon­tale Linie (hr)

Mit dem ‹hr /›-Tag wird ein Zei­len­um­bruch ein­ge­fügt, wel­cher durch eine hori­zon­tale Linie angezeigt wird.

Da diese Linie jedoch nur noch sel­ten gebraucht wird, kann sie auch zweck­ent­frem­det wer­den. So lässt sie sich z. B. als clear-Element für die CSS-Eigenschaft float anwen­den. Dazu defi­niert man das ‹hr›-Tag per CSS folgendermaßen:

hr {
   clear: both;
   visibility: hidden;
}

Texte aus­zeich­nen

Alle Auszeichnungs-Elemente, soweit nicht anders ange­ge­ben, sind Inline-Elemente und dür­fen keine Block-Elemente enthalten.

Fet­ter Schrift­schnitt (strong)

Mit dem ‹strong›-Tag las­sen sich Text­pas­sa­gen her­vor­he­ben, indem diese fett dar­ge­stellt wer­den. Bei Brow­sern mit Sprach­aus­gabe wer­den diese stär­ker betont als der übrige Text.

   In diesem Text ist ein Begriff 
   besonders wichtig.

Das ältere ‹b›-Tag sollte nicht mehr ver­wen­det werden.

Kur­si­ver Schnitt (em)

Mit dem ‹em›-Tag las­sen sich Text­pas­sa­gen her­vor­he­ben, indem diese kur­siv dar­ge­stellt wer­den. Bei Brow­sern mit Sprach­aus­gabe wer­den diese stär­ker betont als der übrige Text.

Dabei han­delt es sich um ein Inline-Element.

   In diesem Text ist ein Begriff 
   besonders hervorgehoben.

Der ältere ‹i›-Tag sollte nicht mehr ver­wen­det werden.

Links oder Anker (a)

Mit dem ‹a›-Tag wer­den Links aus­ge­zeich­net. Dabei wird das Sprung­ziel mit der Varia­blen href ange­ge­ben. Das Sprung­ziel kann inner­halb der eige­nen Web­seite über ein URL (Uni­ver­sal Resource Locator) auf eine andere Datei ver­wei­sen oder inner­halb der Datei zu einem Anker in der­sel­ben Datei oder zu einer ande­ren Web­seite über eine URI (Uni­ver­sal Resource Iden­ti­fier). Bei der URI muss immer das Schema (z.B. http://) mit ange­ge­ben werden.

Zwi­schen das öffnende und schlie­ßende Tag kön­nen belie­bige Texte oder auch Bil­der gesetzt wer­den. Das ‹a›-Tag erzeugt dabei ein inline-Element.

   Dieser Text enthält einen Link
   zu just type

Anker sind Sprung­ziele inner­halb der­sel­ben Seite. Sie bezie­hen sich auf die ID eines belie­bi­gen Ele­men­tes der Seite und wer­den über eine Raute gefolgt von der ID angesprochen:

   
Kopfzeile
   
   Sprung zur Kopfzeile

Links kön­nen noch mit einer gan­zen Reihe von Attri­bu­ten ver­se­hen wer­den, eine gute Über­sicht gibt es hier.

Belie­bige Inline-Formate (span)

Das ‹span›-Tag hat von sich aus keine Eigen­schaft. Es wird dazu benutzt, CSS-Stile auf Text­pas­sa­gen anzu­wen­den, z.B. indem man dem ‹span›-Tag eine Klasse zuweist. Das ‹span›-Tag ist dabei das Gegen­stück zum ‹div›-Tag, da es sich um ein inline-Element han­delt. Es kann z. B. ver­wen­det wer­den, um Text­pas­sa­gen durch Far­bän­de­run­gen hervorzuheben.

.special {
   color: #f00;
}

   Dieses <​span class="special">Wort<​/span>
   wird besonders ausgezeichnet.

Tex­te­pas­sa­gen streichen (del)

Mit dem ‹del›-Tag las­sen sich Berei­che von Tex­ten strei­chen. Dies wird z. B. in Blogs genutzt, um redak­tio­nelle Ände­run­gen in Tex­ten kennt­lich zu machen, ohne den ent­spre­chen­den Abschnitt kom­plett zu löschen. Der Text wird mit einer hori­zon­ta­len Linie dar­ge­stellt, die durch den Text ver­läuft, ihn also durchstreicht.

Das ‹del›-Tag kann mit den Attri­bu­ten cite und datetime ver­se­hen wer­den. Das Attri­but cite ver­weist dabei auf eine Quelle, die mit der Ände­rung zusam­men­hängt. Datetime weißt auf den Zeit­punkt der Änderung hin.

Neue Pas­sa­gen einsetzen (ins)

Mit dem ‹ins›-Tag las­sen sich neue Pas­sa­gen inner­halb von Tex­ten kenn­zeich­nen. Der Text wird mit einer hori­zon­ta­len Linie unterstrichen. Diese Funk­tion wird meis­tens in Ver­bin­dung mit dem del-Tag eingesetzt.

Das ‹ins›-Tag kann mit den Attri­bu­ten cite und datetime ver­se­hen wer­den. Das Attri­but cite ver­weist dabei auf eine Quelle, die mit der Ände­rung zusam­men­hängt und datetime weißt auf den Zeit­punkt der Änderung hin.

Kurze Zitate im Textfluss (cite)

Mit dem ‹cite›-Tag las­sen sich kurze Zitate inner­halb eines Tex­tes aus­zeich­nen. Dabei han­delt es sich um ein inline-Element, das selbst wei­tere Ele­mente enthalten kann.

Die Brow­ser zei­gen den zitier­ten Text stan­dard­mä­ßig kursiv an.

Text in Anführungszeichen (q)

Mit dem ‹q›-Tag schließt man einen Text­ab­schnitt in oben ste­hende dop­pelte Anfüh­rungs­zei­chen ein. Das Tag kann auch dazu ver­wen­det wer­den, kurze Zitate zu kenn­zeich­nen und kennt im Gegen­satz zum ‹cite›-Tag das cite–Attri­but, um die Quelle mit anzu­ge­ben (wie beim ‹blockquote›-Tag).

Das ‹q›-Tag kann aber auch dazu genutzt wer­den Text­ab­schnitte aus­zu­zeich­nen, die in Kom­mata gesetzt wer­den sol­len. Über CSS kann man dann je nach ange­ge­be­ner Spra­che die kor­rek­ten Kom­mata ausgeben.

Dies wird aber nur von neue­ren Brow­sern unterstützt:

   html[lang="de"] q { quotes: "»" "«" }
   q:lang(de) { quotes: "»" "«" }

   Sein Ratschlag lautete Ergreife die Feder nur, 
   wenn Du müde bist!.

Abkür­zun­gen (abbr)

Mit dem ‹abbr›-Tag las­sen sich Abkür­zun­gen inner­halb eines Tex­tes mar­kie­ren. Dabei wer­den diese im Fire­fox durch eine Linie klei­ner Punkte unter dem Wort gekenn­zeich­net. Befin­det sich der Cur­sor über einer Abkür­zung, wird die Bedeu­tung, wel­che vor­her mit dem Attri­but title ange­ge­ben wurde, als Tool­tip angezeigt.

   W3C

Akro­nyme (acronym)

Die Aus­zeich­nung von Akro­ny­men geschieht anlog zu Abkürzungen:

   EDV

Source­code Ausgabe (code)

Mit dem ‹code›-Tag lässt sich Quell­text inner­halb eines Fließ­tex­tes aus­zeich­nen. Der Brow­ser zeigt dabei den Text wie beim ‹pre›-Tag in einer nicht­pro­por­tio­na­len (mono­s­pace) Schrift­art an. Län­gere Pas­sa­gen an Com­pu­ter­code soll­ten mit dem ‹pre›-Tag defi­niert werden.

Tas­ta­tur­ein­ga­ben (kbd)

Mit dem ‹kbd›-Tag las­sen sich Text­pas­sa­gen aus­zeich­nen, wel­che durch den Leser per Tas­ta­tur ein­ge­ge­ben wer­den sol­len. Also z. B. Tas­ta­tur­ein­gabe in Tuto­ri­als oder Bedienungsanleitungen.

Bei­spiele (samp)

Mit dem ‹samp›-Tag las­sen sich Bei­spiele für Text­aus­ga­ben von Com­pu­ter­pro­gram­men aus­zeich­nen. Wird z. B. auch bei Tuto­ri­als ver­wen­det, um Aus­ga­ben von Pro­gram­men zu visualisieren.

Defi­ni­tio­nen (dfn)

Mit dem ‹dfn›-Tag las­sen sich Defi­ni­tio­nen von Begrif­fen aus­zeich­nen. Die Defi­ni­tion wird dabei kur­siv dargestellt.

   HTML ist eine Abkürzung 
   für Hyper Text Markup Language.

Varia­blen (var)

Mit dem ‹var›-Tag las­sen sich Varia­blen im Fließ­text aus­zeich­nen. Die Varia­ble wird dabei kur­siv dargestellt.

   Die Methode getElementByID setzt die 
   Variable box auf das neue Element.

Hoch– oder Tief­stel­len (sub / sup)

Mit dem ‹sub›-Tag las­sen sich Text­ab­schnitte tie­fer stellen.

   H2O

Mit dem ‹sup›-Tag wie­derum las­sen sich Text­ab­schnitte höher stellen.

   Dieses Wort hat eine Fußnote1

Die Brow­ser redu­zie­ren die Schrift­größe dabei jeweils auf die Hälfte, nut­zen aber wei­ter­hin den sel­ben Schriftschnitt.

Lauf­rich­tung des Textes (bdo)

Mit dem ‹bdo›-Tag lässt sich die Lauf­rich­tung des Tex­tes anpas­sen. Dabei sind zwei Para­me­ter mög­lich, ltr für Text, der von links nach recht läuft, und rtl für die umge­kehrte Laufrichtung.

Ange­wen­det wird der Tag z. B., um kurze hebräi­sche, ara­bi­sche oder Text­pas­sa­gen in ande­ren Spra­chen anzu­zei­gen. Durch die Ver­wen­dung wird die Standard-Laufrichtung überschrieben.

   مَرْحَبَاً

Lis­ten

Es gibt ver­schie­dene Arten Lis­ten in HTML zu dekla­rie­ren: unge­ord­nete Lis­ten, geord­nete Lis­ten sowie Definitionslisten.

Unge­ord­nete Liste

Eine unge­ord­nete Liste wird über das ‹ul›-Tag defi­niert, die ein­zel­nen Lis­ten­ele­mente durch ein ‹li›-Tag:

   
Erstes Element
   
Zweites Element
   …

Per CSS lässt sich defi­nie­ren, wel­ches Zei­chen den jewei­li­gen Lis­ten­ele­men­ten als Auf­zäh­lungs­zei­chen vor­an­ge­stellt wird:

ul li {
   list-style-type: circle;
}

Neben cir­cle gibt es noch eine ganze Reihe wei­te­rer Mög­lich­kei­ten.

Lis­ten las­sen sich auch in andere Lis­ten ver­schach­teln, was fol­gen­der­ma­ßen deklariert wird:

   
Erstes Element
   
Zweites Element
      

         
Verschachteltes erstes Element
         
Verschachteltes zweites Element
  
      
   
   
Drittes Element

Geord­nete Listen

Geord­nete Lis­ten unter­schei­den sich von unge­ord­ne­ten Lis­ten darin, dass jedem Lis­ten­ele­ment ein fort­lau­fen­der Wert z. B. eine Zahl vor­an­ge­stellt wird. Sie wer­den anstatt über das ‹ul›-Tag mit einem ‹ol›-Tag definiert.

Defi­ni­ti­ons­lis­ten

Defi­ni­ti­ons­lis­ten unter­schei­den sich von den bei­den ande­ren Lis­ten­ar­ten darin, dass hier die Lis­ten­punkte nicht über ein Auf­zäh­lungs­zei­chen oder eine Ord­nungs­zahl defi­niert wer­den, son­dern durch Begriffe, denen direkt die Erklärung folgt.

   
Punkt Eins
   
Erklärung zu Punkt Eins

   
Punkt Zwei
   
Erklärung zu Punkt Zwei

Tabel­len

Tabel­len wurde lange neben ihrer eigent­li­chen Funk­tion zum Lay­out von Web­sei­ten ein­ge­setzt. Dies ist heute nicht mehr not­wen­dig. Tabel­len die­nen ledig­lich der Dar­stel­lung von tabellarischen Daten.

Die sehr umfang­rei­chen Mög­lich­kei­ten zum Auf­bau von Tabel­len sind aus­führ­lich bei SELFHTML erklärt.