Textauszeichnunghistory.back Pathfinder   

Tutorial: Alternative Textauszeichnung in HTML

Edit: Letze Änderung [ Montag , der 09.02.2009 ]

HTML,- Akronym für HyperText Markup Language,- ist eine Auszeichnungssprache für das Internet. Sie hat die Aufgabe, die Bestandteile eines text- und grafikbasierten Dokuments logisch auszuzeichnen.

Grundsätzlich muss dabei zwischen der physischen und der logischen Textauszeichnung unterschieden werden. Die physische Auszeichnung wird vom Browser kontrollierter umgesetzt und wiedergegeben. Die logische Auszeichnung hingegen, beschreibt mehr die Bedeutung des Textes (emphatische Betonung, Hervorhebung) und überläßt es dem Browser, wie er das Dokument darstellt.

Logische Textauszeichnung

Logische Textauszeichnungen finden bei text-orientierten Umgebungen ihre Anwendung. Bei wissenschaftlichen Texten oder reinen Informationstexten ist es immer ratsam die HTML-Befehle für die logischen Textauszeichnungen zu verwenden, da hier in der Regel keine physischen Formate erkannt werden.


Die wichtigsten logischen Textauszeichnungen:

<em>................Inhalt........</em>  Referenz: Wichtiger Text (emphatisch)
<strong>............Inhalt....</strong>  Referenz: Stark betont (Steigerung von em)
<code>..............Inhalt......</code>  Referenz: Quelltext/Quellcode 
<samp>..............Inhalt......</samp>  Referenz: Beispiel
<kbd>...............Inhalt.......</kbd>  Referenz: Benutzereingabe 
<var>...............Inhalt.......</var>  Referenz: Variable 
<cite>..............Inhalt......</cite>  Referenz: Quellenhinweis 
<dfn>...............Inhalt.......</dfn>  Referenz: Definition
<abbr>..............Inhalt......</abbr>  Referenz: Abkürzung
<acronym>...........Inhalt...</acronym>  Referenz: Akronym
<q cite="Quelle">...Inhalt.........</q>  Referenz: Zitat mit Quellenangabe

Physische Textauszeichnung

Lange Zeit galt die physische Textauszeichnung im Browser als kontrollierbarer. Zudem bot sie mehr gestalterische Möglichkeiten für die Dokumente. Je nach den Vorgaben des Kunden, wurden die Vor- und Nachteile der unterschiedlichen Formatierungsbefehle gegeneinander abgewogen, mit dem Resultat, dass meist die physische Textauszeichnung favorisiert wurde.


Die wichtigsten physischen Textauszeichnungen:

<b>.................Inhalt........</b>   Referenz: Text fett
<i>.................Inhalt........</i>   Referenz: Text kursiv
<tt>................Inhalt.......</tt>   Referenz: Dicktengleicher Text (tt = Teletyper)
<u>.................Inhalt........</u>   Referenz: Text unterstrichen
<strike>............Inhalt...</strike>   Referenz: Text durchgestrichen
<s>.................Inhalt........</s>   Referenz: Text durchgestrichen
<big>...............Inhalt......</big>   Referenz: Text größer als normal
<small>.............Inhalt....</small>   Referenz: Text kleiner als normal
<sup>...............Inhalt......</sup>   Referenz: Text hochgestellt
<sub>...............Inhalt......</sub>   Referenz: Text tiefgestellt

Präformatierter Quelltext mit CSS formatieren..

Heute sind wir in der Lage mit Cascading Style Sheets die Befehle der logischen Textauszeichnung genauso effizient und kontrolliert zu formatieren, wie bei der physischen Textauszeichnung. Die in Kauf genommenen Nachteile, die eine logische Textauszeichnung mit sich brachte, werden mit CSS nahezu ausgeräumt.

Für jeden Webmaster hat sich in diesem Zusammenhang mit Sicherheit schon einmal die Frage gestellt: Wie stelle ich Quelltext, zum Zwecke demonstrativer Erläuterung, in HTML dar ? Für Alle, die vor dieser Aufgabe schon einmal standen, haben wir zur Illustration nachfolgenden Quellcode, als sogenannten präformatierter Text durchgängig mit CSS formatiert. Der Code muss natürlich vorher maskiert werden, um ihn vom eigentlichen Quelltext abzugrenzen. (Erläuterung siehe unten)


Die Textauszeichnung erfolgt also in logischen Anweisungen.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
 <head>
  <title>Textauszeichnung in HTML</title>
  <link rel="stylesheet" type="text/css" href="format.css">
 </head>
 <body>
  <h2>Workaround</h2>
  <h3>Logische Textauszeichnung</h3>
  <pre class="preformtext">
<code title="01">Präformatierter Text</code>
<code title="02">Logische Textauszeichnung</code>
<code title="03">mit CSS formatiert</code>
  </pre>
 </body>
</html>
<!-- Ende der logischen Textauszeichnung -->

Im Bildausschnitt ist der maskierte Code zu sehen, der die DOCTYPE-Deklaration der obigen Zeilen Nr. 01 bis 03 darstellt.

code

.. und hier die C S S - Anweisungen

Wie Sie sehen, haben wir für das Block-Element <pre>..</pre> eine Klasse vergeben. Insofern treffen nach den gültigen CSS-Regeln die Anweisungen nur auf Inline,- bzw. Kind-Elemente zu, die sich explizit innerhalb der Klasse class="preformtext" befinden. Gleichnamige Inline-Elemente, die sich außerhalb der Klasse class="preformtext" befinden, sind von dieser Regelung nicht betroffen und behalten somit ihre zweckbestimmende, emphatische Bedeutung.


Weitere Informationen zum umfassenden Thema CSS-Selektoren auf unserer Seite CSS & Buttons.

pre.preformtext {
  font-family: "Courier New",monospace;
  font-size: 95%;
  }
pre.preformtext code {
  color: #006666;
  }
pre.preformtext code:before {
  content: attr(title)':';
  padding: 0px;
  margin: 0 1em 0 auto;
  font-weight: bold;
  color: #888;
  }
pre.preformtext:hover code:before {
  content: '\20\20\20';
  }
pre.preformtext strong,  pre.preformtext em,   pre.preformtext dfn,
pre.preformtext var,     pre.preformtext kbd  {   /* Voreinstellungen zurücksetzen */
  font-weight: normal;
  font-style: normal;
  }
pre.preformtext strong { 
  color: blue;
  }
pre.preformtext em     {
  color: #800000;
  }
pre.preformtext dfn    {
  color: #222; 
  }
pre.preformtext var    {
  color: black;
  font-weight: bolder;
  }
pre.preformtext kbd    {
  color: red;
  }

Präformatierter Quelltext maskieren

Ein sehr empfehlenswertes Tool für die Maskierung von Quellcode, ist bei SELFHTML zu finden. Hier können Sie einfach den Quelltext per Copypaste in das Eingabefeld kopieren und den Code konvertieren: Fertig ! Der Code, der nach Anklicken von Code konvertieren angezeigt wird, kann via Zwischenablage in eine HTML-Datei kopiert werden und bewirkt dort, dass der Code als HTML-Code dargestellt wird. Empfehlenswert ist die Einbindung des ausgegebenen Inhalts in das HTML-Tag <pre>...</pre>.

nach oben