Unter Textstrukturierung sind all die Elemente
zusammengefasst, die die Struktur des Textes einer Internetseite
widerspiegeln, beispielsweise Überschriften oder Textabsätze:
h1..h6, p, blockquote,
figure, figcaption, hr, ol, ul, li, div
<h1>..</h1>: HTML
erlaubt 6 Überschriftenebenen. Bei Anwendung der Elemente
erfolgt automatisch ein Zeilenvorschub.
<html lang="de">
<head>
<meta charset="utf-8">
<title>Überschriften in einem HTML-Dokument
</title>
</head>
<body>
<h1>Das ist eine Überschrift 1.
Grades</h1>
<h2>Das ist eine Überschrift 2. Grades</h2>
<h3>Das ist eine Überschrift 3. Grades</h3>
<h4>Das ist
eine Überschrift 4. Grades</h4>
<h5>Das ist eine
Überschrift 5. Grades</h5>
<h6>Das ist eine Überschrift
6. Grades</h6>
</body>
</html>
<p>..</p>: Ein p-Element definiert einen Textabsatz.
Absatz-Elemente dürfen keine anderen blockerzeugenden
Elemente wie z. B. Überschriften, Textabsätze oder Listen
enthalten.
<blockquote>...</blockquote>: Mithilfe des
Elements blockquote kann man Zitate von Fremdautoren in
einem eigenen, anders formatierten (zumeist eingerückten)
Absatz hervorheben.
<figure>...</figure>:
Figure dient als Container für eine zum Seiteninhalt
gehörende Abbildung.Neben Grafiken wie Bilder und Diagrammen kann es auch andere mediale Inhalte wie Videos,
Programmcode oder Textstellen wie Zitate oder tabellarische Übersichten enthalten.
<figcaption>...</figcaption>:Das optionale figcaption dient der Beschriftung des Inhaltes oder stellt eine Legende dar.
Es kann sowohl vor als auch nach der Abbildung positioniert werden, es darf allerdings in einem figure-Element nur ein
figcaption-Element geben.
<hr>: Das Element hr kennzeichnet
einen thematischen Bruch. Ein solcher Bruch wird als
waagerechte Linie dargestellt. Das Element kann deswegen
auch als Trennlinie benutzt werden. Alleinstehendes Tag ohne
Inhalt.
ol: <ol> (ordered list) leitet eine nummerierte
Liste ein. Mit <li> beginnt ein neuer Punkt innerhalb der
Liste (li = list item = Listeneintrag). </li> beendet den
Listeneintrag, </ol> die Liste.
ul: <ul> (unordered
list) leitet eine nichtnummerierte Liste ein. Mit <li>
beginnt ein neuer Punkt innerhalb der Liste (li = list item
= Listeneintrag). </li> beendet den Listeneintrag, </ul> die
Liste.
li: Mit <li> beginnt ein neuer Punkt innerhalb der
Liste. </li> beendet den Listeneintrag
<!doctype html>
<html lang="de">
<head>
<meta
charset="utf-8">
<title>Listen
</title>
</head>
<h2 >Murphy hat immer Recht, denn...</h2>
<ol>
<li>kommt es anders und...</li>
<li>als man denkt.</li>
</ol>
<h2 >Beispielsweise bei der Textverarbeitung,</h2>
<h3 >dabei sind die ersten beiden Punkte so gemein, dass sie
Ihnen erspart bleiben:</h3>
<ol start="3">
<li>Wenn du
ein Wort löschen willst, verschwindet die ganze Zeile.</li>
<li>Wenn du eine Zeile löschen willst, verschwindet der
ganze Text.</li>
<li>Wenn du den ganzen Text löschen
willst, passiert gar nichts.</li>
</ol>
<h2 >oder bei
den Passwörtern</h2>
<ul >
<li>Du wirst immer mehr
Passwörter vergessen als du besitzt.</li>
<li>Die
Passwörter, an die du dich noch erinnerst, hast du letzte
Woche geändert.</li>
</ul>
</body>
</html>
<div>...</div>: Das div-Element ist dazu gedacht, mehrere
Elemente wie Text, Grafiken, Tabellen usw., in einen gemeinsamen
Bereich einzuschließen. Dieses allgemeine Element bewirkt nichts
weiter als dass es in einer neuen Zeile des Fließtextes beginnt.
Ansonsten hat es keine Eigenschaften. Es ist dazu gedacht,
Bereiche zu erzeugen, die mit Hilfe von CSS formatiert werden
können. Das div-Element sollte nur verwendet werden, wenn es
keinen sinnvollen Ersatz gibt.
