HTML/Textstrukturierung/p

Absätze dienen der Gliederung eines Textes. Sie werden in HTML mit dem p-Element (engl: paragraph) ausgezeichnet.

• 
• 
• 
• 
• 
• 
• 
• 

Beim Erstellen von HTML-Dateien genügt es nicht, im Editor einen harten Zeilenumbruch einzufügen. Browser ignorieren solche Umbrüche (siehe auch HTML/Regeln/Editieren von HTML).

Allgemeines

Beispiel ansehen …

<h1>Textabsätze definieren</h1> <p>Hier beginnt ein Absatz, und hier ist er zu Ende.</p> <p>Hier beginnt ein neuer Absatz, und hier ist er zu Ende.</p>

<p> leitet einen Textabsatz ein. </p> beendet den Textabsatz und steht am Ende des Absatztextes.

ansehen …

Das End-Tag </p> ist in HTML optional, d. h., es muss nicht zwingend angegeben werden. In XHTML hingegen ist es Pflicht. Es ist außerdem auch in HTML guter Stil das schließende </p>-Tag anzugeben. Das verdeutlicht zugleich auch die Bedeutung dieses Tags: Es umfasst einen Textblock - es steht nicht für den Zwischenraum zwischen zwei Absätzen.

Fehlerquellen

Blockelemente in Absätzen

Absatz-Elemente dürfen keine anderen blockerzeugenden Elemente wie z. B. Überschriften, Textabsätze oder Listen enthalten. Das bedeutet für HTML: Beim ersten Auftreten eines Tags, welches nicht mehr im akuellen Textabsatz erlaubt ist (beispielsweise <ul> oder <table>), wird der Textabsatz vom Browser implizit (mit einem intern hinzugefügten </p>) geschlossen - ein eventuell später folgendes schließendes </p> steht dann ohne Start-Tag allein und ist ein Fehler. In XHTML muss das schließende </p> zwingend vor den anderen blockerzeugenden Elementen notiert werden.

Blockelemente in p-Elementen ansehen …

p {
  color: green;
}
div {
  color: red;
}

<p> 
  Dies ist ein Text 
  <div> mit einem div</div>
  und noch etwas Text.
</p>

Der Textabsatz wird unerklärlicherwiese in 3 Blöcken dargestellt. Die Farbzuweisung für p wird nur im ersten Teil ausgeführt, aber nicht im letzten.

ansehen …

Hauptartikel: HTML/Tutorials/HTML & CSS mit dem Seiteninspektor untersuchen

leere Absätze

Abstände zwischen Absätzen werden in HTML oft fälschlicherweise durch einen leeren Absatz ( <p>&nbsp;</p>) oder durch eine Aneinanderreihung mehrerer Zeilenumbrüche ( <br>) realisiert.

Definieren Sie stattdessen den gewünschten Abstand mithilfe der CSS-Eigenschaft margin.

Hauptartikel: HTML/Tutorials/Schreib- und Gestaltungsregeln für Webseiten

Gestaltung

Verwenden Sie CSS, um Text und Absätze nach Ihren Vorstellungen zu formatieren.

Beispiel ansehen …

#one {
  font-family:Arial,sans-serif; 
  font-size: 2em; 
  color:blue;
}

#two {
  background-color: blue;
  border-radius: 5px;
  color: yellow;
}

    <p id="one">Ein formatierter Absatz.</p>
    <p id="two">Ein anderer formatierter Absatz.</p>

Im Beispiel sind zwei Absätze definiert. Für den ersten wird bestimmt, dass er in der Schriftart Arial oder einer anderen serifenlosen Schrift dargestellt wird, 2em Schriftgröße hat und in blauer Farbe erscheint. Der zweite Absatz erhält eine blaue Hintergrundfarbe und eine gelbe Füllung.

ansehen …

Siehe auch

CSS/Tutorials

• Text & Typographie
  • Schriftformatierung
  • Textformatierung
  • Textausrichtung
  • Spalten mit columns

Referenz

• Referenz: p