HTML5: Erweiterbarkeit
Das X in XHTML steht ja für extensible, erweiterbar. Entsprechend ist es problemlos möglich, in ein XHTML-Dokument ein Fragment eines XML-Formates mit einem anderen Namensraum einzubauen. Das Ergebnis ist wiederum ein XML-Dokument.
Bei der Markierungssuppenvariante von HTML5 ist das nur eingeschänkt möglich, weil diese Variante keine Namensräume berücksichtigt. Explizit genannt werden für diese Version nur Fragmente innerhalb des Elementes svg von SVG, skalierbare Vektorgraphik. Dazu wird das Element math von MathML, der Auszeichnungssprache für Mathematik genannt. Von MathML ist allerdings nur der Präsentations-Anteil von den HTML5-Autoren erwünscht.
Bei der Variante mit XML-Notation gibt es diese Einschränkungen nicht. Das bedeutet allerdings nicht, daß die Darstellungsprogramme mehr interpretieren würden als das, was in der HTML5-Empfehlung als auf breiter Basis interpretiert genannt wird.
Die einfachste Methode der Einbettung besteht darin, in jenem Element, welches zu einem anderen Namensraum gehört, einfach mit xmlns den Namensraum anzugeben. Der gilt dann auch für dessen Kindelemente. Stattdessen können per xmlns auch Präfixe für Namensräume definiert werden, die dann jeweils bei den Markierungen den Elementnamen samt Doppelpunkt vorangestellt werden (siehe Beispiele unten).
Bei der Markierungssuppen-Variante sind die Elemente svg und math definiert, sie werden also auch ohne Interpretation der Namensräume als SVG oder MathML verstanden.
svg und math werden als Phrasenelemente eingeordnet, sie können also dort verwendet werden, wo Phrasenelemente verwendet werden können. Daneben sind bei XML-Notation pauschal im head auch explizit Elemente aus anderen Namensräumen erlaubt, die dazu dienen, Metainformationen zum Dokument auszuzeichnen.
Anders als etwa SVG oder MathML sieht (X)HTML ansonsten kein besonderes Element vor, wo solch ein fremdes Fragment eingesetzt werden soll. Umgedreht sieht (X)HTML auch kein spezielles Element vor, in dem XHTML-Fragmente in anderen Dokumenten eingebettet werden müßten. Es können also beliebige XHTML-Elemente als Fragmente in anderen Formaten verwendet werden.
Zwar kann man mit Hilfe von CSS praktisch jedes XML-Fragment dekorieren, um es visuell zu strukturieren und lesbarer zu machen, über die Auszeichnung von Semantik hinausgehende Funktionalitäten brauchen aber immer eine korrekte Interpretation des entsprechenden Formates. Jenseits von SVG oder MathML ist da kein weiteres Format vorgesehen, gleichwohl ist es den Darstellungsprogrammen überlassen, bei XML-Notation auch weitere Namensräume zu interpretieren.
Anders als etwa SVG und SMIL stellt XHTML auch keine Strukturen bereit, um alternativen Inhalt bereitzustellen, falls der Namensraum des Fragmentes nicht interpretiert wird. Bei eigenständigen, externen Dokumenten kann dafür immerhin das Element object verwendet werden, bei eingebetteten Inhalten entfällt diese Möglichkeit ähnlich wie beim Element img oder iframe.
Wenn also unklar ist, ob das Fragment (also in einer anderen Sprache als SVG oder MathML und nicht mit einer Funktion als Meta-Information) aus dem anderen Namensraum immer interpretiert wird und dann ein alternativer Inhalt angeboten werden soll, ist es auf jeden Fall empfehlenswert, das Fragment nicht direkt einzubetten, sondern stattdessen ein komplettes Dokument per object zu referenzieren und über dessen Mechanismus Alternativen anzubieten. Alternativ kann natürlich auch ein eigenständiges Dokument per Verweis mit dem Element a referenziert werden. Sofern das Darstellungsprogramm das Dokument nicht selbst interpretieren kann, kann es eventuell ein anderes Programm vorschlagen.
Die anderen Formate können hier natürlich auch nicht erklärt werden. Das geht über den Umfang des Buches hinaus. Von daher bleibt es bei einigen Beispielen für gängige Formate wie RDF, SVG, MathML. Dazu gehört dann natürlich auch ein Beispiel, bei dem eine CSS-Dekoration ausreicht, um eine brauchbare visuelle Darstellung zu erreichen.
Wegen dieser Einschränkungen und Sonderregeln und wegen des fehlenden Konzeptes einer allgemeinen Erweiterbarkeit in der Markierungssuppen-Variante ist es jedenfalls ratsam, die Variante mit XML-Notation zu verwenden, wenn SVG- oder MathML-Fragmente oder andere XML-Formate eingebunden werden sollen.
Beispiele RDF
BearbeitenIm Element head notiert, werden die Informationen nicht im normalen Textfluß dargestellt, fungieren also als Metainformationen, die entweder mit besonderen Programmen ausgelesen werden oder aber vom Darstellungsprogramm gesondert dargestellt werden, das paßt meistens recht gut zu RDF, es kommt so allerdings zu doppelten oder gar mehrfachen Angaben. Im folgenden Beispiel tritt der Titel des Dokumentes gleich mehrfach auf, der Autor doppelt. Das liegt allerdings mehr an der Struktur von (X)HTML als an der Einbettung von Inhalten aus anderen Namensräumen. Diese Mehrfachangaben können häufig durch Verwendung von RDFa statt RDF vermieden werden. Der Vorteil von RDF liegt allerdings darin, daß die Metainformation in einem Block auftreten, der im Bedarfsfalle einfach zu kopieren ist. Bei RDFa muß die Information erst im gesamten Dokument zusammengesucht werden.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="de">
<head>
<title>Die Kleinsten</title>
<rdf:RDF
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/" >
<rdf:Description rdf:about="#DieKleinsten">
<dc:title>Die Kleinsten</dc:title>
<dc:creator>Wilhelm Busch</dc:creator>
<dc:created>1904</dc:created>
<dc:format>application/xhtml+xml</dc:format>
<dc:language>de</dc:language>
<dc:relation>http://de.wikisource.org/wiki/Die_Kleinsten</dc:relation>
<dc:description>Gedicht von Wilhelm Busch über Atome.</dc:description>
<dc:rights>Wilhelm Busch ist 1908 verstorben.
Nach deutschem Urheberrecht ist eine Veröffentlichung
mehr als 70 Jahre nach dem Tod des Urhebers eine
Veröffentlichung ohne weiteres erlaubt.
</dc:rights>
</rdf:Description>
</rdf:RDF>
</head>
<body>
<section class="Gedicht" id="DieKleinsten">
<h1>Die Kleinsten</h1>
<section class="Strophe">
<div class="Zeile">
Sag Atome, sage Stäubchen.</div>
<div class="Zeile">
Sind sie auch unendlich klein</div>
<div class="Zeile">
Haben sie doch ihre Leibchen</div>
<div class="Zeile">
Und die Neigung da zu sein.</div>
</section>
<section class="Strophe">
<div class="Zeile">
Haben sie auch keine Köpfchen,</div>
<div class="Zeile">
Sind sie doch voll Eigensinn.</div>
<div class="Zeile">
Trotzig spricht das Zwerggeschöpfchen:</div>
<div class="Zeile">
Ich will sein so wie ich bin.</div>
</section>
<section class="Strophe">
<div class="Zeile">
Suche nur sie zu bezwingen,</div>
<div class="Zeile">
Stark und findig wie du bist.</div>
<div class="Zeile">
Solch ein Ding hat seine Schwingen,</div>
<div class="Zeile">
Seine Kraft und seine List.</div>
</section>
<section class="Strophe">
<div class="Zeile">
Kannst du auch aus ihnen schmieden</div>
<div class="Zeile">
Deine Rüstung als Despot,</div>
<div class="Zeile">
Schließlich wirst du doch ermüden,</div>
<div class="Zeile">
Und dann heißt es: Er ist tot.</div>
</section>
</section>
<p class="Autor">Wilhelm Busch</p>
</body>
</html>
Ist andersherum gewünscht, XHTML in RDF oder anderen in RDF verwendeten Formaten zu verwenden, so muß genau geguckt werden, ob das jeweilige Element es erlaubt, Elemente aus anderen Namensräumen oder überhaupt Elemente und Auszeichnungsstrukturen darin zu notieren. Etwa bei dem hier verwendeten Dublin Core darf bei einigen Elementen nur einfacher Text als Inhalt verwendet werden. Das Element description von Dublin Core allerdings hat keine solche Einschränkungen, wenn man möchte, könnte man darin etwa XHTML verwenden, um den Inhalt weiter zu strukturieren, wenn die Beschreibung etwa aus mehreren Absätzen besteht.
Beispiel MathML
BearbeitenMathML wird inzwischen von einigen Darstellungsprogrammen zumindest teilweise interpretiert. Meist beschränken sich diese Programme auf die Auszeichnungselemente zu Präsentationszwecken, nicht jene für inhaltliche Auszeichnung. Ferner ist es eher unwahrscheinlich, daß ein Programm die zahlreichen, in MathML definierten Entitäten interpretiert, stattdessen sind dann immer die kryptischen Unicode-Nummern zu notieren, damit es bei diesen Programmen nicht zum Abbruch der Darstellung kommt.
Für den Fall, daß für Darstellungsprogramme gesorgt werden soll, die CSS interpretieren, aber kein MathML, kann zur visuellen Darstellung auch eine Stilvorlage verwendet werden, mit der zumindest ein Teilbereich von MathML so formatiert werden kann, daß eine brauchbare visuelle Darstellung entsteht. Das W3C hat dazu eine entsprechende Empfehlung herausgegeben: MathML und CSS.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="de">
<head>
<title>Weglänge</title>
</head>
<body>
<h1>Weglänge</h1>
<p>
Sei (x(t),y(t)) ein Pfad mit einer Parametrisierung
mit t von 0 bis 1, dann ist die Weglänge L=
</p>
<p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<msubsup>
<mo>∫</mo>
<mn>0</mn>
<mn>1</mn>
</msubsup>
<msqrt>
<msup>
<mrow>
<mo>(</mo>
<mfrac>
<mi>dx</mi>
<mi>dt</mi>
</mfrac>
<mo>)</mo>
</mrow>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mrow>
<mo>(</mo>
<mfrac>
<mi>dy</mi>
<mi>dt</mi>
</mfrac>
<mo>)</mo>
</mrow>
<mn>2</mn>
</msup>
</msqrt>
<mi>dt</mi>
</math>
</p>
</body>
</html>
Beispiele SVG
BearbeitenMittlerweile ist SVG ja ein sehr beliebtes Graphikformat geworden und die meisten gängigen Darstellungsprogramme interpretieren wenigstens größere Teile davon bereits seit einigen Programmversionen und Jahren. Von daher ist es recht plausibel anzunehmen, daß in XHTML eingebettetes, einfaches SVG auch interpretiert werden kann. Als Notbehelf hat SVG ferner Möglichkeiten, Textalternativen anzubieten. Nimmt der Autor dies in Anspruch, so gibt es immerhin diese Textalternative in dem Falle, daß SVG selbst nicht interpretiert wird.
Gerade zu diesem Zwecke bietet es sich an, daß es in SVG erlaubt ist, in den Elementen title, desc, metadata und foreignObject Elemente aus anderen Namensräumen zu notieren. Während man darauf zumindest beim title des Wurzelelementes eines eigenständigen SVG-Dokumentes verzichten sollte, kann es bei eingebetteten SVG-Fragmenten recht hilfreich sein, die Möglichkeit in Anspruch zu nehmen, insbesondere in title und desc besonders des Wurzelelementes svg zur Strukturierung zu verwenden. Kann ein Darstellungsprogramm SVG selbst nicht interpretieren, erhält man so immer noch eine gut strukturierte Textalternative.
Wichtig bei der Einbettung von SVG ist immer, daß das SVG-Fragment immer einen eigenen Anzeigebereich aufmachen muß, dazu ist als äußerstes Element des Fragmentes immer das Element svg zu verwenden, am besten mit den Attributen width und height und viewBox, um die Größe des Fragmentes anzugeben und das im Fragment verwendete Koordinatensystem auf einen gut brauchbaren, unabhängigen Wert zu setzen.
Für den weniger mit SVG vertrauten Leser sei noch darauf hingewiesen, daß SVG anders als XHTML auch ab und an Großbuchstaben in Element- oder Attributnamen verwendet, das hat dann den Vorteil besserer Les- und Merkbarkeit der Namen, die damit gezielt strukturiert werden. Zudem werden diese Leser auf das Wiki-Buch SVG verwiesen. Dort finden sich zudem auch weitere Beispiele für die Einbettung anderer Formate in SVG oder von SVG in XHTML.
Bei folgendem Beispiel wird zudem noch ein Element figure der Klasse 'svg' um das svg gesetzt. Dies erleichtert es im Bedarfsfalle, den eingebetteten Inhalt mit CSS anders zu dimensionieren oder zu positionieren. Da SVG selbst an sich nur inzeilige Element hat, sorgt das Blockelement figure zudem formal für eine saubere Einbettung in das Element body, welches ja besser nur Blockelemente als Kindelemente enthalten sollte.
Ferner wird der Namensraum für XHTML innerhalb von SVG mit dem Präfix 'h' abgekürzt, dann kann man entsprechend gekennzeichnete Elemente einfach so verwenden, ohne jedes Mal den Namensraum erneut komplett angeben zu müssen. Hat man hingegen viel verschachteltes XHTML im SVG, kann es sich auch wieder lohnen, die Präfixe einzusparen, indem der Namensraum jeweils angegeben wird, statt ein Präfix zu verwenden.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="de">
<head>
<title>Pentagon und Pentagramm</title>
</head>
<body>
<figure class="svg">
<svg width="20em" height="20em"
viewBox="0 0 1000 1000"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:h="http://www.w3.org/1999/xhtml"
xml:lang="de">
<title>
<h:h1>Pentagon und Pentagramm</h:h1>
</title>
<desc>
<h:section>
<h:p>
Pentagon und Pentagramm als Beispiele für die
Verwendung des Elementes <h:strong>polygon</h:strong>.
</h:p>
<h:p>
<h:strong>polygon</h:strong> ist ein geschlossener Linienzug und ist einem
Element <h:strong>path</h:strong> vorzuziehen, weil es in dem Sinne inhaltlich
spezifischer ist, also bereits am Elementnamen erkennbar
ist, daß es kein beliebiger Pfad ist, sondern eben ein
geschlossener Linienzug bestehend aus mehreren, aneinandergehängten
geraden Linien entsprechend den Pfadkommandos begonnen mit
M und dann L oder l und am Ende ein Z.
</h:p>
</h:section>
</desc>
<polygon fill="#040"
points="500,-1500 2232.0508,-500 2232.0508,1500
500,2500 -1232.0508,1500 -1232.0508,-500">
<title>
<h:h1>Hexagon</h:h1>
</title>
<desc>
<h:p>
Ein gleichseitiges konvexes Sechseck dient nur als Hintergrund.
Der Winkelabstand zwischen zwei benachbarten Ecken ist also 60 Grad.
</h:p>
</desc>
</polygon>
<polygon fill="#fc0" fill-opacity="0.8"
stroke="#f09" stroke-width="64" stroke-opacity="0.5"
stroke-miterlimit="30" stroke-linejoin="miter"
points="500,50 927.9754,360.9424 764.5034,864.0576
235.4966,864.0576 72.0246,360.9424">
<title><h:h1>Pentagon</h:h1></title>
<desc>
<h:p>Ein gleichseitiges konvexes Fünfeck.
Der Winkelabstand zwischen zwei benachbarten Ecken ist also 72 Grad.
</h:p>
</desc>
</polygon>
<polygon fill="#005" fill-opacity="0.7" fill-rule="evenodd"
stroke="#ccf" stroke-width="32" stroke-opacity="0.7"
stroke-miterlimit="30" stroke-linejoin="miter"
points="500,800 323.6644,257.2949 785.317,592.7051
214.683,592.7051 676.3356,257.2949">
<title><h:h1>Pentagramm</h:h1></title>
<desc>
<h:p>Ein gleichseitiges Fünfeck, dessen Ränder sich selbst überschneiden.
Der Winkelabstand zwischen zwei benachbarten Ecken ist also 144 Grad.
Man beachte auch, daß das Pentagramm ein kleines Pentagon umschließt.
</h:p>
</desc>
</polygon>
</svg>
</figure>
</body>
</html>
Ein Beispiel, wie XHTML in SVG eingebettet werden kann, ist damit auch bereits gegeben. Direkt, nicht nur alternativ oder separat darzustellender Inhalt wird allerdings eher im Element foreignObject notiert (Beispiel aus dem wiki-Buch SVG, Kapitel Erweiterbarkeit):
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 700 500"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
xml:lang="de">
<title>foreignObject und XHTML</title>
<desc>
'Hallo Welt'-Beispiel mit XHTML in SVG.
Interessant ist für die Brauchbarkeit der Darstellung,
ob der XHTML-Inhalt wirklich nutzbar ist, etwa durch Rollbalken,
wenn Inhalt übersteht, was hier getestet wird.
Eine andere in SVG nicht verfügbare Funktionalität ist zum Beispiel
die eines Formulares - nach dem Absenden sollten die Formulardaten
als GET-Parameter verfügbar sein.
</desc>
<rect x="0" y="0" width="700" height="500" fill="#ffc" />
<g font-family="sans-serif" font-size="20">
<switch>
<foreignObject requiredExtensions="http://www.w3.org/1999/xhtml"
x="100" y="100" width="500" height="260">
<html xmlns="http://www.w3.org/1999/xhtml" version="XHTML+RDFa 1.0">
<head>
<title>Beispiel für XHTML in SVG</title>
<style type="text/css">
body {display:block; font-family:sans-serif;
height:250px; width:500px; overflow: auto}
h1 {display:block; font-size:130%}
p,div {display:block}
</style>
</head>
<body>
<h1>Beispiel für XHTML in SVG</h1>
<p>Hallo Welt!</p>
<div>
<form action="" method="get" target="_blank">
<p>Text:<input name="Text" type="text"
size="10" maxlength="40" /></p>
<p>Mehr Text:<textarea name="Mehr_Text"
cols="10" rows="2"></textarea></p>
<p>Auswahl:
<select name="Auswahl" size="1">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
</select>
</p>
<p>Radio:
<input type="radio" name="Radio" value="1"/>1
<input type="radio" name="Radio" value="2"/>2
<input type="radio" name="Radio" value="3"/>3
</p>
<p>Auswahl:
<input type="checkbox" name="checkbox" value="!"/>!
<input type="checkbox" name="checkbox" value="?"/>?
<input type="checkbox" name="checkbox" value="%"/>%
</p>
<p>
<input type="hidden"
name="versteckt" value="guckguck" />
<input type="submit" value="Absenden " />
</p>
</form>
</div>
</body>
</html>
</foreignObject>
<text font-family="sans-serif" font-size="20"
x="120" y="120">Hallo Welt!</text>
</switch>
</g>
</svg>
Bei dem Beispiel ist auch zu sehen, wie es in SVG gehandhabt wird, alternativen Inhalt anzugeben, falls der verwendete Namensraum nicht interpretiert wird. Es wird das Element switch verwendet. Mittels requiredExtensions wird der fragliche Namensraum getestet, in SVG tiny 1.2 besser mittels requiredFormats der Inhaltstyp. Der alternative Inhalt kann beliebig sein, hier nur ein Element text im Anschluß an das getestete foreignObject, alles innerhalb switch. Mit g statt text hätte man auch eine Gruppe mit beliebigem Inhalt als Alternative verwenden können.
Solche fortschrittlichen Mechanismen hätte man sich auch von HTML5 gewünscht, welches aber in der Markierungssuppen-Variante generell noch größere Lücken und Schwächen als HTML4 hinsichtlich der Möglichkeit aufweist, alternative Inhalte anzugeben.
Beispiel XML-Formate zur Textauszeichnung
BearbeitenNun ist XHTML selbstverständlich auch bei der Auszeichnung von Text nicht der Weisheit letzter Schluß. Etwa hat es keine wirklich brauchbaren Elemente, um Gedichte, Poesie, Liedtexte, Dialoge in Theaterstücken, Metainformation etc auszuzeichnen. Daher kann es sinnvoll sein, bei Bedarf auch für die Auszeichnung von Text andere Formate zu verwenden.
Es gibt einige XML-Formate, die zur Textauszeichnung dienen können, etwa DocBook, FictionBook, DAISY/DTBook oder auch LML (von einem der Autoren dieses Buches entwickelt). Es ist davon auszugehen, daß die meisten XHTML-Darstellungsprogramme solche Formate allerdings nicht interpretieren können. Man kann also lediglich erwarten, daß man die Strukturen etwa mit CSS so dekorieren kann, daß eine angemessene Darstellung erfolgt. Weitergehende Funktionalitäten dieser Sprachen sind natürlich nicht verfügbar, wenn das Darstellungsprogramm die Sprachen nicht kennt, daher ist es dann notwendig, sofern vorhanden, die Funktionalitäten mit XHTML-Elementen umzusetzen, während für den eigentlichen Textinhalt die detaillierteren Möglichkeiten eines anderen Formates verwendet werden.
Bei speziellen Textstrukturen kann es natürlich auch ein selbstentwickeltes XML-Format sein, welches man verwendet, um Lücken in HTML5 zu schließen oder zu überbrücken.
Beispiel mit LML:
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
version="XHTML+RDFa 1.0"
xml:lang="de">
<head>
<title>Die Kleinsten</title>
</head>
<body>
<literature version="1.0"
xmlns="http://purl.oclc.org/net/hoffmann/lml/">
<poetry>
<poem>
<meta>
<title>Die Kleinsten</title>
<desc>
<p>Ein Gedicht über Atome von
<creator>Wilhelm Busch</creator>,
<created>1904</created>.</p>
</desc>
<license>
<p>Wilhelm Busch ist 1908 verstorben.
Nach deutschem Urheberrecht ist eine Veröffentlichung
mehr als 70 Jahre nach dem Tod des Urhebers eine
Veröffentlichung ohne weiteres erlaubt.</p>
</license>
</meta>
<header>
<h>Die Kleinsten</h>
<hs>von <name>Wilhelm Busch</name></hs>
</header>
<st>
<sl>Sag Atome, sage Stäubchen.</sl>
<sl>Sind sie auch unendlich klein</sl>
<sl>Haben sie doch ihre Leibchen</sl>
<sl>Und die Neigung da zu sein.</sl>
</st>
<st>
<sl>Haben sie auch keine Köpfchen,</sl>
<sl>Sind sie doch voll Eigensinn.</sl>
<sl>Trotzig spricht das Zwerggeschöpfchen:</sl>
<sl>Ich will sein so wie ich bin.</sl>
</st>
<st>
<sl>Suche nur sie zu bezwingen,</sl>
<sl>Stark und findig wie du bist.</sl>
<sl>Solch ein Ding hat seine Schwingen,</sl>
<sl>Seine Kraft und seine List.</sl>
</st>
<st>
<sl>Kannst du auch aus ihnen schmieden</sl>
<sl>Deine Rüstung als Despot,</sl>
<sl>Schließlich wirst du doch ermüden,</sl>
<sl>Und dann heißt es: Er ist tot.</sl>
</st>
</poem>
</poetry>
</literature>
</body>
</html>