Websiteentwicklung: XHTML: Überschriften

Überschriften: h1, h2, h3, h4, h5, h6

Es ist sehr wichtig, dass Sie Ihre Seite mit Überschriften strukturieren. Dies hilft dem Leser enorm, verschiedene Teile der Seite zu unterscheiden und hilft Ihnen, Ihren Text strukturiert und gut verständlich zu schreiben.

In XHTML haben Sie eine Kaskade von sechs Elementen für Überschriften zur Auswahl. Dabei gibt eine Zahl im Elementnamen die Stellung in der Kaskade an, grob also, ob es sich um einen Seitentitel, ein Kapitel, einen Abschnitt, einen Unterabschnitt etc handelt. Dazu gibt es die Elemente h1, h2, h3, h4, h5, h6. Der Buchstabe 'h' steht für englisch headline (auf Deutsch 'Überschrift'). Die Zahl gibt die Stellung der jeweiligen Überschrift in der Dokumentstruktur oder Abschnittskaskade des Dokumentes an. 1 ist am höchsten und 6 am niedrigsten. Bei einer graphischen Darstellung wird als Kennzeichen für die Stellung in der Kaskade die Größe geändert. 1 ist hierbei die Größte und 6 die Kleinste.

Die Überschriftenelemente selbst sind Blockelemente. Der Inhalt ist entweder Text oder inzeilige Elemente. Spezifische Attribute haben die Überschriftenelemente nicht. Die allgemeinen sind natürlich nutzbar.

Generell sollten Dokumente so strukturiert werden, dass mit der h1 begonnen wird, die nächste Unterstruktur h2 verwendet etc. Im allgemeinen ist es nicht sinnvoll, in der Struktur von 1 auf 3 zu springen oder mit 2 zu beginnen und mit 4 fortzufahren. Die Zahlen bilden also die logische Struktur ab. Dabei ist es auch relevant anzumerken, dass XHTML kein Element für etwas wie Untertitel vorsieht, welcher vor oder nach dem eigentlichen Titel zu notieren wäre. Dazu dient die Kaskade der Überschriften nicht, dies müsste zum Beispiel nach der Überschrift mit div und CSS realisiert werden oder in der Überschrift mit inzeiligen Elementen und CSS, nicht mit einer Kombination aus zwei verschiedenen Überschriftelementen.

Der Arbeitsentwurf für HTML5 schlägt für die Konstruktion von Überschrift und Untertitel eine elegantere Struktur vor, bei der zum einen ein Kopfbereich ausgezeichnet werden kann, aber auch der ganze Abschnitt in einem spezifischen Element notiert werden kann, wofür bislang nur das generische div verfügbar ist. Das Problem ist also in Arbeit, die derzeit allerdings noch nicht abgeschlossen ist.

Beispiel

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Eine Seite mit Überschriften strukturieren</title>
   </head>
   
   <body>
      <h1>Über mich</h1>
      <h2>Adresse</h2>
      <p>Thomas Delle<br />
      Computerstraße 32<br />
      12321 Interhausen
      </p>
      <h2>Hobbies</h2>
      <p>In meiner Freizeit treibe ich viel Sport, treffe mich gerne mit Kollegen. 
      Ich befasse mich intensiv mit dem Computer 
      und erstelle verschiedenste Homepages.</p>
   </body>
</html>

Sie sehen, dass hier den verschiedenen Absätzen ein Titel hinzugefügt wurde. Dieser Titel sagt klar aus, was nun folgt und gibt der Seite eine klare Struktur.

Als Tip für das Schreiben sei angemerkt, dass man immer mal wieder überprüfen sollte, ob der zur Überschrift gehörende Text noch inhaltlich zur Überschrift paßt. Im Laufe des Schreibens passiert es schnell, dass der Autor vom Thema abschweift. Eine Kontrolle anhand der Überschrift kann ihn schnell wieder auf den richtigen Pfad bringen. Abweichungen können natürlich auch darauf hinweisen, dass Kapitel fehlen, die dann noch nachträglich hinzugefügt werden können. Dies kann wiederum eine Umstrukturierung des Textes bewirken. Somit sind Überschriften auch für den Autor eine gute Hilfe, um seine Gedanken zu strukturieren, wobei eine zuvor skizzierte Überschriftenliste, ein grobes Inhaltsverzeichnis hilft zu überschauen, ob der Inhalt in einer schlüssigen Reihenfolge angeordnet ist oder wo in der Argumentation noch Lücken sind.

Um Mehrdeutigkeiten zu vermeiden, kann es auch sinnvoll sein, jede Stufe der Struktur mit einem div zu umgeben, was etwa sinnvoll sein kann, wenn ein Abschnitt nach einigen Unterabschnitten weitergeht. Es kann auch helfen, das Layout oder die Ergonomie des Dokumentes mit CSS zu verbessern:

<div>
 <h1>Über Amphibien</h1>
 <p>...Text...</p>
 <div>
  <h2>Über Frösche</h2>
  <p>...Text...</p>
  <div>
    <h3>Krumpliger Sumpfer</h3>
    <p>...Text...</p>
  </div>
  <div>
    <h3>Schmuddliger Blupper</h3>
    <p>...Text...</p>
    <div>
     <h4>Nordhessischer Krummblupper</h4>
     <p>...Text...</p>
    </div>
    <div>
     <h4>Südhessischer Kampfblupper</h4>
     <p>...Text...</p>
    </div>
    <div>
      <h4>Ostwestfälischer Zierblupper</h4>
      <p>...Text...</p>
      <div>
        <h5>Lübbecker Buntblupper</h5>
        <p>...Text...</p>
      </div>
      <div>
        <h5>Espelkamper Feenblupper</h5>
        <p>...Text...</p>
        <div>
          <h6>Isenstedter Roter Torfblupper</h6>
          <p>...Text...</p>
        </div>
        <div>
          <h6>Frotheimer Blauer Dorfteichblupper</h6>
          <p>...Text...</p>
        </div>
        <p> Hinweise zu eingetragenen Espelkamper Blupper-Züchter-Vereinen</p>
      </div><!-- Ende Espelkamper Blupper -->
      <p> Schlußbemerkung über Ostwestfälische Blupper</p>
    </div><!-- Ende Ostwestfälische Blupper -->
  </div><!-- Ende Blupper --> 
  <div>
    <h3>...etc</h3>
    <p>...Text...</p>
  </div>
 </div><!-- Ende Frösche --> 
 <p>weiter über Amphibien allgemein, Überleitung</p>
 <p>...Text...</p>
 <div>
  <h2>Über Schlangen</h2>
  <p>...Text...</p>
 </div><!-- Ende Schlangen -->
 <p>Weiter über Amphibien allgemein, Überleitung</p>
 <p>...Text...</p>
 <div>
  <h2>Nächste Amphibienart</h2>
  <p>...Text...</p>
 </div>
</div>

Da den Endmarkierungen allein nicht anzusehen ist, zu welcher Anfangsmarkierung sie gehören, was sich erst aus der Gesamtstruktur ergibt, wurden hier einfach neben den Einrückungen im Quelltext Kommentare als Hilfen für den Autor verwendet, um sich in der Struktur nicht zu verirren.

Während auch hier der Arbeitsentwurf für HTML5 speziellere Elemente vorschlägt, gibt es solche in den aktuellen Versionen von XHTML leider noch nicht. Eine Definitionsliste etwa eignet sich eher für kleinere, einfachere Strukturen wie Definitionen von Begriffen, nicht um damit ein komplettes Kapitel oder gar Buch zu schreiben. Mittels RDFa läßt sich natürlich genauer spezifizieren, welche Rolle die div-Elemente hier spielen, wobei dies implizit durch die inhaltliche Funktion der Überschriftenkaskade bereits klar ist.

Hinweis: Wenn Sie die Seiten von Wikibooks und Wikipedia einmal auf ihre Struktur untersuchen, sehen Sie gut, dass überall Überschriften zur Strukturierung der Seiten benutzt werden.

Aufgabe 6

Erstellen Sie eine neue Seite. Nennen Sie sie "aufgabe_6".
Erstellen Sie das Grundgerüst der Seite.
Die Seite soll den Titel "Überschriften" bekommen.
Fügen Sie in der ersten Überschriftsebene "Wikipedia" ein.
Erzeugen Sie einen Absatz und fügen Sie folgenden Satz ein: "Das Ziel von Wikipedia ist es, eine frei lizenzierte und qualitativ hochstehende Enzyklopädie zu schaffen und zu verbreiten".
Tippen Sie nun "Jeder Internetnutzer kann Wikipedia nicht nur lesen, sondern auch als Autor mitwirken" ein.
Fügen Sie in der zweiten Überschriftsebene "Sekundärliteratur über Wikipedia" ein.
Jetzt tippen Sie als nächstes "Wissenschaftliche Untersuchungen" in der dritten Überschriftsebene ein.
Danach soll in der vierten Überschriftsebene "Markenbildung" erscheinen.
Schreiben Sie folgenden Satz unter Markenbildung: "Erfolg und Publizität des offenen Enzyklopädiekonzepts (Wikipedia lag 2007 erstmals auf Platz Vier der international bekanntesten Marken)".
Erzeugen Sie einen Zeilenumbruch und fügen Sie "weckten auch das Interesse zahlreicher Wissenschaftler und Studenten" ein.

Lösung

Zurück zu Absätze, Zeilenumbrüche, formatierter Text |

Hoch zu XHTML |

Vor zu Spezielle Bereiche im Text