Der <br>
-Tag in HTML: Beispiele und Anwendung
Der <br>
-Tag in HTML steht für „line break“ (Zeilenumbruch) und wird verwendet, um innerhalb eines Textes oder eines Elements einen manuellen Zeilenumbruch einzufügen. Anders als bei Blockelementen wie <p>
oder <div>
bleibt der Kontext des Textes erhalten, und der Umbruch erfolgt direkt im laufenden Inhalt. In diesem Artikel erfahren Sie, wie der <br>
-Tag funktioniert und wann er sinnvoll eingesetzt werden kann.
Grundlegende Syntax von <br>
Der <br>
-Tag ist ein leeres Tag und benötigt daher kein schließendes Gegenstück. Die Syntax ist sehr einfach:
<br>
Beispiel:
<p>Dies ist Zeile 1.<br>Dies ist Zeile 2.</p>
Darstellung im Browser:
Dies ist Zeile 1.
Dies ist Zeile 2.
Anwendung von <br>
Der <br>
-Tag wird häufig verwendet, um:
- Zeilenumbrüche innerhalb von Absätzen oder Textblöcken zu erzwingen.
- Adressen oder Gedichte darzustellen, bei denen feste Zeilenumbrüche notwendig sind.
- In Formularen oder Tabellen mehr Platz zu schaffen, ohne neue Elemente einzufügen.
Beispiel für eine Adresse:
<p>Alexander Müller<br>
Beispielstraße 42<br>
12345 Musterstadt</p>
Best Practices für den Einsatz von <br>
Obwohl der <br>
-Tag in vielen Fällen nützlich ist, sollte er sparsam und bewusst eingesetzt werden. Hier einige Empfehlungen:
- Verwenden Sie
<br>
nur, wenn es wirklich notwendig ist, z. B. bei strukturierten Daten wie Adressen oder Gedichten. - Für reguläre Absätze oder andere inhaltliche Blöcke sollten Sie stattdessen Blockelemente wie
<p>
oder<div>
nutzen. - Nutzen Sie
<br>
nicht, um Layout-Probleme zu lösen. Verwenden Sie hierfür besser CSS.
Styling von <br>
mit CSS
Da der <br>
-Tag selbst unsichtbar ist, gibt es keine direkte Möglichkeit, ihn zu stylen. Allerdings kann der Abstand vor oder nach dem Zeilenumbruch mit CSS angepasst werden, indem Sie auf das umgebende Element einwirken:
Beispiel:
<style>
p {
line-height: 1.8;
}
</style>
Alternative zu <br>
In modernen Webseiten sollte der <br>
-Tag nur gezielt für Inhalte verwendet werden, bei denen ein manueller Zeilenumbruch zwingend erforderlich ist. Für Layout- und Abstandsprobleme sind CSS-Techniken wie margin
und padding
vorzuziehen.
Beispiel mit CSS statt <br>
:
<style>
.absatz {
margin-bottom: 20px;
}
</style>
<p class="absatz">Dies ist der erste Absatz.</p>
<p class="absatz">Dies ist der zweite Absatz.</p>
Fazit
Der <br>
-Tag ist ein einfaches und praktisches Werkzeug, um Zeilenumbrüche in HTML-Inhalten einzufügen. Er sollte jedoch mit Bedacht eingesetzt werden, um die Semantik und Zugänglichkeit Ihrer Webseite nicht zu beeinträchtigen. In den meisten Fällen können Blockelemente und CSS bessere Alternativen bieten. Setzen Sie <br>
gezielt ein, wenn feste Zeilenumbrüche notwendig sind, und kombinieren Sie ihn bei Bedarf mit anderen HTML- und CSS-Techniken, um eine saubere und professionelle Struktur zu erzielen.
Letzte Bearbeitung am Montag, 30. Dezember 2024 – 8:50 Uhr von Alex, Webmaster für Google und Bing SEO.