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 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.
Es stehen verschiedene HTML-Elemente zur Verfügung, um Text logisch auszuzeichnen.
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ür logische Auszeichnung im Text</title>
</head>
<body>
<h1>Alles logisch</h1>
<p>Die Kreter sagen, daß <strong>alle Kreter lügen</strong>.
Das stimmt aber nicht, weil alle Kreter lügen.</p>
</body>
</html>
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 <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> |
        |
zeichnet einen Text aus als betonten, wichtigen Text ("emphatisch") |
<strong>...</strong> |
 |
zeichnet einen Text aus mit der Bedeutung "stark betont" (Steigerung von "em") |
<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". Im engeren Sinne können auch Beispiel-Ausgaben von Programmen und Scripten auf diese Weise ausgezeichnet werden. |
<kbd>...</kbd> |
|
zeichnet einen Text aus mit der Bedeutung "dies stellt eine Benutzereingabe 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 die Quelle oder der Autor". Das eigentliche Zitat wird mit q oder blockquote ausgezeichnet. |
<dfn>...</dfn> |
  |
zeichnet einen Text aus mit der Bedeutung "dies ist eine Definition". |
<abbr>...</abbr> |
  |
zeichnet einen Text aus mit der Bedeutung "dies ist eine Abkürzung" |
<acronym>...</acronym> |
 |
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> |
|
zeichnet einen Text aus mit der Bedeutung "dies ist ein Zitat mit Quellenangabe" |
Änderungsmarkierungen im DokumentWenn 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.
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>Ä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>
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).
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 ändernWenn 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.
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 ändern</title>
</head>
<body>
<h1>Umgekehrt</h1>
<p>Hier wird das Wort "umgekehrt" einfach <bdo dir="rtl">umgekehrt</bdo>.</p>
</body>
</html>
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 CSSWie logische Elemente zur Textauszeichnung genau dargestellt werden, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen. Mit Stylesheets können Sie solche Elemente jedoch nach Wunsch formatieren. Bei Verwendung von 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
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>
Die verschiedenen logischen Elemente im Beispiel erhalten unterschiedliche Schriftfarben. Formatieren können die Browser allerdings nur jene Elemente, die sie kennen.
In der 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:
Element-Referenz und Attribut-Referenz für <em>...</em>
Element-Referenz und Attribut-Referenz für <strong>...</strong>
Element-Referenz und Attribut-Referenz für <code>...</code>
Element-Referenz und Attribut-Referenz für <samp>...</samp>
Element-Referenz und Attribut-Referenz für <kbd>...</kbd>
Element-Referenz und Attribut-Referenz für <var>...</var>
Element-Referenz und Attribut-Referenz für <cite>...</cite>
Element-Referenz und Attribut-Referenz für <dfn>...</dfn>
Element-Referenz und Attribut-Referenz für <acronym>...</acronym>
Element-Referenz und Attribut-Referenz für <abbr>...</abbr>
Element-Referenz und Attribut-Referenz für <q>...</q>
Element-Referenz und Attribut-Referenz für <ins>...</ins>
Element-Referenz und Attribut-Referenz für <del>...</del>
Element-Referenz und Attribut-Referenz für <bdo>...</bdo>
|
| |
 |
Physische Auszeichnungen im Text
|
 |
Präformatierter Text (wie im Editor eingegeben)
|
 SELFHTML/Navigationshilfen HTML/XHTML Elemente zur Textstrukturierung |
|
© 2005 Impressum