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