Die folgenden Listen enthalten Tags, die in HTML wie in XHTML zwischen "<body>" und "</body>" verwendet werden können. In dem (älteren) HTML gelten etwas weniger strenge Regeln als in dem (aktuellen) XHTML. Es ist daher sinnvoll, sich von Anfang an an die strengeren Regeln zu halten.
Tags dienen dazu, die logische Struktur eines HTML-Dokuments zu beschreiben. Mit einem Tag können weitere Attribute (Eigenschaften) eines Seitenelementes verbunden werden, z.B. um ein Seitenelement zu formatieren oder zu positionieren. Mit einem Tag können auch Angaben anderer Art verknüpft werden, z.B. ein Name, der das Seitenelement eindeutig identifiziert.
Wir unterscheiden Tags für Blockelemente und solche für eingebundene Elemente. Die meisten Tags kommen paarweise vor: ein öffnendes Tag wie <body> steht vor einem Seitenelement, und ein entsprechendes schließendes Tag steht hinter diesem Seitenelement. Manche Tags stehen jedoch auch alleine, z.B. dasjenige, das einen Zeilenumbruch erzwingt: <br>. Da in XHTML alle Tags geschlossen werden müssen, haben diese einzeln stehenden Tags ein formales Ende bekommen: ihnen wird ein Leerzeichen gefolgt von einem "/" angehängt, also z.B. <br /> notiert. Die folgenden Listen sind nicht vollständig.
Tags enthalten keine Großbuchstaben (dies wird in XHTML verlangt).
| Tag | Beschreibung |
|---|---|
| <!-- (Kommentartext) --> | für ein- und mehrzeilige Kommentare |
Blockelemente (block-level elements) beginnen immer in einer neuen Zeile und nachfolgende Elemente ebenfalls.
| Tag | Beschreibung |
|---|---|
| <h1> ... </h1> | Überschrift 1. Ordnung; analog bis <h6> |
| <p> ... </p> | Textabsatz |
| <ol> ... </ol> | (ungeordnete) Aufzählungsliste |
| <ol> ... </ol> | numerierte Liste; ohne Angabe des Numerierungstyps mittels des Attributs type wird eine Aufzählungliste dargestellt (eleganter und flexibler ist die Listenformatierung mittels CSS) |
| <li> ... </li> | Listenelement |
| <table> ... </table> | Tabelle; soll ein Rahmen angezeigt werden, kann das Attribut <border> hinzugefügt werden (mittels CSS geht das eleganter); jede Tabelle besteht aus einzelnen Zeilen: |
| <tr> ... </tr> | Tabellenzeile; jede Zeile besteht aus einzelnen Zellen: |
| <th> ... </th> | Tabellenzelle mit einer Spaltenüberschrift (nur sinnvoll am Tabellenanfang) |
| <td> ... </td> | Tabellenzelle mit Daten; die Zellen einer Tabellen entsprechen den Absätzen eines Textes und sind daher Blockelemente |
| <div> ... </div> | generisches Blockelement; dient als Container für Elemente unterschiedlicher Art; spielt eine Schlüsselrolle für CSS |
Eingebundene Elemente (inline elements) erzeugen keine neuen Zeilen und stehen im normalen Textfluß. Sie dürfen in der Regel keine Blockelemente enthalten (wichtige Ausnahme: <span>).
| Tag | Beschreibung |
|---|---|
| <em> ... </em> | betont; wird standardmäßig als Kursivdruck umgesetzt, wenn nichts anderes festgelegt ist |
| <strong> ... </strong> | starke Betonung; wird standardmäßig als Fettdruck umgesetzt, wenn nichts anderes festgelegt ist |
| <a> ... </a > | wird mit dem Attribut href eingesetzt und dient dazu, einen Verweis zu definieren; in XHTML soll das Attribut target abgeschafft werden (mithilfe dieses Attributs kann man steuern, wo der Browser das Verweisziel öffnen soll) |
| <span> ... </span> | generisches Inline-Element; kann sowohl innerhalb von Blocks verwendet werden als auch als container für mehrere Blocks; spielt eine Schlüsselrolle für CSS |
| <br> bzw. <br /> | erzwingt einen Zeilenumbruch, beendet aber nicht den Absatz |
| <img> bzw. <img /> | bindet eine Graphik ein; muß mit dem Attribut src verbunden sein; mittels des Attributs alt sollte immer eine verbale Beschreibung angefügt werden (verlangt in den Richtlinien für barrierefreies Web) |
Attribute (Eigenschaften) wie id (zur Definition eines eindeutigen Namens) sind ergänzende Angaben zu einem Tag und stehen immer in einem öffnenden bzw. in einem allein stehenden Tag nach dem eigentlichen Tag-Namen. Zu einem Attribut gehört außerdem ein Wert, der dem Attribut zugewiesen wird (in XHTML ist die Angabe eines Wertes obligatorisch, wobei als Default-Wert der Name des Attributs selbst verwendet werden kann). - Erzeuge in Phase 5 eine numerierte Liste (Reiter "Listen" aktivieren und eine der numerierten Listen auswählen). Was bewirken diese Attribute wohl? (Ausprobieren!)
In (X)HTML sollten Werte immer zwischen Anführungszeichen notiert werden (in XHTML immer, in HTML mindestens dann, wenn der Name des Wertes Leerzeichen enthält), und zwischen Attribut, Gleichheitszeichen und Wert sollten keine Leerzeichen stehen. – Hinweis: In CSS-Dateien stehen die entsprechenden Angaben genau dann in Anführungszeichen, wenn sie Leerzeichen enthalten.
In der folgenden Übersicht sind nur solche HTML-Attribute aufgeführt, die bei der Verwendung von CSS sinnvoll sind: die vielen Attribute zur Formatierung und zur Positionierung eines Elementes werden nicht gebraucht, wenn man Stildefinitionen verwendet.
| Attribut | mögliche Werte | Beschreibung |
|---|---|---|
| src | Adresse einer Quelldatei | bindet Quellen ein und wird insbesondere in Verbindung mit dem <img>-Tag verwendet; die Adressen können absolut oder relativ angegeben werden, z.B. <img src="http://www.inf.fu-berlin.de/Beispielverzeichnis/beispiel.gif"> oder <img src="beispiel.gif">; mit zwei Punkten ("..") wird das unmittelbar übergeordnete Verzeichnis angesprochen; beachte: in HTML-Pfadangaben werden Verzeichnisse durch "/" getrennt (auch auf Windows-Systemen!) |
| alt | beschreibender Text | sollte im <img>-Tag benutzt werden; informiert einen Besucher der Seite, der die Anzeige von Bildern abgeschaltet hat oder Bilder nicht erkennen kann, z.B. aufgrund einer Sehbehinderung |
| href | Ziel des Querverweises | dient in dem <a>-Tag zur Angabe des Verweiszieles; dieses kann innerhalb derselben Datei liegen (z.B. href="#anfang", wobei "#anfang" als ID eines Seitenelementes definiert sein muß) oder außerhalb (z.B. href="http://www.inf.fu-berlin.de" oder href="http://www.inf.fu-berlin.de/Beispielverzeichnis/beispiel.html#anfang"); "id" wird verwendet für Seitenelemente, die auf einer Seite nur höchstens einmal vorkommen dürfen; mit zwei Punkten ("..") wird das unmittelbar übergeordnete Verzeichnis angesprochen; beachte: in HTML-Pfadangaben werden Verzeichnisse durch "/" getrennt (auch auf Windows-Systemen!) |
| id | eindeutiger Name eines Seitenelementes | dient zur Identifizierung von Seitenelementen, um auf sie mittels href zu verweisen oder um ihnen einen bestimmten Stil zuzuweisen; Beispiel: <div id="kapitel3">; das ähnlich funktionierende Attribut "name" gibt es in XHTML nicht mehr |
| class | Name einer Klasse in einer Stil-Definition | dient zur Beschreibung von Seitenelementen, die mehrfach vorkommen können, um ihnen einen bestimmten Stil zuzuweisen; Beispiel: <div class="zitat"> |