<br>: Das Zeilenumbruch-Element

Probieren Sie es aus

<p>
  O'er all the hilltops<br />
  Is quiet now,<br />
  In all the treetops<br />
  Hearest thou<br />
  Hardly a breath;<br />
  The birds are asleep in the trees:<br />
  Wait, soon like these<br />
  Thou too shalt rest.
</p>

p {
  font-size: 1rem;
  font-family: sans-serif;
  margin: 20px;
}

Wie Sie aus dem obigen Beispiel sehen können, wird ein <br>-Element an jeder Stelle eingefügt, an der wir den Text umbrechen möchten. Der Text nach dem <br> beginnt wieder am Anfang der nächsten Zeile des Textblocks.

Attribute

Zu den Attributen dieses Elements gehören die globalen Attribute.

Veraltete Attribute

clear Veraltet

Gibt an, wo die nächste Zeile nach dem Umbruch beginnen soll.

Styling mit CSS

Das <br>-Element hat einen einzigen, klar definierten Zweck — einen Zeilenumbruch in einem Textblock zu erzeugen. Daher hat es selbst keine Dimensionen oder visuelle Ausgabe und es gibt nur sehr wenig, was Sie daran stylen können.

Sie können auf <br>-Elementen selbst ein margin festlegen, um den Abstand zwischen den Zeilen des Textblocks zu vergrößern, aber das ist eine schlechte Praxis — Sie sollten die line-height-Eigenschaft verwenden, die für diesen Zweck entworfen wurde.

Barrierefreiheit

Das Erstellen von getrennten Textabsätzen mit <br> ist nicht nur schlechte Praxis, sondern auch problematisch für Menschen, die mit Hilfe von Screenreader-Technologie navigieren. Screenreader können die Anwesenheit des Elements ankündigen, aber keinen innerhalb von <br>s enthaltenen Inhalt. Dies kann eine verwirrende und frustrierende Erfahrung für die Person sein, die den Screenreader verwendet.

Verwenden Sie <p>-Elemente und verwenden Sie CSS-Eigenschaften wie margin, um deren Abstände zu steuern.

Beispiele

Einfaches br

Im folgenden Beispiel verwenden wir <br>-Elemente, um Zeilenumbrüche zwischen den verschiedenen Zeilen einer Postadresse zu erstellen:

Mozilla<br />
331 E. Evelyn Avenue<br />
Mountain View, CA<br />
94041<br />
USA<br />

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <address>-Element
• <p>-Element
• <wbr>-Element