XHTML: Elemente

Erstellt: 18.04.2006 | Aktualisiert: 26.02.2009

Einige Anmerkungen zu ausgewählten XHTML-Elemente: Aussehen, Verwendungszweck und Funktion.

Überschriften

<h1>Hauptüberschrift eines XHTML-Dokuments</h1>

In XHTML werden insgesamt sechs Überschriften, von h1 bis zu h6verwendet, wobei die Wichtigkeit der Überschrift abnehmend ist. Überschriften können sehr gut mit CSS formatiert werden und bilden ein strukturelles Grundgerüst eines semantisch korrekt aufgebauten XHTML-Dokumentes.

Absätze

<p>Text in einem Absatz</p>

Der Fliesstext in einem XHTML-Dokument sollte sinnvollerweise in Textabsätze strukturiert werden. Dieses Element lässt zur Darstellung im Browser ebenfalls sehr gut mittels CSS formatieren.

Zeilenumbruch

<br />

Mit dem br-Element lassen sich innerhalb eines Textabsatzes Zeilenumbrüche einfügen. Es muss unbedingt beachtet werden, dass es sich hierbei um ein leeres Element handelt, welches in XHTML dementsprechend ausgezeichnet werden muss.

Links

<a title="Seminar-Website" href="http://edu.volpe.ch">edu.volpe.ch</a>

Verknüpfungen zu anderen Dokumenten – so genannte Hyperlinks – werden mit dem bekannten a-Element versehen.

Listen

<ul>
<li>Hund</li>
<li>Katze</li>
<li>Hamster</li>
</ul>

Es gibt drei unterschiedliche Listen in XHTML:

  • Ungeordnete Listen (ul)
  • Geordnete Listen (ol)
  • Definitions Listen (dl)

Listen sind ein sehr wichtiges Element für den Aufbau von XHTML-Dokumenten. Sie ordnen und organisieren Informationen. Ungeordnete Listen werden für ungeordnete Informationen verwendet (z.B. Notizen), geordnete Listen für eine systematische Aufzählung (z.B. Inhaltverzeichnis) und Definitions-Listen für die Auflistung von Begriffen und den dazugehörigen Definitionen.

Strukturierung

<div>...</div>

Falls kein geeignetes XHTML-Element zur Verfügung steht, beziehungsweise einige Elemente gruppiert werden sollten, stehen die beiden Elemente div und spanzur Verfügung. Durch das Hinzufügen der Attribute id oder class können die Elemente mittels CSS nach Wunsch gestaltet werden.

Bilder

<img title="Dient als Tooltip" src="images/bsp.png" alt="Informationen zum Bild" />

Grafiken können mittels img-Element in XHTML-Dokumente eingebunden werden. Beim img-Element handelt es sich um ein leeres Element, welches in XHTML ebenfalls korrekt geschlossen werden muss. Im src-Attribut wird der Pfad zum Bild angegeben, im alt-Attribut MUSS das Bild in Textform genauer beschrieben werden. Das title-Attribut kann als Tooltip verwendet werden.

Zitate

<blockquote cite="http://www.nzz.ch/">...</blockquote>
<q cite="http://www.nzz.ch">...</q>

Für Zitate stehen zwei Elemente zur Verfügung: Für längere Zitate wird das blockquote-Element verwendet, bei kürzeren Zitaten das q-Element. Beide Elemente beinhalten das Attribut cite, in welchem die Originalquelle angegeben wird.

Artikel zum Thema

Tabellen

<table border="0" summary="Tabellen-Beschreibung">
<caption>Tabellen-Überschrift</caption>
<tbody>
<tr>
<th>Überschrift 1. Spalte</th>
<th>Überschrift 2. Spalte</th>
</tr>
<tr>
<td>Zelle 1. Spalte</td>
<td>Zelle 2. Spalte</td>
</tr>
<tr>
<td colspan="2">Verbundene Spalten</td>
</tr>
</tbody>
</table>

Tabellen sind dafür da tabellelarische Daten zu speichern. Spalten können mittels Attribut colspan, Zeilen mittels Attribut rowspan miteinander verbunden werden.

Abkürzungen und Akyronyme

<abbr title="beziehungsweise">bzw.</abbr>
<acronym title="World Wide Web">W3C</acronym>

Abkürzungen und Akronyme sollten unbedingt richtig ausgezeichnet werden, damit die Website auch für andere Darstellungsmedien (Screenreader) zugänglich ist.

Betonungen

<p>Eine <em>schwache Betonung</em> in einem Satz.</p>
<p>Eine <strong>starke Betonung</strong> in einem Satz.</p>

Für die Betonung von Textpassagen stehen zwei Elemente zur Verfügung: em für leichte Betonungen und strong für stärkere Betonungen. Üblicherweise werden diese im Browser kursiv beziehungsweise fett dargestellt.

Verwandte Snippets

Weblinks