Grundlagen der Webpublikation I, Begleittext 4: Das Spektrum der (X)HTML-Elemente

1Begriffsklärungen

1.1Elemente und Attribute

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.

Allgemeine Elementtyp-Struktur

<elementname attribut="wert">Inhalt</elementname>

Beispiel 1: Einfaches Element mit Start- und End-Tag

<p>Dies ist ein Absatz.</p>

Beispiel 2: Element mit zugewiesenem Attribut

<div id="inhalt">Beliebiger Inhalt</div>

Beispiel 3: Schachtelung von Elementen

<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.

1.2Blöcke und Bereiche

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.

2Dokumentstrukturen

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.

2.1Blockelemente

<div>…</div>
Semantisch leeres Element, das der Abgrenzung und Kennzeichnung von Kernbereichen und strukturell zusammen gehörigen Blöcken auf einer Seite dient
<h1>…</h1> bis <h6>…</h6>
Überschriftselemente, deren Nummerierung der unterschiedlichen Gewichtung im Rahmen einer Gliederungsstruktur korrespondiert
<p>…</p>
Entspricht einem Absatz in einem Dokument; einfacher Zeilenwechsel wird durch das selbstschließende Element <br> (HTML) bzw. <br /> (XHTML) erzwungen
<address>…</address>
Element für die Kennzeichnung von Kontaktinformationen, bei denen allerdings ein eindeutiger Bezug aufs jeweilige Dokument gegeben sein soll
<blockquote>…</blockquote>
Dient, wie der Name schon andeutet, der gesonderten Auszeichnung von zitathaften Einschüben, die aus dem Textfluss heraus genommen sind; da dieses Element im Browser per Default eingerückt wird, wurde und wird es immer wieder zu reinen Layoutzwecken missbraucht
<pre>…</pre>
Mit diesem Elementtyp wird dem jeweiligen User Agent mitgeteilt, dass der eingeschlossene Text als »präformatiert« zu gelten hat, d.h. er ist von einem Webbrowser so darzustellen, dass White Space (Leerraum bzw. Zwischenraumzeichen) intakt bleibt, ein Font mit fester Breite verwendet wird, Wörter bei Erreichen des Rands nicht automatisch umgebrochen werden; abgesehen davon, dass innerhalb dieses Elements weder <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)
Durch dieses leere bzw. selbstschließende Element wird eine horizontale, als Separator fungierende Linie erzeugt, die inzwischen einzig über Stylesheets im Aussehen verändert werden darf; der Umgang mit diesem Element kann etwas hakelig sein, da die Gecko-Familie es (laut Spezifikation zu Recht) als Blockelement wertet, der Internet Explorer hingegen als Inlineelement

2.2Listenelemente

<ul>…</ul>
Elementtyp für die Wiedergabe ungeordneter Listen; die einzelnen Listenelemente, die als Inlineelemente in den <ul>-Container einzuschachteln sind, werden mit <li>…</li> ausgezeichnet
<ol>…</ol>
Elementtyp für eine geordnete, d.h. nummerierte Liste; auch hier werden die einzelnen einzuschachtelnden Listenelemente mit <li>…</li> ausgezeichnet
<dl>…</dl>
Grenzt eine Definitionsliste ab, wie sie z.B. in Glossaren Verwendung findet; die beiden obligatorischen Elemente einer solchen Liste sind <dt>…</dt> für den zu definierenden Begriff und <dd>…</dd> für die Erläuterung selbst

Beispiel 4: Einfache Liste

<ul>
  <li>…</li>
  <li>…</li>
</ul>

Beispiel 5: Mehrfach untergliederte Liste

<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>

Beispiel 6: Kombination geordnete / ungeordnete Liste

<ol>
  <li>Nummerierter Punkt
    <ul>
      <li>Unterpunkt 1 (nicht nummeriert)</li>
      <li>Unterpunkt 2 (nicht nummeriert)</li>
    </ul>
  </li>
</ol>

Beispiel 7: Definitionsliste (Glossar)

<dl>
  <dt>Semiotik</dt>
  <dd>Wissenschaftliche Disziplin, die sich mit Zeichensystemen 
  und Zeichenprozessen aller Art beschäftigt</dd>
</dl>

2.3Inlineelemente

<span>…</span>
Semantisch nicht festgelegtes Element, mit dem innerhalb von Blockelementen zusätzliche Strukturen eingebaut werden können
<a>…</a>
Ankerelement, das im Verein mit den Attributen 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>
Element, das zur Auszeichnung von Referenzen, d.h. von Zitatquellen, Literaturangaben u.ä. verwendet werden kann; nicht zu verwechseln mit dem Attribut gleichen Namens, das die Zuschreibung eines Zitats zu einer bestimmten Quelle (z.B. einem URL) erlaubt
<q>…</q>
Element für die Kennzeichnung kürzerer Zitate, die beim Rendering laut DTD die nötigen Anführungszeichen erhalten sollen, was der Internet Explorer allerdings beharrlich verweigert; daher ist dieses an sich sehr sinnvolle Element im Moment kaum einsetzbar
<em>…</em>
Dient der Hervorhebung einzelner Textpassagen; Ausgestaltung über Stylesheets, weitere Differenzierung mittels des class-Attributs
<strong>…</strong>
Gleichfalls der Hervorhebung dienend, aber mit stärkerer Gewichtung im Markup; dieser Umstand sollte auch im Stylesheet berücksichtigt werden
<abbr>…</abbr>
Zur Auszeichnung von Abkürzungen einsetzbar; zu empfehlen ist dabei die Verwendung des title-Attributs, dessen erläuternder Text beim Überfahren mit dem Mauszeiger sichtbar wird
<acronym>…</acronym>
Zur Auszeichnung von Akronymen, also von Wörtern, die aus den Anfangsbuchstaben anderer Wörter gebildet werden; auch hier Einsatz des title-Attributs sinnvoll
<dfn>…</dfn>
Dient der Kennzeichnung von Begriffen oder Termini, die häufiger in einem Dokument Verwendung finden; es bietet sich an, die so markierten Begriffe in einem verlinkten Glossar zu sammeln und damit zentral zu verwalten
<code>…</code>
Kann einem Auszug mit Computercode bzw. Quelltext zugewiesen werden, so dass die entsprechende Passage sowohl im Markup, als auch im Layout eigenständige Bedeutung erhält
<kbd>…</kbd>
Wird zur Kenntlichmachung von Tastatureingaben verwendet; mit den passenden CSS-Eigenschaften kann diese Funktionalität auch im Layout ihren eigenen Ausdruck finden
<samp>…</samp>
Dient der Auszeichnung von Ausgabebeispielen bei Programmier- und Skriptsprachen oder bei der Benutzung einer Shell
<var>…</var>
Mit diesem Element kann eine Variable o.ä. in Programmcode oder in einem Skript hervor gehoben werden
<del>…</del> und <ins>…</ins>
Werden benutzt, um Wörter oder Abschnitte anzuzeigen, die in verschiedenen Fassungen eines Dokuments gestrichen oder neu eingefügt worden sind; beide Elemente fallen insofern aus dem Rahmen, als sie sowohl als Inline-, als auch als Blockelement eingesetzt werden können (dies aber nicht zur gleichen Zeit)
<sub>…</sub> und <sup>…</sup>
Dienen der Tief- und Hochstellung von Text oder Zahlen, z.B in Formeln oder in der typografischen Umsetzung von Anreden in bestimmten Sprachen, also überall dort, wo präsentationale und strukturelle Aspekte miteinander verschmelzen; ob das <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

2.4Objektelemente

<img> (HTML) bzw. <img /> (XHTML)
Zählt – wie die im Folgenden genannten Elementtypen – zu den »ersetzten« Elementen (replaced elements), deren Inhalt nicht im Dokument selbst präsent ist, auf den vielmehr durch eine Quellenangabe verwiesen wird, was im Fall des selbstschließenden <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>
Mit dem Element für eingebettete Frames (bzw. Inline-Frames) können Inhalte aus anderen Dateien oder Dokumenten in eine (X)HTML-Seite eingebunden werden; dabei ist allerdings als Dokumenttyp die Variante »Transitional« zu wählen
<object>…</object>
Dies ist der generische, zukunftsgerichtete Elementtyp für die Einbettung von Objekten aller Art, d.h. von Bildern, Videos, Java-Applets, anderen (X)HTML-Dokumenten; das <object>-Element ist im Gegensatz zum <iframe>-Element Bestandteil der DTD-Variante »Strict«
<map>…</map>
Dient in Kombination mit einem direkt anschließenden, aber nicht in es eingeschachtelten <img>-Element dazu, die über selbstschließende <area>-Elemente näher bestimmten Umrisse und Koordinaten anklickbarer Bereiche in sogenannten Image Maps einzubinden

Beispiel 8: Einbindung von Bildern

<img src="bild.png" alt="Bild" title="[…]" width="150" height="200" />

Beispiel 9: Markup für iframes

<p>
  <iframe name="dokument" src="seite.html">
    [Informationen für Browser, die eingebettete Frames nicht unterstützen]
  </iframe>
</p>

Beispiel 10: Einbettung von Objekten über das <object>-Element

<object data="film.mpg" type="video/mpeg">
  [Beschreibender Text]
</object>

Beispiel 11: Markup für Image Maps

<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" />

↓ Verknüpfung

Textanker