1.4 Überschriften, Absätze und Zeilenumbrüche

Das body-Element enthält den eigentlichen Inhalt des HTML-Dokuments.

Quellcode
HTML
<!DOCTYPE html>

<html lang="de">

    <head>
        <meta charset="utf-8">
        <title>Kaufmännische Schule Tauberbischofsheim</title>
    </head>

    <body>
        <h1>Kaufmännische Schule Tauberbischofsheim</h1>
        <h2>Herzlich Willkommen</h2>
        <p>

Wir freuen uns über Ihr Interesse und<br>hoffen Ihnen auf den folgenden Seiten einen kleinen Einblick in unsere Schule geben zu können.

        </p>
    </body>

</html>
Abb. 1-8: Startseite index.html (Zwischenstand Kapitel 1-4)

Überschriften (h1- bis h6-Elemente)

Eine Überschrift (engl. headline) kann durch die HTML-Elemente h1 bis h6 gekennzeichnet werden. Das h1-Element steht dabei für eine Überschrift der 1. Ebene – vergleichbar dem Titel eines Buches –, das h2-Element für eine Überschrift der 2. Ebene – vergleichbar einer Kapitelüberschrift –, das h3-Element eine Überschrift der 3. Ebene – vergleichbar einer Unterkapitelüberschrift – usw.

Zu beachten ist, dass in jedem HTML-Dokument maximal eine h1-Element erlaubt ist. Außerdem dürfen keine Überschriftenebenen übersprungen werden. Das heißt, ein h3-Element darf nur verwendet werden, wenn es in dem HTML-Dokument ein h1- und mindestens ein h2-Element gibt.

HTML
...
   <body>
      <h1>Kaufmännische Schule Tauberbischofsheim</h1>
      <h2>Herzlich Willkommen</h2>
   </body>
...
Abb. 1-9: Überschriften

Absatz (p-Element)

Ein Absatz ist ein Abschnitt eines fortlaufenden Textes, der aus einem oder mehreren Sätzen besteht und vom Sinn her eine Einheit bildet. Jeder Absatz (engl. paragraph) wir in ein p-Element eingeschlossen.

HTML
...
   <body>
      ...
<p>

Wir freuen uns über Ihr Interesse und hoffen Ihnen auf den folgenden Seiten einen kleinen Einblick in unsere Schule geben zu können.

</p>
   </body>
...
Abb. 1-10: Absatz

Zeilenumbruch br-Tag

Soll innerhalb eines Absatzes ein Zeilenumbruch (engl. line break) erfolgen, muss an der gewünschten Stelle ein br-Tag eingefügt werden.

HTML
...
   <body>
      ...
<p>

Wir freuen uns über Ihr Interesse und<br>hoffen Ihnen auf den folgenden Seiten einen kleinen Einblick in unsere Schule geben zu können.

</p>
   </body>
...
Abb. 1-11: Zeilenumbruch