Text, Bilder, Links und Listen

HTML stellt sechs Überschriftenebenen bereit. Verwenden Sie sie, um eine Dokumentstruktur zu erstellen, nicht um die Textgröße zu verändern. <h1> ist der Seitentitel (einmal pro Seite), <h2> steht für Hauptabschnitte, <h3> für Unterabschnitte und so weiter.

Das <p>-Element umschließt einen Textabsatz. Der Browser fügt automatisch Abstände oberhalb und unterhalb hinzu. Verwenden Sie <br> sparsam – nur für inhaltlich bedeutsame Zeilenumbrüche, etwa in einer Adresse oder einem Gedicht, nicht für Abstände zwischen Absätzen.

Verwenden Sie Inline-Elemente, um Text mit Bedeutung zu versehen: <strong> für wichtige Inhalte (fett), <em> für Betonungen (kursiv), <code> für Codeausschnitte, <mark> für hervorgehobenen Text und <small> für Kleingedrucktes.

Das <img>-Element bettet ein Bild ein. Das src-Attribut gibt die URL an, und alt stellt Alternativtext für Bildschirmleseprogramme sowie für den Fall bereit, dass das Bild nicht geladen werden kann. Fügen Sie immer einen aussagekräftigen alt-Wert ein.

Alternativtext sollte den Inhalt und Zweck des Bildes vermitteln. Für dekorative Bilder (Abstandhalter, rein dekorative Symbole) verwenden Sie alt="" (eine leere Zeichenfolge), damit Bildschirmleseprogramme sie überspringen. Schreiben Sie niemals alt="image of" – beschreiben Sie einfach, was zu sehen ist.

Das <a>(Anker-)Element erstellt Hyperlinks. Das href-Attribut legt die Ziel-URL fest. Der Linktext sollte das Ziel beschreiben – schreiben Sie niemals „hier klicken“.

Wenn Sie Links mit target="_blank" in einem neuen Tab öffnen, fügen Sie immer rel="noopener noreferrer" hinzu. Andernfalls kann die geöffnete Seite auf das Window-Objekt der öffnenden Seite zugreifen – eine Sicherheitslücke namens Reverse Tabnabbing.

Verwenden Sie <ul> (ungeordnete Liste), wenn die Reihenfolge der Elemente keine Rolle spielt – etwa bei Funktionen, Zutaten oder Navigationslinks. Jedes Element ist ein <li>. Der Browser stellt standardmäßig Aufzählungspunkte dar, aber in der Praxis gestalten Sie sie fast immer mit CSS.

Verwenden Sie <ol> (geordnete Liste), wenn die Reihenfolge wichtig ist – etwa bei Schritten eines Tutorials, Ranglisten oder Anweisungen. Die Elemente werden automatisch nummeriert. Verwenden Sie die Attribute start und reversed, um die Nummerierung zu steuern.

<dl> (Definitionsliste) gruppiert Begriffe und ihre Definitionen oder Beschreibungen. Verwenden Sie sie für Glossare, Metadaten (Autor/Datum) und Schlüssel-Wert-Paare. <dt> ist der Begriff, <dd> die Beschreibung.

Listen können verschachtelt werden, um Hierarchien abzubilden. Platzieren Sie die untergeordnete <ul>- oder <ol>-Liste innerhalb des übergeordneten <li>-Elements. Verschachteln Sie nicht nur zur Einrückung – verwenden Sie stattdessen CSS.

Verwenden Sie Überschriftselemente für die Dokumentstruktur, p für Absätze, img mit aussagekräftigem Alternativtext für Bilder, a mit beschreibendem Linktext für die Navigation und ul/ol/dl für Listeninhalte. Semantik macht HTML barrierefrei und maschinenlesbar.