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

Die Attribute dieses Elements beinhalten die globalen Attribute.

clear Veraltet

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

Das <br>-Element hat einen einzigen, gut definierten Zweck — es erzeugt einen Zeilenumbruch in einem Textblock. Daher hat es weder Dimensionen noch eine eigene 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 Zeilen des Textblocks zu erhöhen, aber dies ist eine schlechte Praxis — Sie sollten die dafür vorgesehene line-height-Eigenschaft verwenden.

Getrennte Textabsätze mit <br> zu erstellen ist nicht nur schlechte Praxis, es ist auch problematisch für Menschen, die mit Hilfe von Bildschirmlesetechnologien navigieren. Screenreader könnten die Anwesenheit des Elements ankündigen, aber keinen Inhalt, der in <br>s enthalten ist. Dies kann für die Person, die den Screenreader benutzt, eine verwirrende und frustrierende Erfahrung sein.

Verwenden Sie <p>-Elemente und nutzen Sie 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