SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Logische Auszeichnungen im Text

	Logische Auszeichnungen im Text
	Allgemeines zur logischen Auszeichnung im Text HTML-Elemente für logische Auszeichnung im Text Änderungsmarkierungen im Dokument Textrichtung ändern Logische Elemente für Textauszeichnung formatieren mit CSS Weitere Informationen

Allgemeines zur logischen Auszeichnung im Text

In HTML gibt es logische und physische Elemente zur Auszeichnung von Text. Logische Textauszeichnungen haben Bedeutungen wie "betont" oder "emphatisch". Bei logischen Elementen entscheidet der Web-Browser, wie ein solcher Text hervorgehoben wird (z.B. fett, kursiv oder andersfarbig). In Verbindung mit CSS Stylesheets können Sie logische Textauszeichnungen allerdings nach Wunsch formatieren.

Im Unterschied zu Elementen wie Überschriften, Textabsätzen, Listen usw., die ja auch der logischen Strukturierung von Text dienen, sind die hier beschriebenen Elemente jedoch so genannte Inline-Elemente, während Überschriften, Textabsätze, Listen usw. als Block-Elemente bezeichnet werden. Inline-Elemente erzeugen keinen Absatz (genauer: keine neue Zeile) im Textfluss.

HTML-Elemente für logische Auszeichnung im Text

Es stehen verschiedene HTML-Elemente zur Verfügung, um Text logisch auszuzeichnen.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Alles logisch</h1>

<p>Die Kreter sagen, da&szlig; <strong>alle Kreter l&uuml;gen</strong>.
Das stimmt aber nicht, weil alle Kreter l&uuml;gen.</p>

</body>
</html>

Erläuterung:

Inline-Elemente für Auszeichnungen im Text müssen - zumindest in der HTML-Variante "Strict" - innerhalb anderer Block-Elemente vorkommen. Im obigen Beispiel ist ein Textabsatz notiert und innerhalb davon eine logische Textauszeichnung. Am Anfang des Textbereichs, der ausgezeichnet werden soll, wird ein einleitendes Tag (im Beispiel das Tag ) eingefügt. Am Ende des gewünschten Textbereichs wird ein entsprechendes Abschluss-Tag eingefügt (im Beispiel ).

Folgende Elemente dieser Art stehen zur Verfügung:

Element (Notation)	Status	Bedeutung
`<em>...</em>`		zeichnet einen Text aus mit der Bedeutung "emphatisch".
`<strong>...</strong>`		zeichnet einen Text aus mit der Bedeutung "stark betont".
`<code>...</code>`		zeichnet einen Text aus mit der Bedeutung "dies ist Quelltext"
`<samp>...</samp>`		zeichnet einen Text aus mit der Bedeutung "Dies ist ein Beispiel"
`<kbd>...</kbd>`		zeichnet einen Text aus mit der Bedeutung "dies stellt eine Tastatureingabe dar"
`<var>...</var>`		zeichnet einen Text aus mit der Bedeutung "dies ist eine Variable oder ein variabler Name"
`<cite>...</cite>`		zeichnet einen Text aus mit der Bedeutung "dies ist ein Zitat von einer anderen Quelle"
`<dfn>...</dfn>`		zeichnet einen Text aus mit der Bedeutung "dies ist eine Definition".
`<acronym>...</acronym>`		zeichnet einen Text aus mit der Bedeutung "dies ist eine Abkürzung" (z.B. "z.B.")
`<abbr>...</abbr>`		zeichnet einen Text aus mit der Bedeutung "dies ist eine abgekürzte Schreibweise" (z.B. "WWW")
`<q cite="Quelle">...</q>`		zeichnet einen Text aus mit der Bedeutung "dies ist ein Zitat mit Quellenangabe"

Änderungsmarkierungen im Dokument

Wenn Sie Dokumente in HTML bearbeiten, bei denen es wichtig ist, Änderungen zu protokollieren, dann können Sie logische Textauszeichnungen für gelöschte und eingefügte Textpassagen verwenden.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Viel falsch</h1>

<p>Goethe wurde im Jahre <del>1768</del><ins>1789</ins> geboren
und war ein begnadeter <del>Sportler</del><ins>Schriftsteller</ins>.</p>

</body>
</html>

Erläuterung:

Mit <del>...</del> zeichnen Sie Text aus, der nicht mehr gültig ist (del = delelte = löschen). Mit <ins>...</ins> können Sie Text auszeichnen, der neu dazugekommen ist (ins = insert = einfügen).

Zur exakteren Auszeichnung sind noch zwei Attribute in beiden einleitenden Tags erlaubt:

Mit dem Attribut datetime= im einleitenden Tag von <ins> oder <del> können Sie den Zeitpunkt der Änderung festhalten. Eine Angabe wie <ins datetime="2001-06-25T10:59+01:00"> bedeutet: "eingefügt am 25.6.2001 um 10 Uhr 59" nach Zeitzone UTC-Zeit plus 1 Stunde. Die Uhrzeit/Zeitzonenangabe können Sie auch weglassen, etwa so: <ins datetime="2001-06-25">. UTC bedeutet "Coordinated Universal Time".

Mit dem Attribut cite= können Sie einen URI angeben, der als der Grund für die Änderung gelten kann - beispielsweise ein verbindliches Dokument, auf dem Ihr Dokument beruht, und das mittlerweile geändert wurde. Eine Angabe wie <ins cite="http://www.w3.org/TR/1999/REC-html401-19991224"> bedeutet: dieser Text wurde aufgrund der HTML-Spezifikation 4.01 vom 24.12.1999 eingefügt (der angegebene URI ist die Adresse, an der die HTML-Spezifikation zu finden ist).

Beachten Sie:

Die beiden Elemente ins und del haben eine Sonderstellung, was ihr Vorkommen betrifft. Diese beiden Elemente dürfen entweder innerhalb von Block-Elementen vorkommen - dann fungieren sie selber als Inline-Elemente. Oder sie werden außerhalb von Block-Elementen notiert - dann fungieren sie selber als Block-Elemente und können mehrere andere Block-Elemente und deren gesamten Inhalt einschließen.

Textrichtung ändern

Wenn Sie HTML in Verbindung mit Sprachen benutzen, die eine andere Textrichtung als von links nach rechts haben, kann es zu Konflikten bei der Textrichtung kommen, vor allem, wenn Sie zwei Sprachen mit unterschiedlicher Textrichtung im Text gemischt verwenden. Wenn Sie Unicodes in HTML notieren, wird dabei normalerweise automatisch auch die Textrichtung der Sprache berücksichtigt. Wenn Sie etwa die Unicodes für ein arabisches Wort von links nach rechts notieren, sollte die Software die Zeichenkette dennoch so auflösen, dass die Darstellung von rechts nach links erfolgt, weil das die Textrichtung im Arabischen ist. Sollte das aus irgendwelchen Gründen nicht funktionieren, können Sie mit Hilfe eines HTML-Elements nachhelfen.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Umgekehrt</h1>

<p>Hier wird das Wort &quot;umgekehrt&quot; einfach <bdo dir="rtl">umgekehrt</bdo>.

</body>
</html>

Erläuterung:

Mit <bdo dir="rtl"> leiten Sie einen Text ein, der von rechts nach links dargestellt wird, und mit <bdo dir="ltr"> einen Text, der von links nach rechts dargestellt wird. </bdo> beendet den Text mit der anderen Schreibrichtung (bdo = bidirectional overwrite = Überschreiben der automatischen Bidirektionalität). Mit dem Attribut dir= erzwingen Sie die Textrichtung (rtl = right to left = rechts nach links).

Das Attribut dir= gehört zu den Universalattributen und darf in allen einleitenden HTML-Tags stehen, in denen Text vorkommen kann. Das bdo-Element ist für solche Fälle gedacht, in denen dir= in anderen HTML-Elementen zu Problemen führt, beispielsweise bei verschachtelten Tags mit widersprüchlichen Anweisungen zur Textrichtung.

Logische Elemente für Textauszeichnung formatieren mit CSS

Wie logische Elemente zur Textauszeichnung genau dargestellt werden, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen. Mit CSS Stylesheets können Sie solche Elemente jedoch nach Wunsch formatieren. Bei Verwendung von CSS Stylesheets müssen Sie zunächst wissen, wie man CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften:
Schriftformatierung
Hintergrundfarben und -bilder

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Viele viele bunte Logi's</h1>

<p>
Text mit dem <em style="color:blue">em-Element</em><br>
Text mit dem <strong style="color:red">strong-Element</strong><br>
Text mit dem <code style="color:purple">code-Element</code><br>
<!-- usw. -->
</p>

</body>
</html>

Erläuterung:

Die verschiedenen logischen Elemente im Beispiel erhalten unterschiedliche Schriftfarben. Formatieren können die Browser allerdings nur jene Elemente, die sie kennen.

Weitere Informationen


	Physische Auszeichnungen im Text
	Präformatierter Text (wie im Editor eingegeben)

SELFHTML/Navigationshilfen

HTML/XHTML

Elemente zur Textstrukturierung