HTML <p>-Tag
Das HTML <p>-Tag ist ein Blockelement, das verwendet wird, um einen Textabsatz auf einer Webseite zu definieren. Es erzeugt eine neue Zeile vor und nach dem Element und nimmt die volle Breite seines übergeordneten Containers ein.
Dieses semantische Tag wird häufig verwendet, um Textinhalte auf einer Webseite zu strukturieren, wie z. B. Artikel, Blogbeiträge oder Produktbeschreibungen. Sie können andere HTML-Tags wie <strong> oder <em> innerhalb des <p>-Tags einfügen, um bestimmten Wörtern oder Phrasen im Absatz Hervorhebungen oder Formatierungen hinzuzufügen.
Eine korrekte Strukturierung Ihrer Textinhalte mit dem <p>-Tag ist wichtig, da sie die Barrierefreiheit und Benutzerfreundlichkeit Ihrer Webseite verbessern kann. Screenreader und andere Hilfstechnologien verlassen sich auf semantische Tags wie <p>, um Inhalte genau zu interpretieren und den Nutzern darzustellen.
Syntax
Das <p>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<p>) und dem schließenden (</p>) Tag geschrieben. Wenn das schließende Tag weggelassen wird, gilt das Ende des Absatzes als übereinstimmend mit dem Beginn des nächsten Blockelements.
Erfolg
Leerzeichen zwischen dem öffnenden
<p>-Tag und seinem Inhalt werden vom Browser ignoriert. Um einen Einzug festzulegen, verwenden Sie die CSS-Eigenschaft text-indent.
Achtung
Das
<p>-Tag kann keine Tabellen und andere Blockelemente enthalten.
Beispiel für das HTML <p>-Tag:
Beispiel für das HTML <p>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>Ergebnis
Verwendung von CSS
Um Text in einem Absatz auszurichten, verwenden Sie anstelle des veralteten align-Attributs die CSS-Eigenschaft text-align.
Beispiel für das HTML <p>-Tag in Kombination mit der CSS-Eigenschaft text-align:
HTML <p>-Tag mit der CSS-Eigenschaft text-align
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.paragraph {
text-align: center;
}
</style>
</head>
<body>
<h1>Title of the document</h1>
<div class="paragraph">
<p>The text alignment to the center is set with CSS property text-align</p>
</div>
</body>
</html>Beispiel für das HTML <p>-Tag in Kombination mit dem <br>-Tag:
Beispiel für das HTML <p>-Tag mit dem HTML <br>-Tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> Inside the paragraph, we can put the tag <br />, <br /> to transfer a part of the text to another line if necessary.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. <br /> The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| align | right left justify | Definiert die Textausrichtung. Wird in HTML5 nicht unterstützt |
Das <p>-Tag unterstützt auch die Globalen Attribute und die Ereignisattribute.
So stylen Sie ein HTML <p>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: blue;
font-size: 18px;
text-align: justify;
}
</style>
</head>
<body>
<p>This paragraph is styled with CSS.</p>
</body>
</html>Praxis
Was ist der Zweck des HTML <p>-Tags?