Sie sind hier: Startseite -> HTML-Grundlagen -> p-Tag (Text -> Absatz)

HTML p-Tag für den Absatz

Absatz auf der Webseite festlegen

Um einen Absatz in einem HTML-Dokument ergo einer Webseite darstellen zu können, gibt es zwei Möglichkeiten. Genau genommen gibt es mehr Möglichkeiten, weil man auch eine Tabelle nutzen könnte, um den Text in verschiedene Zeilen zu unterteilen, aber diese Methode ist schwer veraltet und überhaupt nicht barrierefrei und sollte auf alle Fälle vermieden werden!

Der Absatz erfolgt über den p-Tag und bietet insofern eine schöne Lösung, als man mit CSS die Absätze frei definieren kann. Man kann festlegen, ob es einen größeren oder kleineren Zeilenabstand gibt, wie groß der Abstand zu den anderen Elementen ist oder welche Schriftart man verwenden möchte.

Absätze in einem HTML-Dokument bestimmen

Der Code ergibt folgendes:

Das ist ein Absatz, den ich geschrieben habe, um Text auf die Seite zu bringen. Der Text soll schön formatiert werden.
Durch den obigen br-Befehl kann man in einem Absatz eine Zeilenschaltung vornehmen.

Text mit Absätze durch p-tag gliedern

Daher bleiben zwei moderne Techniken: die Trennung des Textes durch den br-Tag oder durch den P-Tag. Der br-Tag steht für Break und ist eine Zeilenschaltung, wie man sie von der Schreibmaschine her kennt. Er wird oft verwendet, um eine neue Zeile zu beginnen.


Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)


Doch ein richtiger Absatz ist das nicht. Der Absatz wird durch den p-Tag erzeugt, wodurch dem Browser mitgeteilt wird, dass nun ein neuer Absatz beginnt. Der Buchstabe p steht dabei für Paragraph, also für einen Absatz, der natürlich unterschiedlich lang sein kann, abhängig von der Situation.

Der große Vorteil des p-Tag gegenüber dem br-Tag besteht darin, dass man mittels CSS den Absatz genau definieren und formatieren kann. Zwar könnte man den Abstand beim br-Tag auch steuern, aber damit ist nur der Abstand selbst zu koordinieren.

Absätze mit CSS gestalten

Mittels p-Tag kann man via CSS viel mehr machen. So sind die Links pro p-Tag unterschiedlich definierbar, sodass alle Links eines bestimmten p-Tags, den man zusätzlich mit einem Namen versehen kann, einheitlich gestaltet. Wenn man beispielsweise dem p-Tag eine CSS-Klasse hinzufügt, beispielsweise durch class="News", dann ist man zentral in der Lage, die Links zu verändern, wenn dies gewünscht ist und muss nicht jeden Link manuell bearbeiten.

Außerdem kann durch die Kombination von Absatz und CSS der Abstand zu allen anderen Objekte und Flächen auf der Webseite gesteuert werden. Damit hat man ein sehr leistungsfähiges Werkzeug, um Text zu steuern und auch das nachträgliche Ändern von Abständen ist ungleich einfacher. Man stelle sich vor, dass man durch einen Wechsel des Layouts bei einer Webseite mit 50 Unterseiten alle Abstände manuell verändern müsste. Mit CSS und dem p-Tag ist das eine Geschichte von einer Stunde oder vielleicht sogar kürzer.

Lesen Sie auch

Der Text ist der eigentliche Inhalt, wobei es nicht immer Text sein muss. Manche Webseiten bestehen aus einem einzigen Forum, andere aus verschiedenen Bildergalerien. Aber der Text ist meistens im Mittelpunkt und damit auch seine mögliche Gestaltung. Ein wesentlicher Faktor ist die gewählte Textgröße und dann ist man auch schon bei der Schriftgestaltung von Fett bis Kursiv oder dem Unterstreichen angelangt.

Und dann gibt es die Themen, die bei der generellen Gestaltung wichtig sind. Dazu gehört die Überschrift, dazu gehört die Entscheidung zwischen Absatz und Zeilenumbruch sowie die Links als weiterführende Technik auf die nächsten Seiten, in der Navigation oder auch zu externen Quellen.

Themenseiten

Diesen Artikel teilen

Infos zum Artikel

p-tag für Absatz in HTMLArtikel-Thema: HTML p-Tag für den Absatz
Beschreibung: Der 🌍 p-Tag in HTML dient zur Festlegung und Gestaltung der ✅ Absätze im Text mit entsprechenden Zeilenabständen und Schriftarten.

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel