Mastodon

renephoenix.de

XHTML 2.0 - eine Revolution?

Vorwort

Die letzten Jahre sind im Bereich der Webgestaltung ohne größere Veränderungen verlaufen. Im Jahr 1999 gab es mit HTML 4.0 die letzte größere Reform (ok, es wurde noch Feinheiten ausgebessert und das ganze XML-konform gemacht), CSS 2 zur Gestaltung – und die gibt es sogar schon seit 1998. Ständig wird sich die Rückschrittlichkeit des Internet Explorers beschwert – und ansonsten? Einige Features bereicherten die Seiten (z.B. RSS, Favicons, …) – aber es waren keine grundsätzlichen Veränderungen!

Zur Zeit befindet sich XHTML 2.0 in der Entwurfsphase, die letzten Arbeitsentwürfe sind vom 27. Mai 2005. Es wird auf jeden Fall eine interssante Sache werden! Mit dem folgenden Text gebe ich Einblicke in XHTML2. Ohne zu viel vorweg zu verraten: es wird eine kleine Revolution werden.

Überschriften

Im traditionellen HTML wird die Ebene der Überschrift mit einer Nummer versehen, welchen Rang sie hat:

<h1>Überschrift ersten Grades</h1>
<h2>Überschrift zweiten Grades</h2>
<h3>Überschrift dritten Grades</h3> ... 
</h6>

Eine ähnliche Praxis gibt es auch in LaTeX: part, chapter, section, subsection, subsubsection usw. Diese Struktur wird komplett aufgelöst. In Zukunft werden die Webseiten in logische Abschnitte verschachtelt – und zu dem Abschnitt kann dann die Überschrift festgelegt werden:

<section>
	<h>Überschrit ersten Grades</h>
	...
	<section>
		<h>Überschrift zweiten Grades</h>
		... 
		<section>
			<h>Überschrift dritten Grades</h> 
			... 
		</section> 
	</section>
</section>

Die vorhandene Beschränkung auf sechs (bzw. in LaTeX auf sieben) Ebenen wird aufgelöst. Die Verschachtelungstiefe kann beliebig sein – auch wenn es in der Praxis selten vorkommt, diese Ebenen auszureizen.

Der weitaus größere Vorteil ist allerdings die einfache Weiterverarbeitung von Texten. Ein für sich stehender Text kann ohne nennenswerten Aufwand als Abschnitt in einem großen Text eingebunden werden. Die Tiefe von Überschriften ergibt sich aus der Verschachtelungstiefe – und nicht aus der Ebene des Überschriften-Tags.

(Kurzer Gedanke am Rande: ein außerhalb von

wäre doch eine praktische Sache für einen Seitentitel?)

Absätze

Es wird einige Vereinfachungen bei der Verwendung von Absätzen geben, die wichtigste ist die Möglichkeit, Blockelemente weiter zu verschachteln:

<p>Es wird einiges neues bei XHTML 2 geben, z.B. das hier 
<ul>
	<li>Neue Struktur für Überschriften</li>
	<li>Listen sind auch in Absätzen erlaubt</li>
	<li>usw..</li>
</ul> Einiges wird sich auch nicht ändern!</p>

Nach den bisherigen Spielregeln muß der Absatz erst geschlossen werden, ehe eine Liste geöffnet wird.

Die Elemente <pre />, <hr /> und <br /> werden verschwinden.

Eine horizontale Linie (hr = horizontal row) ist ein Gestaltungsmerkmal – es wird durch <seperator> ersetzt – und mit CSS dann gestaltet. Diese Veränderung ist im Endeffekt nur eine Umbenennung – und könnte den Tipfaulen weniger gefallen (warum nicht kurz <sep />?).

Ähnlich verhält es sich mit dem vorformatierten Texten mittels <pre /> – in Zukunft ist dies lediglich ein Attribut eines anderen Elementes: layout="relevant".

Bei den Zeilenwechsel wird es dagegen schwieriger. Bisher war der Zeilenwechsel einfaches Tag gewesen:

<p>So funktionierte bisher ein Zeilenumbruch<br/>
und weiter geht es!<br/> und es funktioniert</p>

Nach XHTML 2.0 wird jede Zeile geklammert:

<p><l>Wir definieren zum Absatz eine Zeile</l>
<l>damit wir nun einen Umbruch machen können</l>
<l>und benötigen wesentlich mehr Elemente!</l></p>

Der Ansatz ist zugegebenermaßen chaotisch. Es wird mit verbesserten Gestaltungsmöglichkeiten argumentiert, wenngleich die Frage offen bleibt, wie Zeilenbrüche optisch gestaltet werden sollen. Mit CSS2 gänge es zur Not mit :before/ :after denkbar.

Mit dieser Lösung wird der Quellcode unnötig aufgebläht.h

Eingebundene Bilder und Links

Diese beiden Elemente sind eigentlich die Grundbasis von HTML. Mit <img src="" /> werden Bilder eingebunden, mit <a href=""> Links gesetzt. Auch dieser Ansatz wird aufgeweicht: die relevanten Attribute src und href dürfen künftig in allen Elementen verwendet werden. Ein Bild kann man künftig so setzen (anstelle von <p> ist auch weiterhin <img> möglich, jedoch gibt es das alt-Attribut nicht mehr):

<p src="map.png" type="image/png, image/gif">Ein schönes Bild!</p>

Das w3c bemängelt schon sehr lange und sehr energisch, daß zu einem Bild stets eine Beschreibung als Alternative angeboten werden soll. In den alten Modem-Zeiten war es nützlich: man las erst einen kleinen Beschreibungstext – um dann zu entscheiden, ob man das Bild sehen möchte. Heute spielt viel stärker der Gedanke der barrierefreiheit (hier die Blinden) eine Rolle. Mit der neuen Variation werden die Betreiber der Seiten viel stärker gezwungen, eine Alternative anzubieten (ein Attribut weglassen geht schnell, ein Tag leer lassen sieht dagegen ungeschickt aus).

Das Attribut type ist eine freiwillige Zugabe, mit der ein gewünschten Dateityp angeben werden kann.

<li href="http://renephoenix.de/">René Pönitz</li>

Links sind nun genauso auf jedes Element angewendet. In Bezug auf Menulisten ist dies ein echter Mehrwert!.

Menulisten

Menulisten wurden einst mit <menu> abgebildet – und nacshließend missbilligt. In XHTML2 ist das Tag wieder geboren, es nennt sich nun <nl> – für Navigationsliste.

Metadaten

Ohne diese Kapitel mit Details zu ersticken: es ist künftig möglich, Meta-Angaben an jeder beliebigen Stelle zu plazieren. Im Grunde funktioniert es dann mit dem Element , welches drei Attribute habe wird:

  • about gibt die ID eines Elementes an
  • property gibt das Attribut an
  • rel ist wie bisher für die Beziehung von Adressen wichtig
  • der eigentliche Wert befindet sich dann zischen dem öffnenden und schließenden Tag – und kann bei Bedarf weitere XHTML-Elemente enthalten.

In der Anwendung könnte es z.B. so aussehen:

<p id="p123"> <meta about="#p123" property="title">Wert</meta> eigentlicher Inhalt mit einem Link zur <a href="..." rel="next">nachfolgenden</a> Seite</p>

Das Attribut role

Eine kleine Neuigkeit ist das role-Attribut. Damit können einzelne Bereiche kennzeichnet werden, z.B. als Einleitung, Zwischennotiz oder auch die Beliebte Trennung zwischen Hauptseite und dem Navigationsbereich. In der Praxis wurde diese Eigenschaften meistens im class-Attribut versteckt – welches letztendlich für die Auswahl der richtigen CSS-Klasse zuständig ist.

Das Attribt wurde als RSS-Killer vorgestellt, wenngleich RSS eine völlig andere Zielrichtung geht.

Accesskeys nun zentral

Die sogenannten Zugriffstasten waren bisher verstreut definiert, z.B. in Links oder Formulardaten. Diese werden nun zentral im Kopf verwaltet. Dabei sind diese Tasten für verschiedene Medien unterschiedlich auslegbar.

<access targetid="main" key="M"/>

Eventhandler

Es haben die alten JavaScript-Handler ausgedient. Anstelle von onmouseover und onclick gibt es nun DOM-Handler. So sah der Aufruf einer Eingabeprüfung des Formulares bisher aus:

<input type="submit" onclick="validate(); return true;">

Und so in Zukunft:

<input type="submit"> <handler ev:event="DOMActivate" type="text/javascript"> validate(); </handler> </input>

Es sieht zugegebenermaßen nicht einfacher aus – aber es gibt mehr Möglichkeiten: ich kann verschiedene Handler aufrufen (es ging bisher auch) – ich kann für einen Handler auch verschiedene Sprachen verwenden (da stelle ich den Sinn einmal in Frage). Der Hauptvorteil für diesen Schritt ist das alte Problem, daß die Handler unterschiedlich interpretiert wurden sind (ist onclick nur ein Mausklick oder auch die Entertaste … beim Drücken – oder beim Loslassen?), hier gibt es nun festdefinierten Standards.

Formulare

Den herkömmlichen Ansatz von Formularen wird es mit XHTML2 nicht mehr geben, sie werden ersetzt durch XFORMS. Die wesenttlichsten Verbesserungen sind der Austausch der Daten mittels XML und das Nachladen von bestehenden Formularelementen (Sie sind sogesehen kein Gegenstand von XHTML2 mehr)

Weitere Elemente

  • Die Elemente <del> und <ins> (Darstellung für gelöschten und eingefügten Text) werden umgewandelt in Attribute (edit="inserted|deleted|changed|moved")
  • Das Element <bdo> (zeigt Text in anderer Leserichtung an) wird ebenso ersetzt durch das Attribut dir="rlo".
  • Die Formatierungselemente <b>, <big>, <center>, <font>, <i>, <small>, <u> (das flog schon eher raus) <tt> flogen aus dem Standard raus
  • Aus <q> wird <quote>
  • <acronym> fliegt heraus. Stattdessen soll nur noch mit <abbr> gearbeitet werden.
  • <fieldset> und <legend> gibt es nicht mehr. Mit ihnen konnte man Formulare strukturieren
  • Neues Element <di>: es kann bei Definitionslisten zur Klammerung von Begriff und Beschreibung eingesetzt werden
  • Neues Element <blockcode> zur Abbildung ganzer Codeblöcke. Bisher wurde dies meist mit Hilfe von <pre> realisiert.

Fazit

Wenn man die gesamten Veränderungen betrachtet, sieht man eine Revolution auf uns zu kommen. Dinge, die seit den Anfängen des HTML vorhanden waren, werden nun in Frage gestellt – und bis auf wenige Ausnahmen auch gut gelöst!

Aber jenseits dieser Veränderungen steht natürlich die Frage, ab wann diese Technologien eingesetzt werden können. Die Antwort ist ungewiß! Vermutlich könnte der InternetExplorer wieder die Spaßbremse werden!

Weitere Informationen

Bisherige Kommentare (8)

Kommentar von Martin

Im CSS-Abschnitt waren einige Ergänzungen notwendig, da die Browser die neuen Tags und Attribute noch nicht kennen. An der Stelle zeichnet sich ein Unterschied zwischen den Browsern ab: bei Opera kann ich unbekannte Elemente formatieren, der Mozilla/FireFox ignoriert diese.

Bei meinem Firefox (1.0.4, Windows) klappt das auch.

Kommentar von René

@wrt: ein title muß weiterhin im Kopfbereich auftauchen. Aber auch im sichtbaren Bereich sollte es einen Seitentitel geben. (Klar, ich kann ihn mittels CSS auch herausextrahieren. Ist aber auch eher eine Notlösung, als das Ziel)

Kommentar von Pablo

> Das mit den Zeilenumbrüchen ist echt der Hammer.
Ich finde es gut. Dann sieht man auch wo eine Zeile beginnt, nicht nur wo sie aufhört, was zwar auf dem Papier leicht zu erkennen ist, im Quelltext jedoch nicht.

Kommentar von Martin

Ich find das mit den Zeilenumbrüchen auch gut. So kann man die Zeilen besser über CSS und DOM ansprechen, z. B. um mit CSS 3 die Zeilen zebrastreifenartig einzufärben, wie es sich auch in Tabellen anbietet. Außerdem finde ich es logischer — wie sähe der entsprechende CSS-Code für ein emuliertes <br/> aus? display:block; height:0;? Da fällt es leichter, das <l>-Element als Blockelement anzusehen (okay, an sich eher für Browserentwickler relevant).

Kommentar von kronn

Ich sehe, dass du die Dateiendung .html verwendet hast.
Ist das überhaupt richtig? Und welchen mime-type verwendest du?

Wenn es als text/html über die Leitung wandert, ist es nicht als nicht-valides HTML. Leider.

Kommentar verfassen

Freiwillige Angabe
Freiwillige Angabe
Der Text kann mit Textile formatiert werden, z.B. *fett* _kursiv_ "link":url. Wie das geht?
Wieviel ist 40 plus 2?

Bisherige Trackbacks (0)

Es wurde noch kein Trackback empfangen!