EMZETT.
Login

Emzett Wiki

HTML + CSS: Überschriften, Absätze und Textformatierung

Properties1
tagsprogrammiersprachen, html-css

3 Min. Lesezeit

Kurz: Es gibt sechs Ebenen: <h1> (wichtigste) bis <h6>. Sie gliedern die Seite wie ein Inhaltsverzeichnis.

Teil des Kurses HTML + CSS

Kapitel 3 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Überschriften

Es gibt sechs Ebenen: <h1> (wichtigste) bis <h6>. Sie gliedern die Seite wie ein Inhaltsverzeichnis.

<h1>Hauptüberschrift (nur eine pro Seite)</h1>
<h2>Abschnitt</h2>
<h3>Unterabschnitt</h3>
<h4>Noch kleiner</h4>

Hinweis

Wähle die Ebene nach der Bedeutung, nicht nach der Größe. Springe nicht von h2 auf h4. Die Größe stellst du mit CSS ein. Screenreader-Nutzer springen per Tastatur von Überschrift zu Überschrift.

Absätze und Zeilenumbrüche

<p>Ein Absatz ist ein Block Text. Der Browser setzt davor und danach Abstand.</p>
<p>Ein zweiter Absatz.<br>Hier beginnt eine neue Zeile ohne neuen Absatz.</p>
<hr>
<p>Die waagerechte Linie <code>hr</code> trennt Themen.</p>

Hervorhebungen mit Bedeutung

ElementBedeutungStandard-Darstellung
<strong>wichtigfett
<em>betontkursiv
<mark>markiert/hervorgehobengelber Hintergrund
<small>Kleingedruckteskleiner
<del> / <ins>gelöscht / eingefügtdurchgestrichen / unterstrichen
<sub> / <sup>tiefgestellt / hochgestelltH<sub>2</sub>O, x<sup>2</sup>
<abbr title="...">Abkürzunggepunktet unterstrichen
<q>kurzes Zitatmit Anführungszeichen
<cite>Titel eines Werkskursiv
<time datetime="...">Datum/Uhrzeit (maschinenlesbar)normal
<p>Das ist <strong>sehr wichtig</strong> und das <em>betont</em>.</p>
<p>Wasser: H<sub>2</sub>O, Fläche: 5 m<sup>2</sup>, <mark>markiert</mark>.</p>
<p><abbr title="HyperText Markup Language">HTML</abbr> ist toll.
   Preis: <del>20 €</del> <ins>15 €</ins>.</p>
<p>Ein Dichter sagte: <q>Das Leben ist kein Ponyhof.</q></p>
<p>Termin: <time datetime="2025-12-24T18:00">24. Dezember, 18 Uhr</time></p>

<b> (fett) und <i> (kursiv) gibt es auch, aber ohne besondere Bedeutung; sie sind nur für Stil gedacht, den man besser mit CSS macht. Nutze <strong> und <em>.

Zitate und Code

<blockquote cite="https://example.org">
  <p>Ein längeres Zitat steht in einem blockquote.</p>
  <footer>Quelle: <cite>Ein berühmtes Buch</cite></footer>
</blockquote>
 
<p>Im Text: <code>console.log("Hi")</code> und die Taste <kbd>Strg</kbd> + <kbd>C</kbd>.</p>
<pre><code>function gruss() {
  return "Hallo";
}</code></pre>
<p>Ausgabe: <samp>Hallo</samp>, Variable: <var>x</var></p>
  • <code>: Computercode im Text
  • <pre>: erhält Leerzeichen und Zeilenumbrüche (für Codeblöcke zusammen mit <code>)
  • <kbd>: Tastatureingabe, <samp>: Programmausgabe, <var>: Variable

Sonderzeichen (Entities)

Die Zeichen <, > und & haben in HTML eine Bedeutung. Willst du sie anzeigen, schreibst du Entities:

ZeichenEntity
<&lt;
>&gt;
&&amp;
"&quot;
geschütztes Leerzeichen&nbsp;
© ® ™&copy; &reg; &trade;
€&euro;
<p>Der Tag &lt;p&gt; erzeugt einen Absatz. Preis: 5&nbsp;&euro; &copy; 2025</p>

Mit UTF-8 kannst du Zeichen wie ä, ß, €, © auch direkt tippen.

Text ausrichten und umbrechen

Das macht CSS (text-align, word-break, hyphens). Ein &shy; markiert eine mögliche Trennstelle, <wbr> eine mögliche Umbruchstelle in langen Wörtern oder URLs.

Merke

  • <h1> bis <h6> gliedern; nur eine <h1>, keine Ebenen überspringen
  • <p> für Absätze, <br> für Zeilenumbruch, <hr> als Trennlinie
  • <strong> (wichtig) und <em> (betont) tragen Bedeutung, <b>/<i> nur Stil
  • <code>, <pre>, <kbd>, <q>, <blockquote>, <time> für spezielle Inhalte
  • Sonderzeichen als Entities: &lt;, &gt;, &amp;, &nbsp;

Übungsaufgabe

Schreibe einen kurzen Text über dein Lieblingsbuch mit Überschrift, zwei Absätzen, einem Zitat, einer hervorgehobenen Stelle und einem Datum mit <time>.

Quiz zur Selbstkontrolle

Weiter im Kurs

Zurück: Das Grundgerüst einer Seite

Weiter: Links und Navigation

Alle Kapitel: HTML + CSS im Überblick

Graphansicht

Backlinks