Websiteentwicklung: XHTML: Syntax

Websiteentwicklung XHTML Syntax

XHTML-Elemente

Eine XHTML-Seite besteht neben dem eigentlichen Text aus sogenannten Elementen (englisch: elements). Mit XHTML-Elementen werden bestimmte Bereiche wie beispielsweise Überschriften, Tabellen oder hervorgehobener Text gekennzeichnet. Damit ein Darstellungsprogramm erkennt, was ein Element ist und was Text sein soll, werden alle Elemente mit Anfangs- und Endmarkierungen gekennzeichnet. Die Markierungen werden mit spitzen Klammern gekennzeichnet. Für die Anfangsmarkierung kommt vor dem Elementnamen die öffnende Klammer < und nach dem Elementnamen die schließende Klammer >. Bei der Endmarkierung kommt vor dem Elementnamen die öffnende Klammer mit Schrägstrich </ und nach dem Elementnamen die schließende Klammer >.

Alle Elemente müssen abgeschlossen werden

Da ein Element einen Bereich markiert, gibt es eine Anfangs- und Endmarkierung. Ein Element muß also immer geschlossen werden. So sieht der Bereich aus:

<element>Inhalt des Elementes</element>

Beispielsweise bewirkt <em>hervorgehobener Text</em>, dass der Text zwischen den Markierungen <em> und </em> als Betonung ausgezeichnet wird. Graphische Darstellungsprogramme zeigen diese Betonung üblicherweise kursiv an.

Leere Elemente müssen richtig abgeschlossen werden

Enthalten Elemente keinen Inhalt, so spricht man auch von leeren Elementen. Statt nun

<element></element>

zu schreiben, kann alternativ auch eine Kurzschreibweise verwendet werden:

<element />

Aus historischen Gründen (heuristische Rückwärtskompatibilität zu HTML) empfiehlt sich bei XHTML allerdings die lange Schreibweise bei den Elementen, die Inhalt haben können und die Kurzschreibweise bei solchen, bei denen kein Inhalt zulässig ist.

Beispiele für Elemente, die keinen Inhalt haben dürfen, sind der erzwungene Zeilenumbruch (<br />) oder die Einbindung von Graphiken (<img src="foto.jpg" alt="Alternativtext zur Graphik" />). Also etwa:

Dieser Text <br /> hat einen Zeilenumbruch.

Das Leerzeichen vor dem abschließenden Schrägstrich ist nicht vorgeschrieben, allerdings aus erwähnten heuristischen Kompatibilitätsgründen zu früheren HTML-Versionen empfehlenswert - das XHTML wird dadurch nicht zu korrektem HTML4, aber die üblichen Darstellungsprogramme für HTML kommen dann gegebenenfalls damit zurecht.

Alle Elemente und Attribute müssen kleingeschrieben werden

Bei Element- und Attributnamen wird bei XML und damit auch bei XHTML zwischen Groß- und Kleinschreibung unterschieden. So sind BR und br zwei unterschiedliche Elementnamen. Bislang hat XHTML keine Elemente oder Attribute mit Großbuchstaben, alle Elemente und Attribute müssen also kleingeschrieben werden.

Elemente müssen richtig geschachtelt werden

Die meisten Elemente dürfen geschachtelt werden. Das heißt, innerhalb eines Elements können weitere Elemente notiert werden. Allerdings muss das zuletzt geöffnete Element zuerst wieder geschlossen werden.

<p>Hier steht ein <em>hervorgehobener Text.</em></p>

Falsch ist beispielsweise:

<p>Hier steht ein <em>hervorgehobener Text.</p></em>

Attribute müssen einen Wert haben

Viele Elemente besitzen zusätzliche Attribute. Dies sind weitere Angaben in der Anfangsmarkierung des Elementes. Attribute stehen nie in der Endmarkierung. Die Attribute müssen immer einen Wert besitzen, welcher immer in Anführungszeichen eingeschlossen wird. Beispiel:

<abbr title="Extensible Hypertext Markup Language">XHTML</abbr>

oder

<abbr title='Extensible Hypertext Markup Language'>XHTML</abbr>

abbr ist hierbei der Name des Elementes (eine Abkürzung, englisch: abbreviation), title ist der Name des Attributes (in diesem Fall die Beschreibung der Abkürzung) und "Extensible Hypertext Markup Language" ist der Wert des Attributes (also der Beschreibungstext). "XHTML" schließlich ist in diesem Falle der Inhalt des Elementes.

Verschachtelung und mögliche Inhalte

XHTML legt genau fest, welche Elemente in welchen Elementen stehen dürfen und in welchen nicht. Diese Regeln hängen vom jeweiligen Element ab und werden daher bei den jeweiligen Elementdefinitionen diskutiert.

In diesem Zusammenhang werden oft die Begriffe Elternelement und Kindelement oder allgemeiner Vorfahre und Nachfahre verwendet. Elternelement ist das nächsthöhere Element, in welchem ein Element steht. Einmal abgesehen von Wurzelelement html haben alle Elemente eines XHTML-Dokumentes exakt ein Elternelement. Elternelemente des Elternelementes und deren Elternelemente etc werden Vorfahren genannt. Kindelemente sind jene Elemente, die in einem Element als Inhalt stehen und dieses Element als Elternelement haben. Nachfahren sind demzufolge neben den Kindelementen die Kindelemente der Kindelemente etc. Elemente mit gemeinsamem Elternelementen nennt man in dieser Analogie auch Geschwister.

Beispiel:

<body>
<h1>Ein <em>Beispiel</em></h1>
<ul>
 <li><h2>Pflanzen</h2></li>
 <li><h2>Pilze</h2></li>
 <li><h2>Tiere</h2>
   <ul>
    <li>Insekten</li>
    <li>Säugetiere</li>
    <li>Vögel</li>
   </ul>
 </li>
</ul>
</body>

Kindelemente von body sind also h1 und ul. Eine spezifische XHTML-Regel ist zum Beispiel, dass alle Kindelemente von ul li-Elemente sein müssen. Elternelement von em ist hier h1 und gemeinsamer Vorfahre von li, h1 und em ist body (und das im Beispiel nicht extra notierte Wurzelelement html. Bei dem Beispiel gibt es li-Elemente, die Nachfahren von li-Elementen sind. Das geht, weil sie in einem ul stehen, welches als Vorfahren, hier sogar als Elternelement ein li hat und es eine XHTML-Regel gibt, die besagt, dass ul Kindelement von li sein darf, wie hier übrigens auch das h2.

Daneben gibt es noch Fachausdücke für Text, der in Elementen erlaubt sein kann oder auch in Attributen steht.

Einfacher Text wird auch als CDATA bezeichnet, dies ist eine Folge von Zeichen, die zur Kodierung gehören, welche für das Dokument angegeben ist. CDATA als Elementinhalt wird also nicht weiter interpretiert. Ist CDATA allerdings Inhalt eines Attributes, so wird es interpretiert, entsprechend der folgenden Erklärung für PCDATA.

PCDATA ist hingegen interpretierter Text. Außer einer Zeichenfolge wie bei CDATA können als Inhalt auch Entitäten (spezielle Abkürzungen) auftreten, die eine Zeichenfolge repräsentieren. Diese Abkürzungen werden dann interpretiert, also die Abkürzung durch das Abgekürzte ersetzt.

Der Autor kann bei Bedarf einen Teil des Inhaltes eines Elementes als CDATA kennzeichnen. Der Bereich beginnt mit

<![CDATA[

und endet mit

]]>

Also zum Beispiel:

<![CDATA[
Irgendein nicht interpretierter Text mit <, >, & etc.
]]>

Folglich darf die schließende Zeichenfolge darin nicht vorkommen. Um diese effektiv zu realisieren, ist zuvor der CDATA-Bereich zu schließen, also etwa so:

<![CDATA[
Wie man
]]]]><![CDATA[>
schreibt...
]]>

Kommentare

In XHTML können Kommentare stehen. Kommentarinhalte werden nicht interpretiert, sind also nur im Quelltext lesbar, aber nicht in der Darstellung eines Dokumentes im Darstellungsprogramm. Kommentare können etwa sinnvoll sein, um den Quelltext verständlicher zu machen oder aktuell nicht benötigte Teile eines Dokumentes auszukommentieren.

Ein Kommentar beginnt mit der Zeichenfolge <!-- und endet mit der Zeichenfolge -->. Dazwischen kann nahezu beliebiger Text stehen, mit Ausnahme der Zeichenfolge --. Kommentare können stehen, wo Elemente notiert werden können. Details zu Kommentaren sind im vertiefenden Kapitel Kommentare zu finden.

 <!-- Das ist der Kommentar -->

XML-Sonderzeichen

In XML – und damit XHTML – kann es zu Problemen führen, wenn man im Dokument Zeichen notieren will, die verwendet werden, um Elementmarkierungen zu kennzeichnen oder um Attributwerte in Anführungszeichen einzuschließen. Daher werden in XML sogenannte Entitäten (englisch: entities) für solche Zeichen definiert, welche vom Darstellungsprogramm interpretiert und als das gewünschte Zeichen dargestellt werden. Das ist für diese Zeichen auch einfacher, als die Kennzeichnung als CDATA-Bereich.

Diese Entitäten bestehen aus einem Kürzel, das von einem Et-Zeichen (&) am Anfang und einem Semikolon am Ende umschlossen wird. Im Folgenden sind die fünf in XML – und damit auch in XHTML definierten Entitäten aufgelistet:

Sonderzeichen	Entität
<	&lt;
>	&gt;
'	&apos;
"	&quot;
&	&amp;

Die Größer- und Kleinerzeichen müssen dabei immer als Entität im Quelltext notiert werden, sollen sie nicht als Elementbegrenzung dienen.

Anführungszeichen im Inhalt sind unproblematisch. Lediglich innerhalb von Attributwerten können sie mit den Anführungszeichen in Konflikt geraten, welche den Attributwert einschließen. Da allerdings dafür die Wahl zwischen einfachen und doppelten Anführungszeichen möglich ist, reduziert sich das Problem bereits. Eine Umschreibung als Entität ist notwendig, wenn man beide Typen notieren möchte oder einheitlich immer dieselben Anführungszeichen für die Attributwerte verwenden will.

Damit hat man sich natürlich das Problem eingehandelt, dass man nun auch immer das Zeichen & maskieren muss, um es von der Situation zu unterscheiden, dass ein maskiertes Zeichen notiert werden soll (denn es gibt weitere Möglichkeiten, auch andere Zeichen zu maskieren oder selbst solche Notationen zu definieren). Daher existiert für das Et-Zeichen ebenfalls eine Entität.

Zur Übung überlassen sei dem Leser herauszufinden, was man notiert, damit die Zeichenkette & dargestellt wird. Beim ersten Beispieldokument sollte man solche Maskierungen einfach mal ausprobieren und sich angucken, was passiert, wenn man sie verwendet und was, wenn nicht.

Blockelemente und inzeilige Elemente

Spezifisch für die Struktur oder Syntaxregeln von HTML und XHTML können die meisten Elemente in eine von zwei Gruppen eingeordnet werden. Das eine sind Blockelemente (englisch: block elements), das andere sind inzeilige oder Phrasenelemente (englisch: inline elements, phrasing elements). Beides zusammen und zu interpretierender Text (PCDATA) bildet den laufenden Inhalt (englisch: flow content).

Blockelemente umfassen jeweils ein für sich abgeschlossenes Inhaltssegment, abgeschlossen gegebenenfalls auch in dem Sinne, dass es sich um eigenständigen, vom vorherigen oder nachfolgenden Inhalt zu trennenden Inhalt handelt. Ein Block ist also klar von einem anderen getrennt. Ein typischer Vertreter dieses Typs ist der Absatz (Element p), der einen abgeschlossenen Gedankengang umfasst. Entsprechend werden solche Elemente auch voneinander separiert dargestellt.

Für den anderen Elementtyp ist leider weder der englische noch der deutsche Fachbegriff wirklich eingängig. Beide geläufige Bezeichnungen beschreiben diesen Elementtyp nur teilweise. Entscheidend für diesen Elementtyp ist jedenfalls, dass er den Textfluß nicht unterbricht.

In der Linguistik bezeichnet Phrase einen Satzteil - eine Anordung von Worten innerhalb eines Satzes. In dem Sinne wäre bei (X)HTML eine Phrase allerdings ein Element innerhalb des Textflusses eines Blockelementes, dessen Inhalt auch aus mehreren Sätzen bestehen kann, oder aus dem Ende eines Satzes und dem Anfang eines anderen, weil der Punkt '.' hier in dem Sinne keinen trennende Funktion hat.

Der andere Begriff inzeiliges Elemente bezieht sich auf den gleichen Zusammenhang, das Element kann innerhalb von Zeilen verwendet werden, ohne den Textfluß zu unterbrechen. Dabei kann solch ein Element auch den mit dem Element br manuell eingefügten Zeilenumbruch oder den automatischen umschließen, kann sich auch über mehrere Zeilen erstrecken, generell aber nicht über (mehrere) Blockelemente.

Es gibt allerdings auch wenige inzeilige Elemente, die aus bestimmten Gründen Blockelemente umschließen können, also in dem Sinne nicht zwangsläufig im normalen Textfluß stehen. Anders herum gibt es auch besondere inzeilige Elemente, in denen Blockelemente stehen dürfen. Dies wird dann in der jeweiligen Erklärung des betroffenen Elementes erklärt.

Die Definition und Bedeutung der einzelnen Blockelemente ist in den einzelnen Kapiteln angegeben. Als Übersicht seien hier aber die Vertreter der beiden Gruppen explizit erwähnt. In den Kapiteln ist dann in der Regel nur angegeben, dass ein Element nur Blockelemente enthalten darf oder nur inzeilige, statt diese jedes Mal einzeln aufzuzählen. Entsprechend kann angebeben sein, dass es sich um laufenden Inhalt handelt.

Blockelemente sind:

• Überschriften: h1, h2, h3, h3, h4, h5, h6
• address, blockquote, div, p, pre
• Listen: dl, ol, ul
• Formulare: form, fieldset
• Tabellen: table

Eigentlich unterscheidet XHTML noch Überschriften und Listen von sonstigen Blockelementen, was aber im Zusammenhang mit diesem Lehrbuch nicht weiter relevant ist.

Inzeilige oder Phrasenelemente sind:

• a, abbr, acronym, br, cite, code, dfn, em, kbd, q, samp, span, strong, var
• Präsentationsattribute: b, big, i, small, sub, sup, tt
• Bidirektionalität: bdo
• Formular-Kontrollelemente: input, label, select, textarea, button
• Graphik, eingebettete Dateien: input, map, object
• Text mit mitlaufendem Kommentar: ruby
• Editieren: ins, del

Daneben gibt es weitere Elemente mit besonderen Regeln, die nicht in dieses einfache Schema passen, dazu gehören zum Beispiel html, head, body, Elemente, die nur in head notiert werden dürfen, oder solche, die nur in Listen oder Tabellen auftreten dürfen. Für diese ist dann einzeln in den Kapitel aufgeführt, wo sie auftreten dürfen.

Aufgabe 3

In dem folgenden Quelltext sind mehrere Fehler eingebaut. Versuchen Sie, diese zu finden.

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" version="XHTML+RDFa 1.0">
 <head>
  <title>Wikibooks
 </head> 
 <body>
  <H1>Was ist das?</h1>
  <p>
   Wikibooks ist ein Wiki zur Erstellung von Lehr-, Sach- und Fachbüchern...
  <p>
  <h2><tt>Entstehung</h2></tt>
  <p id=formatierung>
     Am 10. Juli 2003 wurde „Wikibooks“ als eines der Wikimedia-Projekte ins Leben gerufen. 
  </p>
 </body>
</html>

Lösung

Zurück zu Eine erste Seite | Hoch zu XHTML | Vor zu Allgemein verwendbare Attribute