<br>: Das Zeilenumbruch-Element

<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 dem obigen Beispiel entnehmen können, ist an jeder Stelle, an der der Text unterbrochen werden soll, ein <br>-Element eingefügt. Der Text nach dem <br> beginnt wieder am Anfang der nächsten Zeile des Textblocks.

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

clear Veraltet

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

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

Sie können ein margin auf <br>-Elementen selbst setzen, um den Abstand zwischen den Textzeilen im Block zu vergrößern, aber das ist eine schlechte Praxis — Sie sollten die line-height-Eigenschaft verwenden, die dafür entworfen wurde.

Die Erstellung von separaten Textabsätzen mit <br> ist nicht nur eine schlechte Praxis, sondern auch problematisch für Menschen, die mit Hilfe von Bildschirmlesetechnologie navigieren. Bildschirmleser können die Anwesenheit des Elements ankündigen, aber nicht den Inhalt, der innerhalb von <br>-Elementen enthalten ist. Dies kann eine verwirrende und frustrierende Erfahrung für die Person sein, die den Bildschirmleser verwendet.

Verwenden Sie <p>-Elemente und nutzen Sie CSS-Eigenschaften wie margin, um deren Abstand zu kontrollieren.

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

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