Die Wohnungen, welche in funcity selbst gestaltet werden, erfordern dafür Kenntnisse in der Auszeichnungssprache (X)HTML. Relevant ist dabei heute lediglich die Version 5.
Hier wird konkret die Sprachsyntax von XML verwendet, es gibt auch eine Markierungssuppenvariante, welche allerdings von den Regeln her deutlich umfangreicher ohne gleichzeitigen Mehrwert ist. Zudem ist die Markierungssuppenvariante fehleranfälliger, weil Darstellungsprogramme Autoren nicht auf grobe Syntaxfehler hinweisen.
Größere Teile entsprechen weitgehend gekürzten Teilen des gleichfalls im Wesentlichen von mir verfaßten wikibook zu HTML5.
Um die Idee hinter dem Aufbau einer sauberen Seite zu verstehen, sei kurz das Schichtenmodell erläutert. Eine digitales Dokument, welches eine Information vermitteln soll, denkt man sich dabei aus Schichten aufgebaut.
Die erste ist die Inhaltsschicht, auf dieser wird der Inhalt bereitgestellt, eventuell auch eine Funktionalität, beispielsweise in Form eines Verweises auf ein anderes digitales Dokument. Diese Schicht wird komplett als (X)HTML bereitgestellt. Der Inhalt muß für das Publikum folglich ohne weitere Schichten komplett zugänglich, verfügbar sein. Die weiteren Schichten sind folglich optionale, dekorative Ergänzungen oder Variationen, bieten keinen weiteren Inhalt.
(X)HTML-Dateien sind einfache Textdateien (wie die im Folgenden erwähnten Formate für die beiden anderen Schichten auch), welche mit einem einfachen Texteditor bearbeitet werden können. Es gibt allerdings auch spezielle Editoren mit zahlreichen Hilfen für (X)HTML.
Um die inhaltliche Bedeutung von Inhaltssegmenten sogar maschinenlesbar kenntlich zu machen, gibt es die semantische Textauszeichnung – je nach Art des Inhalts wird die Information also anders gekennzeichnet, beispielsweise als Absatz, als Überschrift, als Artikel, als betonter Text, als Abschnitt etc. Dies kann die Interpretation des Inhaltes für Menschen wie Programmen verbessern. Vom Autor kann damit auch über die Stilvorlage die Präsentation in diesem Sinne einheitlich gestaltet, für das Publikum gut erkennbar strukturiert werden.
Die zweite Schicht ist die der Dekoration. Diese bestimmt, auf welche Weise der Inhalt der ersten Schicht präsentiert wird, in einem Umfeld wie funcity wird dies zumeist visuell sein. Mit dem Format CSS kann der Inhalt mit Stilvorlagen dekoriert werden, dies betrifft beispielsweise die Textfarbe, den Hintergrund, Rahmen, Seitenabstände, Formatierung, Anordnung von Inhalten relativ zum Anzeigebereich, relativ zueinander. Dabei ist es möglich, verschiedene Ansichten zur Auswahl anzubieten. Insbesondere kann es für einige Menschen hilfreich sein, wenn diese zwischen heller Schrift auf dunklem Grund einerseits und andererseits dunkler Schrift auf hellem Grund wählen können.
Mit CSS wird also insbesondere die visuelle Präsentation festgelegt. Autoren können einerseits eigene Stilvorlagen vorschlagen, andererseits hat das Präsentationsprogramm selbst eine eigene verfügbar. Auch die Betrachter eines Dokumentes können eine eigene Stilvorlage haben oder in die gerade verwendete eingreifen, um die Präsentation in ihrem Sinne zu modifizieren, was dann lediglich für sie selbst zutrifft.
Die Stilvorlage kann in einem besonderen Teilbereich des digitalen (X)HTML-Dokumentes notiert sein, aber auch in eigenen Dateien.
Eine dritte mögliche Schicht ist die dynamische Änderung der Präsentation. Formal ähnelt diese damit der zweiten Schicht. Allerdings ist die Stilvorlage eine einfache statische Datei. Bei der dritten Schicht handelt es sich um Skripte (typisch im Format java-script).
In funcity können diese Skripte nicht in eigenen Dateien untergebracht werden, jedoch ähnlich wie eine Stilvorlage in der (X)HTML-Datei in besonderen Bereichen. Diese Skripte wirken über das DOM auf das Dokument ein. Deshalb ist darauf zu achten, daß obige Bedingung erfüllt bleibt, daß der eigentliche Inhalt in der ersten Schicht komplett bereitgestellt wird, nicht durch das Skript unzugänglich gemacht wird. Solche Skripte können auch die Stilvorlage verändern. Für Wohnungen in funcity werden Skripte im Normalfalle nicht benötigt.
Textdateien sind in einer bestimmten Weise kodiert. Dies bedeutet die digitale Repräsentation eines Zeichens wie ‚‽‘. Je nach Kodierung kann solch ein Zeichen unterschiedlich kodiert sein. Daher kann die korrekte Dekodierung im Präsentationsprogramm nur gelingen, wenn die Art der Kodierung bekannt ist, denn bloß bei gut sechzig Zeichen der lateinischen Schrift samt arabisch-indischen Ziffern ist die Kodierung meistens identisch.
Bei neuen Projekten ist an sich heute die Kodierung UTF-8 dringend zu empfehlen. Bei dieser können sehr viele Zeichen aus unterschiedlichsten Sprachfamilien einfach in den Text getippt oder kopiert werden, ohne daß es für den Autor bemerkbare Grenzen der Kodierung gibt. In diesem Sinne ist diese Kodierung für Autoren also besonders einfach.
Funcity stammt indes aus dem letzten Jahrtausend, deshalb wohl verwendet auch der in die Wohnung eingebaute Editor noch ISO 8859-1. Insofern ist es dringend zu empfehlen, mit UTF-8 kodierte Dokumente fertig hochzuladen und für diese auch den Editor nicht zu verwenden, was ohnehin bloß für die Dateiendungen ‚.html‘ oder ‚.htm‘ möglich ist. Bei dem Editor beschränkt man sich ansonsten am besten auf die üblichen lateinischen Zeichen, inklusive der deutschen Umlaute und der ß-Ligatur, benutzt jedoch beispielsweise nicht Zeichen wie € oder ‽ oder … oder ‚‘ oder „“.
Einige Zeichen haben in XML allgemein, wie in (X)HTML-Datei eine besondere Bedeutung, weil sie dazu dienen, die semantischen wie funktionellen Strukturen aufzubauen. Für diese ist folglich eine andere Zeichenkombination zu verwenden, wenn diese tatsächlich im normalen Text verwendet werden sollen. Dies findet mit sogenannten Entitäten statt, deren allgemeine Definition hier nicht weiter vertieft werden soll.
XML definiert selbst folgende Entitäten, die nicht nur unbedenklich benutzt werden können, sondern je nach Position im Quelltext sogar genutzt werden müssen. Vordefiniert ist also, was in Konflikt mit der Notation der Textauszeichnung geraten kann:
Nun gibt es auch zahlreiche andere Zeichen, die man nicht auf der eigenen Tastatur finden wird. Üblicherweise gibt es dafür auf dem eigenen Rechner Zeichentabellen, wo man das Zeichen nachschlagen und kopieren kann. Zusätzlich ist in solchen Tabellen auch die Unicode-Nummer des Zeichens angegeben.
Die Zahl kann entweder im dezimalen System notiert werden oder im hexadezimalen System.
Eine Entität beginnt immer mit einem '&' und endet mit einem Semikolon ';'.
Für Zahlenangaben folgt auf das '&' ein '#'.
Zwischen '#' und ';' wird die zum Zeichen gehörige Zahl notiert.
Bei hexadezimaler Schreibweise wird zwischen dem '#' und der Zahl noch ein 'x' notiert.
Zum Beispiel könnte man das Zeichen '‽' maskiert notieren wollen.
In der Zeichentabelle findet man dazu die dezimale Zahl '8253' oder die hexadezimale Zahl '203D'.
Folglich notiert man für die Entität '‽' oder '‽'.
Entsprechend sind dann bei ISO 8859-1 zahlreiche Zeichen als eine solche numerische Entität zu notieren, wenn diese verwendet werden sollen. HTML definiert noch weitere Varianten, die etwas weniger kryptisch sind, darauf wird hier aber nicht weiter eingegangen, denn es wird empfohlen, einfach UTF-8 zu verwenden und dann nicht den funcity-Editor, solange dieser keine Möglichkeit hat, UTF-8-kodierte Dokumente sauber zu verarbeiten.
Um eine spezielle Sprache aus der XML-Familie zu nutzen, ist es nicht notwendig, sich im Detail mit XML zu beschäftigen. Will man allerdings Fragmente aus verschiedenen Sprachen kombinieren, werden einige Konstruktionen wichtiger, die bei einer einzelnen Sprache erst einmal nicht so spannend wirken, wie etwa die Angabe eines Namensraumes. In den einzelnen Sprachen tauchen allerdings immer wieder dieselben oder ähnliche Strukturen auf. Wenn man sie in einer Sprache verstanden hat, kann man sein Wissen über die allgemein gültigen Strukturen auch in einer anderen der Familie nutzen. Solche Strukturen wie etwa die Identifikation eines Dokumentfragmentes oder die Struktur von Elementen sind daher in XML definiert und werden in den speziellen Sprachen nur weiterverwendet.
Im Folgenden werden bloß Strukturen eines Dokumentes erläutert, welche hier in funcity praktisch relevant sind. Dies Beispiel kann bereits als Vorlage für eigene Dokumente in der Wohnung genutzt werden. Ein nahezu leeres Dokument sieht zum Beispiel wie folgt aus:
<?xml version="1.0" encoding="UTF-8" ?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>Titel der Seite</title> <link href="dunkelaufhell.css" type="text/css" title="Stil: Dunkel auf Hell" rel="Stylesheet" /> <link href="hellaufdunkel.css" type="text/css" title="Stil: Hell auf Dunkel" rel="Alternate Stylesheet" /> </head> <body> <h1 class="top">Dokumenttitel</h1> <p> Ein (sinnvoller) Gedanke könnte hier notiert werden. </p> </body> </html>
Das Dokument beginnt in der ersten Zeile mit einer XML-Verarbeitungsanweisung,
welche angibt, daß die Version 1.0 von XML verwendet wird,
ferner die Kodierung UTF-8.
Der Zweck der Zeile besteht vorrangig darin, anzugeben, daß das Dokument die
Struktur eines XML-Dokumentes aufweist und entsprechend verarbeitet
werden soll.
Die Kodierungsangabe weist darauf hin, womit der Text im Dokument kodiert wurde.
Damit der ausliefernde Dienstrechner von funcity nicht etwa noch eine falsche Kodierung oder einen falschen Dokumenttyp an das Präsentationsprogramm meldet, ist für derartige XHTML-Dokumente die Dateiendung .xhtml zu verwenden!
Darauf folgt das sogenannte Wurzelelement oder Hauptelement des Dokumentes, welches bereits
spezifisch für das verwendete Format ist.
Das Element heißt hier html.
Die Zeichenkette 'html' wird dann der Elementname genannt.
Der Name des Wurzelelementes ist in der jeweiligen Sprache festgelegt,
hier also in XHTML.
Solch ein Wurzelelement enthält bei XML immer alle anderen Elemente des
Dokumentes als Inhalt.
Das Element beginnt mit einer Anfangsmarkierung <html>
und endet mit
einer Endmarkierung </html>
.
Markierungen beginnen immer mit einem Kleinerzeichen '<' und enden mit einem Größerzeichen '>'.
Bei der Anfangsmarkierung folgt auf das '<' der Elementname.
Bei der Endmarkierung folgt auf das '<' ein Schrägstrich '/' vor dem Elementnamen, gefolgt von dem '>'.
In der Anfangsmarkierung können Attribute auftreten, jeweils mit Leerzeichen vom Elementnamen
und anderen Attributen getrennt.
In der Endmarkierung können keine Attribute auftreten.
In dem Beispiel hat html die Attribute xmlns und xml:lang.
Auf den Attributnamen folgt ein Gleichheitszeichen '=', dann folgt in Anführungszeichen der
Wert des Attributes.
Es werden entweder einfache Anführungszeichen oder doppelte Anführungszeichen verwendet.
Meistens sind die Attribute in der jeweiligen Sprache definiert.
Diese beiden Attribute haben jedoch eine spezielle Bedeutung, die bereits in XML
für alle Formate der Sprachfamilie vordefiniert ist.
Mit xmlns wird der Namensraum der verwendeten Sprache als Wert angegeben.
Der hier angegebene ist dann natürlich der für XHTML.
Dieser Wert ist in der Spezifikation von XHTML festgelegt.
Entsprechend legen die Spezifikationen der anderen Sprachen ihren eigenen Namensraum fest.
Mit einer Angabe des Namensraumes in einem Dokument wird eindeutig festgelegt, zu welcher Sprache ein Element gehört, für welches der Namensraum notiert ist. Von daher ist der Wert für den Namensraum charakteristisch für die jeweils verwendete Sprache. Anhand des Namensraumes kann ein Programm die Funktion und Bedeutung eines Elementes feststellen und es entsprechend interpretieren. Programme so wie Quelltext-lesende Menschen erkennen also an der Namensraumangabe, um welches Format es sich handelt und somit, wie die Funktionalität oder Präsentation umzusetzen ist.
xml:lang ist ein Attribut, welches angibt, in welcher Sprache der Inhalt des Elementes verfaßt ist.
Für deutsch ist der Wert des Attributes zum Beispiel 'de',
für englisch 'en' für französisch 'fr' etc.
Zwischen der Anfangs- und Endmarkierung eines Elementes steht nun der Inhalt des Elementes. Das verwendete Format legt dann individuell fest, welcher Inhalt erlaubt ist. XHTML schreibt vor, daß als erstes exakt ein Element head in html zu notieren ist, darauf muß dann gemäß XHTML exakt ein Element body folgen.
Entsprechend ist festgelegt, daß head mindestens ein Element title als Inhalt haben muß. Der Inhalt von title wiederum ist einfacher Text. In diesem Falle repräsentiert der Inhalt von title das Dokument als Überschrift. head kann auch weitere Elemente als Inhalt haben.
Notiert sind auch zwei Elemente link, um zwei Stilvorlagendateien zu referenzieren. So, wie es notiert ist, ist die zweite von Nutzern alternativ zur ersten auswählbar. Leider ist die Interpretation in einigen Programmen lückenhaft, diese bieten keine Auswahl an. Andere behalten die Auswahl nicht bei, wenn zum nächsten Dokument mit gleichen Alternativen gewechselt wird.
Mit dem Attribut href wird analog zum Element a ein Verweis auf die betreffende Datei gesetzt.
Mit type wird angegeben, welche Stilvorlagensprache verwendet wird, die angegebene ist in funcity verwendbar.
Mittels title wird der Name des Stils angegeben, den Nutzer damit in einem eigenen Menü des Präsentationsprogrammes auswählen können.
Mit rel wird in diesem Falle angegeben, daß es sich um die Stilvorlage handelt, beziehungsweise die alternative Stilvorlage.
Mit einem Element style innerhalb von head kann eine Stilvorlage direkt im Dokument notiert werden. title, type sind analog zu link zu verwenden.
body wiederum kann bestimmte Elemente als Inhalt haben, was ebenfalls festgelegt ist.
In diesem Beispiel ist aus einer größeren Anzahl von Möglichkeiten eine Überschrift der obersten Stufe
als erstes Element gewählt worden. Solch ein Element wird zumeist verwendet,
um den Dokumenttitel innerhalb der Präsentation des Dokumentes darzustellen, während der
Inhalt von title nicht direkt zusammen mit dem sonstigen Inhalt dargestellt wird
und auch bevorzugt dazu verwendet wird, um das Dokument mit einem Titel zu bezeichnen,
wenn darüber geschrieben oder gesprochen wird.
Als weiterer Inhalt ist ein Absatz notiert, dazu dient in XHTML das
Element p.
Darin ist dann ein abgeschlossener Gedankengang zu notieren.
Dieser besteht zumeist aus Sätzen, für welche es keine spezifischen Elemente gibt.
Solch ein Text in einem Element wird auch Textknoten genannt. Je nach Element können im Element auch weitere Elemente stehen.
Ansonsten kann etwas vereinfacht von Blockelementen und Phrasenelementen ausgegangen werden.
Phrasenelemente stehen im fließenden Text, beginnen also sehr vereinfacht gesagt keine neue Zeile.
Blöcke beginnen eine neue Zeile, sind zumeist in einer Stilvorlage auch besonders als besondere Inhaltsstruktur von anderen Strukturen separiert.
Fließender Inhalt ist Text, Blockelemente sowie Phrasenelemente.
Zur besseren Verständlichkeit des eigenen Quelltextes ist es sinnvoll, diesen regelmäßig mit Kommentaren zu versehen. Sollte eines Tages ein anderer Entwickler an dem Quelltext arbeiten, können Kommentare sehr hilfreich sein, ebenso wenn die eigene Bearbeitungszeit länger zurückliegt. Bei stark verschachtelten gleichen Elementen kann es zudem sehr helfen, die Endmarkierungen speziell mit Kommentaren zu kennzeichnen, um sie sofort zuordnen zu können.
Eine weitere Anwendung insbesondere während der Entwicklung eines Dokumentes kann darin liegen, (vorübergehend) Teile des Quelltextes auszukommentieren, damit sie nicht interpretiert werden.
Kommentare werden in XML sowie (X)HTML mit einem Kleiner-als-Zeichen, einem Ausrufezeichen sowie zwei Bindestrichen eröffnet. Anschließend folgt der Inhalt des Kommentars. Geschlossen wird der Kommentar mit zwei Bindestrichen und einem Größer-als-Zeichen. Dabei kann sich ein Kommentar auf eine oder mehrere Zeilen erstrecken. Zwei aufeinanderfolgende Bindestriche sind innerhalb eines Kommentars unzulässig, folglich kann innerhalb eines Kommentares kein weiterer Kommentar notiert werden.
Beispiel:
<!-- Hier steht ein Kommentar mit einer Zeile --> <!-- 1. Zeile des Kommentars 2. Zeile des Kommentars … sonst fehlerhafter Kram darf hier ebenfalls stehen, weil er nicht interpretiert wird: </ p> & > <> <- - - -> -->
Kommentare dürfen an fast jeder beliebigen Stelle eines Dokuments stehen. An folgenden Stellen dürfen Kommentare stehen:
An folgenden Stellen dürfen Kommentare nicht stehen:
Globale Attribute können bei allen Elementen eines Formates verwendet werden.
Das Attribut id dient dazu, ein Element eindeutig zu identifizieren. Dies wird auch als Fragmentidentifizierer beziehungsweise Fragmentidentifizierung bezeichnet.
Der Wert eines Attributes id darf in einem Dokument nur maximal ein einziges Mal vorkommen.
Wie der Wert aussehen darf, ist in XML genau festgelegt. Der Wert entspricht dort der Namensproduktion.
Eine etwas vereinfachte Auswahl, mit welcher ein Autor auf der sicheren Seite ist: Der Wert beginnt immer mit einem Buchstaben a-z oder A-Z, keine Sonderzeichen wie Umlaute oder Ligaturen. Alternativ kann der Wert auch mit ':' oder '_' beginnen. Optional können dann noch weitere dieser Buchstaben oder Zeichen folgen, zusätzlich auch noch Ziffern 0-9, '-' und '.'.
In HTML kann ein Element ebenfalls selbst definierten Klassen zugeordnet werden. Dazu dient das Attribut class. Es kann also pro Klasse mehr als ein Element im Dokument geben, anders als id eignet sich class damit nicht zur Identifizierung genau eines Fragmentes.
Der Wert des Attributes ist eine mit Leerzeichen separierte Liste von Klassennamen.
Ein Klassenname in dem Sinne ist eine Zeichenkombination aus Buchstaben, Zahlen und den Zeichen '.', '-', '_', ':'
Vielfach wird das Attribut dazu verwendet, um eine Klasse von Elementen über einen Stilvorlagen-Selektor mit Eigenschaften zu versehen. Der Wert des Attributes hat allerdings auch eine semantische Bedeutung, denn der Name der Klasse sollte charakteristisch zur Funktion der Elemente einer Klasse gewählt werden.
Zum Beispiel bedeutet class="Hilfe Menue", daß das Element zu den Klassen 'Hilfe' und 'Menue' gehört.
Eine Bezeichnung wie class="klein blau" ist hingegen vermutlich keine semantisch gute Bezeichnung, weil es nichts über die Funktion des Elementes verrät, sondern bestenfalls über die beabsichtigte Präsentation (die bei einer alternativen Stilvorlage anders sein kann).
Semantische Relevanz hilft einerseits den Betreuern des Projektes, sich bei Änderungen zurechtzufinden, kann andererseits auch von speziellen Programmen verwendet werden, um dem Publikum eine Verständnishilfe zu liefern.
Mit dem Attribut title kann einem Element ein Titel oder Kommentar zugeordnet werden, welcher nicht im normalen Textfluß, sondern nur bei Bedarf für den Leser sichtbar gemacht wird.
Der Wert ist normaler Text.
Es ist nicht festgelegt, wie Darstellungsprogramme im Bedarfsfalle den Wert von title zur Darstellung bringen.
Bei interaktiven, graphischen Programmen hat es sich jedoch etabliert, daß der Inhalt beim Drüberfahren mit einem Zeigergerät wie einer Maus etwas versetzt zum Zeigergerät in einem kleinen Kästchen getrennt vom sonstigen Inhalt dargestellt wird. Als Nutzerhilfe (englisch: tooltip) wird das Attribut häufig verwendet, um einem Leser Zusatzinformation zur Funktion des Elementes anzugeben.
Mit dem Attribut können Formatierungs- oder Dekorationsanweisungen für ein Element notiert werden. Der Wert ist zunächst einfacher Text. Die verwendete Stilvorlagensprache legt genauer fest, wie der Wert aussehen darf.
Inhalt sollte von Dekoration und Layout strikt getrennt werden, daher sollte dieses Attribut im Allgemeinen vermieden werden. Es ist mehr für die Ausnahmesituation vorgesehen, wo aus bestimmten Gründen Angaben zur Dekoration nicht in einer externen Datei oder im Element style notiert werden können. In der Praxis treten solche Gründe allerdings fast nie auf. Um etwas schnell auszuprobieren, kann das Attribut allerdings sinnvoll sein. Vor einer Veröffentlichung wird das Attribut dann wieder entfernt und die Stilvorlagen-Angabe in die normale Stilvorlage übertragen (dort ist dann die Spezifität der Angabe korrekt vorzunehmen).
Mit dem Attribut wird die im Element verwendete Sprache angegeben. Das Attribut xml:lang ist für XML-Formate allgemein definiert, ist also nicht für XHTML spezifisch. In der Markierungssuppenvariante hat xml:lang keine Bedeutung, lang schon, im Zweifelsfalle sind also beide Attribute mit demselben Wert zu notieren.
Der Wert ist ein Sprachkürzel gemäß BCP47, also im einfachsten Fall 'de' für deutsch, 'en' für englisch, 'fr' für französisch, 'it' für italienisch, 'es' für spanisch und so weiter, insbesondere noch 'x' für selbst festgelegte, experimentelle Varianten. Typen 'x' sind allerdings in ihrer Bedeutung nur lokal gekennzeichnet. Sofern dies wichtig ist, müßte zusätzlich als Metainformation auf ein Regelwerk der Sprachvariante verwiesen werden.
Sprachvariationen werden optional festgelegt, indem deren Kürzel hinter einem Bindestrich angefügt wird, also etwa de-AT für die Variante aus Österreich, de-CH für die aus der Schweiz, en-US für englisch im amerikanischen Dialekt etc. Ferner gibt es weitere Untertypen: de-DE-1996 für deutsch nach den Rechtschreibregeln von 1996 oder de-DE-1901 für die von 1901. Für die diversen Modifikationen nach 1996 gibt es aber wohl keine eigene Notation, de-DE-1996 ist folglich nicht eindeutig. Zwischen 1901 und 1996 haben sich in der Praxis natürlich auch diverse Änderungen oder Ergänzungen ergeben, die jeweilige Kennzeichnung kann folglich nur als Richtschnur angesehen werden. Bei Texten von vor 1901 kann es ferner stärkere individuelle Ausprägungen, lokale Varianten geben, welche im Bedarfsfalle ebenfalls über die Erweiterung mit 'x' gekennzeichnet werden können.
Auch hier kann das 'x' also wieder dafür herhalten, eine eigene Sprachvariante anzugeben, zum Beispiel 'en-x-Hixie' oder als weitere Untervariante auch 'en-US-x-Hixie' (ist tatsächlich beim Arbeitsentwurf vom 2011-05-25 für HTML5 zu finden ;o).
Betrachtet man also speziell die Sprachvarianten für deutsch, so ist mit der Angabe 'de' nicht festgelegt, um welche Variante es sich handelt. Erst durch Ergänzung eines Subtyps wird etwas feiner festgelegt, um welche Variante es geht. Da etwa die Schweizer etwas andere Rechtschreibregeln haben, ist es für diese sinnvoll, 'de-CH' anzugeben, was auch nützlich sein kann, wenn verschiedene Autoren einen Text bearbeiten. So bleibt immer klar, welche Variante verwendet wird.
Bedingt durch die Rechtschreibreform der deutschen Sprache lassen sich entsprechende Diskussionen auch weitgehend vermeiden, indem entweder der Typ mit Subtyp 'de-DE-1901' oder 'de-DE-1996' angegeben wird, wobei letztere Angabe durch Korrekturen der Reform in mehreren Jahren nach 1996 nicht ganz eindeutig ist. Auch für die Regeln von 1901 gab es 1905 noch eine kleine Reform, welche eigentlich die zumeist verwendeten Regeln enthält. Da müßte es eigentlich ein paar weitere Subtypen geben. Diese oder persönliche Varianten wären folglich mit der Option 'x' zu ergänzen.
Jedenfalls deckt wiederum die Angabe von 'de' alle diese Varianten ab, sogar einschließlich individueller Varianten wie 'de-x-Dieter', im Grunde ist es bei der Angabe 'de' also sinnlos, Rechtschreibfehler zu diskutieren.
Eine korrekte Angabe für das gesamte Dokument ist zu empfehlen. Fehlt diese, wird die verwendete Sprache als unbekannt angenommen. Werden im Dokument für Passagen oder einzelne Wörter andere Sprachen verwendet, so sollte dies ebenfalls angegeben werden, indem das Attribut im umschließenden Element mit dem zutreffenden Sprachkürzel notiert wird. Zum Beispiel erleichtert dies Programmen, die Dokumente vorlesen, die Wörter besser verständlich auszusprechen.
Probleme ergeben sich, wenn im Elementinhalt eine andere Sprache verwendet wird als in einem Attributwert. Gegebenenfalls ist hier auf zwei geschachtelte Elemente auszuweichen:
<span title="Der Würfel ist geworfen."><span xml:lang="la">alea iacta est.</span></span>
Blockelemente dienen zur Gruppierung von Inhalten.
Bei längeren Texten über ein paar Absätze hinaus kann es auch sinnvoll sein, Strukturen wie Abschnitte oder Kapitel zur weiteren Strukturierung zu verwenden. Dazu gibt es spezielle Elemente, ebenso wie eine Kaskade von Überschriften.
Werden in einem Dokument mehrere Unterkaptitel oder auch mehrere Kapitel untergebracht, so empfiehlt sich eine weitere, übergeordnete Struktur von Blockelementen, für welche HTML5 ein paar neue Elemente bietet.
Relevant für Kapitelstrukturen ist vor allem das neue Blockelement section. Hier bietet es sich dann an, das jeweilige Kapitel, beziehungsweise Unterkapitel mit einem solchen Element zu umschließen. Gemäß den Präsentationsvorschlägen für HTML5 ergibt sich aus der Verwendung solch neuer Elemente leider zumeist keine weitere sichtbare Strukturierung, im Bedarfsfalle müssen Autoren hier also mit eigenen Angaben in der Stilvorlage, etwa mit Außen- oder Innenabständen oder Rahmen, nachhelfen.
Wird zum Beispiel das Konzept verfolgt, in einem Inhaltsdokument den gesamten Inhalt eines Buches oder längeren Artikels unterzubringen, so bietet es sich folglich an, die Kapitelstruktur mit dem Element section umzusetzen.
Die Überschrift des Werkes wäre dann etwa im h1 zu notieren, weitere Kindelemente von body sind dann nur noch Elemente section.
Ein solches beginnt dann mit der Kapitelüberschrift in einem h2 gefolgt von Absätzen oder für
Unterkapitel weiteren Elementen section mit Überschriften vom Typ h3 etc bis h6. Bei Bedarf kann natürlich noch weiter unterteilt werden, Überschriften gibt es
zumindest bis h6, was in den meisten Fällen reichen dürfte.
Sinngemäß sieht dann ein Dokument mit Kapiteln und Unterkapiteln wie folgt aus:
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ops="http://www.idpf.org/2007/ops" xml:lang="de"> <head> <title>Dokumenttitel</title> </head> <body> <h1>Dokumenttitel</h1> <section> <h2>Titel des ersten Kapitels</h2> <p> Ein Absatz wird pro abgeschlossenem Gedankengang verwendet. Ein Absatz umfaßt oft mehrere Sätze. </p> <p> Dies repräsentiert einen weiteren Absatz. </p> <section> <h2>Titel des ersten Unterkapitels</h2> <p> … </p> </section> <section> <h2>Titel des zweiten Unterkapitels</h2> <p> … </p> </section> <p> … </p> </section> <section> <h2>Titel des zweiten Kapitels</h2> <p> … </p> </section> <section> <h2>Titel des dritten Kapitels</h2> <p> … </p> </section> </body> </html>
Die jeweiligen Unterstrukturen sind also entsprechend verschachtelt.
Eine neue Elementkombination von HTML5 füllt eine Lücke in vorherigen Versionen, wo es nicht möglich war, Abbildungen insbesondere mit eigener Abbildungsbeschriftung als eigenständige Blockelemente zu notieren. Nicht nur für Abbildungen, sondern auch für andere, selbständige Strukturen führt HTML5 das Blockelement figure neu ein. Hinsichtlich des Inhaltes kann hier gewählt werden, ob man erst die Abbildungsbeschriftung notieren will und dann den Gegenstand der Beschriftung oder umgedreht. Die Beschriftung ist optional und ist im Bedarfsfalle im Element figcaption zu notieren. Entweder davor oder danach steht der so beschriftete Inhalt. Bei der Struktur sollte man auch hier wieder konsequent bleiben, also entweder man faßt alles als Blockelemente auf oder als Text oder Phrasenelemente.
Einfaches Beispiel mit Beschriftung vor einem Bild (die Textalternative zum Bild kann hier leer bleiben, weil bereits die Bildbeschriftung als Alternative dient):
<figure> <figcaption>Rainer Wahn hängt am Bahnhofs-Ernst-August im eigenen Gestrickten ab.</figcaption> <img alt="" src="raineramernstaugust.jpg" width="800" height="600" /> </figure>
Einfaches Beispiel mit Beschriftung nach dem Bild:
<figure> <object data="hannoverstrick01.svg" width="800" height="800" /> <figcaption> Übersichtskarte Hannover Innenstadt unter besonderer Berücksichtigung der zentralen Szenetreffs der hannöverschen Strickgraffiti-Subkultur. </figcaption> </figure>
img und object werden später noch genauer erläutert. Statt img und object können wie erwähnt auch andere Elemente beschriftet werden, etwa:
<figure> <h1>Freundesliste</h1> <ul> <li>Maria</li> <li>Petra</li> <li>Florian</li> <li>Mareike</li> <li>Jens</li> <li>Ebru</li> <li>Ayse</li> <li>Vasili</li> <li>Vroni</li> </ul> <h1>Liste von Gegnern</h1> <ul> <li>Bernd</li> <li>Yusuff</li> <li>Ibrahim</li> <li>Werner</li> <li>Paula</li> <li>Yvonne</li> <li>Marcello</li> <li>Sasha</li> <li>Cameron</li> </ul> <h1>Neutrale Liste</h1> <ul> <li>Florentine</li> <li>Bertine</li> <li>Bruno</li> <li>Anna</li> <li>Mohamed</li> </ul> <p><img alt="Soziogramm von Hannahs Schulklasse" src="soziogramm_hannah.svg" /></p> <figcaption>Hannahs soziales Umfeld in ihrer Schulklasse</figcaption> </figure>
Listen werden im nächsten Abschnitt genauer erläutert.
Für die Listen werden bevorzugt die Elemente ul oder ol verwendet, ersteres, wenn die Reihenfolge keine starke Rolle spielt, zweites, wenn die Reihenfolge hervorgehoben werden soll. Ohne besondere Angaben per Stilvorlage werden die Strukturen bei ol automatisch der Reihenfolge nach durchnumeriert.
(X)HTML stellt also nur sehr grundlegende Strukturen für Listen bereit und geht nicht näher auf die inhaltliche Bedeutung von Listen ein, die stark unterschiedlich sein können, was konventionell über die Darstellung oder durch Überschriften geregelt wird. Eine weitere Differenzierung, um was für eine Art von Liste es sich inhaltlich handelt, kann der Autor also mit (X)HTML allein nicht vornehmen. Bei Verwendung der Erweiterung RDFa kann er aber natürlich Metainformation darüber liefern, welche inhaltliche Funktion die jeweilige Liste speziell hat, indem auf eine entsprechende Definition verwiesen wird.
Sie können notiert werden, wo fließender Inhalt notiert werden kann. Inhaltlich sinnvoll sind sie dort zu verwenden, wo auch die Geschwisterelemente Blockelemente sind.
Der mögliche Inhalt ist jeweils speziell, wird bei jedem der Elemente einzeln erläutert.
Für jeden Listenpunkt wir jeweils das Element li als Kindelement von ul oder ol verwendet. Der Inhalt von li können beispielsweise weitere Unterlisten sein, aber auch zahlreiche andere Elemente.
Eine ungeordnete Liste wird mit dem Element ul angelegt. Ungeordnet bedeutet in diesem Zusammenhang, daß die gewählte Reihenfolge inhaltlich nicht relevant ist.
Dieses Element darf nur die Elemente li enthalten.
ul sollte mindestens ein Element li enthalten.
In den älteren Sprachversionen hat ul auch noch Attribute, die als veraltet gelten und daher hier nicht weiter diskutiert werden. Diese dienten dazu, die Art der Darstellung zu steuern, wozu heute stattdessen CSS verwendet werden kann.
Beispiel:
<ul> <li>1l Milch</li> <li>300g Butter</li> <li>2 Eßlöffel Zucker</li> </ul>
Dies wird zum Beispiel wie folgt dargestellt:
Soll ein Punkt weiter untergliedert werden, so wird verschachtelt. Das heißt, es muß in dem Listenpunkt li, der untergliedert wird, wieder das Element ul mit li darin verwendet werden. Im folgenden Beispiel wird die Milch weiter untergliedert. Weil ul ein Blockelement ist, wird im Sinne einer guten Struktur auch die Milch als Oberbegriff in ein Blockelement gesteckt. Allerdings soll die Milch nicht gegenüber den weiteren Listenpunkten gleicher Stufe hervorgehoben werden, weswegen das generische Blockelement div verwendet wird.
<ul> <li> <div>1l Milch</div> <ul> <li>0.5l Kuhmilch</li> <li>0.5l Ziegenmilch</li> </ul> </li> <li>300g Butter</li> <li>2 Eßlöffel Zucker</li> </ul>
Dies wird zum Beispiel wie folgt dargestellt:
Geordnete Listen sind numerierte Listen und werden mit dem Element ol ausgezeichnet. Anders als bei ul ist bei ol also relevant, in welcher Reihenfolge die Kindelemente li notiert sind.
Dieses Element darf nur die Elemente li enthalten, (wobei li für englisch 'list item' steht). Innerhalb vom li kann fließender Inhalt stehen. Im Sinne einer guten Struktur sollten aber entweder nur Blockelemente oder Phraseninhalt verwendet werden.
ul sollte mindestens ein Element li enthalten.
Mit dem Attribut reversed kann bewirkt werden, daß die Aufzählung absteigend erfolgt, also von groß zuerst nach klein zuletzt, fehlt das Attribut, erfolgt sie aufsteigend, also von klein zuerst bis groß zuletzt. Der Wert von reversed ist immer leer oder 'reversed'.
Mit dem Attribut type kann notiert werden, welcher Aufzählungstyp gewählt werden soll. Mögliche Werte von type und womit die Aufzählung erfolgt:
Sofern römische Zahlen gewählt werden, kann es bei Werten kleiner als 1 natürlich Probleme geben, bei den Buchstaben natürlich, wenn es mehr Listenpunkte gibt als es Buchstaben gibt.
Mit dem Attribut start kann ein Startwert notiert werden, mit welchem die Zählung begonnen wird. Der Wert ist eine ganze Zahl. Fehlt das Attribut, ist es leer oder sonstwie der Wert ungültig, wird 1 als Wert angenommen.
In den älteren Sprachversionen hat ol auch noch weitere Attribute, die als veraltet gelten und daher hier nicht weiter diskutiert werden. Diese dienten dazu, die Art der Darstellung zu steuern, wozu heute stattdessen CSS verwendet werden kann.
Beispiel:
<ol> <li>Milch in einer Schüssel schlagen</li> <li>Butter mit der Milch zusammenmischen</li> <li>Zucker hinzugeben</li> </ol>
Diese fiktive Kochanleitung wird zum Beispiel wie folgt dargestellt:
Beispiel mit Buchstaben als Aufzählungsmerkmale, begonnen wird bei 3 (warum auch immer):
<ol type="A" start="3"> <li><div>Milch in einer Schüssel schlagen</div> <ol type="a"> <li>Die Milch für 5 Minuten in den Kühlschrank stellen</li> <li>Anschließend aus dem Kühlschrank herausnehmen</li> </ol> </li> <li>Butter mit der Milch zusammenmischen</li> <li>Zucker hinzugeben</li> </ol>
Achtung: Insbesondere beim Rückwärtszählen ist hier der Startwert demgemäß passend festzulegen, der sonst ebenfalls bei 1 oder hier I oder i beginnt. Der zweite Listenpunkt bekommt dann also die Nummer 0, der dritte -1.
Das Elementli kennzeichnet einen Listenpunkt in geordneten oder ungeordneten Listen. Es kann innerhalb von ul und ol notiert werden.
Innerhalb vom li kann fließender Inhalt stehen. Im Sinne einer guten Struktur sollten aber entweder nur Blockelemente oder Phraseninhalt verwendet werden.
Sofern li innerhalb von ol steht, kann es das Attribut value haben. Der Wert von value ist eine ganze Zahl und repräsentiert, welchen Aufzählungswert der Listenpunkt hat.
Beispiel:
<figure> <figcaption>Meine Eissorten-Rangliste</figcaption> <p>Ich mag besonders die Fruchtsorten:</p> <ol> <li>Himbeer</li> <li>Kirsche</li> <li>Maracuja</li> <li>Zitrone</li> <li>Orange</li> </ol> <p>Ich mag ferner auch folgende Eissorten:</p> <ol> <li value="6">Schokolade</li> <li>Walnuß</li> <li>Karamell</li> <li>Kaffee</li> <li>Erdnuß</li> </ol> </figure>
Das bewirkt hier folglich, daß die Zählung der ersten Liste in der zweiten fortgeführt wird.
Ich mag besonders die Fruchtsorten:
Ich mag ferner auch folgende Eissorten:
Ein weiterer Listentyp ist die Definitionsliste, insbesondere zum Definieren von Begriffen oder für Erklärungen verwendbar. Das Element dazu ist dl. Kindelemente sind der zu definierende Terminus mit dem Element dt und die Definition dazu im Element dd.
Das Element dl hat für seinen Inhalt zwei mögliche Modelle:
Im ersten Fall kann das Element nur die beiden Elemente dt und dd enthalten. Mit dem dt-Element zeichnet man den Begriff aus, den man mit dem dd-Element beschreiben möchte. In HTML5 soll immer mindestens ein dt notiert sein, bevor dd notiert sind, in älteren Versionen war auch eine andere Anordnung möglich. Der Inhalt von dt und dd ist fließender Inhalt, im Sinne einer guten Struktur entscheidet man sich allerdings, ob man nur Blockelemente verwendet oder nur Phraseninhalt. In älteren, strikten Versionen ist für dt nur Phraseninhalt erlaubt. Auch in HTML5 soll dt allerdings keine Gruppierungselemente enthalten, Überschriften.
Bei diesem Inhaltsmodell muß dl mindestens ein Element dt und dd enthalten. Zudem wird im Regelfalle genau ein dt vor dem zugehörigen dd notiert. Es können auch jeweils mehrere dt oder dd aufeinander folgen, wenn mehrere Begriffe mit der gleichen Definition versehen werden sollen oder es umgekehrt mehrere alternative Erklärungen für einen Begriff gibt.
Ob die Reihenfolge der Listenpunkte eine Rolle spielt, einmal abgesehen davon, daß zumeist auf dt dd folgt und dann die nächste Gruppe dt und dd, ist nicht weiter festgelegt und kann von Einzelfall zu Einzelfall verschieden sein.
Eine kleine Veränderung gibt es auch bei Definitionslisten dl bei HTML5 gegenüber früheren Versionen. Die Bedeutung ist nunmehr genauer festgelegt, was die Verwendung etwas einschränkt, aber auch genauer festlegt, wie Terme und definierender Inhalt zusammengehören. Etwa ist es nun nicht mehr möglich, den definierenden Inhalt vor dem Term zu notieren. Stärkere Einschränkungen in den Entwürfen der ersten Jahre wurden in späteren Entwürfen allerdings wieder zurückgenommen.
Beispiel:
<dl> <dt>ablöschen</dt> <dd>Hier wird …</dd> <dt>dünsten</dt> <dd>Hierbei wird …</dd> </dl>
Noch ein Beispiel:
<dl> <div> <dt>dünsten</dt> <dd>Hierbei wird …</dd> <dt>braten</dt> <dd>Hierbei wird …</dd> <dt>grillen</dt> <dd>Hierbei wird …</dd> <dt>blanchieren</dt> <dd>Hierbei wird …</dd> <dt>flambieren</dt> <dd>Hierbei wird …</dd> </div> <div> <dt>ablöschen</dt> <dd>Hier wird …</dd> <dt>abkühlen</dt> <dd>Hier wird …</dd> <dt>verdunsten</dt> <dd>Hier wird …</dd> <dt>einfrieren</dt> <dd>Hier wird …</dd> <dt>schockfrosten</dt> <dd>Hier wird …</dd> </div> </dl>
Bei Sammlungen, Anthologien und ähnlichen Zusammenstellungen von eigenständigen Artikeln oder Werken zu einem Gesamtwerk wird man in der Regel pro Werk mindestens ein Inhaltsdokument spendieren. Bei eher kurzen Artikeln kann es hingegen auch sinnvoll sein, mehrere davon in einem Inhaltsdokument zusammenzufassen. Dazu bietet sich das in HTML5 neu eingeführte Element article an. Jedes eigenständige Werk wird dann von solch einem Element umschlossen, sofern eben mehrere in einem Dokument auftreten.
Handelt es sich hingegen bei den einzelnen Werken eher um Zitate, die im Gesamtwerk benötigt und diskutiert werden, so ist das bereits in früheren Versionen definierte Element blockquote der passende Kandidat, mit welchem solch ein Zitat umschlossen und als solches kenntlich gemacht wird.
Mit dem Attribut cite kann
dann etwa ein Phrasenelement cite referenziert werden, in welchem die Quellenangabe zum Zitat angegeben ist.
cite wird genauer im Abschnitt über Phrasenelemente erläutert.
Anders als in früheren Versionen sieht HTML5 nicht nur Blockelemente als Inhalt vor.
Auch Text und Phrasenelemente können (stattdessen) als sinnvoller Inhalt notiert werden.
Insbesondere bei eigenständigen Artikeln sollte natürlich eine eindeutige Zuordnung zu den verantwortlichen Autoren auch nicht fehlen. Dies kann im article mit dem bereits aus früheren Versionen gut bekannten address erfolgen. Hier gilt die Autorenangabe dann eben nur für den Artikel. Außerhalb von article notiert, gilt sie wie gehabt für das ganze Dokument.
Insbesondere bei address, aber auch bei normalen Absätzen, die eine Adressangabe enthalten, sind manuelle Zeilenumbrüche wichtig. Dazu dient das inhaltsleere Element br wie bereits in früheren Versionen definiert. Ansonsten gibt es eher wenige Anwendungen für br, allenfalls noch als kurze Gedankenpause innerhalb eines Absatzes.
Abschnitte eines Dokumentes, die nicht direkt im normalen Fluß des Inhaltes stehen, sondern Hilfen oder Zusatzinformationen dazu anbieten, etwa auch Übungsaufgaben oder Beispiele, können sinnvoll in einem neu eingeführten Blockelement aside untergebracht werden. Zugunsten der Lesbarkeit und Verständlichkeit für den Leser sollten hingegen Informationen, die gar nichts mit dem normalen Fluß des Inhaltes zu tun haben, gar nicht untergebracht werden, wodurch sich praktisch automatisch ergibt, daß auch die Informationen, die in aside notiert sind, zumindest indirekt Bezug auf den sonstigen Inhalt haben. Die Struktur des Inhaltes richtet sich auch hier wieder danach, um was es in einer solchen Randnotiz oder Marginalie geht, sinnvoll ist es auch hier wieder, sich zu entscheiden, ob der Inhalt aus Blockelementen einerseits oder aus Textinhalt oder Phrasenelementen andererseits besteht.
Das Element div ist selbst kein Gruppierungselement und hat keine besondere semantische Bedeutung, verhält sich ansonsten aber ähnlich wie ein Gruppierungselement. Das Element findet dann Anwendung, wenn es kein passendes Gruppierungselement oder Blockelement für die erforderliche Bedeutung gibt.
Da die Elementauswahl hinsichtlich der semantischen Bedeutung von HTML5 stark begrenzt ist, kann es öfter notwendig sein, dieses Element zu verwenden. Vorher sollte jedoch sorgfältig geprüft werden, ob die intendierte Bedeutung nicht doch eventuell mit einem verfügbaren Element abgedeckt wird. Wenn dem so ist, ist besser das Element zu verwenden, welches eine Obermenge der beabsichtigten Bedeutung abdeckt. Die Verfeinerung kann dann mit einem speziellen Format RDFa erfolgen. Gibt es kein Element, welches sich eignet, um die beabsichtigte Bedeutung abzudecken, ist bei der Verwendung von div zu empfehlen, per RDFa die semantische Bedeutung zu notieren.
Dabei gibt es verschiedene Interpretationen oder Strategien hinsichtlich der Frage, ob es kein geeignetes Element für eine bestimmte Anwendung gibt. In der strikten Interpretation wird div dann verwendet, wenn die verfügbaren Blockelemente semantisch nicht genau passen. Die beabsichtigte semantische Bedeutung wird per RDFa präzise notiert. Alternativ dazu, nicht weniger strikt: Statt div wird jenes Element von HTML5 verwendet, welches der beabsichtigten semantischen Bedeutung am nächsten kommt. Erneut wird die beabsichtigte semantische Bedeutung per RDFa präzise notiert. Weniger strikt oder deutlich größzügiger oder sorgloser ist der Ansatz, bei der Alternative auf RDFa zu verzichten, auch wenn das Element nur ungefähr zur beabsichtigten semantischen Bedeutung paßt.
Als generisches Blockelement kann div ferner nützlich sein, um einen rein dekorativen Block für eine Stilvorlage anzulegen, entsprechend können bei mehrsprachigen Dokumenten damit auch die Bereiche in verschiedenen Sprachen separiert werden. Dies trifft auch zu, wenn Autoren daran gelegen ist, bei Elementen mit gemischten Inhalte auf der Elementtypeebene konsistent Blockelemente einzusetzen, statt Blöcke, Phrasen, einfachen Text auf derselben Ebene als Kinder eines Elementes zu verwenden.
Laufender Text wird hauptsächlich innerhalb von Absätzen notiert werden. Dafür gibt es ein spezielles Element p. Daneben gibt es weitere Elemente, mit welchen laufender Text strukturiert werden kann.
Das Darstellungsprogramm ignoriert Zeilenumbrüche im laufenden Text. Genauer gesagt werden Zeilenumbrüche und ähnliche Zeichen zu Leerzeichen konvertiert. Danach werden mehrere aufeinanderfolgende Leerzeichen zu einem einzigen zusammengeschnurrt. Zur Erzeugung eines Absatzes oder einer neuen Zeile wird ein dafür geeignetes Element notiert. Entsprechend gibt es ein spezielles Element für Bereiche, in welchen Zeilenumbrüche und Leerzeichen in der Präsentation aus dem Quelltext übernommen werden sollen.
Grundsätzlich wird sämtlicher Text in Absätzen oder in anderen Textbereichen notiert. Für einen Absatz wird das Element p verwendet. In solch einem Absatz kann dann Phraseninhalt wie Text stehen. Wo fließender Inhalt erlaubt ist, können Absätze notiert werden. p selbst ist das Blockelement schlechthin. Bei einer guten Dokumentstruktur werden daher die Geschwisterelemente eines p ebenfalls Blockelemente sein.
Zwischen verschiedenen Absätzen erzeugen Darstellungsprogramme mit graphischer Ausgabe automatisch einen kleinen Abstand. Daher stammt auch die deutsche Bezeichnung der Struktur, sie wird vom Inhalt davor und danach abgesetzt.
Das Element p umschließt einen einzelnen, abgeschlossenen Gedankengang innerhalb eines längeren Textes. Ein Text besteht zumeist aus mehr als einem Gedankgang. Ein Absatz ist inhaltlich einfacher Prosatext ohne weitere inhaltliche Struktur, die über die von Sätzen hinausgeht. Dies spiegelt sich auch darin wider, daß nur Text und Phrasenelemente als Inhalt erlaubt sind.
Gedankengänge sind typisch nicht leer, von daher gibt es in normalen Texten keine leeren Absätze.
Es gibt auch ein spezielles Element br für einen Zeilenumbruch, welches selbst nie Inhalt hat. Dies ist ein Beispiel für ein sogenanntes leeres Element. Es gehört zu den Phrasenelementen und kann dort notiert werden, wo Phraseninhalt erlaubt ist, zum Beispiel auch innerhalb von Absätzen. Mehrere Elemente br direkt hintereinander sind allerdings zumeist nicht sinnvoll und weisen auf eine schlechte Dokumentstruktur hin.
Inhaltlich tritt ein Zeilenumbruch eher selten auf. Dies kann etwa bei der Notation von Adressen der Fall sein. Innerhalb eines Absatzes könnte ein br noch eine minimale Gedankenpause kennzeichnen, um einen bestimmten Punkt in einem Gedankengang zu pointieren. Da das Element selbst keinen Inhalt hat, kann es auch kaum dazu dienen, inhaltliche Strukturen auszuzeichnen, welche über eine solch minimale Gedankenpause hinausgehen. Daher gibt es eher wenige inhaltlich korrekte Verwendungsmöglichkeiten für br.
In der Belletristik gibt es allerdings gelegentlich Bedarf, einen Absatz schwach zu strukturieren, etwa um kleinere Gedankenpausen von Protagonisten oder den Wechsel des Sprechers in Dialogen zu kennzeichnen. Das kann als Verfeinerung der klassischen Absatzstruktur interpretiert werden. Ähnlich wie die Strophe eines Gedichtes etwa aus mehreren Zeilen besteht, kann ein Absatz so also auch noch eine allerdings deutlich schwächere Substruktur haben.
Wer dies Element in anderem Zusammenhang öfter verwendet, verwendet vermutlich das falsche Element oder ist sich nicht klar darüber, was inhaltlich zum Ausdruck gebracht werden soll. In der Regel sollte ein Autor dem Darstellungsprogramm überlassen, die Zeilenumbrüche selbst festzulegen, da dem Autor nicht bekannt ist, wie breit eine Zeile ist. Ein Dokument kann in einem Fenster mit einer Größe von 1024×768px angezeigt werden oder auch nur in einem sehr kleinen Ausschnitt des Bildschirms oder in einem mobilen Endgerät mit kleinem Bildschirm. Oder es wird vorgelesen – und wer möchte schon gerne eine Schar aufeinanderfolgender Zeilenumbrüche vorgelesen bekommen …
Letztlich wissen Autoren nicht, wo in der jeweiligen Präsentation die Zeile aufhört. Wer zwanghaft ein bestimmtes Layout zu erzeugen versucht, muß damit rechnen, daß ein Besucher des Projektes mit einem anderen Darstellungsprogramm oder anderer Bildschirmauflösung und -größe sowie Schriftgröße die Seite nicht mehr so sieht, wie dies eigentlich beabsichtigt war.
Beispiel:
<p> Adresse des Vertreters unserer Produkte auf der Erde im Sonnensystem:<br /> Dr. mult. Hotte Hööse<br /> Im günen Hain am dunklen Bache 13c<br /> 30001 Hangover<br /> Deutschland<br /> Europa<br /> Erde<br /> Sonnensystem<br /> Nebenspiralarm 1a<br /> Milchstraße </p>
Es kann vorkommen, daß zwischen zwei Absätzen, allgemeiner Blockelementen ein Separator eingefügt werden soll, der inhaltlich relevant ist. Dies kann zum Beispiel passieren, wenn ohne Überschriften (die in einem anderen Abschnitt erklärt werden) mehrere Themen auf einer Seite behandelt werden, wobei jedes aber mehr als einen Absatz haben kann. Um nun die verschiedenen Bereiche voneinander zu trennen, kann das Element hr verwendet werden. Dies ist ein leeres Blockelement und kann dort notiert werden, wo fließender Inhalt erwartet wird. Hinsichtlich einer sinnvollen Struktur ist zu erwarten, daß es dort notiert wird, wo alle Geschwisterelemente ebenfalls Blockelemente sind.
Weil HTML5 anders als frühere Versionen von (X)HTML allerdings spezielle Elemente zur Gruppierung und Strukturierung von Inhalt hat, insbesondere das Element section, ist es zumeist sinnvoller, dieses Element zu nutzen, um Inhalt zu strukturieren.
Die meisten aktuellen Darstellungsprogramme erkennen zwar section und andere in HTML5 neue Gruppierungselemente als Blockelement, haben allerdings sonst keine weitere Hervorhebung dafür, um die Struktur ohne den Einsatz eigener Stilvorlagen der Autoren kenntlich zu machen. Ältere Darstellungsprogramme kennen neue Elemente wie section gar nicht und behandeln sie gar wie Phrasenelemente.
Daher kann es sinnvoll sein, zusätzlich zur Strukturierung das Element hr zu verwenden, etwa zwischen zwei aufeinanderfolgenden Elementen section. In einer Stilvorlage könnte dann die Struktur von section als Blockelement speziell hervorgehoben werden, das hr hingegen ausgeblendet werden. So ist gewährleistet, daß bei Interpretation einer Stilvorlage eine elegante Hervorhebung der Struktur sichtbar wird, bei einfachen oder alten Programmen ohne diese Fähigkeiten jedoch immerhin die Struktur aufgrund der vorhandenen Elemente hr erkennbar bleibt, weil dies Element in allen Versionen von (X)HTML bekannt ist.
Mittels address kann ein Autor seine eigenen Kontaktdaten angeben. In Deutschland etwa wie in zahlreichen anderen Ländern gibt es gewisse gesetzliche Verpflichtungen zur Anbieterkennzeichnung je nach angebotenen Inhalten. Innerhalb des Blockelementes address sind also nicht beliebige Adressen zu notieren, sondern nur jene der Ansprechperson für die komplette Seite oder auch für ein größeres Projekt. Der Inhalt ist fließender Inhalt, das Element kann von daher auch als Gruppierungselement aufgefaßt werden.
In früheren, strikten Varianten durfte es allerdings lediglich Phraseninhalt haben. Bei der Adressangabe bietet es sich dann natürlich an, das Element br für die Zeilenumbrüche zu verwenden.
Entscheidet sich der Autor für Blockelemente als Inhalt, kann eine reichhaltigere Struktur vorgesehen werden.
Das Element eignet sich auch, um etwa innerhalb von article notiert die Kontaktdaten für den Artikel anzugeben, die Information bezieht sich dann lediglich auf den umschließenden Artikel, nicht auf das gesamte Dokument.
Beispiel einfach:
<h1>Verantwortlicher für dieses Projekt:</h1> <address> Dr. mult. Hotte Hööse<br /> Im günen Hain am dunklen Bache 13c<br /> 30001 Hangover<br /> Deutschland<br /> Europa<br /> Erde<br /> Sonnensystem<br /> Nebenspiralarm 1a<br /> Milchstraße<br /> Email: hotte@example.org<br /> Phon: 49 (0)511 …<br /> Fax: 49 (0)511 … </address>
Beispiel als Gruppierungselement:
<address> <h1>Verantwortlicher für dieses Projekt:</h1> <p> Dr. mult. Hotte Hööse<br /> Im günen Hain am dunklen Bache 13c<br /> 30001 Hangover<br /> Deutschland </p> <p> Europa<br /> Erde<br /> Sonnensystem<br /> Nebenspiralarm 1a<br /> Milchstraße </p> <p> Email: hotte@example.org<br /> Phon: 49 (0)511 …<br /> Fax: 49 (0)511 … </p> </address>
Maschinenlesbar sind die Adressen so noch nicht unbedingt, wenngleich Roboter, welche nach email-Adressen suchen, diese zumeist bereits am Zeichen @ innerhalb einer nicht sehr speziellen Zeichenfolge erraten. Um die Adressen einheitlich zu kennzeichnen, kann mittels RDFa die nähere Bedeutung der Angaben durch Referenz der Strukturen eines speziellen Namensraumes dafür vorgenommen werden.
Mit Hilfe des Blockelementes pre (englisch: preformatted; deutsch: vorformatiert) ist es möglich, den Inhalt im Darstellungsprogramm so anzeigen zu lassen, wie man es im Editor eingetippt hat. Das ist insbesondere relevant, wenn bei speziellen Gedichtformen oder Quelltexten von Programmiersprachen oder Auszeichnungssprachen etc Leerzeichen, Zeilenumbrüche etc relevant für das Verständnis sind. Für normalen Fließtext ist dies Element weder gedacht noch geeignet.
Der Inhalt ist Phraseninhalt. Das Element kann notiert werden, wo fließender Inhalt erwartet wird. Weil es ein Blockelement ist, wird es für eine gute Struktur nur dort notiert werden, wo auch die Geschwisterelemente Blockelemente sind.
Beispiel Quelltext notieren:
<p>Die Einrückung von Quelltext verbessert die Lesbarkeit. Man vergleiche folgende Fortran-Programmfragmente:</p> <pre> open (2,file='106v240.out') i=0 700 continue i=i+1 read(2,*,END=710) d1(i),d2(i),d3(i) go to 700 710 continue close(2) modus='new' do i=1,ia open (1, Status=modus, file=da(i)) is=(i-1)*88 do j=1,88 k=j+is write(1,*) d1(k),d2(k),d3(k) enddo close(1) enddo </pre> <div>mit</div> <pre> open (2,file='106v240.out') i=0 700 continue i=i+1 read(2,*,END=710) d1(i),d2(i),d3(i) go to 700 710 continue close(2) modus='new' do i=1,ia open (1, Status=modus, file=da(i)) is=(i-1)*88 do j=1,88 k=j+is write(1,*) d1(k),d2(k),d3(k) enddo close(1) enddo </pre>
Mit der Methode können die Programmfragmente auch getrennt vom laufenden Text oder in einem Anhang oder in figure notiert werden und stören so nicht notwendig den normalen Textfluß. Durch Verwendung eines Fragmentidentifizierers können die Quelltexte auch referenziert werden, durch Verwendung des Phrasenelementes code kann zudem eine allgemeine Strukturinformation gegeben werden, welche dann auch helfen kann, solche Inhalte in einem weiteren Schritt per CSS hervorzuheben oder aus dem normalen Textfluß herauszunehmen.
Zumindest beim klassischen Fortran, welches bei Bedarf noch auf Lochkarten notiert werden kann, ist auch die Anzahl der Leerzeichen vorne signifikant, weswegen die nicht einfach vor der Darstellung zusammengeschnurrt werden dürfen. Auch die maximale Zahl der Zeichen pro Zeile ist wegen der Lochkarten-Historie beschränkt, von daher sind auch die Zeilenumbrüche signifikant.
Ein anderes Beispiel für die Signifikanz von Leerzeichen ist Python, wo die Blockbegrenzung gezielt von der Einrückung abhängig gemacht wurde, um die Lesbarkeit des Quelltextes zu gewährleisten.
Phrasenelemente stehen praktisch stets in Blockelementen und werden im laufenden Text verwendet.
Ein Verweis (englisch: hyperlink, link) oder eine Verknüpfung ist ein namensgebender Bestandteil von (X)HTML und ein entscheidender Grundbaustein des weltweiten Netzwerkes, denn erst die Nutzung dieser Verweise führt zu einem Netzwerk (kurz: Netz). Solche Verknüpfungen sind Querverweise zu anderen Dokumenten im Netz (häufig andere (X)HTML-Dokumente) oder innerhalb eines Dokumentes. Ohne diese Verweise käme man mit (X)HTML nicht weit.
Um Verweise zu realisieren, gibt es verschiedene Möglichkeiten. Im Kopfbereich eines Dokumentes wird dafür das Element link verwendet, welches bereits im Kapitel über die Grundstruktur erläutert wurde.
Im normalen Textfluß wird das Phrasenelement a für einen Verweis verwendet. Ferner gibt es auch noch verweissensitive Graphiken und Formulare, mit denen Verweise oder ähnliche Funktionalitäten realisiert werden können. Formulare werden in einer funcity-Wohnung eher nicht verwendet werden, denn dort können sie nach dem Absenden nicht oder kaum ausgewertet werden. Statt verweissensitiver Graphiken kann heute auch Vektorgraphik direkt im Dokument verwendet werden.
Das Element a kann da notiert werden, wo fließender Inhalt notiert werden kann.
Das ältere, strikte Inhaltsmodell ist: In einem Element a kann wiederum Phraseninhalt notiert werden. Im Sinne einer guten Dokumentstruktur sollte es innerhalb eines Blockelementes oder Gruppierungselementes notiert werden, etwa in einem Absatz. Weiterer sinnvoller Inhalt des Elternelementes ist dann folglich interpretierter Text und andere Phrasenelemente.
HTML5 führt alternativ ein großzügigeres Inhaltsmodell ein: Das Element ist transparent, darin darf notiert werden, was im Elternelement erlaubt ist. Entsprechend kann übertragen werden: Was für das Elternelement eine sinnvolle Dokumentstruktur ist, trifft auch auf das darin befindliche Element a zu.
Ein Element a darf allerdings nicht Nachfahre eines anderen Elementes a sein. Innerhalb eines Elementes a dürfen auch keine anderen interaktiven Elemente stehen.
Der Inhalt des Elementes a, welches daher nie leer sein sollte, dient der Aktivierung des Verweises. Bei einer graphischen Darstellung etwa wird dieser Inhalt meist bunt (blau) und unterstrichen hervorgehoben und die Aktivierung erfolgt durch anklicken. Durch Stilvorlagen von Autoren kann die Dekoration selbstverständlich beliebig gewählt sein.
Natürlich sollte der umschlossene Text das Verweisziel möglichst treffend beschreiben, damit der Benutzer ungefähr weiß, wohin er gelangt, wenn der Verweis aktiviert wird. Mit dem allgemein verwendbaren Attribut title können auch Zusatzinformationen angeboten werden, die nicht im normalen Fließtext integriert werden, sondern dem Benutzer nur bei Bedarf oder vor eventueller Aktivierung des Verweises außerhalb des normalen Textflusses angezeigt werden.
Neben den allgemein verwendbaren Attributen hat a einige spezifische Attribute. Dies sind: href, hreflang, type, rel, rev, target, download, referrerpolicy. Diese sind allesamt optional. Nicht alle davon sind in diesem Kontext wichtig oder relevant, von daher wird bloß der relevantere Teil erläutert.
Das Attribut href gibt die URI/IRI (Netz-Adresse) des gewünschten Verweiszieles an. Alternativ kann auch ein # angegeben werden, direkt gefolgt von einem Fragmentidentifizierer auf der aktuellen Seite. Die Kombination ist ebenfalls möglich, erst die Adresse, dann das #, dann der Wert eines Fragmentidentifizierers.
Wird kein Attribut href angegeben, so kann das Element a natürlich auch nicht dazu dienen, einen Verweis zu aktivieren. Bei einigen früheren Versionen von (X)HTML hatte a dann noch eine spezielle Funktion, die aber mit der Einführung des Fragmentidentifizierers mit dem allgemein verwendbaren Attribut id überflüssig geworden ist.
Es ist möglich, eine absolute Adressierung anzugeben, angefangen mit Protokoll, gefolgt vom Namen oder der numerischen Adresse des Rechners und der Verzeichnisstruktur bis zur Angabe des Dokumentnamens.
Dabei ist zu beachten, daß bei dem Teil mit der Angabe zur Verzeichnisstruktur und dem Dokumentnamen Groß- und Kleinschreibung signifikant ist.
Eine absolute Adresse besteht aus der Angabe eines Schemas, gefolgt vom Namen oder der numerischen Adresse des Rechners, über dessen Dienst das referenzierte Dokument verfügbar gemacht werden soll.
Damit können also Verweise zu externen Dokumenten auf einem anderen Rechner notiert werden, sofern der angegebene Rechner bereit ist, über den mit dem Schema angegebenen Dienst das Dokument auszuliefern. Natürlich lassen sich so auch Verweise auf Ziele auf demselben Rechner realisieren, was allerdings dann unpraktisch ist, wenn sich numerische Adresse oder Rechnername ändern.
Beispiel:
<a href="https://www.wikibooks.org/">Wikibooks - Inhaltsoffene Lehrbücher</a> <a href="http://www.example.org/w/index.xhtml">Index-Dokument im Verzeichnis "w" des Rechners www.example.org</a>
Es läßt sich als Schema natürlich nicht nur das Protokoll http verwenden, sondern auch andere, zum Beispiel https, ftp, sftp oder tel und auch Pseudoprotokolle, auf die hier nicht weiter eingegangen wird. Alle Schemata werden grundsätzlich von einem Doppelpunkt gefolgt notiert, zum Beispiel http:. Die englische Wikipedia bietet eine ausführliche Übersicht der möglichen Schemata.
Zusätzlich kann das Protokoll/Schema auch entfallen, wobei Anzeigeprogramme das Protokoll des aufrufenden Dokumentes einsetzen. Dies ist insbesondere bei Dokumenten hilfreich, die sowohl über http als auch https erreichbar sind. Die URI/IRI wird dann lediglich mit zwei anführenden Schrägstrichen notiert:
<a href="//www.wikibooks.org/">Wikibooks - Inhaltsoffene Lehrbücher</a>
Alternativ kann auch eine relative Adressierung erfolgen. Relativ angegebene Adressen muß das Darstellungsprogramm immer zu einer absoluten Adresse auflösen, bevor ein Dokument abgerufen werden kann.
Beispiele:
<a href="bilder_10.xhtml">Bilder vom Oktober 2011 angucken</a> * <a href="../2010/bilder_10.xhtml">Bilder vom Oktober 2010 angucken</a> * <a href="../../bilder.xhtml">Bilder Vorbemerkungen</a>
Beim ersten liegt die Datei im selben Verzeichnis. Beim zweiten in einem Geschwisterverzeichnis, also mit dem selben Elternverzeichnis. Beim dritten geht es noch eine Ebene höher durch die Doppelpunkte.
Anmerkung: in funcity können keine Verzeichnisse angelegt werden, dieser Aspekt ist also bloß bei Verweisen auf andere, externe Orte im internationalen Netz relevant.
Zweite Anmerkung: funcity konvertiert Großbuchstaben in Dateinamen in Kleinbuchstaben (Stand: 2024-08), also besser gleich gar keine Großbuchstaben bei den eigenen Dateinamen verwenden, auch sonst keine Zeichen, welche über Ziffern, lateinische Buchstaben, Binde- und Unterstrich hinausgehen.
Statt URI/IRIs können auch Fragmentidentifizierer verwendet werden:
<h1 id="B2010">Bilder 2010</h1> <section> <h2 id="Jan">Januar</h2> <div>...</div> </section> <section> <h2 id="Feb">Februar</h2> <div>...</div> </section> <section> <h2 id="Mar">März</h2> <div>...</div> </section> <section> <h2 id="Apr">...</h2> <div>...</div> </section> <nav> <h1 id="Nav">Navigation</h1> <ul> <li><a href="#B2010">Bilder 2010</a></li> <li><a href="#Jan">Bilder Januar</a></li> <li><a href="#Feb">Bilder Februar</a></li> <li><a href="#Mar">Bilder März</a></li> <li>...</li> <li><a href="#Nav">Navigation</a></li> </ul> </nav>
Dabei können die Verweise vor oder hinter den Fragmentidentifizierern stehen. Das Darstellungsprogramm analysiert die komplette Seite und sofern ein passender Fragmentidentifizierer irgendwo auf der Seite vorhanden ist, dient das zugehörige Element als Verweisziel, zu dem gesprungen wird. Dabei wird nur die Darstellung geändert, bei Verweisen zu Zielen im selben Dokument aber keine neue Anfrage an ein Dienstprogramm gestellt, also das Dokument nicht erneut geladen.
Fragmentidentifizierer können auch mit URI/IRIs kombiniert werden. Zu beachten ist dabei, daß das Darstellungsprogramm die Angaben zum Fragmentidentifizierer immer selber auswertet, diese also nicht Bestandteil der Anfrage an das Dienstprogramm sind.
Beispiel:
<p> Vergleiche den Zustand des Excimer-Lasers im <a href="bilder_10.xhtml#B37">Oktober 2011</a> mit dem im <a href="../2010/bilder_10.xhtml#B48">Oktober 2010</a> oder mit dem <a href="http://example.org/exci-neu/#Detail13">Excimer-Laser der example-Kollegen</a>. </p>
Mit dem Attribut hreflang kann angegeben werden, in welcher Sprache das referenzierte Dokument verfaßt ist. Der Wert entspricht dem vom allgemein verwendbaren Attribut xml:lang oder lang, siehe auch dort. Als Wert also im einfachsten Fall 'de' für deutsch, 'en' für englisch, 'fr' für französisch, 'it' für italienisch, 'es' für spanisch und so weiter, insbesondere noch 'x' für selbst festgelegte, experimentelle Varianten.
Sprachvariationen werden optional festgelegt, indem deren Kürzel hinter einem Bindestrich angefügt wird, also etwa de-AT für die Variante aus Österreich, de-CH für die aus der Schweiz, en-US für englisch im amerikanischen Dialekt etc. Auch weitere Subtypen sind möglich: de-DE-1996 für deutsch nach den Rechtschreibregeln von 1996 oder de-DE-1901 für die von 1901.
Auch hier kann das 'x' wieder dafür herhalten, eine eigene Sprachvariante anzugeben, zum Beispiel en-x-Hixie oder als weitere Untervariante auch en-US-x-Hixie.
Beispiel:
<p>Zum Thema 'Prosopagnosie im Alltag von Lehrern' gibt es neben den Erfahrungsberichten auf dieser Seite auch internationale Berichte, etwa aus <a href="http://example.org/prosop_us/" hreflang="en-US">den Vereinigten Staaten von Amerika</a>, <a href="http://example.org/prosop_gb/" hreflang="en-GB">Großbritannien</a>, <a href="http://example.org/prosop_ch/" hreflang="de-CH">Schweiz</a>, <a href="http://example.org/prosop_fr/" hreflang="fr">Frankreich</a>, <a href="http://example.org/prosop_kl/" hreflang="x-klingon">Klingonien</a>. </p> <p> Das Problem ist nicht neu, wie Berichte aus früheren Jahrzehnten aus Deutschland zeigen. Es gibt bereits Berichte von <a href="http://example.org/prosop_de_KR/" hreflang="de-DE-1901">vor dem ersten Weltkrieg</a>, aber auch welche aus der <a href="http://example.org/prosop_de_BRD/" hreflang="de-DE-1901">Bundesrepublik vor der 'Wiedervereinigung'</a> und solche aus der <a href="http://example.org/prosop_de_DDR/" hreflang="de-DE-1901">Deutschen Demokratischen Republik</a>. </p>
Der Wert von type gibt den Inhaltstyp des referenzierten Dokumentes an, was aber vorrangig relevant ist, wenn sonst keine andere Quelle zur Ermittlung des Inhaltsyps verfügbar ist.
Kann das Darstellungsprogramm den Typ allerdings nicht darstellen, kann die Information auch dazu dienen, das referenzierte Dokument gar nicht erst zu laden, sondern etwa den Nutzer zu fragen, was passieren soll.
Beispiel (SVG-Dokument): type="image/svg+xml"
Beispiel (PNG-Dokument): type="image/png"
Beispiel (JFIF/JPEG-Dokument): type="image/jpeg"
Beispiel (XHTML-Dokument): type="application/xhtml+xml"
Beispiel (HTML-Dokument): type="text/html"
Beispiel:
<a href="karteskulptureninhannover.svg" type="image/svg+xml">Interaktive Karte mit Standorten der Skulpturen</a>, <a href="skulptureninhannover.mp3" type="audio/mpeg">Vortrag über Skulpturen in Hannover</a>
Mit dem Attribut target kann der Autor einen Vorschlag machen, wo der referenzierte Inhalt angezeigt werden sollte.
Je nach Möglichkeiten des Darstellungsprogrammes und Voreinstellunungen und Wünschen des Nutzers des Darstellungsprogrammes wird das Darstellungsprogramm dann versuchen, einen für den Nutzer optimalen Darstellungsort bereitzustellen.
Das Attribut wurde ursprünglich eingeführt zusammen mit einer Rahmentechnik (englisch: frames) um mehrere Dokumente zu einer gemeinsamen Darstellung in einem Bereich zusammenzuführen. Funcity nutzt diese Rahmentechnik noch intensiv, die Wohnungen stecken beim Aufruf über die Stadt auch in einem Rahmensatz, insofern ist Vorsicht geboten, um Besucher der Wohnung nicht mit dem falschen Attribut-Wert aus der Stadt zu werfen.
Allerdings kann das Attribut target auch unabhängig von der Rahmentechnik eine Funktion haben. Der Grund für eine zwischenzeitliche Streichung in einigen früheren Versionen von (X)HTML lag in der Verknüpfung mit der Rahmentechnik. Die Argumente, weswegen es dann doch wieder aufgenommen wurde, dürften darin liegen, daß es auch weitergehende Funktionen hat und es in einem Dokument, welches in einem anderen Dokument referenziert wird, welches Rahmentechnik verwendet, auch noch dazu in der Lage sein sollte vorzuschlagen, wo referenzierte Inhalte dargestellt werden, zum Beispiel auch statt des Dokumentes mit der Rahmentechnik, um diese Anzeigemethode zu beenden.
Zum einen kann der Wert von target ein Name eines Rahmens sein, dort mit dem Attribut id, beziehungsweise auch noch mit dem veralteten name angegeben. Ein solcher beginnt immer mit einem Buchstaben (a-z, A-Z).
Zum anderen einen gibt es reservierte Werte für target zur unabhängigen Verwendung von der Rahmentechnik. Die für eine Wohnung in funcity relevanten reservierten Werte sind folgende einschließlich Bedeutung:
Soll eine Textpassage betont werden, so gibt es dafür zwei Elemente, em und strong.
em steht dabei für Emphase, empathisch (altgriechisch, in dem Zusammenhang zeigen, offensichtlich machen).
strong schließt sich daran an und bedeutet stark empathisch, also eine stärkere Betonung.
Eine Kombination ist auch möglich.
Es ist aber nicht festgelegt, ob eine empathisierste starke Empathie stärker hervorgehoben werden sollte als eine starke empathisierste Empathie oder umgedreht.
Es hat sich jedenfalls bei einer graphischen Darstellung etabliert, em kursiv oder oblique darzustellen und strong fett, beides zusammen dann also kursiv und fett, unabhängig davon, welches das Kindelement von welchem ist. Doppelt empathisch oder doppelt stark empathisch gibt aber vermutlich keine visuelle Steigerung gegenüber dem einfachen. Inhaltlich hingegen ist das schon eine Steigerung, die aber von den Programmen nicht notwendig sichtbar oder hörbar gemacht wird. Dazu wären im Bedarfsfalle eigene Angaben in der Stilvorlage notwendig.
Beispiel:
<p> Nachdem sich einige amerikanische oder englische Pop-Sänger am Ende ihres Auftrittes beim Publikum empathisch mit "<span xml:lang="en">Thank <em>you</em>!"</span> bedankt haben, haben diese Betonung einige deutsche Pop-Sänger inhaltlich offenbar unverstanden als "Danke <strong>sehr</strong>!" übernommen. Hätten sie stattdessen doch bloß "Ich danke <strong>euch</strong>!" oder "<em>Ich</em> hab' <strong>euch</strong> lieb!" gerufen ;o) </p>
Das Gegenteil einer Hervorhebung findet statt, wenn Inhalt nicht mehr gültig ist, dieser jedoch nicht entfernt werden soll, um zum Beispiel darüber zu informieren, daß er nicht mehr gültig ist. Solch ungültiger Inhalt wird im Element s notiert.
Bei größeren Passagen oder bei Aktualisierungen ist hingegen zu überlegen, ob nicht das Element del zusammen mit ins die bessere Wahl sein könnte.
Typisch wird der Inhalt von s als durchgestrichen präsentiert. Problematisch ist dieses in HTML5 (wieder) eingeführte Element bei Programmen, die es noch nicht kennen, weil diese die Ungültigkeit demnach nicht kennzeichnen werden. Hier sollte explizit in einer Autorenstilvorlage eine passende Dekoration vorgegeben werden.
Gerne wird eine solche Struktur in manipulativer Reklame verwendet:
<p> <s>Listenpreis: 10000 Euro</s><br /> Unser Preis: 99 Euro </p>
Für die Kennzeichnung und Erklärung von Abkürzungen stellt (X)HTML ein Element bereit, abbr. Das speziellere aus früheren Versionen acronym ist gestrichen worden, weil die Verwendung international angeblich nicht einheitlich verstanden wurde.
abbr (Abkürzung, Abbreviatur, englisch: abbreviation) kann allgemein für alle Arten von Abkürzungen genommen werden.
Einige ursprüngliche Abkürzungen haben sich zu eigenständigen Wörtern weiterentwickelt und bedürfen keiner besonderen Kennzeichnung mehr, entsprechend schreibt man dann also Laser, Radar, Sonar.
Bei der Verwendung von Abkürzungen in einem Dokument sind jedenfalls alle Vorkommen als solche zu kennzeichnen – bei kürzeren Wörtern kann dies den Autor bereits davon abhalten, überhaupt die Abkürzung zu benutzen, was die Les- und Verstehbarkeit des Text in der Regel verbessert.
Eine andere Variante ist, die Abkürzung einfach ohne besondere Verwendung von Elementen zu erklären:
Bevor ich viele Jahre bei der Staatssicherheit (Stasi) mit großen Erfolgen tätig war, habe ich schon kurze Zeit bei der Gestapo (Geheime Staatspolizei) etwas Berufserfahrung sammeln können, die ich gut nutzen konnte. Beides half mir später auch bei meiner weiteren Tätigkeit im Bufüv (Bundesamt für Verfassungsschutz). Das brachte mir letztlich eine gute Pension ein.
Die Bedeutungserklärung einer Abkürzung erfolgt dann entweder beim ersten Vorkommen im Text oder in einem Glossar. Wer mag und wenn das relevant ist, kann auch gleich dabei mit angeben, wie die Abkürzung ausgesprochen wird, also phonetisch als ein Wort oder als aus Einzelbuchstaben zusammengesetzt oder gemischt. Eine solche Angabe kann insbesondere bei weniger geläufigen Abkürzungen für den Leser hilfreich sein, um sich auch mündlich kompetent über das Gelesene unterhalten zu können.
Wird ein Glossar verwendet, sollte dem Leser zu Beginn des Textes klar sein oder bei jeder Abkürzung, wo die Erklärung steht.
Für die Erklärung im Text gibt es mehrere Möglichkeiten. Beliebt ist es, im Attribut title von abbr die Erklärung zu notieren. Es gibt Darstellungsprogramme mit akustischer Ausgabe, die bei diesem Element dann den Wert von title statt den Inhalt des Elementes vorlesen. Das kann bei einfachem Textinhalt sinnvoll sein. Das Programm kann dadurch aber gegebenenfalls im Element notierte Verweise ignorieren, was dann eher ein Mangel des Programmes ist als eine vom Autor hervorgerufene Barriere. Oft läßt sich das aber umgehen, indem das Element a als Elternelement verwendet wird und nicht umgedreht, etwa um auf einen Glossareintrag zu verweisen.
Beispiele:
<abbr title="Technischer Überwachungsverein">TÜV</abbr>, <abbr title="Lastkraftwagen">LKW</abbr>, <abbr title="Unified Source Identifier">URI</abbr>, <abbr title="Scalable Vector Graphics">SVG</abbr>, <abbr title="World Wide Web Consortium">W3C</abbr> <abbr title="Geheime Staatspolizei">Gestapo</abbr> <abbr title="zum Beispiel">z.B.</abbr>
Beispiel Verweis auf Glossareintrag (zu finden in der Datei glossar.xhtml#SVG):
Am liebsten schreibe ich Vektorgraphiken mit meinem Texteditor Kate im Format <abbr><a href="glossar.xhtml#SVG">SVG</a></abbr>.
Aber mit title eher:
Am liebsten schreibe ich Vektorgraphiken mit meinem Texteditor Kate im Format <a href="glossar.xhtml#SVG"><abbr title="Skalierbare VektorGraphik">SVG</abbr></a>.
Eine andere Möglichkeit ergibt sich durch die Verwendung des Elementes dfn, siehe dort.
Mit dem Element dfn wird ein Begriff definiert. Der zu definierende Begriff steht als Inhalt im Element. Die Definition ist im selben Elternelement zu notieren. Präziser und eindeutiger geht es mit einer Definitionsliste, die aber ein Blockelement darstellt und nicht im normalen Textfluß verwendet werden kann, was nur mit dfn geht.
Beispiel Rollenverteilung beim Rollenspiel:
<p>In unserem Rollenspiel können Personen jeweils eine Rolle repräsentieren, als da wären <dfn>Domina (Dominante Frau mit Peitsche in Leder)</dfn>, <dfn>Dominus (Dominanter Mann mit Peitsche, in Leder)</dfn>, <dfn>Devota (Unterwürfige Frau, wechselnde oder keine Kostüme)</dfn>, <dfn>Devotus (Unterwürfiger Mann, wechselnde oder keine Kostüme)</dfn>, <dfn>Multiplum (Kann zwischen Frau und Mann, dominant und devot nach Belieben wechseln)</dfn>. Anfänger müssen sich nach persönlichen Präferenzen zwischen Domina, Dominus, Devota und Devotus zu Spielbeginn entscheiden. Nur in allen Rollen erfahrene Spieler dürfen nach Beschluß der Spielleitung zum Multiplum aufsteigen und nur ein Multiplum kann von der Spielleitung zum Mitglied der Spielleitung ernannt werden. </p> <p> Den Anweisungen der Spielleitung ist Folge zu leisten. Die Spielleitung bestimmt, welche Devota und welcher Devotus sich welcher Domina oder welchem Dominus unterzuordnen hat. Ein Multiplum kann die Rolle selbst für eine komplette Spielsequenz festlegen, die Spielleitung kann allerdings festlegen, ob vom Multiplum gewünschte Spielpartner für das Multiplum für die Spielsequenz verfügbar sind. In fortgeschrittenen Spielstadien können mehrere Zuordnungen erfolgen. </p>
Hier steht die Erklärung in Klammern hinter dem Begriff, die Zuordnung ist so zwar gut für Menschen lesbar, für Programme aber sicherlich keineswegs einfach, doch heuristisch erlernbar. Noch komplizierter mit der automatischen Erkennung wird es werden, wenn die Definition nur mit Komma getrennt als Nebensatz angefügt wird.
Beispiel für Abkürzungen:
<p> Gestern kaufte ich mir einen <dfn><abbr title="Kleinkraftwagen">KKW</abbr></dfn>. Ich hatte viel Freude damit, als ich mit einem Überführungsnummernschild wieder in die Heimat fuhr. Ich hatte drei Pannen. </p> <p> Heute war ich beim <dfn><abbr title="Technische Überwachung von KKWs">TÜK</abbr></dfn> mit meinem <abbr>KKW</abbr>. Leider gab es nur eine lange <abbr>TÜK</abbr>-Mängelliste statt der ersehnten Plakette. </p> <p> Morgen bringe ich den <abbr>KKW</abbr> zum Verkäufer zurück. Mein Freund Manni hat einen Baseball-Schläger. Der kommt mit und auch die <abbr>TÜK</abbr>-Mängelliste. </p>
Da die Erklärung im Attribut title notiert ist, ist die Zuordnung vom Definierenden zum Definierten eindeutig und auch von Programmen eindeutig auszuwerten. Allerdings wird ohne Interaktion durch den Leser die Definition selbst nicht dauerhaft angezeigt. Die Methode eignet sich also, wenn davon ausgegangen wird, daß sich der Leser die Definition nur bei Bedarf ansieht und sich dann merken kann, denn bei späteren Verwendungen wird die Definition nicht wiederholt.
Bei längeren Texten kann es natürlich auch sinnvoll sein, auf die Definitionen jeweils eindeutig zu verweisen, die dann auch in einem Glossar stehen kann.
Das Beispiel in dem Sinne weiter ausgebaut:
<p> Gestern kaufte ich mir einen <dfn id="KKW"><abbr title="Kleinkraftwagen">KKW</abbr></dfn>. Ich hatte viel Freude damit, als ich mit einem Überführungsnummernschild wieder in die Heimat fuhr. Ich hatte drei Pannen. </p> <p> Heute war ich beim <dfn id="TUEK"><abbr title="Technische Überwachung von KKWs">TÜK</abbr></dfn> mit meinem <abbr><a href="#KKW">KKW</a></abbr>. Leider gab es nur eine lange <abbr><a href="#TUEK">TÜK</a></abbr>-Mängelliste statt der ersehnten Plakette. </p> <p> Morgen bringe ich den <abbr><a href="#KKW">KKW</a></abbr> zum Verkäufer zurück. Mein Freund Manni hat einen Baseball-Schläger. Der kommt mit und auch die <abbr><a href="#TUEK">TÜK</a></abbr>-Mängelliste. </p>
Beispiel für formlose Definition in einem Börsenspiel:
<p>Ein <dfn>Chnien</dfn> ist äquivalent zu 119 Okkän.</p> <p>Ein <dfn>Okkän</dfn> ist konvertibel zu 31 Fludschen.</p> <p><dfn>Fludschen</dfn> ist die Grundwährungseinheit im offenen Börsenspiel. Der Wert eines Fludschen in Wareneinheiten bestimmt sich täglich durch den Handel an der Börse.</p> <p> Waren können konvertibel gehandelt werden, dann kann in allen Währungseinheiten bezahlt werden. Verkäufer und Käufer können allerdings auch nur Chnien, Okkän oder Fludschen akzeptieren, der Handel kommt dann nur zustande, wenn in der geforderten Einheit bezahlt werden kann. Es ist dann Angelegenheit des Käufers, sich die gewünschten Einheiten zu tauschen. </p> <p> Währungseinheiten selbst werden nicht gehandelt. Mitspieler können aber unentgeltlich oder gegen eine Gebühr tauschen. Niedere Dienstleistungen sind immer konvertibel zu handeln. Strafen und Steuern werden immer in Chnien berechnet. </p>
Der Begriff wird hier jeweils im umschließenden Elternelement erklärt. Dieses Elternelement enthält sonst keinen weiteren Inhalt. Das ist von Programmen nicht von selbst auswertbar, aber erlernbar. Einmal definiert, werden die Begriffe dann im weiteren Textverlauf unbedenklich verwendet.
Mit dem Element data wird Inhalt notiert, für welchen es auch eine maschinenlesbare Form gibt, die im fließenden Text allerdings nicht verwendet wird.
Die maschinenlesbare Variante wird im speziellen und erforderlichen Attribut value notiert. Der Wert von value ist also das maschinenlesbare Äquivalent des Elementinhaltes, wobei nicht festgelegt ist, nach welchem Schema ein Programm den Wert zu interpretieren hätte. Dafür wäre folglich die Erweiterung RDFa zu nutzen. Ohne eine Klärung, um was für ein Datenformat es sich handelt, bleibt die Angabe somit praktisch nutzlos, weil letztlich doch nicht automatisch maschinenlesbar, sofern die Programme den Kontext nicht verstehen. Immerhin kennzeichnet das Element selbst dann den jeweiligen Inhalt als etwas, was einheitlich spezifiziert notierbar ist.
Sofern der Wert lediglich eine Zahl ist, impliziert sich allerdings allein aus der Struktur des Wertes von value die Bedeutung als Zahl, wobei weiterhin erst aus dem Kontext oder einer zusätzlichen Angabe per RDFa erschlossen werden kann, was es mit der Zahl auf sich haben mag.
Bei Zeitangaben ist stattdessen das Element time zu verwenden.
Beispiel:
<data value="7.2973525664E-3">Feinstrukturkonstante</data> mit <data value="2.3E-10">relativer Unsicherheit der Feinstrukturkonstante</data>:<br /> <data value="7.2973525664E-3">7,29*10<sup>-3</sup></data>
Mit dem Element time wird eine Zeitangabe notiert, für welche es auch eine maschinenlesbare Form gibt, die im fließenden Text allerdings nicht verwendet wird. Ist der Inhalt selbst bereits maschinenlesbar, ist nichts weiter zu tun.
Die maschinenlesbare Variante wird im speziellen Attribut datetime notiert. Der Wert von datetime ist also eine maschinenlesbare Zeitangabe, demzufolge im internationalen Format für Datum und Zeit.
Beispiel:
<time>2018-04-02</time> oder <time datetime="2018-04-02">am zweiten April im Jahre Zweitausendundachtzehn</time> oder <time>2018-06-30T23:23:23Z</time>.
Mit dem Element code kann Quelltext als solcher gekennzeichnet werden. Da dies im normalen Textfluß passiert, sind das eher kurze Auszüge. Für längere Passagen wird eher das Element pre verwendet werden, bei welchem dann auch Leerzeichen und Zeilenumbrüche erhalten bleiben. Um definiert anzugeben, um welche Sprache es sich handelt, ist die Erweiterung RDFa zu verwenden. Bei der längeren Anwendung kann auch code als einziges Kind von pre verwendet werden, um etwa ein komplettes Programm darin zu notieren.
Beispiel:
<p> Mit dem Element <code>code</code> kann Quelltext als solcher gekennzeichnet werden. Da dies im normalen Textfluß passiert, sind das eher kurze Auszüge. Für längere Passagen wird eher das Element <code>pre</code> verwendet werden, bei welchem dann auch Leerzeichen und Zeilenumbrüche erhalten bleiben. </p>
Mit dem Element samp wird etwas als Beispiel gekennzeichnet. Da dies auch nur im normalen Textfluß passiert, eignet sich das Element auch eher schlecht für längere, strukturierte Beispiele. Die HTML5-Empfehlung nennt explizit Programmausgaben. Dafür gibt es allerdings bereits andere Elemente.
Beispiel:
<p> Beispiele für indisch-arabische Ziffern sind: <br /> <samp>0</samp>, <samp>1</samp>, <samp>2</samp> </p> <p> Beispiele für römische Ziffern sind: <br /> <samp>I</samp>, <samp>V</samp>, <samp>X</samp> </p>
Mit dem Element var wird etwas als Variable gekennzeichnet. Das ist also in der Regel ein Symbol, welches eine Variable repräsentiert, nicht der Wert davon.
Beispiele:
<p> Seien <var>w</var> der Drehwinkel und <var>x,y</var> ein Punkt, so ergibt sich mit der Drehmatrix D und der Translationsmatrix T eine Drehung um den Punkt <var>x,y</var> als: <br /> T(<var>x,y</var>)D(<var>w</var>)T(<var>-x,-y</var>) </p>
<p> Die Eigenschaft <var>fill-rule</var> hat die möglichen Werte 'nonzero', 'evenodd' und 'inherit'. Der Initialwert ist 'nonzero', die Eigenschaft wird vererbt und ist ferner animierbar. </p>
Mit dem Element kbd (englisch: keyboard, deutsch: Tastatur) wird etwas als Benutzereingabe gekennzeichnet.
Beispiele:
<p> Beim abgesendeten Formular haben Sie angegeben, die Postleitszahl Ihres Wohnortes sei <kbd>0815</kbd>, Sie seien am <kbd>1812-02-31</kbd> in <kbd>Gnzfbx</kbd> geboren. Sind Sie sich sicher, daß diese Angaben korrekt sind? Korrigieren Sie ansonsten bitte, <strong>bevor</strong> Sie ihre Angaben bestätigen und erneut senden. Bei falschen Angaben wird Sie ansonsten der Blitz beim … – na, Sie wissen schon. Vertrauen Sie uns, unser Vollstrecker kennt Mittel und Wege. </p>
<p> Nachdem Sie unsere Telephonnummer gewählt haben, verwenden Sie bitte für die Durchwahl die <kbd>69</kbd> für Schandtall, die <kbd>96</kbd> für Zindi, die <kbd>88</kbd> für Adolf, die <kbd>33</kbd> für Detlef, die <kbd>666</kbd> für spezielle Dienste und die <kbd>00</kbd> für Beschwerden. </p>
sup und sub sind Phrasenelemente zum Hoch- beziehungsweise Tiefstellen von Text.
Mit dem Element sup (Abkürzung für einen lateinischen Begriff) wird der darin notierte Text hochgestellt. Mittels sub (ebenfalls eine Abkürzung für einen lateinischen Begriff) wird der darin notierte Text tiefgestellt.
Beispiele:
H<sub>2</sub>O,<br /> d = ( (x<sub>1</sub> - x<sub>2</sub>)<sup>2</sup> + (y<sub>1</sub> - y<sub>2</sub>)<sup>2</sup> + (z<sub>1</sub> - z<sub>2</sub>)<sup>2</sup> )<sup>1/2</sup>
Das Element small wird von seiner Bedeutung her in HTML5 gegenüber früheren Versionen komplett und inkompatibel umdefiniert, deswegen und aufgrund des definierten Zweckes sollte es eigentlich nicht verwendet werden. Nun soll das sprichwörtlich Kleingedruckte nicht mittels small ausgezeichnet werden. Das stellt allerdings nur eine versuchte Irreführung und Ablenkung des Publikums dar. Der Autor sollte sich schon entscheiden, ob die betreffende Passage nun relevant ist oder nicht, frei nach dem Motto, was gestrichen ist, kann nicht durchfallen. Was unwichtig ist, kann auch ganz weg. Und wenn etwas nicht unwichtig ist, gehört es nicht versteckt oder schlecht lesbar gemacht.
Nebensächlichkeiten, Randnotizen, Abschweifungen sind eher in einem Element aside gut aufgehoben, allerdings eben als Gruppierungselement, nicht im fließenden Text. Von daher könnte sich das small in der aktuellen Definition von HTML5 noch für Reklame im Text eignen.
Beispiel:
Unter allen Nußnugatcremes mag ich <small>Herberts braune Dichtungspaste</small> am döllsten.
Mit dem Element i wird eine Textstelle unspezifisch hervorgehoben. In früheren Versionen stand das Element einfach für kursiven Text. Problematisch ist, daß kursiv meist bereits das Element em hervorgehoben wird, in der Praxis eine Unterscheidung für das Publikum also schwierig sein dürfte, sofern nicht mit einer Autorenstilvorlage vorgesorgt wird.
Ist eine Betonung gemeint, so ist em zu bevorzugen. Ansonsten könnte RDFa verwendet werden, um den Zweck der Hervorhebung genauer anzugeben.
Beispiele:
<p> Detlef hatte sich für seinen Favoriten einen schönen Spitznamen auserkoren: <i>Kurti Sahne<i>. </p> <p> Hein nannte sein kleines Segelschiff zur Haifischforschung in leicht historischer Anlehnung <i>Bißmarke</i>. </p>
Mit dem Element b wird eine Textstelle unspezifisch als wichtig hervorgehoben. In früheren Versionen stand das Element einfach für fetten Text. Problematisch ist, daß fett meist bereits das Element strong hervorgehoben wird, in der Praxis eine Unterscheidung für das Publikum also schwierig sein dürfte, sofern nicht mit einer Autorenstilvorlage vorgesorgt wird.
Ist eine starke Betonung gemeint, so ist strong zu bevorzugen. Ansonsten könnte RDFa verwendet werden, um den Zweck der Hervorhebung genauer anzugeben.
Beispiel:
<b>Wichtig!</b> Butterbrotdose und Turnbeutel nicht vergessen!
Mit dem Element u wird eine Textstelle unspezifisch als irgendein Vermerk hervorgehoben. In früheren Versionen stand das Element einfach für unterstrichenen Text.
Sofern em oder strong semantisch angemessener sind, sollten diese oder entsprechend passende Elemente verwendet werden.
Ansonsten könnte RDFa verwendet werden, um den Zweck der Hervorhebung genauer anzugeben.
Beispiel:
<u>Vermerk</u>: Hotte und Muschi bis Ende des Monats an das nächste funcity-Treffen erinnern erinnern!
Wird Text im aktuellen Dokument von einer anderen Quelle referenziert oder aufgrund aktueller Aktivität des Publikums vermutlich besonders relevant, ist der Text besonders zur Referenzierung geeignet, kann er mit dem Element mark hervorgehoben werden. Typisch wird das Element mit anderer Textfarbe und anderer Hintergrundfarbe (gelb) präsentiert, was aber natürlich mit einer Autorenstilvorlage leicht an den verwendeten Stil angepaßt werden kann.
Beispiel Ergebnisanzeige nach einer Suche nach dem Begriff 'farbe':
Typisch wird das Element mit anderer Text<mark id="mark01">farbe</mark> und anderer Hintergrund<mark id="mark02">farbe</mark> (gelb) präsentiert, was aber natürlich mit einer Autorenstilvorlage leicht an den verwendeten Stil angepaßt werden kann.
Beispiel für i, b, u, mark:
Beispiele für solch besondere <mark>Hervorhebungen</mark>: <b>Tensoren</b> und <i>Vektoren</i> sind kompliziertere mathematische Konstruktionen als <u>Skalare</u>.
Beispiele für solch besondere Hervorhebungen: Tensoren und Vektoren sind kompliziertere mathematische Konstruktionen als Skalare.
Im Allgemeinen ist bereits mit der Kodierung eines Zeichens festgelegt, wie die korrekte Schreibrichtung für das Zeichen ist. Dieser Bidirektional-Algorithmus erlaubt es Darstellungsprogrammen also automatisch festzustellen, ob die normale Textrichtung von links nach rechts oder von rechts nach links verläuft.
Für besondere Situationen bietet das Element bdo allerdings die Möglichkeit, diesen Algorithmus zu überschreiben.
Erforderlich für bdo ist das Attribut dir, mit welchem die gewünschte Textrichtung angegeben wird. Der Wert ist entweder 'ltr' für von links nach rechts oder 'rtl' für von rechts nach links.
Beispiel, dem guten Kurt Schwitters zum Andenken:
<p> Wörter, die von vorne nach hinten gelesen und von hinten nach vorne gelesen einen Sinn ergeben, werden Palindrome genannt. </p> <p> Schon Kurt Schwitters hat durch die Blume festgestellt, daß Anna von vorne wie von hinten – <bdo dir="rtl">Anna</bdo> ist. Und das ist gut. </p> <p> Auch Otto ist von vorne wie von hinten <bdo dir="rtl">Otto</bdo>, was Kurt aber nicht besonders interessiert hat, weil nunmal die <bdo dir="rtl">Anna</bdo> die Geliebte seiner siebenundzwanzig Sinne war und nicht der <bdo dir="rtl">Otto</bdo>. </p> <p> Lage ist auch ein Palindrom, ist aber nicht von vorne wie von hinten <bdo dir="rtl">Lage</bdo>, ebensowenig wie jede Emma eine Amme ist. Schon von daher handelt es sich um etwas anderes als bei einem <bdo dir="rtl">Relie<bdo dir="ltr">fpf</bdo>eiler</bdo> oder gar einer Anna Blume, der zu Ehren es nicht nur ein Gedicht von Kurt Schwitters gibt, sondern in Hannover auch einen Brunnen von Max Sauk. </p> <p> Hannover ist kein Palindrom, wie auch Kurt bereits anmerkte. Allerdings vermochte er für <bdo dir="rtl">Hannover</bdo> einen Sinn herzuleiten – rückwärts von nah – und dies wieder zurückgedreht – vorwärts nach weit.<br /> Und immerhin kann in Hannover <bdo dir="rtl">Anna</bdo> mit <bdo dir="rtl">Otto</bdo> an der Leine spazierengehen. Und das ist auch gut. </p>
Wörter, die von vorne nach hinten gelesen und von hinten nach vorne gelesen einen Sinn ergeben, werden Palindrome genannt.
Schon Kurt Schwitters hat durch die Blume festgestellt, daß Anna von vorne wie von hinten – Anna ist. Und das ist gut.
Auch Otto ist von vorne wie von hinten Otto, was Kurt aber nicht besonders interessiert hat, weil nunmal die Anna die Geliebte seiner siebenundzwanzig Sinne war und nicht der Otto.
Lage ist auch ein Palindrom, ist aber nicht von vorne wie von hinten Lage, ebensowenig wie jede Emma eine Amme ist. Schon von daher handelt es sich um etwas anderes als bei einem Reliefpfeiler oder gar einer Anna Blume, der zu Ehren es nicht nur ein Gedicht von Kurt Schwitters gibt, sondern in Hannover auch einen Brunnen von Max Sauk.
Hannover ist kein Palindrom, wie auch Kurt bereits anmerkte.
Allerdings vermochte er für Hannover
einen Sinn herzuleiten – rückwärts von nah – und dies
wieder zurückgedreht – vorwärts nach weit.
Und immerhin kann in Hannover
Anna mit Otto
an der Leine spazierengehen.
Und das ist auch gut.
Das Element bdi kennzeichnet eine eventuell andere, vom Inhalt abhängige Textrichtung.
Das ist zum Beispiel nützlich, wenn im normalen Textfluß von links nach rechts Namen in einer Schrift notiert werden, welche von rechts nach links geschrieben werden (arabisch, hebräisch etc), folgt darauf eine Zahl, kann es für Programme ohne bdi um Namen mit anderer Textrichtung zu Verwirrung kommen, ob die folgende Zahl vor oder nach dem Namen notiert werden soll.
Beispiel:
Textrichtung ist meist nicht egal, selbst bei <bdo dir="rtl">Anna</bdo> und <bdo dir="rtl">Otto</bdo> nicht.<br /> Und etwa bei <bdo dir="rtl"><bdi>ein</bdi></bdo> macht es einen großen Unterschied, ob vorwärts oder rückwärts: <bdo dir="ltr"><bdi>ein</bdi></bdo>, <bdi><bdo dir="rtl">ein</bdo></bdi>.
Textrichtung ist meist nicht egal,
selbst bei Anna und Otto nicht.
Und etwa bei ein
macht es einen großen Unterschied, ob vorwärts oder rückwärts:
ein, ein.
Mit dem Element wbr können in einer längeren Abfolge von Glyphen Positionen markiert werden, an denen bei Bedarf ein automatischer Zeilenumbruch an einer anderen Stelle als einem Leerzeichen erfolgen darf. Man beachte, daß für den Zweck der Silbentrennung bei langen Wörtern ein besonderes Zeichen zu setzen ist, das sogenannte weiche Trennzeichen, Unicode dezimal 173, notiert als ­ oder hexadezimal AD, notiert als ­.
Beispiel für die Verwendung von wbr:
Die EBI dieses Buches ist: [Wiki Book|>HTML5 für Anfänger|1]
Quelltext dazu:
Die <abbr title="Eigenständige Buchidentifikation">EBI</abbr> dieses Buches ist: [Wiki Book|>HTML5 für Anfänger|1]<wbr/>[2018-11-01T23:19:13Z]<wbr/>[20|8VF54-X314-p165-7q42]
Tradiertes Beispiel für weiche Trennzeichen hingegen: Donaudampfschiffahrtskaptiänsanwärterseminaranmeldeformulardruckvorlagengestaltungsausbildungsleiterassistentenkursregistrierungsformularvorlagengestaltungsanwärterausbildung
Quelltext dazu (damit das nicht so übersteht, sind weitere wirksame Zeichen eingearbeitet):
Donau­
Mit dem Element progress kann ein Fortschritt ausgezeichnet werden. Möglicher Inhalt ist Phraseninhalt ohne das Element progress. Das ist typisch ein meßbarer Vorgang mit definiertem Anfang und Ende. Der Anfang wird mit '0' identifiziert, das Ende mit dem Attribut max, dessen Wert eine Zahl größer als 0. Sofern das Attribut nicht angegeben ist, wird 1.0 angenommen.
Mittels des Attributes value wird der aktuelle Wert angegeben, also offenbar eine Zahl zwischen 0 und dem Wert von max.
Die Präsentation erfolgt typisch graphisch mit einem mehrfarbigem Balken. Für alte Programme sollte als Inhalt ein Alternativtext angegeben werden, also sinngemäß etwas wie: '42 von 137 Fragen beantwortet'.
Beispiel:
Fortschritt:
<p>Fortschritt: <progress id="p" max="100" value="20">20%</progress></p>
Das Element meter repräsentiert eine skalare Meßgröße, wobei der Wert auf einen endlichen Bereich begrenzt ist. Die Einheit wird nicht in den Attributen des Elementes angegeben, diese kann mit dem Attribut title notiert werden – oder im Freitext davor oder danach.
Die typische Präsentation ist graphisch, entsprechend sollte als Inhalt eine Textalternative angegeben werden.
Das Element hat einige Attribute, von denen value notiert werden muß.
Mit min wird der minimal mögliche Wert angegeben, mit max der maximal mögliche Wert.
Sofern nicht angegeben, ist min gleich 0.
Sofern nicht angegeben, ist max gleich 1.
Mit low kann ein Wert angegeben werden, bis zu dem ein niedriger Wert signalisiert wird.
Mit high kann ein Wert angegeben werden, ab dem ein hoher Wert signalisiert wird.
Mit optimum kann ein Wert angegeben werden, der optimal ist.
Alle Werte sollten natürlich im erlaubten Bereich sein und eine sinnvolle Reihenfolge haben.
Dabei kann optimum unterhalb von low liegen, um zu kennzeichnen, daß möglichst wenig gut ist.
Entsprechend kann mit optimum oberhalb von high gekennzeichnet werden, daß möglichst viel gut ist.
Es ist allerdings in der Empfehlung nicht explizit festgelegt, daß low, high, optimum bei der Präsentation besonders kenntlich gemacht werden müssen. Lediglich wenn value im unteren oder oberen Bereich liegt, kann eine andere Darstellung erwartet werden.
Der Wert value des Attributes ist die aktuelle Meßgröße, liegt also im Bereich zwischen Minimum und Maximum. Die Angabe des Attributes ist erforderlich.
Beispiele:
<meter value="0.75"><img alt="75%" src="graph75.png" /></meter>
Bei folgendem Beispiel ist im Text genau angeben, was gemessen wurde, das Element meter dient hier lediglich als Ergänzung, wobei die Präsentation suboptimal sein wird, wenn low, high und optimum von den Darstellungsprogrammen nicht auch immer gekennzeichnet werden:
Mit unserer Apparatur können wir zwischen -10mm und 10mm messen,
die Theorie behauptet, es soll 0 herauskommen,
wir haben eine Meßgenauigkeit von 1mm,
unserer Ergebnis: 0.5mm
<p> Mit unserer Apparatur können wir zwischen -10mm und 10mm messen, die Theorie behauptet, es soll 0 herauskommen, wir haben eine Meßgenauigkeit von 1mm, unserer Ergebnis: 0.5mm<br /> <meter min="-10" max="10" low="-1" high="1" optimum="0" value="0.5">0.5mm</meter> </p>
Plausibler ist die Verwendung eher, wenn es nicht so genau drauf ankommt:
Ladestand eines Akkumulators niedrig:
Ladestand eines Akkumulators, überladen:
Ladestand eines Akkumulators, mittlerer Bereich:
Ladestand eines Akkumulators, Optimum:
<p> Ladestand eines Akkumulators niedrig:<br /> <meter min="0" max="110" low="9" high="101" optimum="100" value="5">5%</meter> </p> <p> Ladestand eines Akkumulators, überladen:<br /> <meter min="0" max="110" low="9" high="101" optimum="100" value="102">102%</meter> </p> <p> Ladestand eines Akkumulators, mittlerer Bereich:<br /> <meter min="0" max="110" low="9" high="101" optimum="100" value="80">80%</meter> </p> <p> Ladestand eines Akkumulators, Optimum:<br /> <meter min="0" max="110" low="9" high="101" optimum="100" value="100">100%</meter> </p>
Ab und an wird es vorkommen, daß (X)HTML kein geeignetes Phrasenelement für die Auszeichnung von Inhalten bereitstellt. Dafür steht das generische Phrasenelement, span zur Verfügung. Vor der Verwendung sollte natürlich genau geprüft werden, ob nicht doch ein passenderes Element verfügbar ist.
Eine typische Anwendung ist die Kennzeichnung der Änderung der Sprache im laufenden Textfluß, etwa so:
<p> Darstellungsprogramme, auch <span xml:lang="en">browser</span> genannt, dienen unter anderem dazu, per <abbr xml:lang="en" title="HypterText Transfer Protocol">HTTP</abbr> vom <span xml:lang="en">server</span> gesendete Dokumente darzustellen oder eine Auswahl anzubieten, was mit den vom <span xml:lang="en">server</span> ausgelieferten Dokumenten geschehen soll, wenn der <span xml:lang="en">browser</span> das verwendete Format nicht selbst darstellen kann. </p>
Da hier HTTP sowieso schon in einem spezifischen Phrasenelement steht, wird die Sprachkennnung natürlich bei diesem notiert und nicht ein gesondertes span verwendet.
Eine typische andere Anwendung von span zusammen mit title ist die Bereitstellung von Erklärungen für einige Leser, die diese dann optional abrufen können, wenn sie sie brauchen. Es kann dann auch sinnvoll sein, zusätzlich mittels class einen Klassennamen zu vergeben, um solche Elemente zum Beispiel mit CSS dekorativ gesondert hervorzuheben, damit der Leser weiß, daß dort mehr Informationen verfügbar sind.
Entsprechend kann es auch sinnvoll sein, die Erweiterung RDFa zu verwenden, um dem span definierte semantische Bedeutung zu geben bei all jenen Phraseninhalten, deren Semantik gekennzeichnet werden soll, was allein mit (X)HTML aber nicht erreicht werden konnte.
<p> Zur <span class="Info" title="nicht resonante elektronische Anregung, verstimmt bezogen auf den Übergang beim Natrium von 3s_(1/2) nach 3p_(1/2)">verstimmten Anregung</span> des atomaren Stoßpaares NaAr wurde ein mit einem <span class="Info" title="gepulster Gasentladungslaser, hier XeCl, 308nm, Pulslänge etwa 15ns">Excimerlaser</span> gepumpter <span class="Info" title="Farbstofflaser, hier mit Quarz-Küvetten, Littrow-Anordnung und Blaze-Gitter">Dye-Laser</span> verwendet. Die Farbstoffe <span class="Info" title="Maximum bei 581nm, Bereich 569-608nm">Rhodamin 6G</span> und <span class="Info" title="Maximum bei 540nm, Bereich 522-600nm">Coumarin 153</span> decken den für das Experiment relevanten Bereich ab. </p>
Ein Problem ist hier bereits sichtbar, wenn man sich ansieht, wie die Atomzustände angegeben wurden.
Eigentlich müßte die Quantenzahl für den Drehimpuls tiefgestellt werden, also etwa so:
3p1/2
(3p<sub>1/2</sub>)
Dies geht aber innerhalb von Attributwerten nicht.
Eine andere Lösung könnte daher für kompliziertere Angaben sein, auf ein Glossar zu verweisen und dort die Erläuterungen als Fließtext anzugeben, was auch nützlich sein kann, wenn ansonsten der Wert von title noch länger wird oder die Erklärung überhaupt strukturiert werden soll.
Korrektes Zitieren ist wichtig, sonst kann schnell der Vorwurf eines Plagiates aufkommen oder der einer Urheberrechtsverletzung. Mittlerweile gibt es sogar spezielle Programme, mit welchen man nach derartigen Fehlern oder derartigem Fehlverhalten suchen lassen kann.
Das Urheberrecht erlaubt indes das Zitieren im eigenen, relevanten Kontext. Zur akkuraten Kennzeichnung als Zitat gibt es wiederum spezielle Elemente, anhand deren korrekter Verwendung auch Programme erkennen können, daß korrekt zitiert und nicht plagiiert wurde. Weil korrektes wörtliches Zitieren so wichtig und knifflig ist, stellt (X)HTML dafür drei besondere Elemente bereit, einschließlich eines Attributes zur Referenzierung von Quellen, die im internationalen Netze direkt verfügbar oder referenzierbar sind.
Technisch sind bei einem wörtlichen Zitat mindestens zwei Dinge zu realisieren.
Auf jeden Fall ist das wörtliche Zitat vom eigenen Inhalt zu separieren und als solches zu kennzeichnen.
Dazu stehen zwei Elemente bereit:
blockquote als Blockelement oder spezielles Gruppierungselement für Vollzitate oder eben ganze Textblöcke und q als Phrasenelement für Zitate im normalen Textfluß.
Dann ist auf jeden Fall ein Quellenachweis notwendig, welcher dem Zitierten eindeutig zugeordnet sein muß. In der Regel ist dies eine Referenz auf einen Text, aus dem zitiert wird. Bei persönlichen Mitteilungen oder mündlichen Überlieferungen oder aus sonstigen Gründen kann dies allerdings auch der Name der Person sein, die zitiert wird. Generell ist es üblich, beim Zitieren von Einzelpersonen oder kleineren Personengruppen, den Namen zusätzlich zur Referenz auf die Quelle aufzuführen. Für die Quellenangabe steht ein Element und ein Attribut zur Verfügung. Dafür kann mit der Erweiterung RDFa eine semantisch eindeutige Kennzeichnung erfolgen.
Ist die Quelle im internationalen Netze verfügbar, ist die eindeutig zuzuordnende Quellenangabe mit dem Attribut formal einfach zu realisieren; ist dies nicht der Fall, erweist sich die Lage als etwas komplizierter. Da praktisch (X)HTML allerdings keine Angaben dazu macht, wie genau die Quellenangabe mit dem Attribut dem Leser zugänglich zu machen ist, stellen gängige Darstellungsprogramme hierfür leider bis heute keine oder nur sehr versteckte Anzeigemöglichkeiten bereit. Da der Autor also keineswegs stets damit rechnen kann, daß die von (X)HTML vorgesehene Quellenangabe als Referenzierung eines anderen Dokumentes im Netz zugänglich ist, ist auch in diesem Falle die Situation komplizierter und muß hier auch genauer betrachtet werden.
Um Blockzitate auszuzeichnen, wird das Blockelement blockquote verwendet. Blockzitate in dem Sinne sind längere Zitate, die in Form eines Blockelementes klar von sonstigem Inhalt separiert sein sollen. Das Element deklariert seinen Inhalt als ein Zitat. Das Element kann notiert werden, wo fließender Inhalt erwartet wird. Im Sinne einer guten Textstruktur sollte es nur dort verwendet werden, wo alle Geschwisterelemente ebenfalls Blockelemente oder Gruppierungselemente sind.
In älteren, strikten Versionen von (X)HTML können beliebig viele Blockelemente enthalten sein, somit auch komplexe Zitate, die aus Tabellen und Aufzählungen bestehen. In HTML5 ist fließender Inhalt erlaubt. Im Sinne einer guten Textstruktur sollten sich hier Autoren wiederum entscheiden, ob als Kindelemente nur Blockelemente und Gruppierungselemente verwendet werden oder aber nur Phraseninhalt.
Die Quelle des Zitats kann in Form einer Referenzierung einer Adresse im internationalen Netze mit dem Attribut cite angegeben werden.
Beispiel:
<blockquote cite="http://de.wikipedia.org"> <p> Wikipedia ist ein Projekt zum Aufbau einer Enzyklopädie aus freien Inhalten, zu denen du sehr gern beitragen kannst. Seit März 2001 sind 2.937.016 Artikel in deutscher Sprache entstanden. </p> </blockquote>
Wikipedia ist ein Projekt zum Aufbau einer Enzyklopädie aus freien Inhalten, zu denen du sehr gern beitragen kannst. Seit März 2001 sind 2.937.016 Artikel in deutscher Sprache entstanden.
Zwar fällt der zitierte Text unter das Urheberrecht, da Wikipedia allerdings das Zitieren erlaubt, wenn die entsprechende Seite als Quelle angegeben ist, ist das Zitat so formal in Ordnung. Da sich allerdings die Zahl der Artikel laufend ändern wird, wäre es sinnvoll, im Begleittext das Datum des Aufrufs der Seite mit anzugeben.
Weil, wie bereits beschrieben, Darstellungsprogramme das Attribut cite gar nicht oder nicht naheliegend einfach für den Leser zugänglich machen – und Wikipedia dies zudem in den Nutzungsbedingungen auch bevorzugt – empfiehlt sich zusätzlich im Begleittext die Referenz nochmal mit einem Element a zu wiederholen.
Um Zitate im normalen Textfluß, also als Phraseninhalt auszuzeichnen, wird das Element q verwendet. q ist ein Phrasenelement und als Inhalt ist Phraseninhalt erlaubt.
Wie bei blockquote kann mit dem Attribut cite die Quelle des Zitats angegeben werden. Hinsichtlich der Praktikabilität dieses Vorgehens gelten die gleichen Anmerkungen wie für cite von blockquote.
Beispiel:
<p>Wikipedia ist eine Enzyklopädie im Netz, zu welcher <q cite="http://de.wikipedia.org"> du sehr gern beitragen kannst</q>.<br /> Somit kann jeder bei der Verbesserung und Vervollständigung dieses Projektes helfen, aber auch kontraproduktiv die Bemühungen seiner Mitmenschen durch Vandalismus und Fehlinformation erschweren oder verfälschen.</p>
Wikipedia ist eine Enzyklopädie im Netz,
zu welcher
du sehr gern beitragen kannst
.
Somit kann jeder bei der Verbesserung und Vervollständigung
dieses Projektes helfen, aber auch kontraproduktiv die
Bemühungen seiner Mitmenschen durch Vandalismus und
Fehlinformation erschweren oder verfälschen.
Das Phrasenelement cite dient dazu, eine Quellenangabe vorzunehmen. Der Inhalt ist Phraseninhalt, eben die benötigte Quellenangabe, gegebenenfalls einschließlich Referenzierung einer Quelle im Netz.
Beispiel:
<p><cite id="wiki"><a href="http://de.wikipedia.org">Wikipedia</a> (Abgerufen <time>2011-11-03</time>)</cite> ist eine Enzyklopädie im Netz, zu welcher <q cite="#wiki">du sehr gern beitragen kannst</q>.<br /> Somit kann jeder bei der Verbesserung und Vervollständigung dieses Projektes helfen, aber auch kontraproduktiv die Bemühungen seiner Mitmenschen durch Vandalismus und Fehlinformation erschweren oder verfälschen.</p>
Wikipedia
(Abgerufen )
ist eine Enzyklopädie im Netz, zu welcher
du sehr gern beitragen kannst
.
Somit kann jeder bei der Verbesserung und Vervollständigung
dieses Projektes helfen, aber auch kontraproduktiv die
Bemühungen seiner Mitmenschen durch Vandalismus und Fehlinformation
erschweren oder verfälschen.
cite kann auch ohne Zitat zur Quellenangabe verwendet werden:
<p>Unsere Ergebnisse haben wir veröffentlicht in <cite>Physical Review Letters, 92 (2004) 033201-1; doi:10.1103/PhysRevLett.92.033201</cite></p>
Unsere Ergebnisse haben wir veröffentlicht in Physical Review Letters, 92 (2004) 033201-1; doi:10.1103/PhysRevLett.92.033201
In diesem Falle ist einfach der Elementinhalt selbst eine Quellenangabe. Hier gibt es sogar gleich mehrere Möglichkeiten, die Quelle zu finden.
Nun wird manchmal auch ein Spruch oder ein Zitat einer Persönlichkeit als Vorwort, Motto oder Epigraph verwendet. Wenn der zitierende Autor solch ein geflügeltes/gefiedertes Wort ohnehin im Kopf hat oder aus sonstigen Gründen kein Werk als Quelle angeben kann, ist es durchaus üblich, auch nur den Namen der Persönlichkeit zu notieren:
<blockquote cite="#Heraklit"> <p>Alles ist in Bewegung und nichts bleibt stehen.</p> </blockquote> <p><cite id="Heraklit">Heraklit von Ephesus</cite></p>
Alles ist in Bewegung und nichts bleibt stehen.
Heraklit von Ephesus
Daß es sich um eine Übersetzung handelt, ist implizit klar und wird auch nicht besonders erwähnt. Der Zitierte ist seit langer Zeit tot, von daher gibt es auch keine Probleme mit dem Urheberrecht.
Bei umfangreicheren Übersetzungen hat allerdings die Person, die übersetzt hat, das Urheberrecht an der Übersetzung. Die Übersetzung ist zwar bezüglich des Originals ein abhängiges Werk, die Urheberschaft liegt aber trotzdem bei der Person, die übersetzt hat. In solchen Fällen ist also bei der Quellenangabe der Originalautor zu berücksichtigen, ebenso der Übersetzer.
Bei indirektem, nicht wörtlichem Zitieren ist eine Quellenangabe ebenfalls sinnvoll und wünschenswert. Der Vorteil einer eigenen Wortwahl gegenüber einem Zitat besteht auch darin, daß es keinen Konflikt mit dem Urheberrecht gibt und man selbst den für das eigene Werk relevanten Aspekt herausstellen kann. Die Quellenangabe hat hier zum einen den Zweck, die Leistung des Urhebers zu respektieren, aber auch, um kenntlich zu machen, daß die Thematik nur angerissen wurde und für vertiefende Studien ins Original gesehen werden sollte. Hier kann zur Quellenangabe prinzipiell auch cite verwendet werden, allerdings gibt es da keinen Mechanismus einer formal eindeutigen Zuordnung innerhalb von (X)HTML. Dies könnte wiederum mit RDFa erfolgen. Bei Menschen als Lesern ergibt sich der Zusammenhang meist von allein:
<p>Wikipedia ist eine Enzyklopädie im Netz, bei der ein jeder mitmachen kann (<cite><a href="http://de.wikipedia.org">Wikipedia</a>, abgerufen <time>2024-08-25</time></cite>). Somit kann jeder bei der Verbesserung und Vervollständigung dieses Projektes helfen, aber auch kontraproduktiv die Bemühungen seiner Mitmenschen durch Vandalismus und Fehlinformation erschweren oder verfälschen.</p>
Wikipedia ist eine Enzyklopädie im Netz, bei der ein jeder mitmachen kann (Wikipedia, abgerufen ). Somit kann jeder bei der Verbesserung und Vervollständigung dieses Projektes helfen, aber auch kontraproduktiv die Bemühungen seiner Mitmenschen durch Vandalismus und Fehlinformation erschweren oder verfälschen.
Beispiel ohne Verweis:
<p>Atomare Stoßprozesse können durch polarisiertes Licht gezielt manipuliert werden (<cite>T. Schmidt, C. Figl, A. Grimpe, J. Grosser, O. Hoffmann, F. Rebentrost; <span xml:lang="en">"Control of Atomic Collisions by Laser Polarization"; Physical Review Letters, 92 (2004) 033201-1; doi:10.1103/PhysRevLett.92.033201</span></cite>). </p>
Atomare Stoßprozesse können durch polarisiertes Licht gezielt manipuliert werden (T. Schmidt, C. Figl, A. Grimpe, J. Grosser, O. Hoffmann, F. Rebentrost; "Control of Atomic Collisions by Laser Polarization"; Physical Review Letters, 92 (2004) 033201-1; doi:10.1103/PhysRevLett.92.033201).
Hier kann der Leser sowohl über die Zeitschrift, als auch direkt über die DOI zum zitierten Artikel gelangen. In diesem Falle gibt es zu dem Artikel auch eine Adresse im Netz, die man sicher auch angeben würde. Die notierte Variante ist hier nur als Beispiel gemeint. Bei Büchern eignet sich auch gut die ISBN, um das Auffinden zu erleichtern.
Schlecht geeignet ist hingegen als Quellenangabe ein Verweis auf eine Verkaufsseite eines Händlers. Dies ist einfach Reklame für den Händler und das Buch und ist also solche zu kennzeichnen, nicht als Quellenangabe. Für Reklame eignet sich (zusätzlich zur Quellenangabe) das Element aside.
Alternativ zur Angabe der Quelle direkt vor oder nach dem Zitat ist es auch üblich, Quellenangaben am Ende eines Dokumentes in einer Liste zu sammeln. Listen werden im Detail in einem anderen Kapitel erläutert, entsprechend die Verweisfunktionalität.
Beispiel:
<section>… Text mit weiteren Zitaten … </section> <section> <p>Wikipedia ist eine Enzyklopädie im internationalen Netzwerk, bei der ein jeder mitmachen kann (<a href="#wiki">[wiki]</a>). Somit kann jeder bei der Verbesserung und Vervollständigung dieses Projektes helfen, aber auch kontraproduktiv die Bemühungen seiner Mitmenschen durch Vandalismus und Fehlinformation erschweren oder verfälschen.</p> </section> <section> <div>… Text mit weiteren Zitaten … </div> </section> <section> <h2>Quellenangaben</h2> <ul> <li> … andere Quelle … </li> <li>[wiki] <cite id="wiki"><a href="http://de.wikipedia.org">Wikipedia</a>, abgerufen 2011-11-03</cite></li> <li> … andere Quelle … </li> </ul> </section>
Dabei ist natürlich wie immer bei der Verwendung von Fragmentidentifizierern darauf zu achten, daß diese für das gesamte Dokument eindeutig sind, bei dem Beispiel darf es also in dem Dokument nur exakt ein Element geben, welches ein Attribut id mit dem Wert "wiki" hat.
Entsprechend kann natürlich auch bei wörtlichen Zitaten vorgegangen werden, wobei dort weiterhin die eindeutige Zuordnung mit cite und cite möglich ist.
Bei indirekten Zitaten kann statt das Element cite zu verwenden, dies auch weggelassen werden und stattdessen der Fragmentidentifizierer im Element li notiert werden. Kommt beides in einer Liste von Quellenangabe vor, empfiehlt sich allerdings wegen der Einheitlichkeit eine durchgehende Verwendung von cite.
Sind hingegen von gedruckten Büchern oder Artikeln keine URIs bekannt, sondern zum Beispiel nur eine DOI oder ISBN, so eignen sich solche Listen ebenfalls gut für derartige Angaben, während es eher unüblich ist, etwa eine DOI direkt als (Pseudo-)Protokoll aufzufassen und dies direkt als URI-Konstruktion im Attribut cite zu notieren. Es gibt allerdings mittlerweile Dienste, bei denen man eine DOI oder ISBN als URI aufrufen kann. Das Dokument, welches dann unter einer so erzeugten URI zu finden ist, enthält entweder Informationen über das Werk oder bietet Zugang zu dem Werk selbst.
Statt die Quellen am Ende eines jeden Dokumentes zu sammeln, wird bei größeren Projekten, welche aus mehreren Dokumenten bestehen, auch gerne in einem gesonderten Dokument ein Quellenverzeichnis mit allen Quellen angelegt. Entsprechend ist dann nicht nur auf den Fragmentidentifizierer zu verweisen, sondern auf die Seite mit dem Quellenverzeichnis, an welche dann hinter dem # wie gewöhnlich der Fragmentidentifizierer angehängt wird, etwa so:
Im Text:
<p>Atomare Stoßprozesse können durch polarisiertes Licht gezielt manipuliert werden <a href="Quellenverzeichnis.xhtml#Control2004">[Control2004]</a>. </p>
Im Dokument Quellenverzeichnis.xhtml:
<ul> <li> … andere Quelle … </li> <li>[Control2004] <cite id="Control2004"> T. Schmidt, C. Figl, A. Grimpe, J. Grosser, O. Hoffmann, F. Rebentrost; <span xml:lang="en"><em> Control of Atomic Collisions by Laser Polarization</em>; Physical Review Letters, 92 (2004) 033201-1; doi:10.1103/PhysRevLett.92.033201</span></cite></li> <li> … andere Quelle … </li> </ul>
Es gibt verschiedene Zitierstile, insbesondere was die Reihenfolge der Angaben im Quellenverzeichnis anbelangt. Obiges Vorgehen mit einem im Textzusammenhang aussagekräftigen Kürzel wie [Control2004] hat mehrere Vorteile: Das Publikum kann die Quellenangabe besser zuordnen. In dem Falle ist bereits im laufenden Text anhand des Kürzels für das Publikum erkennbar, aus welchem Jahr die Quelle stammt. Gegenüber einer Durchnumerierung ist keine weitere Arbeit erforderlich, wenn ein weiterer Verweis zu einer Quellenangabe nachträglich ergänzt wird.
Ansonsten ist es sinnvoll zu gucken, welche Stile im eigenen (wissenschaftlichen) Umfeld üblich sind und welche davon den eigenen Ansprüchen genügen.
Statt bei Änderungen die alte Lesart des Textes durch die neue einfach zu ersetzen, kann es für den Leser manchmal auch sinnvoll sein, nach wie vor zu erkennen, was geändert wurde und gegebenenfalls Informationen darüber zu erhalten, warum. Das kann bei Gesetzestexten, Regelwerken, Allgemeinen Geschäftsbedingungen der Fall sein, wenn der Leser der Änderung zum Beispiel zustimmen soll oder sie ablehnen oder zumindest zur Kenntnis nehmen.
Die Elemente del und ins sind für diesen Zweck gedacht. Sie können sowohl als Phrasenelemente als auch als Blockelemente verwendet werden. Sie können laufenden Inhalt enthalten, also auch Blockelemente, nicht nur Phraseninhalt. Damit nehmen die beiden Elemente hinsichtlich der Struktur eine Sonderstellung ein.
Dies sind in HTML5 sogenannte transparente Elemente. Dies bedeutet, in dem Element ist erlaubt, was im Elternelement erlaubt ist. Umgedreht bedeutet dies nicht, daß man die Elemente überall notieren dürfte, also etwa nicht als Kindelemente von ul, ol, dl. table, welche ein besonderes Inhaltsmodell haben. Die Elemente können notiert werden, wo fließender Inhalt notiert werden darf. Das schränkt komplexere Nutzungsmöglichkeiten etwas ein, gegebenenfalls muß also etwas mehr gestrichen und anschließend teilweise wieder identisch ergänzt werden.
Mittels del wird eine Passage des Textes als gestrichen markiert. Mittels ins wird eine Passage als nachträglich eingefügt markiert.
Spezifisch für die beiden Elemente sind die Attribute cite und datetime.
Der Wert von datetime ist das Datum der Änderung. Die Zeitangabe wird im internationalen Datumsformat notiert.
Der Wert von cite ist die URI/IRI zu einem Dokument, welches die Änderung oder den Grund der Änderung genauer erklärt. Bei der Änderung eines Gesetzes könnte dies etwa auf ein Dokument verweisen, in welchem die Entscheidung zur Gesetzesänderung protokolliert ist.
Beispiel:
<h3>Wir schreiben, was Sie brauchen</h3> <p> <del datetime="2011-08-16" cite="http://example.org/Aktuelles/ZitatSkandal.xhtml">Dr. mult.</del> Erwin Schön und <del datetime="2011-09-02" cite="http://example.org/Aktuelles/ZitatSkandal.xhtml">Dr. phil.</del> Barbara Rupp stehen für Sie als <span xml:lang="en">ghostwriter</span> für jegliche Arten von Doktorarbeiten und sonstigen wissenschaftlich anmutenden Texten zur Verfügung. Melden Sie sich einfach mit ihren Vorstellungen. Innerhalb von 24 Stunden senden wir Ihnen einen Kostenvoranschlag. </p> <ins datetime="2011-09-16" cite="http://example.org/Aktuelles/Vorstandssitzung2011-09.xhtml"> <p> Theo Guterzwerg ist kommissarischer Leiter der Abteilung <span xml:lang="en">ghostwriting</span> und zuständig für alle Fragen der Qualitätssicherung dieser Abteilung.<br /> Wir testen mit fortgeschrittenen Programmen jeglichen Text gegen Plagiatsvorwürfe. </p> </ins>
Dr. mult.
Erwin Schön und
Dr. phil.
Barbara Rupp
stehen für Sie als ghostwriter für jegliche Arten von
Doktorarbeiten und sonstigen wissenschaftlich anmutenden Texten zur Verfügung.
Melden Sie sich einfach mit ihren Vorstellungen.
Innerhalb von 24 Stunden senden wir Ihnen einen Kostenvoranschlag.
Theo Guterzwerg ist kommissarischer
Leiter der Abteilung ghostwriting
und zuständig für alle Fragen der Qualitätssicherung dieser Abteilung.
Wir testen mit fortgeschrittenen Programmen jeglichen Text gegen Plagiatsvorwürfe.
Bei (X)HTML kann nicht nur Text zur Anzeige gebracht werden. Für viele Menschen mit stark visuellen Präferenzen kann es eine Verständnishilfe sein, zusätzlich oder alternativ zum Text eine graphische Repräsentation eines Sinnzusammenhanges angeboten zu bekommen. Dann kann es auch für manche Menschen die Ergonomie oder das Wohlbefinden bei der Nutzung erhöhen, wenn die Information graphisch dekoriert wird. Entsprechend ist es für einige Menschen auch hilfreich, zum Beispiel eine hörbare Alternative zum Text verfügbar zu haben oder den Text mit zusätzlichen Audio-Dateien als Zusatzinformationen zu rezipieren. Auch Videos sind im Netz weit verbreitet. Andere Medientypen sind gleichfalls nicht ausgeschlossen.
Daher bietet (X)HTML einige Möglichkeiten, andere Medien nicht nur per Verweis zu referenzieren, sondern direkt in die Darstellung des aktuellen Dokumentes einzubinden, entweder alternativ zu anderen Inhalten oder zusätzlich dazu.
Dient insbesondere eine Graphik allerdings ausschließlich dem Layout der Seite oder dem Design, so ist dies nicht Aufgabe von (X)HTML, sondern wird nach der Erstellung des Dokumentes mit einer Stilvorlagensprache wie CSS ergänzt.
Besonders bei Pixelgraphik, Videos und Audios können die Dateien allerdings relativ groß werden, weswegen derart automatisch eingebettet angezeigte Inhalte direkten Einfluß darauf haben, wie lange es dauert, bis ein Dokument direkt und komplett angezeigt wird. Diese Ladezeit (und die damit verbundenen Kosten) hängt wiederum davon ab, was für eine Netzanbindung der Leser verwendet. Für Autoren gilt daher im Interesse der Nutzer das Gebot der Effizienz. Größere Dateien können zum Beispiel über Verweise und kleine Vorschaubilder mit dem Hauptinhalt verbunden werden.
Bei Audios und Videos insbesondere ist es ferner aus Lizenzgründen nicht ganz so einfach, ein Format zu finden, welches bei allen gängigen Darstellungsprogrammen interpretiert wird. Die Auswahl ist indes bei funcity ohnehin schon aus Platzgründen stark eingeschränkt. Videos gehen lokal gar nicht, müßten von Auswärts eingebunden werden – aus Gründen der Transparenz sollte stattdessen bloß per Element a auf das externe Projekt verwiesen werden, welche das Video beinhaltet. Bei Audio ist wiederum von den in funcity verfügbaren Formaten bloß MP3 eine sinnvolle Wahl. Dies erübrigt es hier, die Möglichkeiten der Sprache zu betrachten, wie Alternativen zur automatischen Auswahl durch das Präsentationsprogramm angeboten werden können. Dieser Abschnitt ist also speziell auf funcity zugeschnitten, stark vereinfacht.
HTML5 bietet einige spezielle einbettende Elemente an. Leider wurde bei der Entwicklung von HTML5 das für Multimedia bereits sehr gut durchdachte SMIL ignoriert, im Grunde das Rad neu erfunden, allerdings eben nicht so ganz rund und weniger flexibel als das Original. Von daher müssen sich Autoren und Publikum mit diesem reduzierten Angebot abfinden, welches allerdings schon deutlich mehr bietet als frühere Versionen von (X)HTML.
Das Element img dient dem Einbinden von graphischen Inhalten wie Bildern. Es kann als Phrasenelement im normalen Textfluß verwendet werden. Wenn es eine eigenständige Struktur darstellen soll, ist diese Struktur hingegen mit einem Blockelement zu realisieren, in welchem das Element img notiert wird. Typisch ist dies ein Element figure.
Erforderlich sind die Attribute src und alt. Optional sind die Attribute srcset, sizes, longdesc, width, height, crossorigin, referrerpolicy. Erläutert werden lediglich die für funcity relevanten.
Bei einer verweissensitiven Graphik kommen die Attribute usemap und ismap noch hinzu, welche im Kapitel über verweissensitive Graphik erläutert werden und ohne diese Funktionalität ohne Belang sind.
Mit dem erforderlichen Attribut src wird die Quelle (englisch source) des Bildes angegeben und zwar in Form einer URI/IRI entsprechend dem Wert von href des Elementes a, also auch je nach Bedarf relativ oder absolut. Die ausschließliche Verwendung eines Fragmentidentifizierers wird hingegen bei (X)HTML allein selten sinnvoll sein, weil (X)HTML selbst ja keine graphischen Inhalte bereitstellt.
Ob ein Fragmentidentifizierer zusammen mit einer URI/IRI sinnvoll ist, hängt vom referenzierten Format ab und ist dort definiert. Dies kann zum Beispiel bei der Referenzierung von SVG-Dateien hilfreich sein. Weil auch SVG-Fragmente im (X)HTML-Dokument notiert werden können, ist bei einer solchen Kombination die Referenzierung eines Fragmentidentifizierers möglich. Weil in SVG gleichfalls Fragmente oder Ansichten referenziert werden können, ist auch eine Kombination von URI/IRI mit anschließendem Fragmentidentifizierer plausibel.
Detailliertere Informationen zu URIs/IRIs sind beim Attribut href des Elementes a beschrieben und gelten entsprechend für src. Der referenzierte Inhalt ist ein Bild, welches nicht interaktiv ist und keine Skripte und keine Einteilung in mehrere Seiten enthält.
Zu beachten: Das Darstellungsprogramm wird das referenzierte Dokument fast immer ohne vorherige Nachfrage beim Nutzer von der angegebenen Quelle zu laden versuchen.
Bei der Referenzierung einer externen Quelle mittels absoluter URI/IRI gelangt so Information ohne Wissen des Nutzers auf den externen Dienstrechner.
Hinsichtlich des Datenschutzes und der Privatsphäre des Nutzers ist dies bedenklich, folglich also besser zu vermeiden.
Ist trotzdem eine externe Referenzierung erwünscht, ist im Sinne des Datenschutzes zuvor besser ein von dem Sachverhalt nicht betroffenes Dokument vorzuschalten, in welchem der Nutzer über das potentielle Datenleck informiert wird, sich damit also einverstanden erklärt, wenn das betreffende Dokument mit der externen Bildreferenz aufgerufen wird.
Sofern das überhaupt getan wird, sollte den Nutzern eine lokale Alternative bereitgestellt werden oder jedenfalls eine Variante des Projektes, welche auf derartige externen Quellen verzichtet, Nutzer also frei entscheiden können.
Üblich sind etwa derartige externe Bilder als sogenannte Zählpixel, Anmeldungs- oder Abstimmungsknöpfe, beliebt auch in Zusammenhang mit Anbietern wie Facebook oder Google, um Informationen über Personen zu sammeln und kommerziell zu nutzen.
Mittels alt wird ein Alternativtext angegeben. Das ist so zu verstehen, daß dieser Text und das per src referenzierte Dokument jeweils alternativ zueinander verwendet werden können, je nach Präferenz des jeweiligen Lesers. Kann ein Leser etwa aufgrund von Sehschwäche oder Erblindung oder auch nur wegen Beschäftigung mit anderen Dingen keine graphische Repräsentation wahrnehmen, so ersetzt der Alternativtext das Bild, weswegen dieser entsprechend zu formulieren ist. Im normalen Textfluß ersetzt der Alternativtext das Bild also so, daß der Textfluß nicht unterbrochen wird. Der Wert ist also einfacher, kurzer Text. Für epische Erklärungen, die nicht in den Textfluß passen, wird dann zusätzlich das optionale Attribut longdesc notiert, siehe dort.
In diesem Sinne sind rein dekorative Bilder, die inhaltlich irrelevant sind, mit alt="" zu versehen, in der alternativen Darstellung werden die dann einfach weggelassen. Umgedreht sind Bilder mit alt="" damit durch den Autor als ohne relevante Information gekennzeichnet, somit sind diese rein dekorativ.
Jedenfalls wird generell als Alternative notiert, was das Bild in Kontext repräsentiert, nicht notwendig, was darauf im Detail dargestellt ist, wenn dies zum Verständnis im Textfluß belanglos ist.
Da der Alternativtext nur als Attributwert notiert werden kann und es mit img auch nicht möglich ist, verschiedene Formate alternativ zueinander anzubieten, kann das Konzept von img als sehr eingeschränkt betrachtet werden. Ein allgemeinerer Ansatz ist mit dem Element object möglich, welches stattdessen verwendet werden kann, besonders dann, wenn Alternativen angeboten werden sollen, die über die Möglichkeiten von img hinausgehen.
Eine weitere Möglichkeit stellt das in HTML5 neue Elemet picture dar, mit welchem Bilder in verschiedenen Formaten alternativ zur Auswahl angeboten werden können, allerdings auch keine weiteren Möglichkeiten von Alternative in einer anderen Präsentationsform.
Beispiel:
<p>Dem Gerücht nach glaubten viele Menschen zu früheren Zeiten, die Erde sei eine <img src="ErdeAlsScheibe.svg" alt="Scheibe" />. Durch einfache Messungen und Experimente verbreitete sich dann jedoch die Überzeugung, die Erde sei eine <img src="ErdeAlsKugel.svg" alt="Kugel" />. Aufgrund der Rotation der Erde um die eigene Achse ergaben genauere Messungen jedoch, daß es sich bei der Erde eher um einen <img src="ErdeAlsRotationsellipsoid.svg" alt="Rotationsellipsoid" /> handelt. Bei sehr schneller Drehung würde man wieder nahe an die Idee einer Scheibe kommen, bei der man am Rande vermutlich wegfliegen würde. Genauere Untersuchungen der Massenverteilung des Erdkörpers mit Satelliten haben eine weitere Verfeinerung der Erkenntnis ergeben, demnach ist die Erde eher <img src="ErdeAlsKartoffel.svg" alt="kartoffelig" />, also von unregelmäßiger Form. </p>
Oft findet sich auch ein Szenario ähnlich dem folgenden:
Bertine hat einen altruistischen Tag und möchte die Menschheit mit ihren leckeren Rezepten von Gebäck beglücken, welches nicht nur Spuren von Nüssen enthält.
Damit das nicht zu trocken gerät – also die Seite, bezüglich des Gebäcks finden sich Hinweise im Rezept – ist die Idee, diese mit einem graphisch gestalteten Titel oder Kopfbereich auszustatten.
Bertine kann da nun verschiedene Konzepte verfolgen.
Zum einen kann sie die Graphiken rein dekorativ zusätzlich zum Texttitel verwenden:
<h1><img src="nuesse.jpg" alt=""/> Bertines Nußecke <img src="florentiner.jpg" alt=""/></h1>
Als Logo oder Erkennungsmerkmal (neudenglisch auch: "Allein Stellung's Merk mal" ;o) kann sie aber auch gezielt eine Graphik verwenden wollen, die sie selbst in einer Nußeckenverkleidung zeigt, um sich auf dem Markt der Nußeckenrezeptanbieter zu etablieren oder den eigenen Marktanteil auszubauen, sozusagen die Konkurrenz auszustechen wie ein Plätzchen:
<h1><img src="knusbertine.jpg" alt="Willst Du Nußgebäck backen, gucke in"/> Bertines Nußecke <img src="knusbertine.jpg" alt="nach den köstlichsten Rezepten!"/></h1>
Dies kann den Vorteil haben, daß Menschen, die über Suchmaschinen mit entsprechenden Suchwörtern nach irgendwelchen Nußgebäckrezepten gucken, ziemlich weit oben in der Ergebnisliste auf Bertines Seite stoßen, während zum Beispiel ihr Konkurrent Horst lediglich 'Horsts Nüsse' angegeben hat und dazu eine aufwendige Graphik, welche er von einem Kumpel mit einem kommerziellen Graphikprogramm extra hat erstellen lassen, deren Inhalt aber von Suchmaschinen ignoriert wird, weswegen er gar nicht in der Ergebnisliste auftaucht und sich nur in sehr engem Kreis an seinen Nußgebäckrezepten erfreuen kann. (Der enge Freundeskreis besteht zudem aus neuen Freunden aus dem Netz, deren spezifische Präferenzen Horst erst später offenbar werden …)
Bertine als künstlerische Offenbarung der Nußgebäck-Bäckerei mag allerdings auch den kompletten Namen ihres Projektes mit Mandeln etc gebacken bekommen haben. Davon hat sie ein schönes Bild angefertigt, welches als Dokumenttitel dienen soll:
<h1><img src="knusbertinesNussecken.jpg" alt="Bertines Nußecken"/></h1>
oder entsprechend
<h1><img src="knusbertinesnussecken.jpg" alt="Willst Du Nußgebäck backen, gucke in Bertines Nußecke nach den köstlichsten Rezepten!"/></h1>
Oftmals will ein Autor Bilder nicht direkt in den normalen Textfluß integrieren. Als eigenständige Struktur ergibt es hingegen meist eher Sinn, auch den Alternativtext eigenständiger zu fassen:
<figure> <img src="timmulrichsaugenlid.png" alt="Portrait von Timm Ulrichs mit geschlossenem rechten Augenlid, auf welchem die Tätowierung 'The End' zu lesen ist." /> <ficgaption>Timm Ulrichs: 'The End'</figcaption> </figure>
Redundant sind hingegen Hinweise auf Größe, Name oder sonstige technische Eigenschaften der referenzierten Datei, weil dies in der Regel keine Textalternative zum Bild darstellt, es sei denn, diese Informationen sind gerade zentraler Bestandteil der Bildinformation. Somit wäre für obiges Beispiel alt="Bild timmulrichsaugenlid.png, 600x400, 50kB" also keine sinnvolle Alternative, wenn nicht der Text "Bild timmulrichsaugenlid.png, 600x400, 50kB" zentraler Inhalt der graphischen Repräsentation des Bildes ist, was meistens nicht der Fall sein wird. Daß es sich um ein Bild handelt, ist übrigens bereits durch den Namen des Elementes img klar, sollte also nicht im Alternativtext auftreten.
Problematisch wird es bei dem Alternativtext, wenn eine Textbeschreibung eine in dem Zusammenhang ungewünschte Interpretation des Bildinhaltes implizieren würde. Dies wäre etwa bei einem Rohrschachtest der Fall oder vielleicht auch bei einem Kunstwerk, Gemälde oder einer Abbildung desselben, welches dem Leser zur eigenen Interpretation angeboten werden soll. In dem Falle kann es sinnvoll sein, als Textrepräsentation Angaben zum Titel des Bildes und zum Künstler zu machen, also Informationen, die es dem Leser ermöglichen, im Bedarfsfalle anderweitig verfügbare Informationen über das Dargestellte zu suchen.
Beispiel:
<figure> <img src="monalisa.jpg" alt="Gemälde 'Mona Lisa' von Leonardo da Vinci, entstanden um 1503." /> </figure>
Dies kann auch allgemeiner dann ein hilfreiches Vorgehen sein, wenn das Bild zusätzlich zu vorhandenem Text angeboten wird, der das Bild ausführlich diskutiert und interpretiert – ohnehin vorhandener Text oder Offensichtliches sollte also nicht wiederholt werden. Wenn das ganze Dokument sich also mit der Mona Lisa beschäftigt und Angaben zum Künstler und Inhalt ohnehin bereits vorhanden sind, ist es zweifelsohne in Ordnung, nur alt="Gemälde 'Mona Lisa'" zu notieren. In diesem Falle handelt es sich wirklich um das Bild eines Gemäldes, nicht um das Gemälde selbst, daher ist der Begriff 'Gemälde' eine relevante Information.
In einer Bildergalerie über Schmetterlinge zum Beispiel ist es nicht unbedingt notwendig, implizit ohnehin eindeutige Zusammenhänge zu erläutern.
Wenn es etwa im kompletten Dokument nur um Schmetterlinge geht, ist dem Leser ziemlich klar, was dargestellt ist, wenn nur notiert wird: alt="Kleiner Fuchs".
Ist allerdings eine spezifische Relation oder Aktion dargestellt, kann es nützlich sein, diese zu erwähnen: alt="saugender Kleiner Fuchs auf Sonnenhut bei Sonnenuntergang".
Beschäftigt sich die Seite hingegen auch mit anderen Tieren, kann es sinnvoller sein, alt="Kleiner Fuchs (Schmetterling)" zu notieren, wenn die Tierart nicht ohnehin aus dem umgebenden Textfluß eindeutig hervorgeht.
Eine weitere Variante ergibt sich etwa bei einem Künstler, welcher (abstrakte) eigene Bilder in einer Galerie ausstellt, welche die Werke ihm eindeutig zuordnet und nach Möglichkeit auch etwas begleitenden Text enthält. Er mag den Bildern keine Namen geben, die die Interpretation einschränken könnten, daher verwendet er ein ebenfalls abstraktes System zur Benennung, etwa mit Schaffensperiode, Datum und Variante. Der Begleittext der Galerie erläutert auch grob das Konzept der Titelfindung.
Der Titel des Bildes sei also zum Beispiel 'PRW 2009-07-13.V17':
<figure> <img src="prw_b2009-07-13v17.svg" alt="PRW 2009-07-13.V17" /> <figcaption>Ein Werk aus der Schaffensperiode PRW: 2009-07-13.V17</figcaption> </figure>
Als multimedialer Künstler wird er vermutlich ohnehin innerhalb der SVG-Datei eine ausführliche Textalternative notiert haben, die einem eigenständigen Kunstwerk gleichkommt und als Textvariante zusätzlich zum graphischen Werk verstanden werden kann. Wenn ein Format wie SVG also ohnehin eine eigene Möglichkeit für Textalternativen bietet und diese genutzt wird, ist eine Wiederholung auch redundant und ein minimalistischer Wert für alt kann ausreichen.
Ist die Beschriftung in figcaption bereits gut als Alternativtext geeignet, kann ferner das Attribut alt auch leer sein, eine Wiederholung der Textalternative darin ist also nicht notwendig oder gar sinnvoll. Das umgebende figure stellt bereits eindeutig einen Zusammenhang zwischen Bild und Beschriftung her.
Beispiel als Separator:
<p class="menue">Verfügbare Inhalte: <a href="dagasu.xhtml">Daga su</a><img src="s.png" alt="," /> <a href="urdufat,xhtml">urdu FaT</a><img src="s.png" alt="," /> <a href="bungabunga.xhtml">Bunga Bunga</a><img src="s.png" alt="," /> <a href="besige.xhtml">Besige</a> </p>
Das Trennzeichen wird hier mit einer einfachen PNG-Datei realisiert oder eben alternativ mit einem Komma. Vertikale Striche |, Sterne * werden auch öfter verwendet. Leider hat (X)HTML kein eigenes Element für solch einen inzeiligen Separator, was beim Vorlesen solcher Strukturen suboptimal sein kann, daher sind kurze Satzzeichen für Separatoren eine auch für Zuhörer erträgliche Alternative. Noch schlimmer kann es allerdings für den Nutzer kommen, wenn es aufgrund fehlender Separatoren unklar wird, wo der eine Verweis aufhört und der andere beginnt.
Während es zwischen Bild und Wert von alt einen alternativen Bezug gibt, das eine also nur dargestellt wird, wenn das andere nicht dargestellt wird, kann das Bedürfnis aufkommen, zusätzlich eine Kurzfinformation bei Bedarf anzugeben.
Wie bei anderen Elementen auch, wird dafür das Attribut title und nicht alt verwendet:
<figure> <img src="prw_b2009-07-13v17.svg" alt="PRW 2009-07-13.V17" title="Nähere Informationen zu PRWs sind in einem früheren Abschnitt dieses Kapitels bereits behandelt." /> <figcaption>Ein Werk aus der Schaffensperiode PRW: 2009-07-13.V17</figcaption> </figure>
Bei graphischer Darstellung wird die Information von title typisch dann dargestellt, wenn ein Zeigergerät über Bild oder Alternativtext fährt. Ohne Zeigergerät oder graphische Darstellung ist der Zugang zu dieser Information natürlich stärker vom Darstellungsprogramm abhängig.
Beim Aufbau der graphischen Repräsentation eines Dokumentes gehen viele Darstellungsprogramme so vor, daß sie das Dokument bereits darstellen, während sie einzubettende Dokumente noch laden. Im Zweifelsfalle kann das nachgeladene Dokument aber die Anordnung der Inhalte wieder ändern, wenn es eingebettet wird. Um diesen Effekt zu vermeiden, gibt es die beiden Attribute width (Breite) und height (Höhe), mit welchen Autoren angeben können, in welcher Größe das Bild dargestellt werden soll. Beim Seitenaufbau und gleichzeitigem Laden des Bildes kann so das Darstellungsprogramm erstmal eine Lücke lassen und dann das Bild dort nachträglich einfügen, sobald es verfügbar ist.
Obgleich die Attribute optional sind, ist Autoren von Dokumenten mit starker Mischung von Text und Bilder also zu empfehlen, die Attribute zu verwenden. Wird eines der Attribute nicht notiert, wird die im Bild angegebene Originalgröße verwendet. Ist im Bild selbst keine absolute Angabe vorhanden, kann das Verhalten undefiniert sein. Insbesondere im Zusammenspiel mit SVG kann es zu recht komplexen Regeln oder überraschenden Regelfindungen durch die Anbieter der Darstellungsprogramme kommen, wenn nur in der SVG-Datei prozentuale Größenangaben vorliegen. Was das bedeutet, ist in SVG recht präzise festgelegt. Da (X)HTML aber ein anderes Modell der Darstellung hat, ist es dort nicht unbedingt klar, was eine Höhe von 100% zu bedeuten haben mag, beziehungsweise dies kann von einer geeigneten Dimensionierung des Elternelementes mit CSS abhängen. Auch von daher ist eine eindeutige Angabe mittels width und height anzuraten, sofern im referenzierten Dokument keine Angaben sind, die in Bezug auf die Einbettung in ein (X)HTML-Dokument eine einfache und eindeutige Interpretation ermöglichen.
Der Wert ist jeweils eine ganze, nicht negative Zahl. HTML5 definiert leider nicht, was diese Zahl genau bedeuten soll. Weil dies aber in älteren Versionen als Angabe in Pixeln definiert ist, wird dies auch in HTML5 ähnlich gemeint sein, wobei sich dies hier auch auf die eher komplexeren Pseudo-Pixel von CSS 3 beziehen kann, die nicht den Gerätepixeln entsprechen müssen.
Bei einem Layout etwa mit CSS kann ein Autor natürlich in diversen Einheiten die Höhe und Breite festlegen. Dabei ist wiederum zu bedenken, daß ein CSS-Pseudo-Pixel nicht immer unbedingt einem Pixel auf dem Monitor entspricht.
Beispiele: Bei SVGs findet die Angabe besser im SVG-Dokument statt, sofern die Dimension dort in anderen Einheiten als Pixeln festgelegt ist:
<img src="prw_b2009-07-13v17.svg" alt="PRW 2009-07-13.V17" />
SVG ist skalierbare Vektorgraphik, daher kann man es auch gut verwenden, um die Größe der Graphik an den verfügbaren Platz anzupassen. In der SVG-Datei sollten dann keine absoluten Größenangaben stehen, aber in der Regel eine viewBox. Sofern relevant, sollten dort allerdings Angaben gemacht werden, ob das Aspektverhältnis erhalten bleiben soll und wie der Ausschnitt angepaßt werden soll, wenn das Aspektverhältnis nicht zum notierten Anzeigebereich paßt.
<img src="zitronenfalter.jpg" alt="Zitronenfalter auf Zierdistel" width="640" height="480" />
Dies ist die 'klassische' Variante für Pixelbilder. In der Regel sollte hier auch die Originalgröße notiert werden. Ist eine kleinere Darstellung erwünscht, ist es besser, die Datei einfach entsprechend verkleinert bereitzustellen. Eine stark vergrößerte Darstellung gegenüber dem Original macht hingegen irgendwann störende Artefakte sichtbar, die auch bei der speziellen Kompression des Formates JFIF/JPEG recht schnell als optisch unschön auffallen. Bei anderen, rein pixelbasierten Formaten wie PNG oder GIF werden bei einer Vergrößerung Artefakte im Allgemeinen sofort sichtbar, die sind für Vergrößerungen also als komplett ungeeignet einzustufen.
Bei Pixelgraphikformaten wie JFIF/JPEG, PNG oder GIF sind immer Größenangaben in der Datei vorhanden. Die Größe eines Bildes läßt sich mit den meisten Graphikprogrammen herausfinden.
Manchmal kann es zum Verständnis wichtig und hilfreich sein, den genauen Bildinhalt zu beschreiben. Es kann auch der Bedarf bestehen, weitere Informationen über das Bild bereitzustellen, welche nur optional für besonders interessierte Lesergruppen relevant sind. Für andere Lesergruppen könnten diese Informationen etwa offensichtlich sein, wenn das Bild dargestellt wird. Teils kann auch angenommen werden, daß viele Leser bereits über entsprechende Informationen verfügen, andere Gruppen diese aber zusätzlich benötigen könnten. Da das Attribut alt nur einfachen, kurzen, unstrukturierten Text enthalten kann, eignet sich dies für epischere Ausführungen zu einer Graphik nicht und deckt auch nicht den Fall ab, daß auch Leser mit Anzeige des Bildes Bedarf an mehr (Text-)Information haben könnten.
In dem Falle wird als Wert des optionalen Attributes longdesc die URI/IRI eines Dokumentes notiert, in welchem diese längere Information bereitgestellt wird. Es kann allerdings auch mit einem Fragmentidentifizierer auf eine Textpassage verwiesen werden, die diese Funktion übernimmt und zum Beispiel allgemein lesbar auf derselben oder einer anderen Seite zu finden ist. In solchen Fällen gewährleistet das Attribut, daß der eindeutige Bezug zwischen Text und Graphik nicht verlorengeht, wenn etwa aufgrund der fehlenden Bilddarstellung die Anordnung der Inhalte anders ist oder es etwa beim Zuhören sonst schwierig würde, genau zu erkennen, wie die Bezüge im Dokument sind, wenn es nur vorgelesen wird.
Wie das Darstellungsprogramm Zugang zum referenzierten Dokument oder Fragment realisiert oder auch nur zur Kenntnis bringt, daß eine solche Verweisrelation zu weiteren Informationen vorliegt, ist nicht präzise festgelegt. Leider gibt es da auch bei einigen gängigen Darstellungsprogrammen Implementierungslücken. Bei weniger kundigen Lesern mag auch der Mechanismus nicht bekannt sein, wie solche Verweise aufgerufen werden. Diese Zugänglichkeitsprobleme treffen eher Nutzer von graphischen Darstellungsprogrammen als solche, die gar keine Bilder darstellen lassen. So oder so ist der Zugang zu dieser Information aber bei Bedarf für alle Nutzer gedacht, ergänzend zum referenzierten Bild und dem Alternativtext, nicht etwa nur alternativ zum referenzierten Bild.
Beispiele:
<img longdesc="prw_interpretationenvontina.xhtml#B2009-07-13V17" src="prw_b2009-07-13v17.svg" alt="PRW 2009-07-13.V17" width="800" height="800" />
Hier wird also auf ein Fragment in einem anderen Dokument verwiesen. Hat der Künstler etwas Relevantes direkt im SVG etwa im Element desc mit Fragmentidentifizierer 'info' notiert, kann er natürlich auch einfach schreiben:
<img longdesc="prw_b2009-07-13V1v.svg#info" src="prw_b2009-07-13v17.svg" alt="PRW 2009-07-13.V17" width="800" height="800" />
Damit ist dann bereits explizit im (X)HTML-Dokument klargestellt, daß die SVG-Datei eine relevante Beschreibung der graphischen Repräsentation enthält.
Der Bezug auf eine Passage mit Fragmentidentifizierer 'MonaLisa' im selben Dokument:
<img longdesc="#MonaLisa" src="monalisa.jpg" alt="Gemälde 'Mona Lisa'" />
Das Element audio wird dazu verwendet, um Audios einzubetten, also Dateien mit Geräuschen.
Das Element ist ein transparentes Element, kann also enthalten, was das Elternelement enthält, kann entsprechend notiert werden, wo fließender Inhalt erlaubt ist. Als spezieller Inhalt können darin auch zusätzlich die Elemente source und track notiert werden. Dabei sind als erster Inhalt alle Elemente source zu notieren, danach alle Elemente track, danach sonstiger Inhalt. Dieser sonstige Inhalt wird allerdings nur von Programmen präsentiert, die das Element selbst nicht interpretieren, weil sie es nicht kennen, also unabhängig von den Möglichkeiten, die einzubettenden Formate zur Präsentation zu bringen. Daher eignet sich der Elementinhalt nicht, um einen Alternativtext bereitzustellen. Typisch als Inhalt ist also Text, welcher darauf hinweist, daß die Funktionalität der Audio-Wiedergabe nicht gegeben ist, dazu vermutlich ein Verweis auf die Audio-Datei mit einem Element a oder auch ein object mit derselben Funktionalität.
Alternativtext ist außerhalb des Elementes anzugeben.
Das Inhaltsmodell ist davon abhängig, ob ein Attribut src notiert ist oder nicht. Ist src notiert, ist als Inhalt kein source erlaubt.
Praktisch ist die Variante mit source in funcity nicht relevant, daher wird dies hier nicht weiter erläutert.
track dient dazu, Untertitel anzugeben, die dafür notwendigen Formate sind in funcity nicht verfügbar, deshalb wird das Element nicht weiter erläutert.
Mit dem Attribut src wird die einzubettenden Audio-Datei referenziert, es handelt sich beim Wert als um eine URI/IRI einer Datei mit einem Audio-Format. Die Erläuterungen zum gleichnamigen Attribut für Bilder gelten entsprechend. Aufgrund der guten Kompression ist in funcity bloß das Format MP3 relevant.
Beispiel mit Kontrollelementen:
<audio controls="" preload="metadata" src="musik_jingle6_fcg.mp3"> Das Darstellungsprogramm kann dieses Tondokument nicht wiedergeben.<br /> Alternativer Aufruf: <a href="musik_jingle6_fcg.mp3"> <abbr>MP3</abbr></a> abrufen. </audio>
Ist das Attribut controls notiert, so werden vom Darstellungsprogramm Kontrollelemente angeboten, um das Tondokument zu starten, zu stoppen, zu pausieren, eine Stelle darin anzuspringen oder auch die Lautstärke zu ändern. Sofern es zusätzliche Spuren mit Text, Beschriftung gibt, sollte auch eine Kontrolle angeboten werden, um diese ein- oder auszublenden, gegebenenfalls auch zwischen verschiedenen vorhandenen Sprachversionen auszuwählen. Weitere Kontrollelemente sind ebenfalls möglich, eventuell um zwischen verschiedenen angebotenen Formaten zu wechseln.
Es ist zu empfehlen, das Attribut zu setzen, damit das Publikum die volle Kontrolle über das Abspielen des Tondokumentes hat.
Der Wert ist entweder leer ("") oder 'controls'.
Beispiel komplett mit Bild, Kontrollelementen, Titel:
<figure id="musik_jingle7" title="#musik_jingle7"> <figcaption> Galerie-Jingle (experimentell); (2024-08-13; Lyrik: <strong>Nickin Kognito</strong>, Gesang und Instrumente: <strong>Erkan S.</strong>) </figcaption> <img src="musik_jingle7.jpeg" alt="Galerie-Jingle (experimentell)" /> <audio controls="" preload="metadata" src="musik_jingle7_fcg.mp3"> Das Darstellungsprogramm kann dieses Tondokument nicht wiedergeben.<br /> Alternativer Aufruf: <a href="musik_jingle7_fcg.mp3"> <abbr>MP3</abbr></a> abrufen. </audio> </figure>
Ist das Attribut loop notiert, wird die Wiedergabe dauernd wiederholt. Der Wert ist entweder leer ("") oder 'loop'.
Dabei ist zu bedenken, daß ständige Wiederholungen nerven können, umso wichtiger, daß Nutzer über die Kontrollelemente die Möglichkeit haben, die Wiedergabe abzuschalten.
Ist das Attribut autoplay notiert, wird die Wiedergabe automatisch gestartet. Der Wert ist entweder leer ("") oder 'autoplay'.
Weil Teile des Publikums vermutlich einen anderen Geschmack hinsichtlich einer Geräuschkulisse haben, ist eher zu empfehlen, auf das Attribut zu verzichten und stattdessen mit controls dem Publikum die Entscheidung über die Beschallung zu überlassen. Sinnvoll kann es hingegen sein, wenn das Dokument nur die Audio-Datei einbettet, auf die Datei mit dem Hinweis verwiesen wurde, daß beim Aufruf eine Audio-Datei abgespielt wird.
Ist das Attribut muted notiert, wird die Wiedergabe stumm geschaltet, das Publikum hört also nichts von der Audio-Datei. Der Wert ist entweder leer ("") oder 'muted'.
Um dem Publikum zu ermöglichen, die Audio-Datei hörbar zu machen, ist es sinnvoll, dies Attribut zusammen mit controls zu notieren.
Mit dem Attribut preload kann dem Darstellungsprogramm ein Hinweis gegeben werden, ob Teile der Audio-Datei vorab geladen werden sollen.
Mögliche Werte:
Das Element video wird dazu verwendet, um Videos einzubetten, also Dateien mit bewegten Bildern und zumeist auch Geräuschen.
Das Element ist ein transparentes Element, kann also enthalten, was das Elternelement enthält, kann entsprechend notiert werden, wo fließender Inhalt erlaubt ist. Als spezieller Inhalt können darin auch zusätzlich die Elemente source und track notiert werden. Dabei sind als erster Inhalt alle Elemente source zu notieren, danach alle Elemente track, danach sonstiger Inhalt. Dieser sonstige Inhalt wird allerdings nur von Programmen präsentiert, die das Element selbst nicht interpretieren, weil sie es nicht kennen, also unabhängig von den Möglichkeiten, die einzubettenden Formate zur Präsentation zu bringen. Daher eignet sich der Elementinhalt nicht, um einen Alternativtext bereitzustellen. Typisch als Inhalt ist also Text, welcher darauf hinweist, daß die Funktionalität der Wiedergabe nicht gegeben ist, dazu vermutlich ein Verweis auf die Video-Datei mit einem Element a oder auch ein object mit derselben Funktionalität.
Alternativtext ist außerhalb des Elementes anzugeben.
Das Inhaltsmodell ist davon abhängig, ob ein Attribut src notiert ist oder nicht. Ist src notiert, ist als Inhalt kein source erlaubt.
Relevant im Kontext von funcity: Videoformate sind lokal nicht erlaubt, beanspruchen zuviel Speicher.
Insofern werden bloß externe Quellen relevant sein.
Dabei ist wiederum zu bedenken, daß Anbieter insbesondere von kostenlosem Platz im Netz keine Datenablagen mögen, bei großen Dateien auch keine externen Referenzierungen.
Insofern also: Obacht bei der Auswahl, wo die Videos untergebracht werden können, welche hier eingebunden werden sollen.
Ferner sei angemerkt, daß bei der Einbindung externer Dateien natürlich Daten zum externen Dienstrechner abfließen, dort zudem auch Skripte als Videos getarnt sein könnten, welche zusätzlich in der Lage sind, unbemerkt weitere Daten abzugreifen.
Die Attribute src, controls, loop, autoplay, muted, preload sind sinngemäß so wie für video zu verwenden. width und height sind sinngemäß wie für img zu verwenden.
Mit dem Attribut poster kann ein Vorschaubild referenziert werden, welches präsentiert wird, wenn das Video nicht abgespielt wird. Der Wert ist folglich eine URI/IRI einer Bild-Datei, die typisch ein Bild aus dem Video repräsentiert, vielleicht aber auch eine Art Titelbild oder Titelgraphik darstellt.
Die Angabe zu Höhe und Breite gelten auch für dieses Vorschaubild oder Poster, von daher ist es sinnvoll, die Größe, insbesondere das Aspektverhältnis entsprechend passend zu wählen.
Funcity verwendet auch aufgrund der besonderen Strukturen, der historischen Herkunft noch immer reichlich Rahmen. Bei eigener Verwendung ist daher Vorsicht geboten, um nicht versehentlich oder gar absichtlich die Sitzungen von Wohnungsbesuchern zu schreddern.
Deshalb wird hier bloß auf eine spezielle Anwendung eingegangen, welche dazu dient, einen Mangel von funcity zu kompensieren, dieser besteht darin, daß die beim Betreten der Wohnung aufgerufene Datei 'welcome.html' heißt. Wird indes die Wohnung bloß extern als Unterverzeichnis aufgerufen, so wird 'index.html' verwendet, sofern vorhanden. Beides sind Dateiendungen für HTML, also die nicht empfohlene Markierungsuppenvariante mit den Kodierungsproblemen. Daher hier die Empfehlung, als eigene Startdatei 'index.xhtml' zu verwenden und für 'welcome.html' und 'index.html' eine Datei mit folgendem Inhalt hochzuladen:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta charset="UTF-8" /> <title>Willkommen</title> <style> html, body, iframe { margin: 0; padding: 0; height: 100%; width: 100%; height: 100vh; width: 100vw; background: #000; overflow: hidden } </style> </head> <body><iframe src="index.xhtml" width="1500" height="1000" name="disp" title="Überbrückung zur XHTML-Startseite" allowfullscreen=""><a href="index.xhtml"> Zur Startseite </a></iframe></body> </html>
Neben einigem Markierungssuppen-Firlefanz sorgt die Stilvorlage im Element style dafür, daß die 'index.xhtml' nahtlos eingefügt wird, der Rahmen also nicht sichtbar wird, welcher mit iframe konstruiert wird. Der Inhalt von iframe wird bloß bei Präsentationsprogrammen relevant, welche das Element nicht interpretieren wollen oder können.
Wohnungsinterne Verweise in 'index.xhtml' sollten alsdann mit target="_parent" gesetzt werden, um den Rahmen zu entsorgen, Verweise mit extern wie gehabt mit target="_blank".
Die wegelassenen Leerzeichen zwischen den Elementmarkierungen helfen dabei, daß der Rahmen nicht sichtbar wird.
Tabellen dienen der Strukturierung von Daten in einer tabellarischen Form. Werden in (X)HTML also Elemente verwendet, die zur Auszeichnung von Tabellen gedacht sind, sind die darin enthaltenen Informationen automatisch miteinander korreliert.
Trotzdem wurden früher zur Zeit von HTML von vielen Autoren die Tabellenelemente fehlerhaft eingesetzt. Sie wurden zur Ausrichtung und Anordnung von nicht miteinander korrelierten Informationen verwendet, um Dokumente zu dekorieren. Vor der Einführung von Stilvorlagen war dies die einzige Methode, um dies zu erreichen, daher ist der Mißbrauch nachvollziehbar, zeigt aber trotzdem, daß von diesen Autoren (X)HTML nicht verstanden wurde.
Zudem sind Tabellen in (X)HTML immer so darzustellen, daß die Korrelation der Daten darin gut verständlich ist. Ein Darstellungsprogramm soll gegebenenfalls also andere Angaben des Autors ignorieren, um eine gute Verstehbarkeit für den Leser zu gewährleisten. Damit ergibt sich bereits, daß eine definierte Anordnung von Inhalt (Layout) mit Tabellen nicht möglich ist, zudem kann die Darstellung zwischen Darstellungsprogrammen variieren, da diese für ihre jeweiligen Nutzer andere Möglichkeiten der optimierten Lesbarkeit von korrelierten Daten gefunden haben mögen.
Werden unkorrelierte Daten in Tabellen als korrelierte Daten notiert, fällt es bei Programmen mit nicht visueller Darstellung natürlich besonders schwer, die Darstellung zu verstehen, weil auch diese Programme versuchen werden, die (nicht vorhandene) Korrelation von Daten gut verständlich zu machen.
Somit sollten Tabellen also nur dafür verwendet werden, um korrelierte Daten korrekt und – verständlich darzustellen. Typische Anwendungen aus dem Alltag wären zum Beispiel Stundenpläne, Fahrpläne, Statistiken mit mehreren Variablen. Zur besseren Verständlichkeit gibt es zudem spezielle Strukturen wie Tabellenbeschriftungen und Zusammenfassungen, Kopfzellen. Bei einer korrekten Anwendung einer Tabelle wird man automatisch das Bedürfnis haben, diese Strukturen häufig zu verwenden. Anders herum, kann man mit diesen Strukturen nichts anfangen, ist dies ein deutliches Indiz, daß es sich wohl um keine Anwendung für Tabellenelemente handelt.
Hinsichtlich eines sinnvollen Layouts wie auch der optischen Gestaltung von Tabellen sei auf die Stilvorlagensprache CSS verwiesen. Um die Lesbarkeit von Tabelleninhalten zu optimieren, verfügt (X)HTML über diesbezügliche Grundfunktionen, allerdings nicht im Umfange einer freien, dekorativen Gestaltung einer Tabelle.
Zur Umsetzung von Tabellen sind mindestens vier Elemente notwendig. table (deutsch: Tabelle) dient zur Einleitung der Tabelle. Das Element ist ein Blockelement mit speziellem Inhaltsmodell, kann also notiert werden, wo fließender Inhalt oder Blockelemente erwartet werden.
tr wird als Kindelement von table notiert und definiert eine neue Tabellenzeile für mehrere Tabellenzellen.
Mit th (englisch: table header, deutsch: Tabellenkopf) kann man Zellen mit Kopfinformationen füllen und mit td (englisch: table data, deutsch: Tabellendaten) wird eine neue Tabellenzelle erzeugt, die Daten enthält. In dieser Reihenfolge müssen die Elemente auch ineinander verschachtelt werden. th und td sind also wiederum Kindelemente von tr. In ihnen kann fließender Inhalt notiert werden. Im Sinne einer sinnvollen inhaltlichen Struktur also entweder Phraseninhalt oder Blockelemente.
Ein sehr einfaches Beispiel ist folgendes:
<table> <tr> <th>Überschrift, 1. Spalte</th> <th>Überschrift, 2. Spalte</th> <th>Überschrift, 3. Spalte</th> </tr> <tr> <td>1. Zeile, 1. Spalte</td> <td>1. Zeile, 2. Spalte</td> <td>1. Zeile, 3. Spalte</td> </tr> <tr> <td>2. Zeile, 1. Spalte</td> <td>2. Zeile, 2. Spalte</td> <td>2. Zeile, 3. Spalte</td> </tr> <tr> <td>3. Zeile, 1. Spalte</td> <td>3. Zeile, 2. Spalte</td> <td>3. Zeile, 3. Spalte</td> </tr> </table>
Das wird zum Beispiel wie folgt präsentiert (das hängt von der verwendeten Stilvorlage ab):
Überschrift, 1. Spalte | Überschrift, 2. Spalte | Überschrift, 3. Spalte |
---|---|---|
1. Zeile, 1. Spalte | 1. Zeile, 2. Spalte | 1. Zeile, 3. Spalte |
2. Zeile, 1. Spalte | 2. Zeile, 2. Spalte | 2. Zeile, 3. Spalte |
3. Zeile, 1. Spalte | 3. Zeile, 2. Spalte | 3. Zeile, 3. Spalte |
Das Element table ist ein Blockelement. Es wird erwartet, wo fließender Inhalt erwartet wird. Bei einer sinnvollen Struktur ist es also auf gleicher Ebene wie andere Blockelemente einzusetzen, nicht wie Phrasenelemente.
Der Inhalt ist für dieses Element spezifisch. Was als Inhalt korrekt ist, hängt stark von der betrachteten Version von (X)HTML ab. Dies hängt mit einer Konfusion in HTML5 zusammen, in HTML5.0 wurde zunächst das ältere Modell lediglich erweitert, in HTML5.1 wurde die von HTML4 sowie XHTML1.x vorgesehene Reihenfolge der Elemente inkompatibel ungültig. Eine in allen Versionen gültige Reihenfolge ist nur möglich, wenn generell mindestens auf das Element tfoot verzichtet wird.
Das Element table kann optional an erster Stelle ein Element caption für eine Tabellenüberschrift enthalten.
Ferner gibt es die optionalen Elemente colgroup. Diese können zu Beginn, nach dem optionalen caption notiert werden, entweder ein oder mehrere Elemente colgroup. Diese dienen dazu, die Struktur der Tabellen vor dem eigentlichen Datenbereich festzulegen.
Im einfachen Modell können dann ein oder mehr Elemente tr notiert werden.
Alternativ kann ein strukturiertes Modell verwendet werden. Dann wird direkt in table kein tr notiert.
Strukturiertes Modell kompatibel zu HTML4, XHTML1.x, HTML5.0:
Nach caption wird genau ein thead für Kopfzeilen notiert und danach optional genau ein
tfoot für Fußzeilen.
Diesen folgt dann mindestens ein Element tbody für den eigentlichen Tabellenkörper.
Strukturiertes Modell kompatibel zu HTML5.0, 5.1, 5.2 (eventuell auch weitere Unterversionen 5.x):
Nach caption wird genau ein thead für Kopfzeilen notiert.
Diesem folgt dann mindestens ein Element tbody für den eigentlichen Tabellenkörper.
Danach kann optional genau ein tfoot für Fußzeilen folgen.
table hatte in früheren Versionen neben den allgemein verwendbaren einige Attribute, die spezifisch für dieses Element sind. Bis auf ein Attribut sind in HTML5 alle spezifischen Attribute gestrichen. Verblieben ist das Attribut border. Ohne die gestrichenen Attribute sowie ohne passende Autorenstilvorlage per CSS kann es bei der visuellen Darstellungen Probleme mit guter Lesbarkeit oder Verständlichkeit der Präsentation geben.
Mit dem Attribut border kann angegeben werden, ob die Tabelle bei einer visuellen Darstellung einen sichtbaren Rahmen haben soll. Der Wert ist leer oder eine '1' und entspricht einem darzustellenden Rahmen. Ist das Attribut nicht angegeben, entspricht das effektiv einer Darstellung ohne Rahmen. Oft verbessert ein sichtbarer Rahmen die Lesbarkeit der Tabelleninformation bei visueller Darstellung.
Mit dem Element caption, welches als erstes Kindelement von table notiert werden kann, wird eine Tabellenüberschrift angegeben.
Der Inhalt von caption ist fließender Inhalt.
Hinsichtlich der Verstehbarkeit von Tabellen ist eine solche Überschrift ein sehr wichtiger Bestandteil einer Tabelle. Im klassischen Sinne sind Überschriften Kurzzusammenfassungen, in diesem Falle also eine Kurzdarstellung des Themas der Tabelle.
Beispiel:
<table border=""> <caption>Wahrheitstabelle</caption> <tr><th>und</th><th>0</th><th>1</th></tr> <tr><th>0</th><td>0</td><td>0</td></tr> <tr><th>1</th><td>0</td><td>1</td></tr> </table>
und | 0 | 1 |
---|---|---|
0 | 0 | 0 |
1 | 0 | 1 |
Mit dem Element tr werden alle Zellen einer Tabellenzeile zusammengefaßt. Möglicher Inhalt sind die Elemente th und td. Mindestens eines davon sollte notiert werden, um eine sinnvolle Tabelle zu erhalten, mehrere in beliebiger Reihenfolge sind erlaubt.
In den Tabellenzellen th und td kann beliebiger fließender Inhalt stehen. Um eine gute Struktur zu bekommen, sollte man sich nur entscheiden, ob man als direkte Kindelemente nur Blockelemente verwendet oder nur Text und Phrasenelemente.
th wird für Tabellenköpfe verwendet, sowohl für Spalten als auch Zeilen. Sie geben also an, welcher Variable oder welchem Objekt die Daten in einer Spalte oder Zeile zugeordnet sind.
Um Spalten zu kennzeichnen, sind typisch die Zellen im ersten tr beziehungsweise im letzten tr Element vom Typ th, in denen dann die Beschriftung steht. Im strukturierten Modell wären das dann entsprechend Elemente in thead und tfoot.
Um Zeilen zu kennzeichnen, ist typisch das erste oder letzte Kindelement eines jeden tr ein Element th.
In td stehen die eigentlichen Zellendaten der Tabelle. td sollte auch verwendet werden, wenn eine Zelle Inhalt enthält, der sowohl als Kopfinformation als auch als normaler Zelleninhalt interpretiert werden kann. th und td haben neben den allgemein verwendbaren auch einige spezifische Attribute, die allesamt optional sind.
Werden unterschiedlich viele Zellen pro Zeile beziehungsweise Spalte angegeben, so werden entsprechend weitere leere Zellen impliziert, bis es paßt. Da mit rowspan und colspan auch Zellen über mehrere Zeilen oder Spalten ausgedehnt werden können, zählen solche Zellen dann natürlich entsprechend mehrfach, daß heißt, es werden dann wirklich entsprechend weniger Elemente in der jeweiligen Zeile oder Spalte notiert. Passend gemacht wird dann alles unter Einbeziehung von rowspan und colspan.
Mit dem Attribut scope wird angegeben, auf welche Tabellenzellen sich eine Kopfinformation bezieht. Ein solches Attribut ist verwendbar für th-Elemente.
Das Attribut wird dann im Kopfelement notiert, mögliche Werte sind:
Mit dem Attribut headers wird angegeben, welche Kopfzelle sich auf die Datenzelle bezieht, in welcher headers notiert ist.
Anders als bei scope wird hier als Wert des Attributes allerdings eine Liste von Fragmentidentifizierern der Zellenelemente angegeben, in welchen sich die Kopfinformation befindet. Zwei aufeinanderfolgende Listenpunkte werden dabei mit einem Leerzeichen voneinander separiert. Da keine Klassen angegeben werden können, können solche Listen folglich sehr lang werden. Damit läßt sich aber eine nahezu beliebige Zuordnung erreichen, währendscope bereits eine gute Struktur voraussetzt. Bei gut strukturierten einfachen Tabellen wird man es also offenbar effizienter und einfacher haben, scope zu verwenden. Andererseits kann es bei mehr als zwei Variablen notwendig werden, mehrdimensionale Datensätze zu verschachteln, wofür dann headers viel flexibler einsetzbar ist.
Es ist jedenfalls zu empfehlen, nur eines der beiden Attribute scope und headers zu verwenden, auch schon um Widersprüche zu vermeiden. Im Konfliktfalle ist nicht definiert, welche Information Vorrang hat.
Mit dem Attribut kann eine Abkürzung für den Tabelleninhalt angegeben werden. Das Attribut ist verwendbar bei th. Bei einer akustischen Wiedergabe (Vorlesen) kann so bei jeder Datenzelle die Abkürzung statt des kompletten Kopfes verwendet werden, nachdem bei der Kopfzelle selbst wiedergegeben wurde, wofür die Abkürzung steht. Das kann die Verstehbarkeit vorgelesener Tabellen deutlich verbessern. Das ist folglich nur hilfreich, wenn mittels scope oder headers die Kopfinformation mehreren Zellen zugeordnet wird, also somit mehrmals vorgelesen werden müßte, was bei den Datenzellen durch die Abkürzungen ersetzt werden kann.
Wert des Attributes ist einfacher Text, der eine Abkürzung des Tabelleninhaltes darstellt.
Manchmal kann es vorkommen, daß mehrere Zellen zu einer zusammengefaßt werden sollen, die nebeneinander oder übereinander stehen. Um dies zu realisieren, gibt es die Attribute rowspan und colspan.
Mittels rowspan wird angegeben, auf wieviele Zeilen eine Zelle ausgedehnt werden soll.
Mittels colspan wird angegeben, auf wieviele Spalten eine Zelle ausgedehnt werden soll.
Der Wert ist jeweils eine (ganze, positive) Zahl, also die Anzahl der Zeilen, beziehungsweise Spalten. Sofern nicht angegeben, wird jeweils '1' angenommen.
Ein Beispiel:
<table border=""> <tr> <td colspan="2">Zelle mit colspan="2"</td> <td rowspan="3">Zelle mit rowspan="3"</td> </tr> <tr> <td>2. Zeile, 1. Spalte</td> <td>2. Zeile, 2. Spalte</td> </tr> <tr> <td>3. Zeile, 1. Spalte</td> <td>3. Zeile, 2. Spalte</td> </tr> </table>
Zelle mit colspan="2" | Zelle mit rowspan="3" | |
2. Zeile, 1. Spalte | 2. Zeile, 2. Spalte | |
3. Zeile, 1. Spalte | 3. Zeile, 2. Spalte |
Es ist zu erkennen, daß die erste Zelle mit colspan sich über zwei Zellen erstreckt. Die Zelle mit rowspan spannt sich über alle drei Zeilen. Zu beachten ist, daß sich Zellen immer von links nach rechts beziehungsweise von oben nach unten spannen, und die Zellen, über die gespannt wird, herausgenommen werden müssen.
Die Zeilen einer Tabelle können zu Gruppen angeordnet werden, um die jeweilige Funktion genauer herauszustellen. Dazu werden ein thead (Tabellenkopf), ein tfoot (Tabellenfuß) und ein oder mehrere tbody (Tabellenkörper) notiert. Die Reihenfolge hängt von der HTML-Version ab, siehe oben zum strukturierten Inhaltsmodell von table. Mögliche Inhalte der drei Elemente sind jeweils ein oder mehrere Elemente tr.
Unter anderem ist diese Einteilung auch praktisch, wenn eine lange Tabelle ausgedruckt werden soll. Eine mögliche Umsetzung wäre dann zum Beispiel, daß auf jeder ausgedruckten Seite die Kopf- und Fußinformationen zu den Spalten der Zeilen erscheinen. Andere Umsetzungen und Nutzungen der Strukturinformationen durch das Darstellungsprogramm sind natürlich auch möglich. Ansonsten dient natürlich auch die Einteilung in Kopf, Fuß und Körper der Strukturierung des Inhaltes und hilft dem Autor, die Daten verständlicher zu notieren und dem Leser beim Verstehen des Inhaltes.
Neben den allgemein nutzbaren Attributen hatten die drei Elemente in früheren Versionen auch einige spezifische Attribute, die in HTML5 gestrichen wurden.
Beispiel (kompatibel zu HTML4, XHTML1.x, HTML5.0. Diese Reihenfolge ist insbesondere hilfreich für Programme, welche Inhalte automatisch in Seiten einteilen, diese sollten die jeweilige Teiltabelle auf einer Seite jeweils mit Kopf und Fuß versehen. Weil hier der Fuß vor dem Körper notiert ist, muß solch ein Programm nicht die gesamte Tabelle analysieren, um die Seiteneinteilung vornehmen zu können):
<table border=""> <thead> <tr> <th>Buchstabe</th> <th>Stadt</th> <th>Land</th> <th>Fluß</th> </tr> </thead> <tfoot> <tr> <td>Nur lateinische Buchstaben</td> <td>Größer als 10 Tausend Einwohner</td> <td>Größer als 50 Tausend km<sup>2</sup></td> <td>Breite größer als 20 Meter</td> </tr> </tfoot> <tbody> <tr> <td>D</td> <td>Darmstadt</td> <td>Deutschland</td> <td>Donau</td> </tr> <!-- … --> </tbody> </table>
Buchstabe | Stadt | Land | Fluß |
---|---|---|---|
Nur lateinische Buchstaben | Größer als 10 Tausend Einwohner | Größer als 50 Tausend km2 | Breite größer als 20 Meter |
D | Darmstadt | Deutschland | Donau |
Beispiel (kompatibel zu HTML5.0, 5.1, 5.2, eventuell weitere Versionen von HTML5. Diese Variante ist etwas einfacher in endlosen Rollmedien zu präsentieren, weil die Elemente in der Reihenfolge der Präsentation notiert sind.):
<table border=""> <thead> <tr> <th>Buchstabe</th> <th>Stadt</th> <th>Land</th> <th>Fluß</th> </tr> </thead> <tbody> <tr> <td>D</td> <td>Darmstadt</td> <td>Deutschland</td> <td>Donau</td> </tr> <!-- … --> </tbody> <tfoot> <tr> <td>Nur lateinische Buchstaben</td> <td>Größer als 10 Tausend Einwohner</td> <td>Größer als 50 Tausend km<sup>2</sup></td> <td>Breite größer als 20 Meter</td> </tr> </tfoot> </table>
Buchstabe | Stadt | Land | Fluß |
---|---|---|---|
D | Darmstadt | Deutschland | Donau |
Nur lateinische Buchstaben | Größer als 10 Tausend Einwohner | Größer als 50 Tausend km2 | Breite größer als 20 Meter |
Mit dem Format CSS kann in funcity die zweite Schicht im Schichtenmodell erzeugt werden. Bei dieser geht es um Stilvorlagen, Design, Layout, Aussehen, Präsentation, Anordnung jener Inhalte, welche in der ersten Schicht per XHTML bereitgestellt wurden.
CSS ist geringfügig älter als XML und gehört somit leider nicht zu dieser Sprachfamilie. Leider wurde später auch versäumt, die Syntax in diese Sprachfamilie zu überführen. Von daher ist es notwendig, für CSS eine komplett neue Syntax zu erlernen. Dieses Versäumnis ist selbstverständlich eine zusätzlich Hürde für Autoren, was jedoch jedenfalls kurzfristig nicht zu ändern ist.
Immerhin wird CSS gleichfalls als einfache Textdatei notiert, besondere Programme dafür sind folglich nicht notwendig. Daraus ergibt sich ähnlich wie bei den XHTML-Dateien die Notwendigkeit einer Kodierungsangabe, wenn in der Datei Zeichen verwendet werden, welche über die üblichen paar Grundzeichen hinausreichen, allerdings reichen diese bereits oftmals für diese speziellen Dateien. Wird die Stilvorlage mit in der XHTML-Datei notiert, gilt deren Kodierungsangabe. Für die in XHTML besonderen Zeichen, insbesondere das ‚<‘ gelten die entsprechenden Regeln zur Maskierung, genau für den Fall, daß das CSS in der XHTML-Datei notiert wird.
Für funcity gibt es hinsichtlich der Stilvorlagen keinerlei Besonderheiten zu beachten. Generell ist allerdings wichtig zu wissen, daß es neben den bedenkenlos nutzbaren Empfehlungen auf vorgeschlagene Empfehlungen, Arbeitsentwürfe, proprietären Wildwuchs gibt.
Proprietärer Wildwuchs sowie Vorschläge, Arbeitsentwürfe sind nicht dazu gedacht, auf normalen Seiten für das Publikum eingesetzt zu werden. Stattdessen sind diese einzig dazu vorgesehen, die Vorschläge selbst zu testen, zu kommentieren, diese gegebenenfalls zu ändern.
Vorgeschlagene Empfehlungen sind eine Vorstufe zu den offiziellen Empfehlungen. Autoren sollten neue Merkmale solcher Dokumente auch auf veröffentlichten Seiten eher vermeiden, auf jeden Fall aber beobachten, wie sich solche Dokumente entwickeln. Sobald es eine Empfehlung ohne Änderungen gibt, ist die Sache unkritisch. Bei Änderungen oder auch einem jahrelangen Verharren in diesem Zustand gibt es Probleme mit der Umsetzung bei den Anbietern von Brausern. Von daher ist dann auch dort von der Verwendung darin erwähnter neuer Merkmale abzuraten. Zu solchen Dokumenten gibt es indes auch Tests samt Ergebnissen, welchen zu entnehmen ist, welche neuen Merkmale bereits komplett implementiert wurden, somit verwendet werden können.
Weil es keine Besonderheiten für funcity gibt, wird hier zum Studium des Formates folgendes Buch empfohlen: wikibook zu CSS, an dem ich auch in größerem Unfange mitgewirkt habe.