<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 im obigen Beispiel zu sehen ist, wird ein <br>-Element an jeder Stelle eingefügt, an der der Text umgebrochen werden soll. Der Text nach dem <br> beginnt dann am Anfang der nächsten Zeile des Textblocks erneut.

Die Attribute dieses Elements umfassen 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 – es erstellt einen Zeilenumbruch in einem Textblock. Daher hat es keine eigenen Dimensionen oder visuelle Ausgabe, und es gibt nur sehr wenig, was Sie daran gestalten 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 — nutzen Sie die line-height-Eigenschaft, die für diesen Zweck konzipiert wurde.

Separate Textabsätze mithilfe von <br> zu erstellen, ist nicht nur schlechte Praxis, sondern auch problematisch für Menschen, die mit der Unterstützung von Bildschirmlesetechnologie navigieren. Bildschirmleser können das Vorhandensein des Elements ankündigen, jedoch keinen Inhalt innerhalb der <br>s. Dies kann eine verwirrende und frustrierende Erfahrung für den Benutzer des Bildschirmlesers sein.

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

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