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. |
| code | code steht für Quelltext. Mit dem class Attribut kann man die Sprache zuweisen. |
<code>var xyz=23; </code> |
| 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, i, strong, em | Physische und semantische Formate.Auf vielen Webseiten wird behauptet b und i sind physische, sichtbar hervorgehobene, darstellungsbezogene Formate, während strong und i semantisch sind. Das ist falsch. Ab HTML5 wurden alle darstellungsbezogenen Elemente und Attribute in HTML entweder entfernt, oder sie bekamen eine semantische Bedeutung. Die Bedeutung dieser Elemente wird in der What WG Dokumentation genau beschrieben. Siehe auch die Dokumentation von Stefan Münz |
|
| b |
Das b-Element repräsentiert einen Textabschnitt, dem aus praktischen Erwägungen Aufmerksamkeit zuteil wird, ohne dass ihm eine besondere Bedeutung oder eine andere Artikulierung oder Stimmung verliehen wird; bspw. ein Schlüsselwort in einer Zusammenfassung, einen Produktnamen in einer Bewertung, einen Begriff für eine Nutzeraktion in einer interaktiven textbasierten Software oder den ersten Absatz (Vorspann, Leitsatz) eines Artikels Das b Element sollte als letzter Ausweg verwendet werden, wenn kein anderes Element besser geeignet ist. Insbesondere sollte man Überschriften h1 bis h6 Elemente verwenden, Betonungen sollten das em Element verwenden, Wichtigkeit sollte mit dem strong Element angegeben werden und markierter oder hervorgehobener Text sollte das mark Element verwenden. Wenn b und i verwendet werden, ist es meist angebracht, Klassenattribute hinzuzufügen, die beschreiben, was mit der Auszeichnung beabsichtigt wurde, so dass verschiedene Anwendungsfälle voneinander unterschieden werden können. |
Das Topeak Mini 9 Pro ist ein nützliches Werkzeug, welches in keiner Fahrradtasche fehlen sollte. |
| i |
Stilistische Benennung, früher wurde es für Kursivschrift eingesetzt seit HTML5 ist es von semantischer Natur. Das i-Element repräsentiert einen Textabschnitt in einer anderen Artikulierung oder Stimmung oder anderen Abweichung vom restlichen Text, die auf eine andersartige Qualität des Texts hindeutet; Fachausdrücke, anderssprachige Phrasen, Eigennamen, Firmenname eine taxonomische Bezeichnung, ein technischer Begriff, eine Redewendung aus einer anderen Sprache, ein Gedanke oder den Namen eines Schiffes. Wenn b und i verwendet werden, ist es meist angebracht, Klassenattribute hinzuzufügen, die beschreiben, was mit der Auszeichnung beabsichtigt wurde, so dass verschiedene Anwendungsfälle voneinander unterschieden werden können. Wenn man einen Begriff in einer anderen Sprache auszeichnet kann man das lang Attribut mit einem Sprachkürzel einfügen: |
Die Amzing Grace lag in Hamburg vor Anker. HTML lernt sich nicht von selbst, C'est la Vie. |
| strong | siehe whatWG Erlärung und Beispiele Stilistisch hervorgehoben wichtige Textstellen mit Signalwirkung. Man kann es mehrfach verschachteln um die Signalwirkung zu erhöhen. Es wird von Screenreadern betont vorgelesen ähnlich wie b. Man kann das strong Element auch einsetzen, um eine Textstelle auszuzeichnen, die wichtiger ist als der übrige Text. siehe Beispiel in einem figcaption Element |
Warnung: Wenn Sie dieses Fenster schließen gehen alle Daten verloren.
|
| em | Betonung, Schwerpunkt, Gewichtung / Textpassagen, denen man beim lauten Aussprechen durch Betonung Gewicht verleiht. Man sieht an diesen Beispielen, dass ein Satz eine völlig andere Bedeutung bekommen kann, je nachdem was man betont. |
Ich brauch das einfach. Du machst das heute. |
| kbd | Text über Tastatur, im weitesten Sinne auch Menübefehle. Bei Tastenkombinationen wird eine Verschachtelung empfohlen.
|
Wählen Sie Datei / Speichern Drücken Sie Strg. + C um zu kopieren. |
| 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. |
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 € |
| samp | Beispiel Ausgabe in technischen Dokumentationen, Fehlermeldungen von Programmen, Bildschirmausgaben | Wenn der Name schon vorhanden ist, wird name is already existing angezeigt. |
| 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 |