Hauptmenü

Untermenü

HTML - Strukturierung

1. Einführung

Damit ihr wisst, wann man welches Element benutzt, gebe ich euch (vor allem den PISA-geschädigten) eine kleine Einführung in die Natur der Texte und wie man diese entsprechend ihrer inhaltlichen Bedeutung mit HTML auszeichnet. Allerdings ist dies keine Richtlinie, an die ihr euch sklavisch halten müsst, sondern nur eine Orientierungshilfe.

2. Begriffe

Bei den folgenden Erläuterungen werde ich von Zeit zu Zeit den Ausdruck "semantisch" im Bezug auf HTML-Elemente benutzen. Dabei handelt es sich um alle, die eine spezielle Bedeutung haben. Also zum Beispiel <p> für einen Absatz oder <ul> für eine Liste. Oder einfach gesagt, (fast) alles was kein <div> oder <span> ist.

3. Überschriften

Strukturierung

Bei den Überschriften von <h1> bis <h6> sollte man auf eine saubere Hierarchie achten, die keine strukturellen Brüche aufweist. Das bedeutet, dass zum Beispiel nach einem <h2> kein <h4> folgt, sondern ein <h3>. Eine mögliche Aufteilung könnte so aussehen:

Überschrift

Als erstes kommt neudeutsch die so genannte Headline. In HTML nennt sich das eine Überschrift erster Ordnung, also <h1>. In Frage dafür käme zum Beispiel das Thema der jeweiligen Seite. Diese Überschrift ist ein wichtiges Erfassungskriterium von Suchmaschinen.

Untertitel

Ein Untertitel stellt eine zusätzliche Beschreibung der Überschrift (also der Headline) dar. Wir kennen das alle von der Bildzeitung, wo uns die Schlagzeile in riesigen Buchstaben entgegen springt: "Flugzeugunglück! 500 Passagiere abgestürzt!". Ein paar Zentimeter weiter unten (und auch deutlich kleiner geschrieben) heißt es dann "Alle haben überlebt und wurden gerettet". Fast möchte man "leider" hinzufügen. So einen Untertitel sollte man als Überschrift zweiter Ordnung auszeichnen, also <h2>.

Zwischentitel (Zwitis)

Zwischentitel sind eine Art Überschrift für Absätze. Hat man schon einen Untertitel mit <h2> ausgezeichnet, so sollte man die Zwitis durch <h3> kennzeichnen, anderenfalls reicht auch ein <h2>.

Noch mehr Überschriften

Jetzt werdet ihr euch fragen, wo denn die restlichen Überschriften, also die von <h4> bis <h6>, geblieben sind. Nun, die könnt ihr entsprechend der logischen und inhaltlichen Strukturierung eurer Texte einsetzen. Allerdings bin ich selber nie weiter als bis <h5> gekommen.

4. Textabsätze

Längere Texte werden der Übersichtlichkeit halber in Abschnitte unterteilt, um die Lesbarkeit zu erhöhen. Dabei sollte die Trennung nach logischen und inhaltlichen Gesichtspunkten vorgenommen werden. Zerstückelt also eure Textpassagen bitte nicht nach optischen Kriterien.

5. Aufzählungen

Solche sind gefälligst als Listen zu kennzeichnen. Wählt dabei die Art, die euch am logischsten erscheint. Denkt auch bitte daran, hierarchisch strukturierte Linksammlungen (zum Beispiel Menüs) in Listen zu organisieren.

6. Tabellen

Entgegen früherer Gewohnheiten sollte man heutzutage auch wirklich nur tabellarische Inhalte in solche packen. Dazu gehören zum Beispiel Kalender, Sporttabellen/Spielpaarungen oder Terminplaner.

7. Zitate

Alles, was nicht originär aus eurer Feder stammt, solltet ihr auch entsprechend als Zitat kennzeichnen. Ob ihr dabei nun das <blockquote> oder <q> nehmt, bleibt euch überlassen.

8. Div- und Span-Elemente

Das <div>-Tag dient, wie schon gesagt, ausschließlich zur Grobstrukturierung einer Seite. Damit fasst man inhaltliche Elemente zu einer mehr oder weniger logischen Einheit zusammen. Das zeige ich euch gleich und weise auch auf die typischen Anfängerfehler hin.

Wann ich selber zum letzten Mal mit <span> gearbeitet habe, kann ich eigentlich nicht genau sagen. Muss aber schon ein wenig her sein. Meiner Meinung nach setzt man es immer dann ein, wenn es darum geht, ein etwas komplizierteres Layout umzusetzen. Es ist also eine Art von Notbehelf.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt