Auszeichnung von Textstellen / Inline Elemente
Textlevel Semantics
siehe auch developer.mozilla Inline-Elemente
siehe auch offizielle
Documentation WhatWG Textlevel-Semantics
siehe auch HTML5 periodische Tabelle
siehe auch das "Webkompetenz" von Stefan Münz
Die hier vorgestellten Inline Elemente sind Textauszeichnungen mitten im Fließtext mit deren Hilfe man einzelne Wörter, Sätze oder Passagen eine besondere Bedeutung und Markierung zuweist, wie Abkürzungen, Firmennamen, Zeitangaben, wörtliche Rede etc. Für einige Elemente werden bestimmte Attribute bereitgestellt.
Sie gehören zu den klassischen Inline Elementen. In HTML5 zählen sie zum Phrasing Content. Das ist der Text des Dokuments sowie Elemente, die diesen Text auf der Ebene innerhalb des Absatzes markieren. Diese Elemente dürfen nur Text oder Phrasing Content beinhalten.
Nutzen Sie diese Elemente, sie sind genauso wichtig wie die Texterstellung selbst. Es geht hierbei nicht nur um eine optische Unterscheidung der Textstellen, sondern in erster Linie um die Bedeutung oder Semantik. Dadurch können Suchmaschinen-Robots die Texte besser verstehen und einordnen. Das wiederum wirkt sich positiv auf das Ranking aus. Auch Screenreader können diese Texte besser vorlesen und betonen.
Gerade in wissenschaftlichen Veröffentlichungen (wie diesem Tutorial) sind diese Elemente ein großer Vorteil, weil sie die einzelnen Textstellen genauer bestimmen. Die optische Wirkung dieser Elemente wird wie immer mit CSS definiert. Dadurch wird der Text auch optisch lesbarer. Wenn man beispielsweise alle Codeschnipsel, Tastaturbefehle, Abkürzungen, Verweise etc. an einer bestimmten Formatierung oder Farbe erkennt, ist der Text überschaubarer und strukturierter.
| Element | Erklärung | Beispiel | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| a | Das Anchor Element zeichnet einen Hyperlink aus. Es ist ein anklickbarer Verweis auf eine andere Ressource (Html-Seite, Bilddatei, PDF Datei etc.) siehe Hyperlinks | <a href="index.htm"> Startseite </a> | |||||||||||||||
| abbr | Abkürzung und Akronyme. In einem title Attribut, kann man die Bedeutung der Abkürzung eingeben. Sie wird bei Mausberührung angezeigt. | HTML | |||||||||||||||
| cite | Title, Bezeichnung eines Werks, nicht für Personennamen | Ein Film von Terry Gilliams ist Timebandits. | |||||||||||||||
| dfn | zu definierender Ausdruck. Es umschließt ein Element, welches an dieser Stelle erklärt wird. Es wird aber nicht die Erklärung umschlossen. | Flash ein Programm von Adobe zur Programmierung und Darstellung multimedialer und interaktiver Inhalte. | |||||||||||||||
| b, strong | Physische und semantische Formate.
| ||||||||||||||||
| em, i | 2. <em> vs. <i> (Kursiv-Optik)Auch hier gibt es einen feinen, aber wichtigen Unterschied in der Bedeutung.
| ||||||||||||||||
Zusammenfassung im Überblick
Siehe auch die Dokumentation von Stefan Münz | |||||||||||||||||
| mark | Selektierter Text. Das Tag wird in erster Linie in dynamisch erzeugtem Quellcode genutzt werden. Zum Beispiel in einem Text, der als Suchergebnis angezeigt wird, könnte das Wort nach dem gesucht wurde in dem Text durch <mark> hervorgehoben erscheinen. | Im badischen Raum gibt es viel Landwirtschaft rund um den Wein . Der gute badische Wein hat weltweit einen hohen Stellenwert. | |||||||||||||||
| samp | Computer Beispiel Ausgabe in technischen Dokumentationen, Fehlermeldungen von Programmen, Bildschirmausgaben. Hierzu können auch Menübefehle gehören, denn auch das sind Ausgaben auf dem Bildschirm. Menübefehle könnte man mit einer Klasse auszeichenen <samp class="menu-path">Datei / öffnen </samp> |
Wenn der Name schon vorhanden ist, wird name is already existing angezeigt.
Datei / Öffnen |
|||||||||||||||
| code | Computer |
<code>var xyz=23; </code> |
|||||||||||||||
| kbd | Computer
|
Drücken Sie Strg. + C um zu kopieren. |
|||||||||||||||
q |
q steht nicht für Quatschen, sondern für das englische quotation und bedeutet wörtliche Rede oder Zitat. Wenn es zu dem Zitat eine Quellenangabe im Netz gibt, kann man mittels des cite Attributes die url notieren. Leider unterstützen die meisten Browser die Verlinkung noch nicht. |
Mark Zuckerberg: Sie vertrauen mir, diese Idioten. |
|||||||||||||||
| s | nicht mehr gültiger Text (durchgestrichen) siehe auch Wiki | Preis 3,90 € alter Preis 2,50 € | |||||||||||||||
| small | Kleingedrucktes, weniger bedeutend siehe auch Wiki | copyright Rainer Wahnsinn | |||||||||||||||
| span | Allgemeines Textelement ohne semantische Bedeutung. Ähnlich wie das Div Element wird es dazu benutzt eine Textstelle zu markieren, welche man dann mittels eines id oder class Attributs und CSS stilistisch hervorheben kann. Man sollte es nur nutzen wenn es kein besseres Element gibt.class="preis" |
||||||||||||||||
| sub | Tiefgestellt (in Formeln) sub = Subscript | 23 | |||||||||||||||
| sup | Hochgestellt (Exponential) sup = Superscript | 28 | |||||||||||||||
| time | Datum / Zeitangabe mit datetime Attribut kann man eine maschinenlesbare Zeitangabe hinzufügen. Das Schema ist: |
Letztes Jahr war ein schönes Fest. | |||||||||||||||
| u | Nicht artikulierte Zusatzbemerkung (bitte nicht für unterstrichen verwenden). Wenn man einen Text kommentiert, aber diesen Kommentar nicht explizit ausdrückt, sondern die Bedeutung sich aus dem Zusammenhang ergibt. Man kann es auch für absichtlich falsch geschriebene Ausdrücke verwenden. | Im Focus steht es jetzt schwarz auf weiß, Google ist böse. Ja, ne ist klar. Hömma geht`s noch, noch son bisken...
|
|||||||||||||||
| var | frei wählbarer Bezeichnernamen/ Variable. Eine Variable ist ein Begriff aus Programmiersprachen. | DieVariable loop zählt die Schleifendurchläufe. | |||||||||||||||
| bdo | Bidirectionaler Text / Hiermit kann man eine Textstelle auszeichnen, die eine andere Schreibrichtung einnehmen soll. Beispielsweise eine Textstelle in einer anderen Sprache. Mit dem Attribut
|
abc rückwärts abc |