HTML/Textstrukturierung/p

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Ein p-Element definiert einen Textabsatz. p steht dabei für paragraph, also Absatz, Abschnitt.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0
  • HTML5

Absätze dienen der Gliederung eines Textes. Beim Erstellen von HTML-Dateien genügt es nicht, im Editor einen harten Zeilenumbruch einzufügen. WWW-Browser ignorieren solche Umbrüche (siehe auch HTML/Regeln/Editieren von HTML).

Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Textabsätze definieren</title> </head> <body> <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> </body> </html>
<p> leitet einen Textabsatz ein. </p> beendet den Textabsatz und steht am Ende des Absatztextes.

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.

Beachten Sie: 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.

Für den Absatztext gelten die Aussagen zum Zeichenvorrat und HTML-eigenen Zeichen.


[Bearbeiten] Textabsätze mit CSS formatieren

Wie der Text eines Absatzes genau dargestellt wird, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen, um den Text darzustellen. Mit Stylesheets (CSS) können Sie Ihre Textabsätze jedoch nach Wunsch formatieren. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0
  • HTML5
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Textabsätze mit CSS formatieren</title> <style> #one {font-family:Arial,sans-serif; font-size:18px; color:blue;} #two {background-color:yellow;} </style> </head> <body> <h1>Textabsätze mit CSS formatieren</h1> <p id="one">Ein formatierter Absatz.</p> <p id="two">Ein anderer formatierter Absatz.</p> </body> </html>
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, 18 Pixel Schriftgröße hat und in blauer Farbe erscheint. Der zweite Absatz erhält eine gelbe Hintergrundfarbe.

Verwenden Sie keinesfalls leere Absätze, also <p></p> oder <p> (fehlende Tags fügt der Browser automatisch hinzu), um Abstände zwischen Textabschnitten zu erhalten. Definieren Sie stattdessen den gewünschten Abstand mithilfe der CSS-Eigenschaft margin.

[Bearbeiten] siehe auch

  • Referenz: p
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML