(X)HTML-Grundlagen 5: (X)HTML-Elemente

In dem fünften Beitrag der Reihe ‘Einstieg in (X)HTML’ werden die (X)HTML-Elemente und ihre Funktionen vorgestellt.

5. (X)HTML-Elemente

(X)HTML-Grundgerüst
Dokumenttyp-Angabe (DTD)
Meta- und Angaben im Kopfbereich
Links (Hyperlinks)
Tabellen
Textstrukturierung
Grafiken und Grafiken als Verweise
Formulare

5.1 (X)HTML-Grundgerüst

Im allgemeinen besteht ein (X)HTML-Dokument aus den folgenden drei Abschnitten:

Dokumenttyp-Angabe (DTD; Angabe über die verwendeten HTML-Version)
Header (Kopfdaten. z.B. Titel, Angaben für Suchmaschinen etc.)
Body (Körper – der zu sehende Inhalt)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " "http://www.w3.org/TR/html4/loose.dtd "> <html> <head> <title>Titel der Seite</title> </head> <body> Hier kommt der Inhalt! </body> </html>

Der DTD dient dazu dem Browser zu signalisieren welche Sprache (HTML, XHTML etc.) und welche Version dieser Sprache eingesetzt ist. Im Kopfbereich verbergen sich Informationen für den Browser und Suchmaschinen. Im Bodybereich befindet sich der Inhalt, also das was man im Endeffekt am Bildschirm sieht.

nach oben

5.2 Dokumenttyp-Angabe (DTD)

Die Angabe des Dokumenttyps (Angabe zur verwendeten HTML-Version) bestimmt welche Sprache, welche Version dieser Sprache bzw. welcher Standard eingesetzt wird. Die DTDs (auch Doctypes genannt) sind sehr wichtig für die korrekte Darstellung und Funktionalität von Webseiten in modernen Browsern (wie z. B. Mozilla, IE6). Die DTD kommt ganz am Anfang des Dokumentes vor der HTML-Markierung. Für HTML bzw. XHTML gibt es verschiedene Angaben.

Angaben für HTML 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " "http://www.w3.org/TR/html4/loose.dtd ">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Angaben für XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Angaben für XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

5.3 Meta- und Angaben im Kopfbereich

Alle Angaben im Kopfbereich (dazu zählen auch die Meta-Angaben) haben die Eigenschaft, daß sie nicht direkt im lesbaren Text auftauchen. Ihre Aufgaben sind vielfältig (Informationen für den Browser, Suchmaschinen) und ich werde sie nacheinander vorstellen. Allerdings werde ich nicht alle Angaben erwähnen, sondern nur diejenigen, die meiner Meinung nach sinnvoll sind.

Die Angaben im Kopfbereich werden von <head> </head> abgegrenzt. Als aller erstes sollte der Titel der Seite festlegt werden. Dies wird durch <title>Titel der Webseite</title> getätigt und diese Angabe taucht dann in der Titelzeile des Browsers auf.

Darunter kommen dann die sog. Metatags bzw. Meta-Angaben. Diese Angaben dienen als Information für Suchmaschinen (wer ist der Autor, Beschreibung der Seite, Schlüsselwörter etc.), aber auch als zusätzliche Informationen für den Browser (Zeichensatz etc.).

Diese Angaben werden immer mit dem Meta-Element getätigt, wobei das name-Attribut über die Art der Angabe aussagt (z.B. Autor, Seitenbeschreibung etc.) und das content-Attribut den Wert dazu wiedergibt. Hier gibt es einige Beispiele von Meta-Angaben:

Diese Angabe besagt, daß dieses Dokument den Zeichensatz ISO 8859-1 nutzt: <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="author" content="Name des Autors">
<meta name="publisher" content="Herausgeber oder Verlag">
<meta name="keywords" content="Stichwort1, Stichwort2, ... ">
<meta name="description" content="Kurzer Beschreibungstext">
Die Sprache des Textes: <meta name="language" content="de">

content=”de” – Deutsch
content=”en” – Englisch
content=”en-us” – US Amerikanisch
content=”fr” – Französich
content=”it” – Italienisch

Auslesen durch Suchmaschinen:
<meta name="robots" content="index, follow">

content=”noindex” – keine Indizierung
content=”none” – keine Indizierung
content=”index” – Indizierung erlaubt
content=”nofollow” – Aktuelle Datei indizieren, aber keine untergeordneten Dateien
content=”follow” – Aktuelle Datei sowie untergeordnete Dateien indizieren

Hier kommt jetzt ein Beispiel wie eine Angabe im Kopfbereich aussehen könnte. Nehmen wir mal an der Titel der Seite ist Die Angler-Ecke, der Zeichensatz soll den westeuropäischen und nordamerikanischen Sprachraum abdecken, der Webmaster heißt Jürgen Müller, es sollen bestimmte Schlüsselworte vorkommen (Angeln, Fisch, Fluß), eine kurze Erklärung, die Sprache der Seite ist deutsch und die Suchmaschine soll die ganze Website durchsuchen:

<head> <title>Die Angler-Ecke</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="Jürgen Müller" /> <meta name="keywords" content="Angeln, Fisch, Fluß" /> <meta name="description" content="Ein private Website, die sich mit dem Thema Angeln beschäftigt" /> <meta name="language" content="de" /> <meta name="robots" content="index, follow" /> </head>

Es gibt noch viel mehr Meta-Angaben, aber ich werde nicht auf alle eingehen, denn diese Angaben verlieren immer mehr und mehr an Bedeutung, aber ganz sollte man sie nicht weglassen. Ich denke da vor allem an die Angabe des Zeichensatzes (charset), der Sprache, das Auslesen der Suchmaschinen und die kurze Beschreibung der Seite (description).

nach oben

5.4 Links (Hyperlinks)

Eine sehr wichtige Eigenschaft der (X)HTML-Dokumente ist die Möglichkeit Verweise bzw. Links einzufügen. Erst die Verweise ermöglichen eine Interaktivität im WWW. Im Allgemein kann man sagen, daß die Verweise Verbindungen einer Stelle zu anderen darstellen und zwar immer nur in einer Richtung. Von der Quelle (Ursprungsanker) zum Verweiswort (Bestimmungsanker). Dabei können die Verweise verschiedenartig sein: auf einer Webseite kann man z. B. auf andere Seiten, eMail, einen FTP-Server oder einen Download verweisen. Aber auch auf Abschnitte seiner eigenen Webpräsenz, denn sonst wäre ein Navigieren innerhalb einer Website unmöglich.

Eine Verlinkung wird durch das Element a eingeleitet, danach kommt das Attribut href="" welches den Bestimmungsort angibt. Dann wird der erste Teil des Verweises mit der spitzen Klammer geschlossen. Es folgt der Verweistext und anschließend die Schlußmarkierung (</a>). Hier einige Beispiele von Verlinkung mit Erklärungen:

Verweis auf eine externe Webseite: <a href="http://www.faszination-tolkien.de">Seite über Herr der Ringe</a>
Verweis auf eine andere Seite innerhalb eigener Webpräsenz: <a href="Impressum.html">Impressum</a>

Bei Verweisen auf einen Unterabschnitt innerhalb der gleichen Seite bzw. auf Abschnitte einer Seite muß man auch den Zielanker definieren. Der XHTML-konforme Zielanker wird per id="Zielalankername" dargestellt. Allerdings haben ältere Browser Probleme mit id und brauchen das Attribut name="Zielankername" um das Ziel zu erreichen. Der Zielanker könnte folgendermaßen aussehen:

<h3 id="abschnitt">Überschrift</h3>
Oder für ältere Browser: <h3><a name="abschnitt">Überschrift</a></h3>
Und der dazugehörige Verweis würde so aussehen: <a href="#abschnitt">Abschnitt 2</a>
Verweis auf eine eMail: <a href="mailto:name@email.de">Name</a>
Verweis auf einen Download: <a href="dateiname.exe">HTML-Editor</a>

Es besteht noch die Möglichkeit das Zielfenster für Verweise zu bestimmen. Mit dem Attribut target=”” kann man bestimmen im welchem Fenster sich der Verweis öffnet. Hier die Möglichkeiten:

target="_blank" für ein neues Fenster
target="_self" öffnet den Verweis im selben Fenster
target="_patent" sprengt bei verschachtelten Framesets das aktuelle Frameset
target="_top" sprengt bei verschachtelten Framesets alle Framesets
target="_content" öffnet bei der Mozilla/Netscape-Sidebar den Link im Browserfenster

Aber solange man keine Frames und Sidebars (z. B. Mozilla und Netscape) nutzt, gibt es keinen tieferen Sinn das Zielfenster vorzubestimmen. Erstens ist der Quelltext länger und zweitens zerstört das Öffnen im neuen Fenster die Browser-History (Verlauf). Im Endeffekt liegt jedoch die Entscheidung im Ermessen des Webmasters wie und wo sich die Verweise öffnen. Auf Stichpunkt.de gibt es diesbezüglich einen längeren Artikel.

nach oben

5.5 Tabellen

Auch in HTML müssen tabellarische Daten dargestellt werden, daher gibt es in HTML Tabellen. Allerdings werden die Tabellen schon seit geraumer Zeit zu Layoutzwecken genutzt (manche sagen auch mißbraucht), was eigentlich aber nicht der Sinn der Erfindung ist und einige Probleme mit sich bringt, aber dazu später.

Eine Tabelle wird durch <table></table> eingeleitet, Tabellenspalten durch <tr></tr> und Tabellenzellen durch <td></td>. Eine Tabelle mit zwei Spalten und je zwei Zellen (insgesamt 4) würde folgendermaßen aussehen:

<table> <tr> <td>Links oben 1</td> <td>Rechts oben 2</td> </tr> <tr> <td>Links unten 1</td> <td>Rechts unten 2</td> </tr> </table>

Es besteht auch die Möglichkeit eine Tabelle in ihre logischen Bereiche aufzuteilen (Kopfbereich, Körper- bzw. Datenbereich und Fußbereich). Dies ist vor allem wichtig im Zusammenhang mit sehr großen Tabellen, da bei dem Ausdruck auf jeder Seite der Tabellenkopf und Tabellenfuß auftauchen.

<table> <thead> <tr> <th>Überschrift 1</th> <th>Überschrift 2</th> <th>Überschrift 3</th> </tr> </thead> <tfoot> <tr> <td>Zusammenfassung 1</td> <td>Zusammenfassung 2</td> <td>Zusammenfassung 3</td> </tr> </tfoot> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table>

Den Tabellenkopf leitet <thead> ein (table head = Tabellenkopf). Daran anschließend kann man eine oder mehrere Zeilen der Tabelle notieren, die zum Kopfbereich gehören sollen. Mit </thead> schließt man den Tabellenkopf ab (das End-Tag ist dringend zu empfehlen).

Nach dem Kopfbereich kommt der Fußbereich. Dieser wird mit <tfoot> eingeleitet (table foot = Tabellenfuß). Mit </tfoot> wird der Tabellenfuß abgeschlossen.

Der Tabellenkörper wird durch <tbody> eingeleitet (table body = Tabellenkörper). Mit </tbody> wird der Tabellenkörper abgeschlossen. Wenn man thead, tfoot und tbody einsetzt muß man beachten, daß dann auch alle 3 Elemente eingesetzt werden und zwar in dieser Reihenfolge Kopf – Fuß – Körper. Kopf- und Fußbereich dürfen nur einmal in der Tabelle vorkommen, für tbody gibt es diesbezüglich keine Einschränkungen.

nach oben

5.6 Textstrukturierung

In (X)HTML gibt es einige Mittel um den Text zu strukturieren. Ich werde sie im folgenden Abschnitt kurz vorstellen. Für alle Elemente gilt das gleiche: die Formatierung (Farbe, Abstände, Größe etc.) sollte durch CSS geschehen.

Listen
Absätze
Überschriften
Trennlinien
Zeilenumbruch
Logische Auszeichnungen
Physische Auszeichnungen
Adressen und Zitate
Präformatierter Text

Die Überschriften beschreiben in Kurzform einen Abschnitt und dienen der hierarchischen Struktur des Textes. (X)HTML kennt 6 Ebenen der Überschriften (h1 bis h6). Dabei ist h1 die Überschrift erster Ordnung und somit die wichtigste Überschrift. Im Quelltext sieht das folgendermaßen aus: <h1>Überschrift 1. Ordnung</h1> bis <h6>Überschrift 6. Ordnung</h6>.

In (X)HTML existieren drei verschiedene Arten von Listen: ungeordnete (Aufzählung), geordnete (numerierte) und Definitionslisten (Glossare).

Hier ein Beispiel für eine ungeordnete Liste:

<ul> <li>Eintrag</li> <li>Eintrag</li> <li>Eintrag</li> </ul>

Hier ein Beispiel für eine geordnete bzw. numerierte Liste:

<ol> <li>Eintrag Nr. 1</li> <li>Eintrag Nr. 2</li> <li>Eintrag Nr. 3</li> </ol>

Hier ein Beispiel einer Definitionsliste:

<dl> <dt>Begriff 1</dt> <dd>Erklärung 1</dd> <dt>Begriff 2</dt> <dd>Erklärung 2</dd> <dt>Begriff 2</dt> <dd>Erklärung 3</dd> </dl>

Die Formatierungen (Farbe, Anordnung etc.) der Listen sollte man CSS überlassen.

Die Absätze dienen zur Gliederung des Textes und sollten überall dort verwendet werden wo in der logischen Struktur des Textes ein Absatz auftauchen soll. Man sollte sie nicht wegen ihren Darstellungszwecken mißbrauchen (z. B. weil sie Abstände zu vorigen und nachfolgenden Elementen aufweisen). Ein Absatz wird durch <p> ... Absatz ...</p> eingeleitet. Wenn man innerhalb eines Absatzes einen Zeilenumbruch erzwingen will, kann man dies durch <br /> machen.

Trennlinien, durch <hr /> erzeugt, dienen zur inhaltlichen und optischen Abgrenzung von nicht zusammengehörigen Seitenabschnitten. Eine Trennlinie erzeugt einen eigenen Absatz. Die Formatierung der Trennlinien sollte durch CSS geschehen.

Die logischen Textauszeichnungen geben bestimmten Textabschnitten eine logische inhaltliche Bedeutung. Diese sollte eben wegen dieser Funktion und nicht zu Darstellungszwecken genutzt werden.

code: Dieser Textabschnitt ist ein Quelltextbeispiel.
del: ~~Dieser Textabschnitt ist nicht mehr gültig.~~
dfn: Dieser Textabschnitt ist eine Definition.
em: Dieser Textabschnitt ist betont.
ins: Dieser Textabschnitt ist neu hinzugefügt.
kbd: Dieser Textabschnitt ist Tastatureingabe.
strong: Dieser Textabschnitt ist stark betont.
samp: Dieser Textabschnitt ist ein Beispiel.
var: Dieser Textabschnitt ist eine Variable oder ein Programmargument.

Neben den logischen Textauszeichnungen, gibt es auch physische Textauszeichnungen. Diese Auszeichnungen dienen nur der Darstellung des Textabschnitts und geben keine Auskunft über seine logische Bedeutung. Hier sollte man auf diese Elemente vollkommen verzichten und CSS einsetzen, da diese Elemente mißbilligt werden.

<b></b>
Der Text wird fett dargestellt.
<big></big>
Der Text wird in einer größeren Schrift dargestellt.
<i></i>
Der Text wird kursiv dargestellt.
<small></small>
Der Text wird in einer kleineren Schrift dargestellt.
<tt></tt>
Der Text wird in Festbreitschrift dargestellt.

Bei Adressen und Zitaten handelt es sich um Elemente zur logischen Strukturierung des Textes. Adressen (<address></address>) werden eingesetzt um Adressen und Kontaktinformationen auszuzeichnen:

<address>Anfrage an Perun, <a href="mailto:info@perun.net">info@perun.net</a></address>

Für kurze Zitate innerhalb eines Textes wird <q></q> eingesetzt, für längere Zitate bzw. Zitatabsätze wird das Block-Element <blockquote></blockquote> verwendet. Das Element und das Attribut <cite></cite> geben die zitierte Quelle an.

Hier ein Beispiel, das dies verdeutlicht:

<p>Im <cite>zweiten Band - die zwei Türme - Der Herr der Ringe, S. 70</cite> von J. R. R. Tolkien, wird beschrieben wie die Hobbits im Fangorn Wald auf Baumbart treffen:</p>

<blockquote>Derweil gingen die Hobbits so rasch, wie der dunkle und dicht verflochtene Wald es zuließ, den Flußlauf nach Westen und hinauf zu den ...</blockquote>

Hier ein weiteres Beispiel:

<p>Zu diesem Thema äußerte sich ein Fan:</p> <blockquote cite="http://www.irgendeinforum.de" lang="de"> Ja, diese Stelle gefällt mir am besten, denn sie ist am schönsten beschrieben ... Am witzigsten fand ich es, als Baumbart sagte <q>"Hattest fast das Gefühl, daß der Wald dir gefällt!"</q> ... </blockquote>

nach oben

5.7 Grafiken und Grafiken als Verweise

In (X)HTML besteht auch die Möglichkeit Grafiken einzubinden. Dies geschieht mittels des Elements img. Hier ein Beispiel:

<p>Der Gewinn unseren Unternehmens ist in letzten fünf Jahren um 25% gestiegen, wie sie an der folgenden Abbildung sehen können <img src="bilder/umsatz.jpg" width="200" height="200" alt="Gewinnsteigerung der letzten 5 Jahre" title="Die Umsatzsteigerung des Unternehmens in letzten 5 Jahren anhand eines Diagrams" />. Die Ursachen des Wachstums ...</p>

img leitet ein Bild ein, das Attribut src="" weist auf die Grafik hin, die dargestellt werden soll. alt ist alternativer Text und sollte erscheinen wenn das Bild, aus verschiedenen Gründen, nicht dargestellt wird. Das alt-Attribut ist für ein gültiges (X)HTML-Dokument Pflicht. Das title-Attribut ist eine zusätzliche Erklärung und kann für jedes (X)HTML-Element eingesetzt werden. Titel ist keine Pflicht und sollte nur dort eingesetzt werden, wo einen zusätzliche Erklärung notwendig sein könnte. Der Text des title-Attributs erscheint als ein sog. Tooltip-Text d. h. wenn man mit dem Mauscursor über diese Stelle kurz stehen bleibt, dann erscheint der Text.

In älteren HTML-Versionen gab es noch weitere Attribute: border (Rahmen), vspace (vertikale Ausrichtung) und hspace (horizontale Ausrichtung). Diese sind vor allem in strikten Varianten von XHTML mißbilligt und sollten mittels CSS getätigt werden. Genauso verhält es sich mit Hintergrundgrafiken, diese sollten auch mittels CSS angegeben werden.

Grafiken können auch als Verweise dienen. Entweder als Verweis auf ein HTML-Dokument oder als Verweis auf eine z. B. vergrößerte Grafik. Hier ein Beispiel:

<p>Klicken sie auf das Vorschau Bild um auf das große Bild zu sehen <a href="bilder/bild-gross.png"><img src="bilder/bild-klein.png" width="100" height="100" alt="Alternativtext" /></a> ...</p>

nach oben

5.8 Formulare

In (X)HTML hat man die Möglichkeit Formulare zu erstellen, aber nur die Maske bzw. die äußere Form. Die Verarbeitung der eingegebenen Daten muß eine Skriptsprache (Perl, PHP etc.) übernehmen. Hier ein Beispiel eines einfachen Kontaktformulars:

<form action="ort des auswertens" method="übertragungsmethode"> <div> Name:<br /> <input type="text" name="name" value="vorgelegter inhalt" size="35" /> </div> <div> eMail:<br /> <input type="text" name="" value="" size="35" /> </div> <div> Anfrage:<br /> <textarea name="" cols="25" rows="3"></textarea> </div> <div> <input type="submit" name="senden" value="senden" /> </div> </form>

Das Beispiel ansehen.

Hier die einzelnen Formularelemente:

Einzeilige Texteingabe: <input type="text" name="" value="" size="" />
Mehrzeilige Texteingabe: <textarea name="" cols="" rows=""></textarea>
Checkboxen (Mehrfachauswahl): <input type="checkbox" name="" value="" />
Radioboxen (Einfachauswahl): <input type="radio" name="" value="" />
Senden-Knopf: <input type="submit" name="" value="Senden" />
Reset-Knopf (Eingaben verwerfen): <input type="reset" value="Verwerfen" />
Paßworteingabe: <input type="password" name="" value="" size="" />
Auswahllisten: <ul> <li><select name="" size=""></li> <li><option>Auswahl 1</option></li> <li><option>Auswahl 2</option></li> <li><option>Auswahl 3</option></li> <li><option>Auswahl 4</option></li> <li></select></li> </ul>
Felder für Dateiupload:: <input name="" type="file" size="" maxlength="" />

Das Attribut name ist sehr wichtig für die Auswertung der Formulare, weil der Name z. B. in PHP gleichzeitig auch die Variable ist. Bei dem value-Attribut kann man einen Wert vorbelegen, es ist auch in der Auswertung wichtig wenn man an eine Mehrfachauswahl denkt.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.