Überschrift H1 – Seitentitel

Dies ist ein normaler Absatz. Er dient dazu, Schriftart, Schriftgröße, Zeilenhöhe, Textfarbe und Abstände des normalen Fließtextes zu beurteilen. Ein guter Fließtext sollte auch bei längeren Textpassagen angenehm lesbar sein.

Dies ist ein zweiter Absatz, damit auch der Abstand zwischen zwei aufeinanderfolgenden Absätzen sichtbar wird.

Überschrift H2 – Hauptabschnitt

Die H2 ist normalerweise die wichtigste Gliederungsebene innerhalb einer Seite und sollte sich deutlich vom Fließtext unterscheiden.

Überschrift H3 – Unterabschnitt

Eine H3 unterteilt einen größeren Abschnitt weiter.

Überschrift H4

Beispieltext unter einer Überschrift der vierten Ebene.

Überschrift H5

Beispieltext unter einer Überschrift der fünften Ebene.

Überschrift H6

Beispieltext unter einer Überschrift der sechsten Ebene.

Textformatierungen

Normaler Text mit fett hervorgehobenem Text, kursivem Text, fett und kursiv sowie einem normalen Textlink.

Zusätzlich gibt es markierten Text, kleineren Text, H₂O und E = mc².

Tastatureingaben können beispielsweise mit CMD + C dargestellt werden.

Ein kurzer Programmcode könnte so aussehen: display: grid;

Links

Hier befindet sich ein normaler Link innerhalb eines Textes.

Ein einzelner Link

Listen

Ungeordnete Liste

Erster Listenpunkt
Zweiter Listenpunkt
Dritter Listenpunkt mit etwas längerem Text, damit ein möglicher Zeilenumbruch sichtbar wird.
Verschachtelte Liste
- Unterpunkt eins
- Unterpunkt zwei

Geordnete Liste

Erster Schritt
Zweiter Schritt
Dritter Schritt
Vierter Schritt
1. Unterpunkt eins
2. Unterpunkt zwei

Zitat

Gutes Design ist so wenig Design wie möglich.
Dieter Rams

Buttons

Link mit Button-Rolle

Formularelemente

Tabelle

Leistung	Beschreibung	Preis
Webdesign	Erstellung einer individuellen Website	1.500 €
Hosting	Hosting inklusive Updates und Wartung	49 € / Monat
Support	Technischer Support und Betreuung	nach Aufwand

Weitere HTML-Elemente

Abkürzung

Eine HTML-Seite bildet die Grundlage einer Website.

Details / Aufklappbereich

Weitere Informationen anzeigen

Dieser Inhalt wird erst angezeigt, wenn der Besucher den Bereich öffnet.

Codeblock

<section>
    <h2>Beispiel</h2>
    <p>Ein einfacher HTML-Abschnitt.</p>
</section>

Typografie im Zusammenhang

Eine etwas längere Überschrift, die möglicherweise über zwei Zeilen läuft

Dieser Bereich ist besonders hilfreich, um das Zusammenspiel von Überschrift und Fließtext zu beurteilen. Dabei sollten sowohl der Abstand unterhalb der Überschrift als auch die Zeilenhöhe und die maximale Textbreite betrachtet werden.

Gerade auf kleineren Bildschirmen lässt sich damit schnell erkennen, ob Schriftgrößen und Abstände auch responsiv gut funktionieren.

Letzter Abschnitt der Styling-Seite

Dieser Absatz dient dazu, den Abstand einer H2 zum vorhergehenden Abschnitt und zum nachfolgenden Text beurteilen zu können.