Physische und logische Auszeichnung zur Hervorhebung von Texten
Auf Webseiten können Texte ausgezeichnet werden, um sie hervorzuheben. Hierbei wird zwischen physischen und logischen Auszeichnungen unterschieden. Bei den physischen Auszeichnungen handelt es sich lediglich um optische Auszeichnungen, so dass Texte z.B. Fett oder Kursiv dargestellt werden. Eine besondere Bedeutung haben physisch ausgezeichnete Texte jedoch nicht. Bei logisch ausgezeichneten Texten, z.B. Überschriften oder Zitaten, ist das jedoch anders. Wenn man Texte logisch auszeichnet, dann erhalten die Texte auch eine entsprechende Bedeutung.
Texte auf Webseiten sollten soweit es geht, gemäß ihrer Bedeutung logisch ausgezeichnet werden. Das ist aus verschiedenen Gründen wichtig. Dazu zählen unter anderem:
- Barrierefreiheit: Sehbehinderte bzw. blinde Menschen können die Texte auf Webseiten z.B. mit Screenreader lesen. Wenn Texte logisch ausgezeichnet werden, dann hilft das dabei, den Aufbau, die Struktur und die Inhalte der Webseite besser zu verstehen. Wenn man z.B. bei einem normalen Absatz lediglich die Schriftgröße so einstellt, dass es aussieht wie eine Überschrift, jedoch nicht als Überschrift auszeichnet, dann könnte man bei der Betrachtung am Bildschirm zwar annehmen, dass der Text eine Überschrift darstellen soll. Blinde Menschen können das jedoch nicht und für sie ist der Text ein ganz normaler Absatz. Daher ist es für sie eine große Hilfe, wenn man Texte gemäß ihrer Bestimmung auszeichnet.
- Auslesen durch Suchmaschinen: Die Aufnahme in die Suchmaschinen erfolgt in der Regel durch sogenannte Bots. Das sind Programme, die selbständig im Internet Webseiten auslesen und in den Suchmaschinenindex aufnehmen. Um die Struktur und die Inhalte einer Webseite zu erkennen und zu gewissen Suchbegriffen einzuordnen, wird unter anderem die Seite inkl. aller Texte und Auszeichnungen ausgewertet.
- Auslesen durch andere Programme: Was für Suchmaschinen gilt, das gilt auch für andere Programme, die Webseiten auslesen. Wenn z.B. in sozialen Netzwerken eine Webseite "geteilt" wird, dann wird häufig die Überschrift sowie ein Ausschnitt aus dem Text und evtl. ein Bild als Vorschau angezeigt. Wenn die Texte nicht entsprechend ausgezeichnet wurden, dann werden solche Vorgänge erschwert.
- Aufbau einer Suchfunktion: Viele Webseiten nehmen nach einer gewissen Zeit sehr große Ausmaße an, sodass eine Suchfunktion auf der Webseite notwendig wird. Auch hierbei ist man darauf angewiesen, dass die Texte gemäß ihrer Bestimmung logisch ausgezeichnet werden. So kann man diesen eine gewisse Gewichtung verleihen. Wenn z.B. ein Suchbegriff auf verschiedenen Seiten in der Überschrift und in den Absätzen vorkommt, dann könnte man den Suchalgorithmus so programmieren, dass die Seite, die den Begriff in der Überschrift enthält eine höhere Gewichtung erhält. Man könnte die Suche auch so eingrenzen, sodass z.B. nur in den Überschriften gesucht wird.
Textauszeichnung bis HTML4 und ab HTML5
Bis HTML4 konnte man Texte sowohl logisch, als auch physisch auszeichnen. Das war ein häufiger Kritikpunkt. Denn, die physische Auszeichnung wie z.B. Fett, Kursiv etc. sollte eigentlich nur über CSS erfolgen. Daher wurde ab HTML5 die physische Auszeichnung zumindest offiziell abgeschafft und bei Auszeichnungen von Texten handelt es sich immer um logische Auszeichnungen. Das bedeutet jedoch nicht, dass bei einer logischen Auszeichnung die Texte überhaupt nicht hervorgehoben werden und separat über CSS formatiert werden müssen. Wenn man mit HTML5 z.B. den H1-Tag verwendet, dann erhält der Text die semantische Bedeutung "Überschrift der Ebene 1" und der Text wird im Browser in der Standardeinstellung in der Größe einer Überschrift dargestellt. Hier ist also keine separate CSS-Zuweisung notwendig, wenn man nicht davon abweichen möchte. Das sind jedoch nur Standardeinstellungen in den Browsern und können per CSS geändert werden. Außerdem kann es irgendwann durchaus sein, dass die Browserhersteller komplett darauf verzichten und jegliche Formatierung über CSS erfolgen muss.
Auszeichnungen, die in Browsern gewöhnlich formatiert dargestellt werden
Auch wenn in HTML5 die physische Auszeichnung von Texten abgeschafft wurde und alle Auszeichnungen logisch sind, werden die Texte bei vielen Auszeichnungen im Browser formatiert dargestellt. Nachfolgend eine Übersicht über die am häufigsten verwendeten Auszeichnungen, die gleichzeitig im Browser formatiert dargestellt werden.
Fett
<b>Text innerhalb B-Tag.</b>
Darstellung: Text innerhalb B-Tag.
Semantische Bedeutung: Text, der hervorgehoben und üblicherweise fett geschrieben wird.
Wichtig
<strong>Text innerhalb STRONG-Tag.</strong>
Darstellung: Text innerhalb STRONG-Tag.
Semantische Bedeutung: Text, der besonders wichtig ist.
Kursiv
<i>Text innerhalb I-Tag.</i>
Darstellung: Text innerhalb I-Tag.
Semantische Bedeutung: Text, der hervorgehoben und üblicherweise kursiv geschrieben wird.
Kursiv
<em>Text innerhalb EM-Tag.</em>Darstellung: Text innerhalb EM-Tag.
Semantische Bedeutung: Text, der emphatisch (übertrieben, hervorgehoben) ausgedrückt wird.
Unterstrichen
<u>Text innerhalb U-Tag.</u>
Darstellung: Text innerhalb U-Tag.
Semantische Bedeutung: Text, der hervorgehoben und üblicherweise unterstrichen geschrieben wird.
Eingefügt
<ins>Text innerhalb INS-Tag.</ins>
Darstellung: Text innerhalb INS-Tag.
Semantische Bedeutung: Text, der nachträglich eingefügt und üblicherweise unterstrichen geschrieben wird.
Inline-Element
<span>Text innerhalb SPAN-Tag.</span>
Darstellung: Text innerhalb SPAN-Tag.
Semantische Bedeutung: Text, der ein Inline-Element ist und beliebig formatiert werden kann. (Streng genommen ohne semantische Bedeutung.)
Klein
<small>Text innerhalb SMALL-Tag.</small>
Darstellung: Text innerhalb SMALL-Tag.
Semantische Bedeutung: Text, eigentlich nicht zum Inhalt gehört und üblicherweise klein geschrieben wird. (Streng genommen ohne semantische Bedeutung.
Vorformatierter Text
<pre>Text innerhalb PRE-Tag.</pre>
Darstellung als Blockelement:
Text innerhalb PRE-Tag.
Semantische Bedeutung: Text, der vorformatiert ist.
Programmiercode
<code>Text innerhalb CODE-Tag.</code>
Darstellung: Text innerhalb CODE-Tag.
Semantische Bedeutung: Text, der ein Programmiercode markiert.
Zitat
<q>Text innerhalb Q-Tag.</q>
Darstellung: Text innerhalb Q-Tag.
Semantische Bedeutung: Text, der ein Zitat markiert.
Zitat
<blockquote>Text innerhalb BLOCKQUOTE-Tag.</blockquote>
Darstellung als Blockelement:
Text innerhalb BLOCKQUOTE-Tag.
Semantische Bedeutung: Ganzer Absatz, der ein Zitat markiert.
Titel
<cite>Text innerhalb CITE-Tag.</cite>
Darstellung: Text innerhalb CITE-Tag.
Semantische Bedeutung: Text, der einen Titel (Buch, Film etc.) markiert.
Unrelevant
<s>Text innerhalb S-Tag.</s>
Darstellung: Text innerhalb S-Tag.
Semantische Bedeutung: Text, der nicht mehr relevant ist und üblicherweise durchgestrichen geschrieben wird.
Gelöscht
<del>Text innerhalb DEL-Tag.</del>
Darstellung: Text innerhalb DEL-Tag.
Semantische Bedeutung: Text, der gelöscht wurde und üblicherweise durchgestrichten geschrieben wird.
Tiefgestellt
<sub>Text innerhalb SUB-Tag.</sub>
Darstellung: Text innerhalb SUB-Tag.
Semantische Bedeutung: Text, der tiefgestellt geschrieben wird. (Streng genommen ohne semantische Bedeutung.)
Hochgestellt
<sup>Text innerhalb SUP-Tag.</sup>
Darstellung: Text innerhalb SUP-Tag.
Semantische Bedeutung: Text, der hochgestellt geschrieben wird. (Streng genommen ohne semantische Bedeutung.)
Definition
<dfn>Text innerhalb DFN-Tag.</dfn>
Darstellung: Text innerhalb DFN-Tag.
Semantische Bedeutung: Text, der eine Definition markiert.
Tastatureingabe
<kbd>Text innerhalb KBD-Tag.</kbd>
Darstellung: Text innerhalb KBD-Tag.
Semantische Bedeutung: Text, der eine Tastatureingabe markiert.
Markierung
<mark>Text innerhalb MARK-Tag.</mark>
Darstellung: Text innerhalb MARK-Tag.
Semantische Bedeutung: Text, der hervorgehoben und üblicherweise markiert geschrieben wird.
Ausgabe aus Computer/Programm
<samp>Text innerhalb SAMP-Tag.</samp>
Darstellung: Text innerhalb SAMP-Tag.
Semantische Bedeutung: Text, der eine Textausgabe aus Computer/Programm markiert.
Variable
<var>Text innerhalb VAR-Tag.</var>
Darstellung: Text innerhalb VAR-Tag.
Semantische Bedeutung: Text, der eine Variable markiert.
Auszeichnungen, die in Browsern gewöhnlich nicht formatiert dargestellt werden
Bei den folgenden Auszeichnungen werden die Texte in Browsern gewöhnlich nicht formatiert dargestellt.
Abkürzung
<abbr>Text innerhalb ABBR-Tag.</abbr>
Darstellung: Text innerhalb ABBR-Tag.
Semantische Bedeutung: Text, der eine Abkürzung ist.
Geänderte Textrichtung
<bdi>Text innerhalb BDI-Tag.</bdi>
Semantische Bedeutung: Text mit geänderter Textrichtung.
Geänderte Textrichtung
<bdo>Text innerhalb BDO-Tag.</bdo>
Semantische Bedeutung: Text mit geänderter Textrichtung.
Aussprachehinweis
<ruby>Text innerhalb RUBY-Tag.</ruby>
Semantische Bedeutung: Text, der einen Aussprachehinweis (Annotation) enthält (relevant für asiatische Schriftarten).
Ergänzung für Aussprachehinweis
<rp>Text innerhalb RP-Tag.</rp>
Semantische Bedeutung: Ergänzung des Aussprachehinweises für Browser, die den RUBY-Tag nicht kennen.
Inhalt des Aussprachehinweises
<rt>Text innerhalb RT-Tag.</rt>
Semantische Bedeutung: Text, der die Annotation enthält.
Datum und Uhrzeit
<time>Text innerhalb TIME-Tag.</time>
Semantische Bedeutung: Text, der ein Datum und Uhrzeit markiert.
Auszeichnungen, die kein Standard (mehr) sind
Die Spezifikationen für HTML wurden im Laufe der Zeit mehrmals geändert. So wurden hin und wieder Vorschläge für neue Tags gemacht, die jedoch nie als Standard in HTML aufgenommen wurden oder einige Tags wurden nach einer gewissen Zeit wieder aussortiert. Nachfolgend einige Tags, die nicht mehr verwendet werden (sollen).
Akronym
<acronym>Text innerhalb ACRONYM-Tag.</acronym>
Text, der ein Akronym markiert
Groß
<big>Text innerhalb BIG-Tag.</big>
Text, der vergrößert dargestellt wird.
Blinkend
<blink>Text innerhalb BLINK-Tag.</blink>
Text, der am Bildschirm blinkt.
Sprache
<lang>Text innerhalb LANG-Tag.</lang>
Text in einer anderen Sprache.
Lauftext
<marquee>Text innerhalb MARQUEE-Tag.</marquee>
Text, der horizontal über dem Bildschirm bewegt wird.
Person
<person>Text innerhalb PERSON-Tag.</person>
Text, der einen Personennamen enthält.
Teletype
<tt>Text innerhalb TT-Tag.</tt>
Text, der in Teletype Schrift angezeigt wird.