info@a-coding-project.de

XHTML: Unterschiede Notation

Da in HTML, wie in der Einleitung schon erwähnt, etwas "wahrlos" in Bezug auf Notation, Elemente und Attribute umgegangen werden konnte/wurde, hat sich auch hier einiges geändert.

Wohlgeformtheit

Mit XML wurde das Konzept der Wohlgeformtheit eingeführt. Dies bedeutet, dass die Anordnung der Elemente nicht überlappend sein darf. Wird in einem geöffneten Element ein weiteres Element definiert, so muss dies geschlossen werden, bevor auch das erste Element geschlossen wird. Beispiel:

<!-- RICHTIG -->
<Element-1><Element-2> ... </Element-2></Element-1>

<!-- FALSCH -->
<Element-1><Element-2> ... </Element-1></Element-2>

Kleinschreibung

Alle Elementnamen und Attribute müssen klein geschrieben werden. Beispiel:

<!-- RICHTIG -->
<p><img src="name.gif" alt="ein Bild" /></p>

<!-- FALSCH -->
<P><IMG SRC="name.gif" Alt="ein Bild" /></P>

End-Tags

In HTML war es durchaus üblich End-Tags bei einigen Elementen einfach weg zu lassen. Dies darf nicht sein. Alle Elemente die Informationen jeglicher Art (Text, weitere Elemente; ausgenommen Attribute) enthalten, müssen einen End-Tag erhalten, der diese Informationen einschließt. Beispiel:

<!-- RICHTIG -->
<p> ... Inhalt 1 ... </p><p> ... Inhalt 2 ... </p>

<!-- FALSCH -->
<p> ... Inhalt 1 ... <p> ... Inhalt 2 ...

Sollte ein Element, welches in der jeweiligenDTDnicht mit EMPTY (also als leeres Element) definiert worden ist, einmal keine Informationen beinhalten, wird empfohlen nicht die verkürzte schreibweise zu verwenden, sondern besser das Element eben ohne Inhalt zu notieren. (Statt <p /> besser <p>&nbsp;</p>)

Leere Elemente

Elemente, die keine Informationen (Text, weitere Elemente; ausgenommen Attribute) enthalten, brauchen weiterhin nur aus einem Tag bestehen. Diese müssen allerdings eine Markierung bekommen, dass es sich dabei um ein leeres Element handelt. Dies wird durch einen Schrägstrich (/) vor dem schließenden > notiert. Beispiel:

<!-- RICHTIG -->
<img src="name.gif" alt="ein Bild" /> 

<!-- FALSCH -->
<img src="name.gif" alt="ein Bild">

Zusätzlich wird geraten ein Leerzeichen vor diesen schließenden Schrägstrich zu setzten und leere Elemente auch als solche zu notieren und keinen schließenden Tag anzuhängen.

Verschachtelung

Bei den folgenden Elementen darf keine Verschachtelung mit dem selben oder bestimmten anderen Elementen stattfinden:

  • a - Darf keine weiteren a enthalten
  • button - Darf keine button, fieldset, form, iframe, input, isindex, label, select und textarea enthalten.
  • form - Darf keine weiteren form enthalten.
  • label - Darf keine weiteren label enthalten.
  • pre - Darf keine big, img, object, sub und sup enthalten.

Attribute

In XHTML müssen alle Attributwerte, also das, was nach dem Ist-Gleich-Zeichen steht, in doppelte Anführungszeichen (&) gesetzt werden. Hier kann nicht, wie vielleicht zuvor, dies einfach vernachlässigt werden. Beispiel:

<!-- RICHTIG -->
<img src="name.jpg" alt="ein Bild"/>

<!-- FALSCH -->
<img src=name.jpg alt=ein Bild/>

Zusätzlich dürfen keine Attribute mehr abgekürzt werden. Die so in HTML beschriebenen Attribute müssen nun in XHTML einen Attributnamen sowie einen dem zugewiesenen Wert erhalten. Beispiel:

<!-- RICHTIG -->
<textarea disabled="disabled"> ... </textarea>
<area nohref="nohref"> ... </area>

<!-- FALSCH -->
<textarea disabled> ... </textarea>
<area nohref> ... </area>

Gleichfalls ist darauf zu achten, dass eventuelle Leerzeichen am Anfang und Ende eines Attributwertes weggeschnitten werden (z.B. vom Browser). Mehrere aneinanderhängende Leerezeichen und eventuelle Zeilenumbrüche werden zu einem Leerzeichen zusammengeschrupft (z.B. ebenfalls vom Browser).

Scripts und StyleSheets

Dadurch, dass die Elemente script und style in XHTML als Elemente mit dem Inhalt #PCDATA (allg. Text) definiert worden sind, ergibt sich das Problem, dass Zeichen (z.B. < und >) nicht als Script- bzw. Style-Code gesehen werden könnten, sondern als ein Element. Dies soll vermieden werden, indem diese Script- und Styleangaben innerhalb eines CDATA-Bereiches notiert und nicht wie in HTML als Kommentar gesetzt werden. Der CDATA-Bereich wird durch <![CDATA[ ... Inhalt ... ]]> beschrieben. Beispiel:

<!-- RICHTIG -->
<script> 
 <![CDATA[ ... Inhalt ... ]]> 
</script>

<style>
 <![CDATA[ ... Inhalt ... ]]>
</style>

<!-- FALSCH -->
<script> ... Inhalt ... </script>

<style> ... Inhalt ... </style>

Zusätzlich wird geraten, bei kritischen Fällen externe Scripte und Style-Angaben zu benutzen. In denen können dann sämtliche Zeichen verwendet werden, die nicht mit der Script-Sprache bzw. dem StyleSheet kollidieren.

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Auch interessant