Strict verstehen, Teil 8: Die Struktur des Inhalts
Guten morgen, die Saga geht weiter^^
Die Struktur des Inhalts
Der Titel des Dokumens (<title>)
Im Kopfbereich eines jeden HTML-Dokumentes kann der Titel dieses angegeben werden. Dieses Element ist eines der wichtigsten, wenn es um die Struktur und den Wiedererkennungswert einer Webseite geht. Idealerweiße enthält der Titel den Namen der Webseite. Dieser Name kann, wenn er kurz ist vor dem Titel des Inhalts stehen, sollte aber, wenn er länger ist, am Ende des Titels stehen.
Beispiele:
HTML-Code:
<title>Firma ABC: Startseite</title>
<title>Rückblick 2006 - Tagebuch von Mitaki</title>
Der Titel ist in mehrerer Hinsicht wichtig. Suchmaschinen zeigen diesen meist in ihrer Ergebnisübersicht an, von daher sollte der Titel immer den angezielten Inhalt durch eine kurze aber präzise Überschrift wiedergeben.
Durch Angabe des Webseitennamens im Titel stellt man sicher, dass auch Benutzer von Textbrowsern merken, wenn eine neue Webseite gelesen wird. Das kann im rechtlichen Bereich wichtig sein, denn hier zählt die klare Unterscheidung, nicht ob ein Verweis etwa in einem neuen Fenster/Tab geöffnet wurde.
Die Grundstruktur
Innerhalb des body-Elements dürfen sich nur Blockelemente befinden. Blockelemente sind unter anderen Überschriften, Textabsätze und Listen. Blockelemente erzeugen einen neuen Absatz. Damit ist kein Textabsatz gemeint, sondern eine Einteilung in vertikale Abschnitte.
Blockelemente sind notwendig für die Struktur des Dokuments, da Inlinelemente keinen neuen Absatz erzeugen. Würde man innerhalb von <body> direkt mit Inlineelementen oder Text beginnen würde sich den Browsern keine vordefinierte Struktur zeigen. Eine Sprachausgabe würde dann etwa das ganze Dokument als einen langen Fließtext sprechen oder Textbrowser dies entsprechend anzeigen.
Zu den Blockelementen zählen Überschriften (h1 bis h6), Textabsätze (address, blockquote, p, pre), Listen (dl, ol, ul), Tabellen (table), Formulare (form und fieldset), die Trennlinie (hr), das Skriptfallback (noscript) und das unformatierte Blockelement (div).
Die Elemente blockquote, form und noscript müssen andere Blockelemente enthalten, welche den tatsächlichen Inhalt enthalten. Auch das unformatierte div-Element sollte ebenfalls nur Blockelemente enthalten, da es strukturell keinen Wert hat. Text der sich nur innnerhalb von div-Elementen befindet würde identisch zu Text außerhalb jedes Blockelements gelesen werden.
Die Überschrift erster Ordnung (<h1>)
Die wichtigste Überschrift, die ein Dokument besitzen kann ist die Überschrift erster Ordnung. Diese sollte nur ein einziges Mal innerhalb eines Dokuments vorkommen und den Namen der Webseite enthalten. Zusätzlich kann sie wie der Titel noch die Überschrift des aktuell aufgerufenen Inhalts enthalten, was hier aber weniger wichtig ist als im title-Element. Für die Überschrift erster Ordnung empfiehlt sich, den Webseitennamen immer an erster Stelle zu schreiben.
Beispiele:
HTML-Code:
<h1>Firma ABC: Übersicht</h1>
<h1>Blog von Mitaki: Rückblick 2006</h1>
<!-- oder einfacher -->
<h1>Mitakis Webseite</h1>
Überschriften können auch Bilder enthalten. Diese sollten dann einen entsprechenden Alternativtext besitzen, damit auch nicht-graphische Browser sinnvolle Information erhalten können.
Die Überschrift zweiter Ordnung (<h2>)
Überschriften zweiter Ordnung trennen meist grundlegende Strukturen des Dokuments voneinander ab. Dazu gehören z.B. Themenübersicht und Inhalt.
Ab dieser Ordnung kann man die Überschriftenstruktur eines Dokumentes nicht mehr wirklich definieren. Man kann sich an vorgegebene Schemen, wie das eines Referates oder Essays richten, wenn man derartiges Verfasst. Für den Inhalt persönlicher oder Firmenwebseiten muss man einfach den Inhalt untersuchen und einen dazu passenden Stil entwickeln.
Um zu prüfen, ob man sinnvolle Überschriften gewählt hat reduziert man ein Dokument allein auf diese und sieht, ob man den Inhalt noch nachvollziehen kann.
Textabsätze (<p>)
Absätze sind dazu gedacht, Textpassagen voneinander abzutrennen. In graphischen Browsern wird dazu meist ein bestimmter Außenabstand oberhalb und unterhalb des Absatzes erstellt. Nicht-graphische Browser zeigen diesen Abstand ebenfalls bzw. machen eine Pause vor dem weiterlesen. Gerade deshalb sind Absätze einem unformatiertem Blockelement (sprich <div>) bei der Textstrukturierung vorzuziehen.
Beispiel:
HTML-Code:
<p>Absätze sind dazu gedacht, Textpassagen voneinander abzutrennen. In graphischen Browsern wird dazu meist ein bestimmter Außenabstand oberhalb und unterhalb des Absatzes erstellt. Nicht-graphische Browser zeigen diesen Abstand ebenfalls bzw. machen eine Pause vor dem weiterlesen. Gerade deshalb sind Absätze einem unformatiertem Blockelement (sprich <div>) bei der Textstrukturierung vorzuziehen.</p>
Textkorrekturen (<del>, <ins>)
In vielen Fällen kann es wichtig sein, alte Textpassagen nicht gänzlich zu streichen, sondern als veraltet und neue Passagen ebenso als neu zu markieren.
Nehmen wir zum Beispiel eine Liste von Dingen, die bearbeitet werden müssen. Um später nachvollziehen zu können, was geändert wurde ist es sinnvoll, beendete Projekte durchzustreichen (als veraltet zu markieren) anstatt sie zu löschen.
Heutzutage werden diese beiden Elemente aber vor allem für humoristische Einlagen verwendet.
HTML-Code:
<p>Als <del>Sklave</del> <ins>Zivi</ins> muss man viel arbeiten.</p>
<del><p>Absatz der veraltete Informationen enthält.</p></del>
Die Elemente <del> und <ins> sind ein Sonderfall in HTML. Sie können als Inlineelemente Text innerhalb eines Absatzes, oder als Blockelement andere Blockelemente als neu bzw. veraltet markieren.
Andere Absatzformen
Neben dem üblichen Absatzelement für normalen Text gibt es auch Absätze für speziellen Text. Dazu gehören etwa Adress- und Zitatblöcke.
address-Elemente verwendet man etwa für die Postadresse im Impressum oder die URI der aktuellen Datei.
Zitatblöcke verwendet man, um längere Zitate als solche kenntlich zu machen. Da das blockquote-Element keine besondere Formatierung fordert muss sich in ihm noch ein Absatz vor dem eigentlichen Zitat befinden.
HTML-Code:
<address>http://www.example.com/dieses_thema.html</address>
<blockquote><p>Das ist ein längeres Zitat.</p></blockquote>
Außerdem gibt es noch das pre-Element, welches Beweirkt, dass der Text innerhalb des Elements identisch zur Eingabe in den Texteditor ist. So fallen in diesem Element beispielsweise keine zwei Leerzeichen zu einem zusammen, wohl aber werden Inlinelemente (sofern erlaubt) und maskierte Zeichen als solche erkannt.
Das bezeichnet man als vorformatierten Text.
Abbildung der Struktur
Das Dokument besteht jetzt aus Überschriften und Absätzen. Es wird Zeit, diese Strukur zusammenfassend abzubilden. Dazu eignen sich Listen.- Teil 8: Struktur des Inhalts
- Der Titel des Dokuments
- Die Grundstruktur
- Überschrift erster Ordnung
- Überschrift zweiter Ordnung
- Textabsätze
- Andere Absatzformen
- ...
Gerne werden bei diesen Listen die Listenpunkte zu Ankern, die auf Sprungziele innerhalb des Dokuments zeigen.
Die Trennlinie (<hr> bzw. <hr />)
Den Sinn der Trennlinie kann ich selbst nicht ganz nachvollziehen. Die Spezifikation hat dazu nicht viel zu sagen. SELFHTML sieht es als eine Art „Textauflockerung“.
Ich kann mir vorstellen, dass man <hr /> z.B. als Separator für Gedichtstrophen verwendet.
Verschönert werden kann sie durch Stilangaben. In Browsern mit CSS-2-Unterstützung könnte man die Linie z.B. durch Sterne ersetzen.
Das unformatierte Blockelement (<div>)
Das div-Element hat nur eine vorgegebene Eigenschaft: display: block; div steht für „document division“. Es ist dazu Gedacht, Teile eines Dokuments in sinnvolle Abschnitte zu gliedern, die dann mit Stilangaben gestaltet werden.
Es sollte nicht dazu missbraucht werden, ein Blockelement zu haben, dass Inlinelemente enthält, weil diese im body-Element nicht erlaubt sind.
Ein Dokument, das keine Stilangaben enthält sollte ohne <div> Elemente identisch zu dem selben Dokument mit div-Elementen sein.
