Logische Textauszeichnung im HTML

HTML-Webseite und die Logische Textauszeichnung

Ähnlich der physischen Textauszeichnung ist es mit logischer Textauszeichnung möglich, Texte und Textbausteine hervorzuheben. Dabei ist die optische Darstellung nicht explizit festgelegt und kann von Browser zu Browser (selbst in den einzelnen Versionen) variieren. Auch für diesen Fall stellt Ihnen HTML zehn verschiedene Inline-Elemente zur Verfügung:

abbr (engl. abbreviation; dt. Abkürzung). Zeichnet einen Text als abgekürzte Schreibweise aus.
acronym Zeichnet einen Text als Akronym aus.
cite Zeichnet einen Text als Zitat aus.
code Zeichnet einen Text als Quelltext aus.
dfn Zeichnet einen Text als Definition aus.
em (engl. emphasis; dt. Betonung). Zeichnet einen Text hervorgehoben aus.
kbd Zeichnet einen Text als Tastatureingabe aus.
samp Zeichnet einen Text als Beispiel aus.
strong Zeichnet einen Text stärker betont aus.
var Zeichnet einen Text als Variable/variabel aus.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Beispiel für logische Textauszeichnung -->
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-utf-8" />
	<title>Logische Textauszeichnung im HTML</title>
</head>
<body>
	<p>
		Es folgen Beispiele für logische Textauszeichnung:
		<abbr>abgekürzte Schreibweise</abbr>, <acronym>Abkürzung</acronym>,
		<cite>Zitat</cite>, <code>Quellcode</code>, <dfn>Definition</dfn>,
		<em>hervorgehoben</em>, <kbd>Tastatureingabe</kbd>, <samp>Beispiel</samp>,
		<strong>stark betont</strong> und <var>Variable/variabler Text</var>.
	</p>
	<p>
		Auch eine Kombination ist möglich:
		<kbd><strong>stark betonte Tastatureingabe</strong></kbd>.
	</p>
</body>
</html>

Auch logische Textauszeichnungen dürfen miteinander verschachtelt werden. Dies macht in vielen Kombinationen aber keinen Sinn, und Sie sollten deshalb davon Abstand nehmen (auch wenn ich Ihnen diese Möglichkeit aufgezeigt habe). Die Regeln für die HTML-Varianten <strict> und <transitional> entsprechen denen der physischen Textauszeichnungen und sollten eingehalten werden, um eine korrekte Darstellung gewährleisten zu können.

Ebenfalls möglich ist eine Kombination der logischen und physischen Textauszeichnungen mit Überschriften. So ließe sich eine Überschrift 1. Ordnung (<h1> ... </h1>) auch mit der Textauszeichnung kursiv (<i> ... </i>) oder einer Tastatureingabe (<kbd> ... </kbd>) kombinieren, um nur ein paar Beispiele zu nennen.

Abbildung zeigt eine logische Textauszeichnung im Safari.

Logische Textauszeichnung im HTML

HTML-Webseite und die Logische Textauszeichnung

Impressum

Datenschutz

Kontakt