SELFHTML

Logische Auszeichnungen im Text

Informationsseite

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

 nach unten 

Allgemeines zur logischen Auszeichnung im Text

In HTML gibt es logische und Seite 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 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 Seite Inline-Elemente, während Überschriften, Textabsätze, Listen usw. als Seite Block-Elemente bezeichnet werden. Inline-Elemente erzeugen keinen Absatz (genauer: keine neue Zeile) im Textfluss.

nach obennach unten

HTML-Elemente für logische Auszeichnung im Text

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

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML-Elemente f&uuml;r logische Auszeichnung im Text</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 Seite Textabsatz notiert und innerhalb davon eine logische Textauszeichnung. Am Anfang des Textbereichs, der ausgezeichnet werden soll, wird ein einleitendes Tag (im Beispiel das Tag <strong>) eingefügt. Am Ende des gewünschten Textbereichs wird ein entsprechendes Abschluss-Tag eingefügt (im Beispiel </strong>).

Folgende Elemente dieser Art stehen zur Verfügung:

Element (Notation) Status Bedeutung
<em>...</em> HTML 2.0XHTML 1.0MS IE 2.0Netscape 1.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2  zeichnet einen Text aus als betonten, wichtigen Text ("emphatisch")
<strong>...</strong> HTML 2.0XHTML 1.0MS IE 1.0Netscape 1.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2  zeichnet einen Text aus mit der Bedeutung "stark betont" (Steigerung von "em")
<code>...</code> HTML 2.0XHTML 1.0MS IE 1.0Netscape 1.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2  zeichnet einen Text aus mit der Bedeutung "dies ist Quelltext"
<samp>...</samp> HTML 2.0XHTML 1.0MS IE 2.0Netscape 1.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2  zeichnet einen Text aus mit der Bedeutung "Dies ist ein Beispiel". Im engeren Sinne können auch Beispiel-Ausgaben von Programmen und Scripten auf diese Weise ausgezeichnet werden.
<kbd>...</kbd> HTML 2.0XHTML 1.0MS IE 2.0Netscape 1.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2  zeichnet einen Text aus mit der Bedeutung "dies stellt eine Benutzereingabe dar"
<var>...</var> HTML 2.0XHTML 1.0MS IE 1.0Netscape 1.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2  zeichnet einen Text aus mit der Bedeutung "dies ist eine Variable oder ein variabler Name"
<cite>...</cite> HTML 2.0XHTML 1.0MS IE 2.0Netscape 1.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2  zeichnet einen Text aus mit der Bedeutung "dies ist die Quelle oder der Autor". Das eigentliche Zitat wird mit q oder Seite blockquote ausgezeichnet.
<dfn>...</dfn> HTML 3.2XHTML 1.0MS IE 2.0Netscape 6.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2  zeichnet einen Text aus mit der Bedeutung "dies ist eine Definition".
<abbr>...</abbr> HTML 4.0XHTML 1.0Netscape 6.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2  zeichnet einen Text aus mit der Bedeutung "dies ist eine Abkürzung"
<acronym>...</acronym> HTML 4.0XHTML 1.0MS IE 4.0Netscape 6.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2  zeichnet einen Text aus mit der Bedeutung "dies ist ein Akronym". Akronyme sind besondere Abkürzungen, die aus den Anfangsbuchstaben mehrerer (Teil-)Wörter gebildet werden. Sie werden im Deutschen in der Regel ohne Punkte gebildet ("Lkw"). Akronyme lassen sich darüber hinaus meist als Wort aussprechen (z.B. "NATO").
<q cite="Quelle">...</q> HTML 4.0XHTML 1.0MS IE 4.0Netscape 6.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2  zeichnet einen Text aus mit der Bedeutung "dies ist ein Zitat mit Quellenangabe"

 

nach obennach unten

HTML 4.0XHTML 1.0MS IE 4.0Netscape 6.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 Ä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:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>&Auml;nderungsmerkierungen im Dokument</title>
</head>
<body>
<h1>Viel falsch</h1>

<p>Goethe wurde im Jahre <del>1768</del><ins>1749</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 = delete = 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 Seite 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.

nach obennach unten

HTML 4.0XHTML 1.0MS IE 5.5Netscape 6.0Opera 7.20Mozilla Firefox 1 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:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Textrichtung &auml;ndern</title>
</head>
<body>
<h1>Umgekehrt</h1>

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

</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 Kapitel 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.

nach obennach unten

HTML 4.0XHTML 1.0MS IE 3.0Netscape 4.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 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 Kapitel Stylesheets können Sie solche Elemente jedoch nach Wunsch formatieren. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel 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:
Seite Schriftformatierung
Seite Hintergrundfarben und -bilder

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Logische Elemente für Textauszeichnung formatieren mit CSS</title>
</head>
<body>
<h1>Viele viele bunte Logis</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.

nach obennach unten

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo die logischen Textauszeichnungen vorkommen dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz und Seite Attribut-Referenz für <em>...</em>
Seite Element-Referenz und Seite Attribut-Referenz für <strong>...</strong>
Seite Element-Referenz und Seite Attribut-Referenz für <code>...</code>
Seite Element-Referenz und Seite Attribut-Referenz für <samp>...</samp>
Seite Element-Referenz und Seite Attribut-Referenz für <kbd>...</kbd>
Seite Element-Referenz und Seite Attribut-Referenz für <var>...</var>
Seite Element-Referenz und Seite Attribut-Referenz für <cite>...</cite>
Seite Element-Referenz und Seite Attribut-Referenz für <dfn>...</dfn>
Seite Element-Referenz und Seite Attribut-Referenz für <acronym>...</acronym>
Seite Element-Referenz und Seite Attribut-Referenz für <abbr>...</abbr>
Seite Element-Referenz und Seite Attribut-Referenz für <q>...</q>
Seite Element-Referenz und Seite Attribut-Referenz für <ins>...</ins>
Seite Element-Referenz und Seite Attribut-Referenz für <del>...</del>
Seite Element-Referenz und Seite Attribut-Referenz für <bdo>...</bdo>

 nach oben
weiter Seite Physische Auszeichnungen im Text
zurück Seite Präformatierter Text (wie im Editor eingegeben)
 

© 2005 Seite Impressum