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


Anzeige: 1 - 16 von 16.
 
Saturday, 23. 03 19 08:06
Eli Whitmire
aus Sankt Kind eli_whitmire@gmail.com    Website   

tadalafil by mail order http://genericalis.com tadalafil holland apotheke

 
Friday, 22. 03 19 06:50
JdanovaEneida92Flede JdanovaEneida92FledeDY
aus http://genviagrarwe.com/ JdanovaEneida92@mail.ru    Website   

is cost target

4111 can women take is

 
Thursday, 14. 03 19 14:32
RannevFlede RannevFledeDD
aus http://viagraomz.com/ rannev561@canadaisonlineo.com    Website   

wirkstoff is beipackzettel

 
Tuesday, 12. 03 19 12:36
GuschinOlav1988Flede GuschinOlav1988FledeDY
aus http://cialisuqswl.com/ GuschinOlav1988@mail.ru    Website   

is generika 10 mg

4a6d is generika 10 mg

 
Friday, 01. 03 19 20:44
Jasoniroto JasonirotoLR
aus http://xcialis20mg.com 1758zascpt0jm@mantilia48.fancycarnavalmasks.com    Website   

buy cialis from usageneric cialis from canada Cialis 20mg xcialis20mg.com

 
Friday, 01. 03 19 19:13
MichaelMes MichaelMesXP
aus https://skylensnw.com thincariper1989ytavip@yandex.ru    Website   

cialis official commercialcialis medicationcialis manufacturer couponcialis 100mg kaufen cialis 10mg
https://userscloud.com/zwp39l0xu5qr
http://askmehub.com/index.php?qa=user&qa_1=martin35skipper
http://cutt.us/YSPPD

https://genius.com/philipsenboesen7
https://www.eventbrite.com/o/cialis-coupons-printable-2014-18873640101
https://music-fans.biz/user/SandovalJacobson5/

 
Saturday, 23. 02 19 23:06
MichaelMes MichaelMesXP
aus https://skylensnw.com thincariper1989ytavip@yandex.ru    Website   

asda pharmacy cialis pricesbest prace cialiscialis in adelaidecialis sales 2012 Buy cialis 60 mg

http://www.nqqn.org/index.php?qa=user&qa_1=callesenphilipsen4
https://nirvana.virtus.ufcg.edu.br/wiki/isensor/index.php/Usu%C3%A1rio:Lentzbjerregaard2
https://www.addpoll.com/gilliamboesen6

 
Tuesday, 19. 02 19 18:42
MichaelMes MichaelMesXP
aus https://skylensnw.com thincariper1989ytavip@yandex.ru    Website   

ordercialis by checklose dose cialis dailbuy cialis 5mg canadacialis sicuro Buy cialis 10 mg

https://acrelinux.stream/wiki/Cialiscouponsprintable2014
http://45.79.137.123/index.php?qa=user&qa_1=sandovalsandoval9
http://www.bjkbasket.org/forum/member.php?action=profile&uid=301553

 
Friday, 15. 02 19 11:03
Anthonyslike AnthonyslikeKJ
aus http://westerndeliveryandlogistics.com/#buy-cialis thincariper1989ytavip@yandex.ru    Website   

cialis price in uaecialis generika per paypal http://skylensnw.com
europe meds online buy cialischeap cialis 10mg skylensnw.com
name brand cialis online ciplacialis fedex overnight shipping http://westerndeliveryservice.com/#cheap
cialis with dapoxetine reviewscialis 5mg taglich http://westerndeliveryandlogistics.com/#cialis
comprare cialis in farmaciapurchase cialis 5mg http://westerndeliveryandlogistics.com/#cialis
cialis original brand name salecialis generika bestellen http://californiadeliveryandlogistics.com/#cialis

 
Sunday, 10. 02 19 13:14
Duaneges DuanegesTQ
aus https://greatwinesgrandhouses.com thincariper1989ytavip@yandex.ru    Website   

comprar cialis generico en espana online
comprare cialis a roma per telefono
buy Cheap cialis
netpharm cialis
cena cialis c20 w aptece
https://kellyannehulme.com
when will the price of cialis come down
does blue cross cover cialis
cialis
e legale acquistare cialis online
cialis generico sicuro
https://kellyannehulme.com

 
Tuesday, 05. 02 19 23:20
DavidDar DavidDarGL
aus http://kaivanrosendaal.com/#cialis-generic-availab thincariper1989ytavip@yandex.ru    Website   

potenz cialis
generic cialis from canada
cialis 20 mg
what does a prescription of cialis cost
buy generic cialis daily
cialis coupon
dirt cheap cialis
cialis one a day
http://kaivanrosendaal.com/#cialis-without-a-doctor's-prescription

 
Sunday, 03. 02 19 23:57
DavidDar DavidDarGL
aus http://kaivanrosendaal.com/#Buy-Cheap-Cialis-Onlin thincariper1989ytavip@yandex.ru    Website   

cialis medicament
buying cialis in mexico
cialis generic availability
kamagra cialis online
cialis no prescription paypal
cialis from canada
cialis 5mg daily use cost
cialis et hypertension
http://kaivanrosendaal.com/#200-cialis-coupon

 
Saturday, 02. 02 19 15:58
DavidDar DavidDarGL
aus http://kaivanrosendaal.com/#200-cialis-coupon thincariper1989ytavip@yandex.ru    Website   

free trial coupon for cialis
buy liquid cialis
cialis tadalafil
cheapest place to get cialis
does cialis work reviews
cialis 20 mg
potensmedel cialis
which pharmacy sells cheapest cialis
http://kaivanrosendaal.com/#side-effects-for-cialis

 
Wednesday, 30. 01 19 08:40
JospehvoK JospehvoKBC
aus https://stowe365.com thincariper1989ytavip@yandex.ru    Website   

cialis softgel pills
drug stores pei cialis
chi ha acquistato cialis online
cialis website reviews

cialis 5mg coupon
female cialis online
generic cialis pro
cialis preis deutschland
https://stowe365.com

 
Saturday, 22. 12 18 15:36
Carolyn Ulm
aus Montreal carolyn.ulm@gmail.com    Website   

30 mg de tadalafil
cialis
edad para tomar tadalafil
[url=http://www.cialisle.com/]buy cialis online[/url]

 
Wednesday, 19. 12 18 01:48
Brigitte Nicastro
aus Fort Morgan brigittenicastro@yahoo.de    Website   

ShaniRoneyiy order cialis generic cialis online does cialis one a day work cialis no
prescription ([url=http://buyscialisrx.com/]http://buyscialisrx.com/[/url])

 
 

Kommentar schreiben