HTML Absätze und Zeilenumbrüche

Nachdem du Überschriften kennst, lernst du jetzt, wie du normalen Text auf deiner Webseite strukturierst. Absätze sind das Fleisch deines Contents!

Das `` Tag - Absätze

Das -Tag (von "paragraph" = Absatz) ist das häufigste Element für normalen Fließtext.

Einfacher Absatz

<p>Das ist ein Absatz. Er enthält normalen Text.</p>

<p>Das ist ein zweiter Absatz. Browser fügen automatisch Abstand zwischen Absätzen ein.</p>

Wie es aussieht:

┌─────────────────────────────────────┐
│ Das ist ein Absatz. Er enthält      │
│ normalen Text.                       │
│                                      │ ← Automatischer Abstand
│ Das ist ein zweiter Absatz. Browser │
│ fügen automatisch Abstand zwischen   │
│ Absätzen ein.                        │
└─────────────────────────────────────┘

Wichtig: Leerzeichen und Zeilenumbrüche in HTML

HTML ignoriert zusätzliche Leerzeichen und Zeilenumbrüche!

❌ Das funktioniert NICHT wie erwartet

<p>Zeile 1
Zeile 2
Zeile 3</p>

<!-- Wird angezeigt als: -->
<!-- Zeile 1 Zeile 2 Zeile 3 (alles in einer Zeile) -->

❌ Auch das funktioniert NICHT

<p>Viele     Leerzeichen     zwischen     Wörtern</p>

<!-- Wird angezeigt als: -->
<!-- Viele Leerzeichen zwischen Wörtern (nur einzelne Leerzeichen) -->

Warum? HTML kollabiert:

Multiple Leerzeichen → Zu einem Leerzeichen
Zeilenumbrüche → Werden ignoriert
Tabs → Werden zu Leerzeichen

Mehrere Absätze richtig erstellen

✅ RICHTIG: Jeder Absatz braucht sein eigenes -Tag

Mehrere Absätze - Korrekt

<p>Das ist der erste Absatz. Er behandelt Thema A.</p>

<p>Das ist der zweite Absatz. Er behandelt Thema B.</p>

<p>Das ist der dritte Absatz. Er behandelt Thema C.</p>

❌ FALSCH: Alles in ein -Tag

❌ Nicht so machen!

<p>
Das ist der erste Absatz.

Das ist der zweite Absatz.

Das ist der dritte Absatz.
</p>

<!-- Wird als EIN Absatz ohne Abstände angezeigt! -->

Das ` ` Tag - Zeilenumbruch

Manchmal brauchst du einen Zeilenumbruch INNERHALB eines Absatzes. Dafür gibt's  .

Zeilenumbruch mit

<p>
Erste Zeile<br>
Zweite Zeile<br>
Dritte Zeile
</p>

Wie es aussieht:

Erste Zeile
Zweite Zeile
Dritte Zeile

Wichtig: ` ` ist ein leeres Tag!

  hat kein Closing-Tag. Es gibt zwei Schreibweisen:

<br>        <!-- HTML5 -->
<br />      <!-- XHTML-Stil (auch ok) -->

Beide sind richtig, aber   ist moderner.

Wann ` ` nutzen?

✅ GUTE Verwendung:

Adressen

<p>
WebDev Academy<br>
Musterstraße 123<br>
12345 Berlin<br>
Deutschland
</p>

Gedichte

<p>
Rosen sind rot,<br>
Veilchen sind blau,<br>
HTML ist cool,<br>
Das weiß ich genau!
</p>

❌ SCHLECHTE Verwendung:

❌ NICHT für Abstände verwenden!

<p>Text oben</p>
<br><br><br>  <!-- ❌ SCHLECHT! -->
<p>Text unten</p>

<!-- Nutze stattdessen CSS für Abstände:
<p style="margin-bottom: 60px;">Text oben</p>
<p>Text unten</p>
-->

Regel: Nutze   nur für Zeilenumbrüche innerhalb eines logischen Absatzes. Für Abstände zwischen Absätzen nutze CSS!

Das `<hr>` Tag - Horizontale Linie

Das <hr>-Tag (horizontal rule) erstellt eine Trennlinie zwischen Abschnitten.

Horizontale Linie

<p>Text vor der Linie</p>

<hr>

<p>Text nach der Linie</p>

Wie es aussieht:

Text vor der Linie
━━━━━━━━━━━━━━━━━━━  ← Die <hr>-Linie
Text nach der Linie

Wann `<hr>` nutzen?

✅ GUTE Verwendung:

Abschnittswechsel

<article>
    <h2>Kapitel 1: Die Reise beginnt</h2>
    <p>Es war einmal...</p>

    <hr>

    <h2>Kapitel 2: Das Abenteuer</h2>
    <p>Am nächsten Tag...</p>
</article>

Themenwechsel in einem Artikel

<p>Das waren die Grundlagen von HTML.</p>

<hr>

<p>Jetzt kommen wir zu fortgeschrittenen Themen...</p>

Auch `<hr>` ist ein leeres Tag!

<hr>        <!-- HTML5 -->
<hr />      <!-- XHTML-Stil -->

Praktisches Beispiel: Blog-Artikel

So kombinierst du ,   und <hr> in einem echten Artikel:

Kompletter Blog-Artikel

<!DOCTYPE html>
<html lang="de">
<head>
    <title>Mein erster Blog-Post</title>
</head>
<body>
    <article>
        <h1>Wie ich HTML gelernt habe</h1>

        <p>
            <strong>Autor:</strong> Max Mustermann<br>
            <strong>Datum:</strong> 15. Januar 2025
        </p>

        <hr>

        <p>
            Am Anfang war HTML für mich ein Buch mit sieben Siegeln.
            Überall diese spitzen Klammern, Tags und Attribute.
            Doch dann entdeckte ich WebDev Academy!
        </p>

        <p>
            Der Durchbruch kam, als ich verstand, dass HTML eigentlich
            ganz logisch aufgebaut ist. Jedes Element hat eine Bedeutung
            und einen Zweck.
        </p>

        <hr>

        <h2>Meine Top 3 Tipps</h2>

        <p>
            <strong>Tipp 1:</strong> Übe jeden Tag mindestens 30 Minuten.
        </p>

        <p>
            <strong>Tipp 2:</strong> Baue echte Projekte, nicht nur
            Übungsseiten.
        </p>

        <p>
            <strong>Tipp 3:</strong> Lerne nicht nur HTML, sondern auch
            CSS und JavaScript dazu.
        </p>

        <hr>

        <p>
            Ich hoffe, dieser Artikel hat dir geholfen!
            Viel Erfolg beim Lernen!
        </p>
    </article>
</body>
</html>

Text-Formatierung in Absätzen

Du kannst Text innerhalb von Absätzen formatieren:

Text-Formatierung

<p>
    Das ist <strong>wichtiger Text</strong> (fett).
</p>

<p>
    Das ist <em>betonter Text</em> (kursiv).
</p>

<p>
    Das ist <mark>markierter Text</mark> (hervorgehoben).
</p>

<p>
    Das ist <small>kleiner Text</small>.
</p>

<p>
    Das ist <del>durchgestrichener Text</del>.
</p>

<p>
    Das ist <ins>eingefügter Text</ins> (unterstrichen).
</p>

Hinweis: Mehr zu Text-Formatierung lernst du im nächsten Artikel!

Whitespace und `<pre>` Tag

Wenn du Code oder vorformatierten Text anzeigen willst, der Leerzeichen und Zeilenumbrüche behalten soll, nutze <pre>:

Vorformatierter Text mit <pre>

<pre>
Dies    ist    vorformatierter    Text.
    Leerzeichen     bleiben     erhalten.
Zeilenumbrüche
    auch!
        Sogar Einrückungen!
</pre>

Perfekt für:

Code-Snippets
ASCII-Art
Tabellen aus Leerzeichen

Best Practices

✅ DO:

Ein  pro Absatz
  nur für Zeilenumbrüche innerhalb eines Absatzes
<hr> für thematische Trennungen
Aussagekräftige Absätze (nicht zu lang, nicht zu kurz)

❌ DON'T:

Mehrere   für Abstände (nutze CSS!)
Leere  Tags: 
<hr> nur für Design (nutze CSS-Border!)
Zu lange Absätze (schwer zu lesen)

Häufige Anfängerfehler

Fehler 1: Mehrere ` ` für Abstände

❌ FALSCH:

<p>Absatz 1</p>
<br><br><br>
<p>Absatz 2</p>

✅ RICHTIG:

<p>Absatz 1</p>
<p style="margin-top: 60px;">Absatz 2</p>

Fehler 2: Vergessen, `` zu schließen

❌ FALSCH:

<p>Absatz ohne Closing-Tag
<p>Nächster Absatz

✅ RICHTIG:

<p>Absatz mit Closing-Tag</p>
<p>Nächster Absatz</p>

Fehler 3: Text ohne `` Tag

❌ FALSCH:

<body>
    Das ist einfach nur Text ohne Tag.
</body>

✅ RICHTIG:

<body>
    <p>Das ist Text in einem Absatz-Tag.</p>
</body>

📝 Quiz

Welches Tag brauchst du für einen Zeilenumbruch INNERHALB eines Absatzes?

📝 Quiz

Was passiert, wenn du mehrere Leerzeichen in HTML schreibst?

Sie werden alle angezeigtSie werden zu einem einzigen Leerzeichen zusammengefasstSie werden komplett entferntBrowser zeigen eine Fehlermeldung

Übungsaufgaben

Aufgabe 1: Über-mich-Text

Erstelle eine Seite mit:

h1: "Über mich"
3 Absätze über dich
Zwischen Absatz 2 und 3: eine <hr>

Aufgabe 2: Gedicht

Schreibe ein kurzes Gedicht (4 Zeilen) in EINEM Absatz mit   zwischen den Zeilen.

Aufgabe 3: Kontakt-Seite

Erstelle eine Kontaktseite mit:

h1: "Kontakt"
Absatz mit deiner Adresse (nutze   zwischen den Zeilen)
<hr>
Absatz mit deiner E-Mail und Telefonnummer

Nächste Schritte

Du kennst jetzt:

✅ Absätze mit 
✅ Zeilenumbrüche mit  
✅ Trennlinien mit <hr>

Als Nächstes lernst du:

Text-Formatierung (strong, em, mark)
Links erstellen
Bilder einfügen

⚡

Tipps & Tricks

Drop Cap (Großer Anfangsbuchstabe)

p::first-letter {
  font-size: 3em;
  float: left;
  margin-right: 0.1em;
  line-height: 0.9;
}

Klassischer Zeitungs-Style!

Text-Ellipsis bei langem Text

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

"Langer Text wird abgeschn..."

Erste Zeile anders stylen

p::first-line {
  font-weight: bold;
  color: #333;
}

Weiter so! 🚀

HTML Absätze und Zeilenumbrüche - p, br, hr

HTML Absätze und Zeilenumbrüche

Das `<p>` Tag - Absätze

Wichtig: Leerzeichen und Zeilenumbrüche in HTML

Mehrere Absätze richtig erstellen

Das `<br>` Tag - Zeilenumbruch

Wichtig: `<br>` ist ein leeres Tag!

Wann `<br>` nutzen?

Das `<hr>` Tag - Horizontale Linie

Wann `<hr>` nutzen?

Auch `<hr>` ist ein leeres Tag!

Praktisches Beispiel: Blog-Artikel

Text-Formatierung in Absätzen

Whitespace und `<pre>` Tag

Best Practices

Häufige Anfängerfehler

Fehler 1: Mehrere `<br>` für Abstände

Fehler 2: Vergessen, `<p>` zu schließen

Fehler 3: Text ohne `<p>` Tag

📝 Quiz

📝 Quiz

Übungsaufgaben

Nächste Schritte

Tipps & Tricks

Drop Cap (Großer Anfangsbuchstabe)

Text-Ellipsis bei langem Text

Erste Zeile anders stylen

Gut gemacht! 🎉

Artikel bewerten

Das könnte dich auch interessieren

Das <span> Element - Inline-Container für Text

HTML Text-Formatierung - strong, em, mark & mehr

Das <a> Element - Links und Navigation

HTML Absätze und Zeilenumbrüche - p, br, hr

HTML Absätze und Zeilenumbrüche

Das <p> Tag - Absätze

Wichtig: Leerzeichen und Zeilenumbrüche in HTML

Mehrere Absätze richtig erstellen

Das <br> Tag - Zeilenumbruch

Wichtig: <br> ist ein leeres Tag!

Wann <br> nutzen?

Das <hr> Tag - Horizontale Linie

Wann <hr> nutzen?

Auch <hr> ist ein leeres Tag!

Praktisches Beispiel: Blog-Artikel

Text-Formatierung in Absätzen

Whitespace und <pre> Tag

Best Practices

Häufige Anfängerfehler

Fehler 1: Mehrere <br> für Abstände

Fehler 2: Vergessen, <p> zu schließen

Fehler 3: Text ohne <p> Tag

📝 Quiz

📝 Quiz

Übungsaufgaben

Nächste Schritte

Tipps & Tricks

Drop Cap (Großer Anfangsbuchstabe)

Text-Ellipsis bei langem Text

Erste Zeile anders stylen

Gut gemacht! 🎉

Artikel bewerten

Das könnte dich auch interessieren

Das <span> Element - Inline-Container für Text

HTML Text-Formatierung - strong, em, mark & mehr

Das <a> Element - Links und Navigation

Das `<p>` Tag - Absätze

Das `<br>` Tag - Zeilenumbruch

Wichtig: `<br>` ist ein leeres Tag!

Wann `<br>` nutzen?

Das `<hr>` Tag - Horizontale Linie

Wann `<hr>` nutzen?

Auch `<hr>` ist ein leeres Tag!

Whitespace und `<pre>` Tag

Fehler 1: Mehrere `<br>` für Abstände

Fehler 2: Vergessen, `<p>` zu schließen

Fehler 3: Text ohne `<p>` Tag