HTML Typografie & Textstruktur

Überschriften: <h1> - <h6>

Überschriften gliedern Inhalte hierarchisch. Sie helfen sowohl Leser*innen als auch Suchmaschinen, den Aufbau deiner Seite zu verstehen. Die Reihenfolge ist dabei wichtig - <h1> ist die wichtigste Überschrift, <h6> die unwichtigste.

Absätze, Zeilen & Inline-Text

Betonung, Gewichtung & Bedeutung

Hier geht’s um feine Unterschiede: Fett ist nicht gleich fett - entscheidend ist, warum etwas hervorgehoben wird. HTML unterscheidet zwischen rein visueller Hervorhebung und semantischer Betonung.

<span class="tooltip" data-tip="Ich bin ein Tooltip">Hover mich</span>

.tooltip {
    position: relative;
    cursor: help;
}

.tooltip:hover::after {
    content: attr(data-tip);
    position: absolute;
    top: 100%;
    left: 0;
    background: #333;
    color: #fff;
    padding: .3rem .5rem;
    border-radius: 4px;
    font-size: .85rem;
    white-space: nowrap;
}

Zitate

Code & Spezielle Textarten

Mehrzeiliger Text
mit Zeilenumbrüchen

<pre>
     /\_/\  
    ( o.o ) 
     > ^ 
</pre>

<pre>
   Roses are red,
   Violets are blue,
   Whitespace matters,
   And so do you.
</pre>

<pre>
   Name        Alter    Stadt
   Max         25       Berlin
   Anna        30       München
</pre>

<pre><code>function hello() {
    console.log("Hi!");
}</code></pre>

Definitionen

Wenn du einen Begriff zum ersten Mal erklärst, kannst du ihn mit <dfn> kennzeichnen. Screenreader erkennen so: „Das ist die Definition dieses Begriffs.“

Kontaktangaben

Für Adressen, Kontaktwege oder Autor*innen-Infos gibt es ein eigenes Tag: <address>. Es wird häufig im Footer eingesetzt.

Schreibrichtung & Textfluss

Neben normalem Links-nach-Rechts-Text kannst du auch die Schreibrichtung beeinflussen. Das ist vor allem für internationale Inhalte wichtig.

Mit <bdo> - bidirectional override - kannst du einen Text umgekehrt darstellen. Mit "rtl" gibst du die umgekehrte Richtung an. dir="rtl" - direction="right to left". Eine nette Spielerei.

Dieser Text ist umgekehrt <p><bdo dir="rtl">Dieser Text ist umgekehrt</bdo></p>

Details - Inhalt ausklappen

Ein spannendes Element: <details>. Verstecke nicht allzu wichtigen Text und lasse dem User die Wahl, ob die Details gelesen werden. Es verhält sich wie ein Toggle.

HTML Kopieren

<details>
    <summary>Inhalt anzeigen</summary>
    <div>
        <p>Öffne und schließe dieses Element</p>
        <p>
        <details> ist quasi der Container für den Inhalt.
        <summary> ist der angezeigt Text, der zum Öffnen des Details
            auffordert.
        </p>
    </div>
</details>

Worttrennung & lange Wörter

Lange Wörter können das Layout sprengen, besonders auf kleinen Bildschirmen. Mit <wbr> kannst du Browsern erlauben, an bestimmten Stellen umzubrechen.

Beispiel:

SehrLangesWortMitTrennstelle: <p>SehrLangesWort<wbr>MitTrennstelle</p>

Sonderzeichen & HTML-Entities

Manche Zeichen haben in HTML eine besondere Bedeutung und müssen „escaped“ werden, damit sie vom Browser dargestellt werden. Die wichtigsten findest du hier:

ARIA: Zusätzliche Hinweise für Screenreader

ARIA-Attribute geben Screenreadern Extra-Informationen, wenn HTML selbst nicht genug aussagt. Für normale Texte brauchst du sie kaum - aber gut zu wissen, dass es sie gibt.

Typografie: Kleine Best Practices

Ein paar Grundregeln machen Texte im Web deutlich lesbarer. Sie sind kein Muss, aber gute Orientierung für saubere Typografie.

• Zeilenhöhe: Ideal sind line-height: 1.4-1.7; für längere Lesetexte
• Absatzlänge: 45-90 Zeichen pro Zeile sind am angenehmsten zu lesen
• Nicht mit <br> layouten: <br> ist für echte Zeilenumbrüche gedacht - nicht für Abstände
• Kontraste: Guter Hell/Dunkel-Kontrast ist wichtig für Barrierefreiheit
• Absätze: Genug "Luft lassen" (White Space), z. B. margin-bottom: statt mehrere <br>-Tags setzen

Ruby-Anmerkungen

Für Sprachen wie Japanisch gibt es <ruby>. Damit kannst du Aussprachen oder kleine Übersetzungen direkt über dem Text anzeigen.

漢 kan

Wird nicht oft gebraucht, aber gut zu wissen!

Zusammenfassung

Mit diesen Elementen hast du alles, was du brauchst, um Texte in HTML korrekt und semantisch sauber zu strukturieren. So bleibt deine Website nicht nur übersichtlich, sondern auch barrierefrei und suchmaschinenfreundlich.