Um Dokumente mittels Markup zu strukturieren, werden in HTML und XHTML bestimmte Formen von SGML- bzw. XML-Konstrukten genutzt: Elemente, Attribute, Zeichenreferenzen und Kommentare. Die Regeln, nach denen diese Konstrukte verwendet und kombiniert werden können, sind in den jeweiligen Doctype-Definitionen (DTD’s) zu finden. In einer DTD (wie HTML 4.01 Strict oder XHTML 1.0 Strict) ist dabei im Einzelnen festgelegt, welche Elementtypen zur Verfügung stehen, ob und wie sie verschachtelt werden können, welche Eigenschaften ihnen zuweisbar sind und wie ihre Notation aussehen sollte.
Elementtypen (oder kürzer: Elemente) bezeichnen strukturelle Einheiten in
einem Dokument, z.B. Überschriftenebenen, Absätze, Hypertextverweise, Listen,
Tabellen, Bereiche, aber auch Hervorhebungen, Zitate, Abkürzungen, Definitionen, etc.
Ein Element setzt sich zusammen aus einem öffnenden Start-Tag, Inhalt beliebiger
Art und einem schließenden End-Tag; in den Inhalt können weitere Elemente
inkorporiert werden, wobei für diese Form der Verschachtelung (»nesting«)
die Regeln der jeweiligen (X)HTML-DTD zu berücksichtigen sind. Hinzu kommt, dass
Elemente zusätzlich mit bestimmten Eigenschaften, die Attribute genannt werden,
versehen werden können. Diese Attribute, die im Start-Tag dem Elementnamen, jeweils
getrennt durch ein Leerzeichen, folgen, werden durch einen in (doppelte oder auch einfache)
Anführungszeichen gesetzten Wert näher bestimmt. Bei Attributen wie id
,
class
oder name
ist der Wert von
den Webautor-inn-en selbst zu formulieren, ansonsten werden vordefinierte Werte, Maßeinheiten oder Adressen
bzw. Pfade eingesetzt.
<elementname attribut="wert">Inhalt</elementname>
<p>Dies ist ein Absatz.</p>
<div id="inhalt">Beliebiger Inhalt</div>
<div id="inhalt">
<p>Dies ist mein <em class="farbe">erster</em> Absatz.</p>
</div>
Zu erwähnen bleibt noch, dass Elemente bei Verwendung des Doctypes XHTML
immer mit schließendem Tag versehen sein müssen (was bei HTML noch nicht bindend
ist). Selbstschließende bzw. leere Elemente wie <br>
oder <img>
benötigen einen End-Slash, der durch
ein Leerzeichen abgesetzt wird, werden also folgendermaßen notiert: <br />
.
Zudem ist die aus HTML bekannte Kurznotation für Attribut-/Wert-Paare (der Attributname
kann hier in bestimmten Fällen weg gelassen werden) in XHTML nicht mehr erlaubt, d.h.
es muss bei diesem Doctype unabdingbar das komplette Paar aufgeführt werden, selbst wenn
dies zu scheinbar redundanten Ausdrücken wie checked="checked"
führen kann.
Das Verhalten eines Elements und damit auch dessen Beeinflussbarkeit über Stylesheets
hängt stark davon ab, ob es sich bei dem Element um ein Block- oder ein Inline-Element
handelt. (Mit Chris Pedericks Web Developer lässt sich dies auch gut visualisieren.)
Blockelemente wie <p>
, <div>
oder <h1>
sind dadurch gekennzeichnet, dass bei
ihnen das Rendering jeweils in einer neuen Zeile beginnt; zudem besitzen sie die Fähigkeit
zur Expansion, d.h. sie können beliebig nach allen Seiten ausgedehnt werden. Sind
Blockelemente damit zugleich auch vertikal gerichtet, so ist für Inlineelemente, deren
Rendering am jeweiligen Verwendungsort beginnt, eine horizontale Verankerung maßgeblich.
Inlineelemente (wie <em>
oder <span>
)
werden in Blockelemente eingefügt und können dort ineinander verschachtelt werden,
Blockelemente hingegen sind zwar auch ineinander verschachtelbar, können allerdings nicht
innerhalb von Inlineelementen zur Anwendung kommen.
Um Bereiche in der Dokumentstruktur kenntlich zu machen und damit auch für bestimmte
Layout- oder Präsentationszwecke einzurichten, kommen häufig die semantisch
leeren »Container«-Elemente <div>
und
<span>
zum Einsatz. <div>
zählt zu den Blockelementen, kann also fast beliebig weiter verschachtelt werden, auch
mit weiteren <div>
’s. Daher ist dieses Element, wird es
mit dem id
-Attribut kombiniert, besonders dazu geeignet, das
Markup der Kernbereiche einer Seite abzugrenzen und damit einem mehrspaltigen Seitenlayout
zuzuarbeiten. Zu warnen ist allerdings vor einer beliebigen Inanspruchnahme
dieses Elementtyps, um jetzt aus Layoutgründen möglichst viele Teilbereiche
oder gar einzelne Elemente einer Seite »einzupacken«; eine derartige
»Divitis« verdunkelt nur die Grundstruktur eines (X)HTML-Dokuments und führt
letztendlich fast zu einer Substitution oder Reproduktion des obsolet gewordenen Layoutmittels
Tabelle. Im Gegenzug zu <div>
ist <span>
der Gruppe der Inlineelemente zugehörig und wird bevorzugt verwendet, um – verknüpft
mit dem class
-Attribut – Teilbereiche von Blockelementen, die
auf diese Weise auch neu positioniert werden können, auszuzeichnen. <span>
kann selbst andere Inlineelemente (auch weitere <span>
’s)
enthalten, aber keine Blockelemente.
Die id
- und class
-Attribute
dienen im Markup dazu, den auf diese Weise ausgezeichneten Blöcken und Bereichen
eigene Merkmale und Funktionen zuweisen zu können. id
ermöglicht die Identifizierung und Bezeichnung bestimmter Elemente, auf die fortan
verwiesen werden kann, sei’s über Links oder sei’s im Rahmen von CSS-Stylesheets.
Das id
-Attribut ist allerdings pro Seite nur einmal mit dem gleichen
Wert einsetzbar, daher spielen hier Benennung und konzeptionelle Planung von Anfang an
eine wichtige Rolle. class
hingegen ist ein Attribut, das vor
allem zur Klassifizierung und näheren Bestimmung eines Elements eingesetzt wird, was
gleichzeitig heißt, dass diesem so attribuierten Element jetzt zusätzliche
Layoutmöglichkeiten per CSS offen stehen. Das class
-Attribut
kann im Übrigen beliebig oft pro Seite und Element den gleichen Wert annehmen.
Versucht man, das eigene Markup an semantischen Kriterien auszurichten, dann ist es sinnvoll, die oben getroffene Differenzierung in Block- und Inlineelemente aufzugreifen und mit den mehr oder minder gängigen Gliederungsprinzipien, die uns beim Schreiben von Texten aller Art immer wieder begegnen, zu koordinieren. HTML und das World Wide Web sind ja einst auch aus dem Gedanken entstanden, den Austausch in der Forschung zu befördern und zu begleiten. Bei der folgenden Auswahl von Elementtypen habe ich mich vor allem an den Erfordernissen orientiert, denen das Schreiben wissenschaftlicher Texte gemeinhin unterliegt. Das Elementreservoir für Tabellen und Formulare bleibt hier noch unberücksichtigt, da diese in einer gesonderten Sitzung zur Sprache kommen werden.
<div>…</div>
<h1>…</h1>
bis <h6>…</h6>
<p>…</p>
<br>
(HTML) bzw.
<br />
(XHTML) erzwungen<address>…</address>
<blockquote>…</blockquote>
<pre>…</pre>
<img>
-
und <object>
- noch <sub>
-
oder <sup>
-Elemente verwendet werden dürfen, ist zu
beachten, dass für die Erzeugung von Zwischenraum der Gebrauch des Tabulators eher vermieden
werden sollte<hr>
(HTML) bzw. <hr />
(XHTML)<ul>…</ul>
<ul>
-Container einzuschachteln sind,
werden mit <li>…</li>
ausgezeichnet<ol>…</ol>
<li>…</li>
ausgezeichnet<dl>…</dl>
<dt>…</dt>
für den zu definierenden Begriff und <dd>…</dd>
für die Erläuterung selbst
<ul>
<li>…</li>
<li>…</li>
</ul>
<ul>
<li>Punkt 1
<ul>
<li>Unterpunkt 1</li>
<li>Unterpunkt 2
<ul>
<li>Unterunterpunkt 1</li>
<li>Unterunterpunkt 2</li>
</ul>
</li>
</ul>
</li>
<li>Punkt 2</li>
</ul>
<ol>
<li>Nummerierter Punkt
<ul>
<li>Unterpunkt 1 (nicht nummeriert)</li>
<li>Unterpunkt 2 (nicht nummeriert)</li>
</ul>
</li>
</ol>
<dl>
<dt>Semiotik</dt>
<dd>Wissenschaftliche Disziplin, die sich mit Zeichensystemen
und Zeichenprozessen aller Art beschäftigt</dd>
</dl>
<span>…</span>
<a>…</a>
href
und
id
(XHTML) bzw. name
(HTML), die der
Verlinkung und dem Setzen von Sprungzielen dienen, die Bildung von Hypertext möglich
macht<cite>…</cite>
<q>…</q>
<em>…</em>
class
-Attributs<strong>…</strong>
<abbr>…</abbr>
title
-Attributs, dessen erläuternder Text beim Überfahren
mit dem Mauszeiger sichtbar wird <acronym>…</acronym>
title
-Attributs
sinnvoll<dfn>…</dfn>
<code>…</code>
<kbd>…</kbd>
<samp>…</samp>
<var>…</var>
<del>…</del>
und <ins>…</ins>
<sub>…</sub>
und <sup>…</sup>
<sup>
-Element
auch zur Auszeichnung hoch gestellter Ziffern, die auf Fußnoten verweisen, die passende
Wahl ist, scheint mir eher fraglich, da hier Funktion und Präsentationseffekt nur mit
Mühe zur Deckung zu bringen sind<img>
(HTML) bzw. <img />
(XHTML)<img>
-Elements durch das
src
-Attribut erfolgt; Bildelemente erfordern zwingend die
Verwendung des alt
-Attributs mit einem Ersatztext für das
Bild selbst, zudem können sie durch das title
-Attribut,
über das sich zusätzliche Informationen zum Bild verfügbar machen lassen,
ergänzt werden<iframe>…</iframe>
<object>…</object>
<object>
-Element ist im Gegensatz zum <iframe>
-Element
Bestandteil der DTD-Variante »Strict«<map>…</map>
<img>
-Element dazu, die über
selbstschließende <area>
-Elemente näher
bestimmten Umrisse und Koordinaten anklickbarer Bereiche in sogenannten Image Maps einzubinden
<img src="bild.png" alt="Bild" title="[…]" width="150" height="200" />
<p>
<iframe name="dokument" src="seite.html">
[Informationen für Browser, die eingebettete Frames nicht unterstützen]
</iframe>
</p>
<object data="film.mpg" type="video/mpeg">
[Beschreibender Text]
</object>
<map name="xyz">
<area shape="rect" coords="25,50,75,100" href="http://abc.de/kontakt.html"
alt="Kontakt" />
</map>
<img src="imagemap.png" alt="[…]" width="400" height="400"
usemap="#xyz" ismap="ismap" />