Horizontale Linien mit HTML

Mit horizontalen Linien kann man Elemente optisch und semantisch trennen. Man sollte diese jedoch nicht zu häufig verwenden.

Wie baut man nun eine solche Linie ein? Das ist ganz einfach. In HTML gibt des einen Tag dafür, dieser sieht so aus:

<hr />

hr bedeutet horizontal rule. Also horizontale Linie. Wir modifizieren unser HTML Dokument wie folgt:

 <html>
  <!-- Das HTML Dokument beginnt -->
  <head>
   <!-- Der Kopf des HTML Dokuments -->
   <title>
    Hallo Titel
   </title>
  </head>
  <body>
   <!-- Der Inhalt des HTML Dokuments -->
   <!-- Überschrift -->
   <h1>Meine dritte Seite</h1>
   <!-- horizontale Linie -->
   <hr />
  </body>
 </html>

Wenn wir uns das ganze im Browser anschauen sehen wir folgendes:

Absätze in HTML

Unter die Überschrift soll natürlich ein Text. Diese Texte kann man wie in einer Textverarbeitung in Absätze unterteilen.

Wenn man im Englischwöterbuch unter Absatz nachschaut findet man "Paragraph". Da wir Computerleute aber schreibfaul sind kürzen wird das ganze ab und benutzen "p" als Tag

Wir schreiben also unseren ersten Absatz in unser HTML Dokument:

 <html>
  <!-- Das HTML Dokument beginnt -->
  <head>
   <!-- Der Kopf des HTML Dokuments -->
   <title>
    Hallo Titel
   </title>
  </head>
  <body>
   <!-- Der Inhalt des HTML Dokuments -->
   <!-- Überschrift -->
   <h1>Meine vierte Seite</h1> <br/>  
   <!-- horizontale Linie --> 
   <hr />
   <p>
      Das ist mittlerweile meine vierte HTML Seite. 
      Ich weiss jetzt schon wie ein HTML
      Dokument aufgebaut ist und was feste 
      Bestandteile sind. 
      Ich kann auch schon
      Überschriften einbauen und horizontale Linien 
      mit einbauen. Im Moment bin ich dabei einen Textabsatz einzubauen. 
      Das macht mir Spaß !!!
    </p>
   </body>
  </html>

Wenn wir das ganze im Bowser öffnen sieht es so aus:

Vielleicht wunderst du dich darüber, dass der Browser alles hintereinander fügt, statt die eingen Zeilenumbrüche einzuhalten?

Das liegt daran das der Bowser sich automatisch um die Zeilenumbrüche kümmert. Denn nicht jeder hat einen Monitor der gleich groß ist. Manchmal will man aber einen Zeilenumruch erzwingen. Mehr dazu im folgenden Abschnitt