Überschriften & Text auszeichnen

Das Gerüst steht – jetzt bekommt deine Seite Inhalt. In dieser Lektion lernst du die Elemente kennen, aus denen praktisch jeder Text im Web besteht: Überschriften, die deine Seite wie ein Inhaltsverzeichnis gliedern, Absätze, die den Lesefluss tragen, und Auszeichnungen, die einzelnen Wörtern Gewicht verleihen. Unterwegs räumen wir die zwei häufigsten Anfängerfehler überhaupt aus dem Weg – und du erfährst, warum es drei Zeichen gibt, die du in HTML niemals direkt tippen solltest.

HTML kennt sechs Überschriftenebenen, von <h1> bis <h6>. Das „h“ steht für heading, die Zahl für die Gliederungstiefe – wie in einem Buch: Die <h1> ist der Buchtitel, <h2>-Elemente sind die Kapitel, <h3>-Elemente die Unterkapitel. In der Praxis kommst du mit den Ebenen 1 bis 3 fast immer aus; <h5> und <h6> begegnen dir selten.

Aus dieser Buch-Logik folgen drei Regeln:

• Genau eine <h1> pro Seite. Sie benennt das Thema der ganzen Seite – so wie ein Buch genau einen Titel trägt.
• Keine Ebene überspringen. Unterhalb einer <h2> folgt eine <h3>, keine <h5>. Eine Gliederung mit Löchern wäre auch in einem Buch verwirrend.
• Nie nach Größe wählen. Ja, der Browser stellt eine <h4> kleiner dar als eine <h2> – aber das ist nur eine Voreinstellung. Wie groß eine Überschrift aussieht, bestimmst du später mit CSS. Die Zahl beschreibt ausschließlich, wo der Abschnitt in der Gliederung steht.

Warum so streng? Weil deine Überschriften nicht nur von Menschen gelesen werden: Screenreader-Nutzerinnen lassen sich alle Überschriften einer Seite als Sprungliste anzeigen und navigieren darüber von Abschnitt zu Abschnitt – Umfragen unter Screenreader-Nutzern zeigen seit Jahren, dass dies der mit Abstand beliebteste Weg ist, sich eine unbekannte Seite zu erschließen. Eine lückenhafte oder nach Optik gewählte Gliederung führt genau diese Menschen in die Irre. Auch Suchmaschinen leiten aus den Ebenen ab, wie deine Inhalte zusammenhängen und was auf der Seite wichtig ist.

Der meiste Text einer Seite lebt in Absätzen: <p>, für englisch paragraph. Jeder zusammenhängende Gedanke bekommt sein eigenes <p>-Element, und der Browser sorgt automatisch für Abstand zwischen den Absätzen.

Erinnerst du dich an die erste Lektion? Der Browser ignoriert Zeilenumbrüche und mehrfache Leerzeichen im Quelltext. Eine Leerzeile zwischen zwei Sätzen erzeugt also keinen neuen Absatz – nur ein neues <p>-Element tut das. Fürs Web gilt außerdem: lieber viele kurze Absätze als wenige lange. Am Bildschirm wird Text eher überflogen als Wort für Wort gelesen, und kompakte Absätze mit je einem Gedanken kommen dem entgegen.

Manchmal soll eine neue Zeile beginnen, ohne dass ein neuer Absatz anfängt – bei einer Postanschrift etwa oder in einem Gedicht gehören die Zeilen inhaltlich zusammen. Genau dafür gibt es <br> (break): ein leeres Element ohne schließendes Tag, das einen Zeilenumbruch erzwingt. Und genau dafür ist es reserviert – <br> ist ein Werkzeug für Sonderfälle, kein Alltagswerkzeug.

Sein Verwandter <hr> (horizontal rule) markiert einen thematischen Bruch: einen Szenenwechsel in einer Geschichte, den Übergang zu einem anderen Thema. Der Browser zeichnet dafür standardmäßig eine Trennlinie. Auch hier greift die goldene Regel: <hr> bedeutet „hier wechselt das Thema“ – wer nur eine dekorative Linie möchte, erzeugt sie später mit CSS.

Innerhalb eines Absatzes kannst du einzelne Wörter oder Satzteile auszeichnen. Die zwei wichtigsten Werkzeuge dafür:

• <strong> bedeutet „das ist wichtig“ – eine Warnung, eine zentrale Aussage, ein Termin, der nicht verpasst werden darf. Browser stellen es fett dar.
• <em> (emphasis) bedeutet „das ist betont“ – so, wie du beim Sprechen ein Wort hervorhebst. Browser stellen es kursiv dar.

Der Unterschied wird beim lauten Sprechen sofort klar: „Ich habe das Fenster geöffnet“ (kein anderer) bedeutet etwas anderes als „Ich habe das Fenster geöffnet“ (nicht die Tür). Genau diese sinntragende Betonung transportiert <em> – und eine Sprachausgabe kann sie hörbar machen.

Vielleicht sind dir auch schon <b> und <i> begegnet. Sie sind nicht verboten, bedeuten aber etwas anderes: rein optische Hervorhebung ohne besondere Wichtigkeit – etwa für Produktnamen oder Fachbegriffe. Der Merksatz für den Anfang: Meinst du „wichtig“ oder „betont“, nimm <strong> oder <em>. Willst du dagegen nur Fettdruck als Gestaltung, ist das ein Fall für CSS – nicht für HTML.

Probiere alles zusammen aus: Verschiebe im Beispiel das <em> auf ein anderes Wort und lies den Satz laut – die Bedeutung kippt. Ergänze eine weitere <h2> mit eigenem Absatz oder ersetze testweise das <strong> durch <b>: Am Aussehen ändert sich nichts, an der Bedeutung schon.

Versuch einmal, im Editor oben den Satz „Eine Überschrift schreibt man mit <h1>“ zu ergänzen – mit echten spitzen Klammern getippt. Das Ergebnis: Die Klammern samt Inhalt verschwinden aus der Vorschau. Der Grund ist logisch: < ist in HTML das Startsignal für ein Tag. Der Browser kann nicht ahnen, dass du das Zeichen diesmal als Text meinst – er beginnt pflichtbewusst, ein Element zu lesen.

Für solche Zeichen mit Doppelrolle gibt es Entities (Zeichenreferenzen): kurze Codes, die mit & beginnen und mit einem Semikolon enden. Der Browser ersetzt sie bei der Anzeige durch das gemeinte Zeichen. Die vier wichtigsten solltest du auswendig kennen:

Und die Umlaute? In alten Tutorials findest du die Anweisung, jedes „ä“ als ä zu verschlüsseln. Das ist seit Jahren überflüssig: Dank <meta charset="utf-8"> aus der letzten Lektion darfst du ä, ö, ü, ß, „deutsche Anführungszeichen“ und sogar Emojis direkt tippen. Voraussetzung ist nur, dass deine Datei tatsächlich als UTF-8 gespeichert ist – bei modernen Editoren die Standardeinstellung.

Es existieren übrigens Hunderte weiterer Entities, etwa © für das ©-Zeichen oder € für das €-Symbol. Auswendig lernen musst du davon keine: Aus demselben Grund wie bei den Umlauten kannst du auch diese Zeichen einfach direkt tippen oder hineinkopieren. Merke also: Entities brauchst du wirklich nur für die wenigen Zeichen mit Doppelrolle – <, > und & – sowie für das unsichtbare geschützte Leerzeichen, das sich anders gar nicht zuverlässig eingeben ließe.

Deine Seiten haben jetzt Struktur und Text – aber sie sind noch einsame Inseln. In der nächsten Lektion „Links: das Web verknüpfen“ lernst du das Element kennen, das dem HyperText seinen Namen gibt: Du verbindest deine Seiten untereinander und mit dem Rest des Webs.