Themen
 
Individuelles Webdesign
 
17.06.2007 11:13

Logische Textauszeichnung in HTML

Kategorie: HTML/CSS, XHTML
Von: Andreas Prucha
Lange Zeit waren Tags zur logischen Textauszeichnung weitgehend vergessen. Dank CSS gewinnt die logische Textauszeichnung wieder an Bedeutung.

Grundsätzlich lässt sich zwischen physikalischer und logischer Textauszeichnung unterscheiden. Die physikalische Textauszeichnung gibt an, wie ein Element auszusehen hat, die logische Textauszeichnung gibt an, um was es sich bei dem Element handelt.

In der Praxis überschneiden sich beide: Auch die meisten Tags zur logischen Textauszeichnung haben bestimmte Darstellungen zur Folge.

Ursprünglich war an die physikalische Textauszeichnung bei der Entwicklung von HTML kaum gedacht worden. Zum Zeitpunkt der Entwicklung waren Workstations noch hauptsächlich ASCII-Terminals die keine grafische Darstellung beherrschten. Daher war die physikalische Textauszeichnung mit Funktionen zur Wahl der Schrift, Farbe und dergleichen nebensächlich. Der Browser sollte anhand der Information um was es sich handelt selbst entscheiden wie er den Textteil darstellt. Das war für die damals hauptsächlich wissenschaftlichen Texte auch ausreichend.

Mit der Kommerzialisierung des Webs gewann aber die Gestaltung einer Website mehr und mehr Bedeutung über dessen Inhalt, und die wenigen zur Verfügung stehenden Tags wurden missbraucht um Seiten zu gestalten.

Ein Beispiel dafür ist das Tag <blockquote>, das laut HTML-Spezifikation ein Zitat markiert. Da aber die meisten Browser „Zitate“ eingerückt darstellten, wurde <blockquote> von Webdesignern bald missbraucht um Text einzurücken, auch wenn es sich nicht um ein Zitat handelte.

Seit der Einführung von CSS sind derartige Missbräuchliche Verwendungen von Tags nicht mehr notwendig, da sich die Gestaltung über Klassen bis ins Detail regeln lässt.

Trotzdem, oder gerade deswegen kommt der logischen Auszeichnung von Texten wieder mehr Bedeutung zu, insbesondere auch in Hinblick auf XHTML, welches die Gestaltung nur mehr über CSS erlaubt. Gute logische Auszeichnung bietet mehrere Vorteile:

  • Sinnvolle Darstellung auf allen Ausgabegeräten, auch reinen Text-Browsern.
  • Bessere Interpretation durch Screenreader: Logische Auszeichnung erleichtert die Verwendung von Hilfsmitteln für Sehbehinderte. Textpassagen werden entsprechend der Markierung betont
  • Logische Textauszeichnung erleichtert die Übergabe von HTML-Texten, beispielsweise in Blogs, da auf der Website die den Artikel übernimmt die eigenen CSS-Definitionen unter Umständen nicht vorhanden sind bzw. ausgefiltert werden.
  • Erleichterter Umstieg auf XHTML

Tag in einem eigenen CSS definieren

Wie die logisch markierten Bereiche dargestellt werden hängt vom Browser ab. In der Regel unterscheidet sich die Darstellung nicht wesentlich. Wer sichergehen will, dass der logisch ausgezeichnete Bereich so dargestellt wird wie gewünscht, kann da die Tags in einem eignenen CSS definieren:

Mit <strong> markierte Elemente werden von den meisten Browsern fett dargestellt. Wer möchte, dass diese Elemente fett und zusätzlich in rot dargestellt werden, kann dies beispielsweise mit folgender CSS-Definition tun

strong {
font-weight: bold;
color: #FF0000;
}

strong - Stark hervorzuhebender

Das Tag <strong> markiert stark hervorzuhebende Textteile.

Die meisten Browser stellen mit <strong> markierten Text standardmässig in Fettschrift dar.

Beispiel:

<strong>Stark hervorzuhebender Text</strong>

Ausgabe:

Stark hervorzuhebender Text

em: Betonen

Das Tag <em> steht für Emphasize, also „betonen“. Mit diesem Tag werden zu betonende Textelemente markiert.

Die meisten Browser stellen betonten mit <em> markierte Textteile in Kursivschrift dar.

Beispiel:

Es ist <em>sehr</em> wichtig, Text auch logisch zu strukturieren

Ausgabe:

Es ist sehr wichtig, Text auch logisch zu strukturieren

cite: Kurzes Zitat oder Referenz zu anderen Quellen

<cite> markiert Zitat aus anderen Quellen beziehungsweise eine Referenz auf andere Quellen. Damit sind Zitate oder Referenzen gemeint die im Lauftext eingebunden sind.

Mit <cite>cite</cite> markierte Teile werden von den meisten Browsern standardmässig in Kursivschrift dargestellt

Beispiel:

Eines der bekanntesten Zitate ist sicher <cite>Hamlet: Sein oder Nichtsein, das ist hier die Frage (To be, or not to be: that is the question)</cite>.

Ausgabe:

Eines der bekanntesten Zitate ist sicher <cite>Hamlet: Sein oder Nichtsein, das ist hier die Frage (To be, or not to be: that is the question)</cite>

blockquote: Längeres Zitat

Im Gegensatz zu <cite> markiert <blockquote> ein längeres Zitat, das in einem eigenen Abatz dargestellt wird.

Bei <blockquote> handelt es sich um ein Block-Element. Der Textblock wird von den meisten Browsern standardmässig eingerückt dargestellt.

Beispiel:

<blockquote> Werde ich recht behalten, werden die Deutschen sagen, ich sei Deutscher, die Franzosen, ich sei Europäer und die Amerikaner, ich sei Weltbürger. Werde ich nicht recht behalten, werden die Amerikaner sagen, ich sei Europäer, die Franzosen, ich sei Deutscher und die Deutschen, ich sei ein Jude.<br><br>- Albert Einstein, befragt über die möglichen Auswirkungen seiner Relativitätstheorie</blockquote>

Ausgabe:

Werde ich recht behalten, werden die Deutschen sagen, ich sei Deutscher, die Franzosen, ich sei Europäer und die Amerikaner, ich sei Weltbürger. Werde ich nicht recht behalten, werden die Amerikaner sagen, ich sei Europäer, die Franzosen, ich sei Deutscher und die Deutschen, ich sei ein Jude.

- Albert Einstein, befragt über die möglichen Auswirkungen seiner Relativitätstheorie

dfn: Definition

Mit <dfn> kann ein definiertes wort markiert werden. Dies wird meistens bei der ersten Verwendung im Text gemacht:

Beispiel:

<dfn>HTML</dfn> steht für Hypertext Markup Language und <dfn>CSS</dfn>für Cascaded Style Sheets.

Ausgabe:

HTML steht für Hypertext Markup Language und CSS für Cascaded Style Sheets.

 

kbd: Tastatureingabe

Mit <kbd> können – beispielsweise in einem Benutzerhandbuch – vom User vorzunehmende Eingaben markiert werden.

Die meisten Browser stellen in kbd eingeschlossenen Texte in nicht-proportionaler Schrift dar

Beispiel:

Geben sie bitte <kbd>cd /</kbd> ein um ins Hauptverzeichnis zu wechseln.

Ausgabe:

Geben sie bitte <kbd>cd /</kbd> ein um ins Hauptverzeichnis zu wechseln.

samp: Beispiel

Das Tag <samp> markiert ein Beispiel. In Tutorials können damit Beispiele markiert werden, und hat damit eine ähnliche Funktion wie das Tag <code>.

Beispiel:

<samp><dfn>HTML</dfn> steht für Hypertext Markup Language und <dfn>CSS</dfn>für Cascaded Style Sheets.</samp>

Ausgabe:

<dfn>HTML</dfn> steht für Hypertext Markup Language und <dfn>CSS</dfn>für Cascaded Style Sheets.

code: Computer-Code

Das Tag <code> markiert Computer-Code, also Ausschnitte aus Programmen, HTML-Quelltext oder ähnliches.

Beispiel:

Ausgabe von „Hallo Welt“ in einer Schleife in Pascal: <code>for x := 1 to 10 do writeln ('Hallo Welt');</code>

Ausgabe:

Ausgabe von „Hallo Welt“ in einer Schleife in Pascal: for x := 1 to 10 do writeln ('Hallo Welt');

address: Adresse

Mit <address> kann eine Adresse markiert werden:

Beispiel:

<address>
Helicon Software Development<br>
Trimplinggasse 6<br>
A-2500 Baden
</address>

Ausgabe:

Helicon Software Development
Trimplinggasse 6
A-2500 Baden

abbr: Abkürzung

Mit <abbr> önnen im Quelltext Abkürzungen markiert werden und unter Verwendung des title-Attributs eine Erklärung eingeblendet werden.

Beispiel:

In <abbr title="Hypertext Markup Language">HTML</abbr> kann das Tag <strong> verwendet werden um Textteile besonders hervorzuheben.

Ausgabe:

In HTML kann das Tag <strong> verwendet werden um Textteile besonders hervorzuheben.

Ins/Del: Gelöscht und hinzugefügt

Mit <del> lassen sich Textteile als gelöscht, und mit <ins> als hinzugefügt markieren. Damit können Änderungsvorgänge dargestellt werden.

Beim Tag <ins> kann optional durch Angabe des Attributs dattime noch zusätzlich der Zeitpunkt der Änderung angegeben werden. Dabei muss das Format yyyy-mm-dd verwendet werden. Ebenso optional ist die Verwendung des Attributs cite welches ermöglicht auf ein HTML-Dokument zu verweisen da nähere Angaben macht.

Die meisten Browser stellen gelöschte, also in <del> eingeschlossene Textteile durchgestrichen, mit <ins> hinzugefügte unterstrichen dar.

Beispiel:

Das Projekt ist im <del>Juni</del><ins datetime=“2007-03-17“>Juli</ins> abgeschlossen.

Ausgabe:

Das Projekt ist im JuniJuli abgeschlossen.



Kommentare


Kommentar schreiben...


Keine Einträge

Keine Einträge im Gästebuch gefunden.

Kommentar schreiben