Erstellen von Zeilenumbrüchen und Absätzen mit den P & BR-Tags

Beim Erlernen von HTML sind zwei Tags, die die meisten Leute früh lernen, die Absatz- und Zeilenumbruchs-Tags

und
beziehungsweise. Diese Tags setzen natürliche Textstellen ein, damit der Inhalt Ihrer Webseite leichter lesbar ist. Diese Tags sind zwar relativ einfach zu verwenden, können aber auch zu Verwirrung führen und missbraucht werden.

Korrekte Verwendung des HTML-Absatzelements

Das Absatzelement

wird als Tag-Paar mit der verwendet

Tag beim Öffnen des Elements und der

Tag schließen Beim Schreiben von HTML4 oder HTML5 ist das End-Tag technisch nicht erforderlich, es wird jedoch als bewährte Methode betrachtet, dieses Tag zu schließen. In XHTML das Schließen

Wird benötigt.

Sie verwenden das Absatzelement auf einer Website genauso wie beim Schreiben von Inhalten für Off-Web-Anforderungen - wenn Sie eine neue Idee oder einen neuen Punkt beginnen möchten. Die meisten Browser zeigen Absätze mit einer Leerzeile an. Hier ist ein Beispielabsatz in HTML:

Jetzt ist es an der Zeit, dass alle guten Männer ihrem Land zur Hilfe kommen. Der schnelle braune Fuchs sprang über den faul schlafenden Hund.

Viele andere Tags können zwischen dem öffnenden und dem schließenden Absatz-Tag erscheinen.

Korrekte Verwendung des HTML-Zeilenumbruchelements

Das Zeilenumbruchelement
tag ist ein Singleton-Tag - es hat kein End-Tag. In XHTML müssen Sie das Tag mit einem abschließenden Schrägstrich verwenden (
), aber in HTML (einschließlich HTML5) ist dies nicht erforderlich.

Das break-Element ist ein erzwungener Zeilenumbruch innerhalb des Textflusses der Webseite. Sie verwenden es, wenn Sie möchten, dass der Text in der nächsten Zeile fortgesetzt wird, der Inhalt ist jedoch keine separate Idee oder ein gesonderter Punkt, der ihn zu einem anderen Absatz machen würde. Ein Beispiel hierfür ist die Poesie, bei der Zeilenumbrüche normalerweise fest sind.

Hier ist ein Beispiel für einen Zeilenumbruch innerhalb eines Absatzes:

Jetzt ist es an der Zeit, dass alle guten Männer ihrem Land zur Hilfe kommen.
Der schnelle braune Fuchs sprang über den faul schlafenden Hund.

Da es sich bei dem Zeilenumbruch-Tag um ein Singleton-Tag handelt, können darin keine anderen Tags verwendet werden.

Häufige Missbräuche der

und
Stichworte

Benutzer, die mit der Kodierung noch nicht vertraut sind, machen beim Markieren einer Webseite einige häufige Fehler mit den Absätzen und Zeilenumbrüchen.

• Verwenden
  um die Länge einer Textzeile zu ändern: Wenn Sie mit dem break-Tag versuchen, den Text auf bestimmte Weise aufzurufen oder zu unterbrechen, stellen Sie sicher, dass Ihre Seiten in Ihrem Browser gut aussehen, jedoch nicht unbedingt in einem anderen Browser und sicherlich nicht auf allen Geräten. Wenn es sich bei Ihrer Website um eine responsive Website handelt, ändert sich das Layout basierend auf den verschiedenen Bildschirmgrößen. Der Browser fügt automatisch den Zeilenumbruch ein und dann, wenn es darum geht
  tag wird der Text erneut umbrochen, was zu kurzen Zeilen und langen Zeilen und abgehacktem Text führt. Sie sollten CSS-Stylesheets verwenden, um visuelle Stile zu bestimmen, anstatt zu versuchen, das Layout durch Hinzufügen bestimmter HTML-Elemente zu erzwingen.
• VerwendenRaum zwischen den Elementen hinzufügen: Auch hier wird HTML verwendet, um ein visuelles Layout (in diesem Fall Abstand) zu erstellen, anstatt CSS zu verwenden. Dies ist eine gängige Praxis bei einigen HTML-Editoren, und obwohl dies technisch nicht falsch ist, führt dies zu unhandlich aussehendem HTML-Code und kann später verwirrend sein. Sie entspricht auch nicht den Webstandards und der Trennung von Struktur und Stil. In einigen Fällen kann die Verwendung geschützter Leerzeichen in ansonsten leeren Absatz-Tags zu unerwarteten Abständen in verschiedenen Browsern führen, da dies alle unterschiedlich zu interpretieren scheint. Die beste Lösung, um die für Ihr Design erforderlichen Abstandselemente zu erreichen, ist die Verwendung von Stylesheets.

Weitere Informationen zu diesen und anderen Tags finden Sie in dieser HTML-Tagliste.