HTML5: Semantische Phrasenelemente

Zurück zu Verweise | Hoch zum Inhaltsverzeichnis | Vor zu Ruby

(X)HTML stellt eine Reihe von Phrasen-Elementen bereit, mit welchen der Text inhaltlich ausgezeichnet werden kann. Außer den allgemein verwendbaren Attributen haben diese, sofern nicht anders erwähnt, keine für sie spezifischen Attribute, sie dienen einzig der besseren Kennzeichnung besonderer Textstellen, der Hervorhebung besonderer Strukturen im laufenden Text.

Der Inhalt ist jeweils Phraseninhalt, eine Kombination ist also möglich. Die Elemente können verwendet werden, wo fließender Inhalt erlaubt ist. Sinnvoll werden sie dort verwendet, wo der Inhalt eines Elementes aus Phraseninhalt besteht.

Betonter Text, em und strong

Soll eine Textpassage betont werden, so gibt es dafür zwei Elemente, em und strong. em steht dabei für Emphase, emphatisch (altgriechisch, in dem Zusammenhang zeigen, offensichtlich machen).
strong schließt sich daran an und bedeutet stark emphatisch, also eine stärkere Betonung. Eine Kombination ist auch möglich. Es ist aber nicht festgelegt, ob eine emphatisierste starke Emphase stärker hervorgehoben werden sollte als eine starke emphatisierste Emphase 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 emphatisch oder doppelt stark emphatisch 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 emphatisch 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>

Andere oft komische Betonungen lassen sich häufig nur sehr schwierig wiedergeben, weil es kein Element gibt, um die Betonung zurückzunehmen. Versuchen könnte man es vielleicht so:

<p>Wir sind <em>ein</em> Volk!</p>
<p><em>Wir</em> sind <em>ein Volk</em>…</p>
<p><em>Wir sind</em> ein <em>Volk …</em></p>
<p><strong>Wir</strong> sind ein <em>Volk</em>?</p>
<p><strong>Wir</strong> sind <em>ein Volk</em>?</p>

Da zeigt sich auch, daß Betonungen die Bedeutung komplett ändern können, was in der mündlichen Wiedergabe recht einfach umzusetzen ist, aber nur schwierig hinzuschreiben ist. Dadurch können sich im Text durchaus erwünschte, aber auch unerwünschte Mehrdeutigkeiten ergeben, die man mittels dieser Elemente bei Bedarf aber abmildern oder auch verstärken kann.

Bei der dritten Variante wäre eigentlich noch das o von Volk zu zwei Vokalen auseinanderzuziehen V-o-o-lk, bei dem das zweite o etwas weniger betont wird als das erste, wobei man das 'lk ...' dann mit einem angedeuteten Kopfschütteln ausklingen lassen muß – doch wie notiert man so etwas? (Übungsaufgabe für den Leser ;o)

Deutlich zu erkennen ist an dem Beispiel übrigens auch, daß Ausrufezeichen, Fragezeichen und Ellipsen (…) als frühe Versuche einer Auszeichnung von Text, Bedeutung und Betonung verstanden werden können, ebenso übrigens wie die Leerzeichen zwischen den Wörtern oder Zeilenumbrüche zur Kennzeichnung vom Anfang und Ende eines Absatzes. Neben den Elementen em und strong bestimmen solche zusätzlichen Zeichen stark die Satzmelodie und intendierte Bedeutung mit.

Ungültiger Inhalt, s

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>

Abkürzungen, abbr

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 und auch immer dann, wenn man sich unsicher ist, ob es sich nicht vielleicht doch um ein Akronym handeln könnte.

Akronym ist eine besondere Art von Abkürzung, das Wort stammt aus dem Griechischen.

Im internationalen Vergleich gibt es für Akronyme allerdings verschiedene Erklärungen. Zudem wird die Bedeutung etwas dadurch verwirrt und überschattet, daß ältere Versionen des Darstellungsprogrammes microsoft internet-explorer nur acronym, aber nicht das allgemeinere abbr interpretiert hat und daher viele Autoren acronym als Ersatz für abbr mißbraucht haben, woher auch ein Teil der internationalen Bedeutungsverwirrung stammen mag. Zudem gibt es einige weitere benannte Spezialfälle für Abkürzungstypen, für die es in (X)HTML kein eigenes Element gibt, von daher ist das Akroynm etwas willkürlich hervorgehoben.

Im deutschen Sprachraum jedenfalls ist ein Akronym eine Abkürzung, die aus den Anfangsbuchstaben der Worte gebildet wird, die abgekürzt werden sollen. Weil Komposita, zusammengesetzte Wörter in der deutschen Sprache möglich sind, gelten auch die Wörter, aus denen ein Kompositum gebildet wird, in dem Sinne als Einzelwort. Solch ein Einzelwort in einem Kompositum wird damit auch durch seinen Anfangsbuchstaben im Akronym vertreten.

Typische Beispiele für Akronyme sind XML, SVG, EDV, UNO, AIDS, TÜV, LKW. Ein anderer, bisweilen gebräuchlicher Begriff dafür ist Initialismus. Andersherum sind Gestapo und Stasi, W3C, MathML, etc zwar Abkürzungen, aber keine Akronyme.

So oder so: In HTML5 sind alles Abkürzungen, daher alles Fälle für die Verwendung von abbr.

Unterscheiden kann man noch Akronyme, die als Wort gesprochen werden. Manchmal wird dies im engeren Sinne als die Definition von Akronym angesehen. Dann gibt es auch solche Akronyme, bei denen die Buchstaben einzeln gesprochen werden, wobei es auch Abkürzungen gibt, bei der die Aussprache als Wort oder als Buchstabenfolge regional verschieden sein kann oder sogar von Person zu Person, etwa bei ICE, URI. Bei JFIF/JPEG ist es sogar eine Mischung.

Andere ursprüngliche Abkürzungen haben sich zu eigenständigen Wörtern weiterentwickelt und bedürfen keiner besonderen Kennzeichnung mehr, entsprechend schreibt man dann allerdings auch Laser statt LASER, Radar statt RADAR, Sonar statt 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 
BfV (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 im Format 
<abbr><a href="glossar.xhtml#SVG">SVG</a></abbr>.

Aber mit title eher:

Am liebsten schreibe ich Vektorgraphiken mit meinem Texteditor im Format 
<a href="glossar.xhtml#SVG"><abbr title="Skalierbare VektorGraphik">SVG</abbr></a>.

Die Konstruktion mit a und abbr ist natürlich technisch suboptimal, ebenso wie die Sonderrolle von title zu diesem Zwecke. (X)HTML bietet aber leider nicht mehr. Bestrebungen, dies in XHTML2 zu ändern, sind mit der Einstellung der Bemühungen um XHTML2 im Sande verlaufen.

Eine andere Möglichkeit ergibt sich durch die Verwendung des Elementes dfn, siehe dort.

Definitionen, dfn

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</dfn> 
(Dominante Frau mit Peitsche in Leder),
<dfn>Dominus</dfn> 
(Dominanter Mann mit Peitsche, in Leder), 
<dfn>Devota</dfn> 
(Unterwürfige Frau, wechselnde oder keine Kostüme), 
<dfn>Devotus</dfn> 
(Unterwürfiger Mann, wechselnde oder keine Kostüme), 
<dfn>Multiplum</dfn> 
(Kann zwischen Frau und Mann, dominant und devot 
nach Belieben wechseln).
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 Element, die Zuordnung ist so zwar gut für Menschen lesbar, für Programme aber sicherlich keineswegs einfach, doch 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.

Daten allgemein, data

Mit dem Element 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>

Zeitangabe, time

Mit dem Element 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>.

Quelltext, code

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>

Beispiel, samp

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>

Variable, var

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>

Variable, kbd

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>

Elemente zum Hoch- oder Tiefstellen von Text, sup, sub

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>

Nebensächliches, small

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.

Allgemeine Hervorhebung, i

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:

Detlef hatte sich für seinen Favoriten 
einen schönen Spitznamen auserkoren:
<i>Kurti Sahne<i>.

Hein nannte sein kleines Segelschiff 
in leicht historischer Anlehnung <i>Bißmarke</i>.

Allgemeine Wichtigkeit, b

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!

Allgemeiner Vermerk, u

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>: Horst und Detlef Ende Januar 
an den jährlichen Boßeltermin Mitte Februar erinnern!

Referenzierter Inhalt, mark

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>.

Textrichtung, Bidirektional-Algorithmus mit bdo und bdi überschreiben

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>

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>.

Vorschlag für Zeilenumbruch, wbr

Mit dem Element 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][2018-11-01T23:19:13Z][20|8VF54-X314-p165-7q42]

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: Donau­dampf­schiffahrts­kaptiäns­anwärter­seminar­anmelde­formular­druckvorlagen­gestaltungs­ausbildungsleiter­assistenten­kurs­registrierungsformular­vorlagen­gestaltungs­anwärter

Quelltext dazu:

Donau­dampf­schiffahrts­kaptiäns­anwärter­seminar­anmelde­formular­druckvorlagen­gestaltungs­ausbildungsleiter­assistenten­kurs­registrierungsformular­vorlagen­gestaltungs­anwärter

Fortschritt, progress

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:

<p>Fortschritt: <progress id="p" max="100" value="20">20%</progress></p>

Meßgröße, meter

Das Element 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ß.

Attribute min und max

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.

Attribute low, high und optimum

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.

Attribute value

Der Wert des Attributes ist die aktuelle Meßgröße, liegt also im Bereich zwischen Minimum und Maximum. Die Angabe des Attributes ist erforderlich.

Beispiele

Dreiviertel voll:

<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:

<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:

<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>

Generisches Phrasenelement, span

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:
3p_1/2 (3p_1/2)
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.

Zurück zu Verweise | Hoch zum Inhaltsverzeichnis | Vor zu Ruby