Startseite HTML-Kurs


HTML-Elemente für die Textgestaltung

Die Überschriften-Tags h1 bis h6 werden für die Strukturierung verwendet. Die Überschrift oben ist in h4.

Bitte nicht vergessen: Der Quelltext kann mit Strg+U angesehen und in den eigenen Editor kopiert werden.

Wichtige Wörter werden durch den Tag strong in Fettschrift hervorgehoben. Ebenso können Zitate kursiv gesetzt werden. Für kursiv nehmen wir generell den em-Tag. Für hoch und tief gibt es die sup- und sub-Elemente.
Für den Absatz gibt es das p-Tag und für eine Zeilenschaltung das br-Tag. Das br-Tag ist eines der wenigen Tags, die nicht geschlossen werden müssen (am Seitenende sind alle leeren Tags gelistet).

Es gibt Tags für Farbe und natürlich lässt sich alles kombinieren.

Das Tag <mark> markiert den Inhalt wie mit einem gelben Textmarker.

Das Tag <small> bestimmt die Schriftgröße des Textes auf eine Größe kleiner, als beim Elternelement. Das Tag wird für die Speicherung der Information von Urheberrechten oder Anmerkungen vwerwendet, z.B. Copyright...

Mit <ins> werden Wörter oder Textteile unterstrichen angezeigt. Sie mag Blumen

Hier noch die Tags für eine Aufzählung oder Liste. Jede ungeordnete Liste beginnt mit einem <ul> Element. Dieses umschließt alle Listenelemente:

Dies ist allerdings in HTML5 nicht zulässig. Die Einträge werden mit dem <li>-Tag umschlossen und stehen dann untereinander:

Bei einer geordneten Liste mit dem Tag <ol>, werden die Einträge nummeriert.

  1. Milch
  2. Eier
  3. Brot
  4. Kaffee

Hier noch ein Beispiel für eine Aufzählung mit Unterpunkten:

  1. Milch
  2. Eier
  3. Brot
  4. Kaffee

Sollen Listeneinträge nebeneneinander stehen, muss hierfür eine Stilregel definiert werden. Siehe hierfür den Quellcode und das Kapitel über "Styles". Kombiniert mit einem Link, lässt sich eine einfache Navigation gestalten:


Das <hr>-Tag wird für horizontale Linien auf der Seite und für die thematische Unterteilung des Seiteninhalts verwendet.


Makierungen, die für einen ganzen Absatz oder mehr gelten, werden via "Styles" gemacht.

Mit text-align wird die horizontale Ausrichtung von Text und inline-Elementen wie Bildern (img) beeinflusst. Häufig werden die Zeilen mit einem linksbündigen Flattersatz ausgerichtet.

Ich bevorzuge dagegen den Blocksatz, in dem die Wörter so über die Zeilen verteilt werden, dass es sowohl links als auch rechts einen bündigen Rand gibt. Damit die Wortabstände in einer Zeile nicht zu groß werden, bietet HTML 5  eine Silbentrennung. Diese ist in der styles-Datei definiert.

Hier zum Abschluss die Aufzählung der leeren Elemente, die selbstschließend sind und keinen abschließenden Schrägstrich benötigen: area, base, br, col, embed, hr, img, input, link, meta.

Und nun viel Spaß! Probiert es in eurem Editor aus!