Benutzer:FeddaHeiko/Werkstatt/Semantisches Markup
Der Begriff Semantisches Markup bezeichnet das Programmierparadigma, die Website-Inhalte von ihrem Aussehen zu trennen. Die Inhalte einer Auszeichnungssprache werden strikt nach ihrer Bedeutung formatiert; eine Überschrift beispielsweise wird immer als solche gekennzeichnet, in HTML dienen hierzu je nach Gewicht der Überschrift die Elemente „<h1>“ bis „<h6>“. Die Formatierung der einzelnen Textelemente erfolgt seperat in den zugehörigen Style Sheets.
Der Begriff Semantische Markup wird nicht einheitlich verwendet, in einigen Texten und Büchern finden sich auch die Bezeichnungen "Generic Markup", "strukturelles Markup" oder "logisches Markup".
Kurzübersicht relevanter W3C Empfehlungen
Das zugrundeliegende Modell tauchte bereits mit der Veröffentlichung des HTML-4.0-Standards seitens des W3C im Jahre 1997 auf, welcher mit Stylesheets die strikte Trennung zwischen Auszeichnungs- (HTML) und Präsentationslogik (CSS) einleitete. Ab 1998 wurde diese Trennung mit der Einführung des XHTML-1.0-Standards weiter ausgebaut.
Speziell mit diesem Thema befassen sich die Web Content Accessibility Guidelines.
Entwicklung
Vor Einführung von CSS war die Gestaltung von Textinhalten durch HTML-Elementen wie „<table>“ (gedacht für die Auszeichnung tabellarischer Daten) oder „<blockquote>“ (gedacht für die Auszeichnung längerer Zitate) geprägt, da es schlicht keine anderen Möglichkeiten gab.
Mit Einführung von CSS änderte sich das. Es gab nun generische Elemente wie „<div>“ (für Elemente, die einen eigenen Textblock erzeugen sollen) und „<span>“ (für Elemente innerhalb des Textflusses), die nur zur besseren Darstellung der Inhalte gedacht waren. Es zeichnete sich bald ab, dass einige Webdesigner nun nur noch diese gestalterischen Elemente benutzten – um somit teilweise ein Verhalten nachzuahmen, welches HTML bei semantisch sinnvoller Auszeichnung der Textinhalte auch ohne CSS leisten würde.
Die durch den Missbrauch ungeeigneter Elemente wie „<table>“ oder „<blockquote>“ verursachten Probleme, etwa hinsichtlich der Zugänglichkeit von Webdokumenten, wurden durch diesen neuen Programmierstil nicht oder nur vereinzelt gelöst, teilweise sogar intensiviert.
Grundlagen und Ziele
Ziel des semantischen Markups ist die Zugänglichkeit von Webdokumenten. Der Client, der die HTML-Inhalte abruft – neben „herkömmlichen“ Webbrowsern können dies auch Screenreader, Braillezeilen oder etwa Suchmaschinen-Bots sein – weiß im Falle eines „<h1>“-Elements um die semantische Bedeutung dessen Inhalts und kann es entsprechend weiterverabeiten; so werden graphische Browser den Text der Überschrift signifikant größer als den Fließtext darstellen, Screenreader werden beim Vorlesen der Überschrift mehr Betonung in die Stimme legen und der Algorithmus einer Suchmaschine wird den Textinhalt des Elements beträchtlich höher gewichten als normalen Fließtext.
Beispiel einer schlecht formatierten HTML-Seite:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Typischer Fall</title>
</head>
<body>
<div id="Ueberschrift_1">Überschrift erster Ordnung</div>
<div class="Absatz">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismodtincidunt
ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="Ueberschrift_2">Navigation</div>
<div class="Liste">
<span class="Line"><a href="/foo">Link 1</a></span><br>
<span class="Line"><a href="/bar">Link 2</a></span><br>
<span class="Line"><a href="/baz">Link 3</a></span>
</div>
<div class="Ueberschrift_2">Überschrift zweiter Ordnung</div>
<div class="Absatz">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismodtincidunt
ut laoreet dolore magna aliquam erat volutpat.</div>
</body>
</html>
Obiges Beispiel sinnvoll strukturiert:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sinnvoll strukturiertes HTML</title>
</head>
<body>
<h1>Überschrift erster Ordnung</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismodtincidunt ut laoreet
dolore magna aliquam erat volutpat.</p>
<h2>Navigation</h2>
<ol>
<li><a href="/foo">Link 1</a></li>
<li><a href="/bar">Link 2</a></li>
<li><a href="/baz">Link 3</a></li>
</ol>
<h2>Überschrift zweiter Ordnung</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismodtincidunt ut laoreet
dolore magna aliquam erat volutpat.</p>
</body>
</html>
Ein positiver Nebeneffekt des semantischen Markups ist, dass der Quellcode einheitlich und damit für Dritte übersichtlicher und leichter verständlich ist.
Verwandte Begriffe
Die folgenden Begriffe beschreiben den übermäßigen oder fast ausschließlichen Gebrauch von generischen, semantisch bedeutungslosen HTML-Elementen und -Attributen zur Strukturierung von Textinhalten. Die Begriffe sind künstlich und wurden aus den Bezeichnungen der HTML-Elemente und dem griechischen Suffix „-itis“, welches auf eine (entzündliche) Krankheit hinweist, gebildet.
Divitis und Spanitis
Die Begriffe Divitis und Spanitis wurden 2003 durch Jeffrey Zeldmans Buch „Designing With Web Standards“ (ISBN 0735712018) bekannt. Die Begriffe sollen andeuten, dass die HTML-Elemente „<div>“ und „<span>“ exzessiv genutzt werden und semantische Elemente ersetzen - zu Lasten der Barrierefreiheit.
Statt also etwa Überschriften als solche auszuzeichnen – in HTML dienen hierzu je nach Gewicht der Überschrift die Elemente „<h1>“ bis „<h6>“ – würden dieselben in einem klassischen Fall von „Divitis“ in ein „<div>“ gefasst, welches durch ein „id“- oder „class“-Attribut adressierbar gemacht und mittels CSS formatiert würde.
Klassitis
Klassitis (auch Classitis) bezieht sich auf das Attribut „class=""“.
Iditis
Iditis bezieht sich auf das Attribut „id=""“.
Siehe auch
Literatur
- Jeffrey Zeldman: Webdesign mit Webstandards, Pearson Education Deutschland, 2007, ISBN 3827324378 und ISBN 9783827324375
Einzelnachweise und Anmerkungen
