Zum Hauptinhalt springen

HTML-Zeilenumbruch: Wie kann ich einen Zeilenumbruch im HTML-Code vornehmen

HTML ist die primäre Markup-Sprache für Webseiten und Textdokumente. Es ermöglicht uns, die Struktur und das Design von Inhalten zu erstellen. Der Zeilenumbruch, den wir in Textverarbeitungsprogrammen oder normalen Dokumenten gewöhnt sind, scheint jedoch im HTML-Code oft nicht vorhanden zu sein.

Dadurch kann der Text im Browser als fester Absatz ohne sichtbaren Zeilenumbruch angezeigt werden. Dies kann das Lesen und die Wahrnehmung von Informationen erschweren. Es gibt jedoch spezielle Techniken und Tags in HTML, die uns dabei helfen, Zeilenumbrüche vorzunehmen und den Text nach unserem Ermessen zu formatieren.

Eine Möglichkeit, einen Zeilenumbruch im HTML-Code vorzunehmen, besteht darin, ein Tag zu verwenden . Dieses Tag ist nicht dazu gedacht, Absätze zu trennen, aber es erlaubt uns, eine neue Zeile innerhalb eines Absatzes zu erstellen. Fügen Sie dieses Tag einfach an der richtigen Stelle ein, an der der Text zur nächsten Zeile wechseln soll.

Eine andere Möglichkeit, einen Zeilenumbruch vorzunehmen, besteht darin, Absätze mit einem Tag zu verwenden . Im Gegensatz zum Tag , Kennung erstellt einen separaten Textblock und fügt automatisch einen leeren Raum vor und nach diesem Block hinzu. Standardmäßig fügt der Browser den Absätzen auch Einrückungen von oben und unten hinzu. Wenn Sie einen neuen Absatz erstellen müssen, schließen Sie einfach den vorherigen Absatz mit dem Tag und fügen Sie einen neuen Absatz hinzu.

Was ist ein Zeilenumbruch?

Im HTML-Code kann ein Zeilenumbruch mit einem Tag durchgeführt werden
. Mit diesem Tag können Sie einen Zeilenumbruch an einer beliebigen Stelle im Textblock einfügen, ohne einen neuen Absatz zu erstellen. Es ist nützlich, einen Zeilenumbruch zu verwenden, wenn Sie zwischen zwei Textteilen einen Raum erstellen oder ein einzelnes Fragment auswählen möchten.

Beispiel für die Verwendung eines Tags
:

Text der ersten Zeile
Text der zweiten Zeile

Dadurch wird der Browser angezeigt:

Text der ersten Zeile
Text der zweiten Zeile

Außer dem Zeilenumbruch mit einem Tag
Sie können andere Formatierungselemente wie Tags verwenden

, , , mit denen Sie komplexere Textstrukturen mit unterschiedlichen Eigenschaften und Effekten erstellen können.

Zeilenumbruch in HTML

Es gibt mehrere Möglichkeiten, einen Zeilenumbruch in HTML zu erstellen. Dies kann nützlich sein, um Text zu formatieren und ein lesbareres Aussehen des Inhalts zu gewährleisten.

Kennung br: der einfachste Weg, einen Zeilenumbruch in HTML zu erstellen, ist die Verwendung eines Tags br. Es hat kein schließendes Tag und fügt einfach einen Zeilenvorschub hinzu.


Erste Zeile
Zweite Zeile

Erste Zeile
Zweite Zeile

Kennung p: eine andere Möglichkeit, einen Zeilenumbruch zu erstellen, besteht darin, ein Tag zu verwenden p für jede Textzeile. Dies fügt Einrückungen hinzu und macht den Text strukturierter.


Erste Zeile

Zweite Zeile

Abhängig von Ihrer spezifischen Situation können Sie eine dieser Zeilenumbruchmethoden auswählen, um die gewünschte Art von Inhalt zu erstellen. Verwenden Sie sie mutig, um die Struktur und Lesbarkeit Ihres Textes zu verbessern!

Wie mache ich einen Zeilenumbruch

Es gibt mehrere Möglichkeiten, einen Zeilenumbruch im HTML-Code zu implementieren:

Mit einem Tag

Der einfachste Weg, einen Zeilenumbruch vorzunehmen, besteht darin, ein Tag zu verwenden
. Dieses Tag hat kein schließendes Tag und erzeugt eine leere Zeichenfolge innerhalb eines Absatzes oder eines anderen Containers.

Verwenden von Blockelementen

Eine andere Möglichkeit ist die Verwendung von Blockelementen wie

oder. Jedes Blockelement erstellt einen neuen Block, der mit einer neuen Zeile beginnt, sodass sich der Text, der sich in verschiedenen Blöcken befindet, auf verschiedenen Zeilen befindet.

Mit der CSS-Eigenschaft "white-space: pre;"

Mit CSS können Sie Leerzeichen und Zeilenumbrüche genau so definieren, wie sie im Quellcode angegeben sind. Dazu müssen Sie die Eigenschaft "white-space: pre;" auf das Tag anwenden, in dem Sie alle Leerzeichen und Zeilenumbrüche speichern möchten.

Beachten Sie, dass eine Verletzung der HTML-Entwurfsregeln dazu führen kann, dass die Seite in Browsern nicht korrekt angezeigt wird.

Verwenden eines Tags

Um einen Zeilenumbruch mit einem Tag zu erstellen
. es genügt, es an der richtigen Stelle des Codes einzufügen:

Platzieren Sie mental br-Tags zwischen diesen WÖRTERN.

Auf diese Weise wird nach jedem Wort ein Zeilenumbruch erstellt, um den Text strukturierter und lesbarer erscheinen zu lassen.

Es ist wichtig zu beachten, dass die Verwendung des Tags
dies kann unnötig dazu führen, dass der Text nicht korrekt angezeigt wird und die Struktur des Textes nicht korrekt angezeigt wird. Daher sollte es mit Vorsicht und nur dort angewendet werden, wo es wirklich benötigt wird.

Alternative Möglichkeiten zum Zeilenumbruch

In HTML gibt es neben der Verwendung eines Tags mehrere Möglichkeiten, einen Zeilenumbruch zu erstellen
. Betrachten wir einige von ihnen:

  • Verwenden eines Tags

    . Dieses Tag erstellt einen Absatz und fügt automatisch einen Zeilenumbruch vor und nach dem Absatzinhalt hinzu.

  • Verwenden von Tags
      , und
    • . Diese Tags erstellen eine nicht nummerierte Liste, eine nummerierte Liste bzw. ein Listenelement. Jedes Element in der Liste befindet sich in einer separaten Zeile, wodurch ein Zeilenumbrucheffekt entsteht.

    Wenn Sie einen Zeilenumbruch innerhalb des Textes erstellen müssen, ohne einen neuen Absatz oder eine neue Liste zu erstellen, können Sie unsichtbare Zeichen wie oder ­ verwenden. Diese Zeichen erlauben Zeilenumbrüche an bestimmten Stellen, haben jedoch keinen Einfluss auf die Anzeige des Textes.

    Verwenden eines Tags
    um eine Zeichenfolge im HTML-Code zu umbrechen

    Um einen Zeilenumbruch mit einem Tag einzufügen
    . platzieren Sie es einfach an der richtigen Stelle im HTML-Code. Zum Beispiel:

    Пример использования тега

    для создания переноса строки.

    Beispiel für die Verwendung eines Tags

    um einen Zeilenumbruch zu erstellen.

    Es ist wichtig zu beachten, dass die Verwendung eines Tags nicht zum Erstellen strukturierter Textinhalte empfohlen wird. Stattdessen sollten Sie Blockelemente wie ein Tag verwenden, um Textabsätze zu platzieren. Das Tag wird am besten verwendet, um bei Bedarf einen Zeilenumbruch in einen Textblock einzufügen.

    Fehler beim leeren br-Tag

    Ein leerer br-Tag-Fehler tritt auf, wenn das br-Tag ohne das schließende Tag verwendet wird. Das br-Tag dient zum Erstellen eines Zeilenumbruchs im HTML-Code.

    Wenn das br-Tag jedoch kein schließendes Tag hat, wird es als leeres Tag betrachtet, was zu einem Fehler oder einer unerwünschten Anzeige des Inhalts führen kann.

    Der folgende Code enthält beispielsweise einen Fehler für ein leeres br-Tag:

    Это первая строка
    Это вторая строка

    Um einen Fehler in einem leeren br-Tag zu vermeiden, müssen Sie immer einen schließenden Schrägstrich verwenden:

    Это первая строка
    Это вторая строка

    Das br-Tag zeigt nun den Zeilenumbruch korrekt an.

    Einfluss eines leeren BR-Tags auf das Layout

    Ein leeres br-Tag (aus dem Englischen. "break") wird in HTML verwendet, um einen Zeilenumbruch ohne Absatzeinzug zu erstellen. Es wirkt sich auf das Layout aus und kann in einigen Fällen nützlich sein, kann aber auch Probleme verursachen, wenn es nicht richtig verwendet wird.

    Wenn ein leeres br-Tag nach einem Absatz eingefügt wird, wird ein Zeilenumbruch erstellt, ohne einen neuen Absatz hinzuzufügen. Dies kann nützlich sein, wenn Sie eine Lücke zwischen zwei Inhaltszeilen erstellen möchten, ohne einen neuen Absatz zu erstellen oder zusätzliche Stile hinzuzufügen.

    Auf den ersten Blick scheint es, dass die Verwendung eines leeren br-Tags zum Erstellen eines Zeilenumbruchs ein einfacher Weg ist. Die unkontrollierte Verwendung von br kann jedoch zu einer Verletzung der Struktur und Semantik Ihres HTML-Codes führen.

    Seien Sie vorsichtig, wenn Sie ein leeres br-Tag verwenden, insbesondere wenn Sie Inhalte für Suchmaschinen erstellen. Ein leeres br-Tag wird möglicherweise nicht korrekt als ein trennender Absatz interpretiert, was sich auf die Relevanzbewertungsalgorithmen und die visuelle Anzeige in den Suchergebnissen auswirken kann.

    Anstatt häufig leere br-Tags zu verwenden, wird empfohlen, CSS zu verwenden, um die gewünschten Einrückungen und Zeilenumbrüche zu erstellen. Mithilfe von Stilen können Sie das Layout flexibel steuern und eine klarere Codestruktur bereitstellen.

    Die korrekte Verwendung eines leeren br-Tags ist eine der wichtigsten Komponenten, um ein qualitativ hochwertiges und semantisch korrektes Layout in HTML zu erstellen.

    Standardregeln zum Umbrechen von Text

    1. Verwenden Sie das Tag

    Sie können Text mit einem Tag umbrechen. Mit diesem Tag können Sie Absätze erstellen und den Text automatisch in eine neue Zeile umbrechen.

    2. Verwenden Sie das Tag

    Kennung lets tun Zeilenumbruch innerhalb eines Absatzes oder zwischen Elementen. Wenn Sie beispielsweise zwei Wörter trennen möchten, können Sie Folgendes einfügen dazwischen.

    3. Text ausrichten

    Für eine flexiblere Steuerung der Textanordnung können Sie die CSS-Eigenschaft verwenden text-align. Zum Beispiel, indem Sie einen Wert angeben justify, Der Text wird auf beiden Seiten ausgerichtet.

    4. Verwenden Sie Stile für Text

    Sie können dem Text verschiedene Stile hinzufügen, um seine Lesbarkeit und sein Aussehen zu verbessern. Verwenden Sie beispielsweise ein Tag, um das Design fett hervorzuheben.

    5. Machen Sie den Text lesbar

    Vergessen Sie nicht, dass Ihr Text für alle Benutzer, einschließlich Menschen mit Behinderungen, lesbar sein sollte. Daher wird empfohlen, den richtigen Kontrast und die richtige Schriftgröße zu verwenden.

    Auswirkung der Blockbreite auf den Zeilenumbruch

    Der Zeilenumbruch im HTML-Code kann von der Breite des Blocks abhängen, in dem sich der Text befindet. Wenn die Breite des Blocks nicht ausreicht, um den gesamten Text in einer Zeile anzuzeigen, verschiebt der Browser ihn automatisch in die nächste Zeile.

    Wenn jedoch die Breite des Blocks ausreichend ist und der Text kurz genug ist, kann es zu einem Zeilenumbruch kommen, selbst wenn Sie ihn explizit mit einem Tag angegeben haben
    . In diesem Fall wird der Text in einer Zeile ohne Umbruch angezeigt.

    In solchen Situationen können Sie die CSS-Eigenschaft verwenden - word-wrap mit Wert break-word. Mit dieser Eigenschaft kann der Browser Wörter in die nächste Zeile umbrechen, auch wenn sie nicht in eine einzelne Blockzeile passen.

    Beachten Sie auch, dass bei Verwendung einer festen Blockbreite der Text automatisch in die nächste Zeile umbrochen wird, wenn die Grenze für die angegebene Breite erreicht ist. In diesem Fall wird der Zeilenumbruch auch ohne Verwendung des Tags erfolgen
    .