⬆
Youtube Video

Text-Semantic

Textlevel Semantics / Inline 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, daher nennt man sie auch Inline-Semantics. 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.

semantische Texauszeichnungen Inline Elemente siehe offizielle Doku
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.
b, strong, i, em

Problem b und i Siehe W3C

Früher (in HTML 4) waren <b> und <i> reine Layout-Befehle (physisch). Mit HTML5 hat sich das radikal geändert: HTML ist heute ausschließlich für die Struktur und Semantik (Bedeutung) zuständig, während das Aussehen komplett dem CSS überlassen wird.

Dass der Browser sie immer noch fett oder kursiv darstellt, ist lediglich ein Standard-Verhalten (User Agent Stylesheet), damit Webseiten auch ohne CSS noch lesbar sind.

Hier ist die genaue Aufschlüsselung, wie man diese vier Elemente heute semantisch korrekt einsetzt:

1. <strong> vs. <b> (Fett-Optik)

Beide sehen standardmäßig gleich aus, bedeuten aber etwas völlig anderes.

<strong> (Semantisch: Wichtigkeit)
siehe whatWG Erlärung und Beispiele

Bedeutung: Nutze dies, wenn der Textinhalt eine hohe Relevanz hat oder eine Warnung darstellt. Ein Screenreader würde diesen Text eventuell mit einer kräftigeren Stimme vorlesen.

Beispiel:
<strong>Achtung: Die Bremsen sind defekt!</strong>

<b> (Semantisch: Aufmerksamkeit)
Siehe W3C

Bedeutung: Steht für "Bring Attention To". Man nutzt es für Textpassagen, die sich optisch abheben sollen, ohne dass sie eine höhere Wichtigkeit besitzen. Es ist eher eine "typografische Konvention". Man kann sich fragen, ob man dieses Wort in einem Buch fett drucken würde.

Beispiel:
  • Schlüsselwörter in Produktbeschreibungen: "inklusive Akkus"
  • Kernaussagen in Einleitungen oder Zusammenfassungen
  • Erste Erwähnung eines zentralen Begriffs in einer Anleitung
em, i

2. <em> vs. <i> (Kursiv-Optik)

em und i werden standardmäßig kursiv dargestellt. Aber auch hier gibt es einen feinen, aber wichtigen Unterschied in der Bedeutung.

<em> (Semantisch: Betonung)

Bedeutung: Steht für Emphasis. Es verändert die Bedeutung eines Satzes durch betonte Aussprache.

Beispiele:
  • Du machst das heute. (Du und kein anderer)
  • Du machst das heute. (heute und nicht morgen)
  • Wir essen Bello. (Geht gar nicht!)
  • Wir essen Bello. (Es gibt Happihappi!)
<i> (Semantisch: Fachbegriffe/Gedanken)

Siehe W3C

Bedeutung: Man nutzt es für Texteile, die eine "andere Stimme" oder Stimmung haben. Das umfasst technische Begriffe, wissenschaftliche Namen, fremdsprachige Ausdrücke oder Taxonomien. Man kann sich fragen:Würde man dieses Wort mit einer etwas anderen Stimme vorlesen? Würde es im Buchdruck schräg gestellt gesetzt?

Beispiele:
  • Fachbegriffe: Der Homo sapiens gehört zur Familie der Menschenaffen.
  • Fremdsprachige Wörter: Das nennt man im Französischen Déjà-vu.
  • Erklärungen: Das bedeutet: Gehe hier rein.
  • Gedankengänge oder innere Monologe: "Was meint er bloß?", dachte ich.
  • Namen von Schiffen, Flugzeugen, Raketen, Zügen, Fahrzeugen

Warum nutzt man i für Namen von Schiffen und anderen Fahrzeugen, aber nicht für Firmennamen, Produktnamen, Orte und andere geografische Bezeichnungen? Der Grund ist, Schiffe, Fahr- und Flugzeuge haben oft die Namen von Städten, Frauen oder Tieren. Hier kann es leicht zu Verwechselungen kommen. Folgende Sätze machen den Unterschied deutlich.

Beispiele:
  • Er reiste mit der Queen Mary nach New York.
  • Er war ein Panda Fan.
  • In Mexiko gibt es noch jede Menge Käfer.
 

Zusammenfassung im Überblick

Element Optik (Standard) Semantische Bedeutung (HTML5)
<strong> Fett Wichtigkeit / Dringlichkeit
<b> Fett Hervorhebung ohne besondere Wichtigkeit (z.B. Keywords)
<em> Kursiv Betonung (verändert den Sinn beim Vorlesen)
<i> Kursiv Fachsprache, Fremdwörter, Gedanken Fachausdrücke, Taxonomien

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 steht für Quelltext. Mit dem class Attribut kann man die Sprache zuweisen.

<code>var xyz=23; </code>
kbd

Computer
Text über Tastatur, Bei Tastenkombinationen wird eine Verschachtelung empfohlen.

<kbd> <kbd>Strg.</kbd> + <kbd>C</kbd> </kbd>

Drücken Sie Strg. + C um zu kopieren.

q

q steht 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.
<q cite="https://www.pastorpixel.de/">..Zitat..</p>

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:
JJJJ-MM-TT
datetime="2014-12-24"

Eine genaue Zeitangabe, erzeugt man folgendermaßen. Hinter dem Datum wird ein großes T für Time notiert. Anschließend erfolgt die Zeitangabe nach folgendem Schema.
HH:MM:SS
Stunden:Minuten:Sekunden jeweils zweistellig.

Letztes Jahr war ein schönes Fest.
u

In HTML5 steht <u> für eine nicht-verbale oder sprachlich nicht eindeutige Anmerkung im Text (Unarticulated Annotation). Der Text wird dabei visuell unterstrichen dargestellt.

  • Rechtschreib- und Grammatikfehler: Das Auszeichnen von falsch geschriebenen Wörtern (wie die rote Wellenlinie in Microsoft Word):

  • Eigennamen im Chinesischen: In der chinesischen Typografie werden Eigennamen traditionell unterstrichen.

  • Familiennamen in Eigennamen / Bibliografien: Manchmal genutzt, um Nachnamen eindeutig zu kennzeichnen.

Im Diktat schrieb der Schüler: "Er hat den <u >Waagn</u> repariert." (Richtig wäre <mark>Wagen</mark> gewesen).

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 dir gibt man die Richtung an. Die Werte sind ltr (left to right) und rtl (right to left)

<bdo dir="rtl">abc</bdo>

 abc rückwärts
abc
br Erzwungener Zeilenumbruch. Standalone Element.