Semantik im Web

Mittwoch, 5. September 2012


In der Web-Entwicklung versteht man unter Semantik die semantische Auszeichnung, also die Auszeichnung nach Bedeutung und Zweck.

Wenn die Auszeichnung nach einem Zweck erfolgt, werden beispielsweise Überschriftenelemente von h1 bis h6 zur Auszeichnung von Überschriften verwendet, Paragraphenelemente p für Paragraphen, Listenelemente wie ul, ol, dl oder datalist und menu für Listen, Tabellen für Datentabellen usw.

Diese Art der Auszeichnung wurde notwendig, als das Web nur aus wenigen Websites bestand und Autoren ihre Websites ausschließlich mit Tabellen codierten. Sie verwendeten beispielsweise Tabellenzellen oder Paragraphen für Überschriften und waren allgemein sehr kreativ beim Entwerfen des gewünschten Layouts. Zugegeben standen Autoren zu dieser Zeit wesentlich weniger Werkzeuge zur Verfügung als heute. Es war beispielsweise unmöglich, ein Layout mit drei Spalten zu codieren, ohne dafür eine Tabelle oder Bilder zu verwenden.

Bis heute sind sich Autoren nicht immer sicher, welches HTML-Element sie für welche Funktionseinheit auf ihrer HTML-Seite verwenden sollen. Gerade bei "lebendigen" Spezifikationen wie HTML 5 müssen Autoren genau prüfen, mit welchen Elementen eine Auszeichnung in Fällen erfolgen kann, in denen vorher nur "inhaltsleere" Fallback-Elemente wie div oder span verwendet wurden.

Nur die HTML-Spezifikationen geben Aufschluss darüber, welche Elemente das HTML enthält und welche Bedeutung diese haben. Es gibt zwar Indizes, die alle HTML-Spezifikationen und -Elemente enthalten und es dementsprechend einfach machen, ein Element und dessen Bedeutung nachzuschlagen. In vielen Fällen ist es allerdings notwendig, die HTML-Spezifikationen (auf Englisch) zu lesen.

Ein gutes Beispiel hierfür ist das Element code (auf Englisch):

Das Element code ist ein Computercode-Fragment. Es kann sich dabei um einen XML-Elementnamen, einen Dateinamen, ein Computerprogramm oder einen anderen String handeln, den ein Computer erkennt.

Autorengesteuerte Semantik

Die Bedeutung von HTML-Elementen ist in den HTML-Spezifikationen festgelegt. Aber auch ID- und Klassennamen können eine Bedeutung haben. ID- und Klassennamen sind normalerweise wie Mikrodaten (auf Englisch) autorengesteuert. Die einzige Ausnahme bilden Mikroformate (auf Englisch). Mikrodaten oder -formate bleiben in diesem Artikel außen vor.


Dank ID- und Klassennamen sind Autoren im Umgang mit HTML-Elementen fast keine Grenzen gesetzt. Dabei garantieren einige grundsätzliche Regeln, dass keine Probleme entstehen:

Vorteile der semantischen Auszeichnung

Die korrekte semantische Auszeichnung und moderate Verwendung von funktionalen ID- und Klassennamen hat folgende Vorteile:
  • Es ist eine professionelle Vorgehensweise.
  • Die Zugänglichkeit wird erhöht.
  • Die Verwaltung ist einfacher.

Sonderfälle

"Neutrale" Elemente, Elemente mit doppelter Bedeutung und Präsentationselemente stellen Sonderfälle dar.

div und span bieten "einen allgemeinen Mechanismus, um Dokumenten eine Struktur zu verleihen". Sie können immer dann verwendet werden, wenn kein anderes Element mit den betreffenden Inhalten übereinstimmt.

In der Vergangenheit haben die Elemente b, strong, i und em für große Verwirrung gesorgt. Autoren sahen in b und i lediglich Layoutelemente und wollten diese in den meisten Fällen einfach mit strong und em ersetzen. Aber lassen wir die Vergangenheit ruhen, denn in den HTML5-Spezifikationen hat jedes dieser Elemente seine Berechtigung:


b "Ein Textbereich, der sich vom restlichen Text abheben soll, ohne dabei eine besondere Bedeutung zu erhalten. Beispiele hierfür sind Schlagworte in einer Zusammenfassung, Produktnamen in einer Bewertung oder andere Textbereiche, die typischerweise in Fettschrift vorkommen." <p>Die Zutaten <b>A</b> und <b>B</b> werden gebraten.
strong "Wichtige Bedeutung der Inhalte" <p><strong>Achtung.</strong> Dieser Kerker ist gefährlich.
i "Ein Textbereich, der anders als der restliche Text wiedergegeben werden oder sich von diesem abheben soll. Beispiele hierfür sind taxonomische Bezeichnungen, technische Begriffe, eine Redewendung in einer anderen Sprache, ein Gedanke, der Name eines Schiffs oder andere Textbereiche, die typischerweise in Kursivschrift vorkommen." <p>Der Begriff <i>Textinhalt</i> ist oben definiert
em "Betonung der Inhalte" <p><em>Katzen</em> sind niedlich.



Dann gibt es natürlich auch noch richtige Layoutelemente. Diese Elemente werden von User Agents wie zum Beispiel Browsern zwar unbegrenzt unterstützt, sollten aber nicht mehr verwendet werden, da die Verwaltung von Präsentationsauszeichnungen (auf Englisch) schwierig ist. Stylesheets sind hier die richtige Lösung. Besonders bekannt sind:
  • center
  • font
  • s
  • u

So überprüft ihr die Semantik eurer Website

Es gibt eine schnelle, aber etwas ungenaue Methode, die Semantik eurer Seite zu überprüfen, um nachzuvollziehen, wie sie von einem Screenreader interpretiert wird: Deaktiviert einfach CSS. Das könnt ihr beispielsweise mit der Erweiterung "Web Developer Toolbar" für Chrome und Firefox tun. Bei dieser Überprüfung werden zwar nur Probleme erkannt, die bei der Bedeutungsübertragung mit CSS entstehen, trotzdem kann sie sehr nützlich sein.

Tools wie der W3C Semantic Data Extractor (auf Englisch) helfen euch dabei, die Aussagekraft eures HTML-Codes zu beurteilen.

Außerdem können Kollegen bewerten, ob ihr für eure Codierung Best Practices verwendet habt. Eure Nutzer können hingegen ein Urteil zur Zugänglichkeit eurer Inhalte abgeben.


Empfehlungen


Nicht empfohlen Empfohlen Grund 
<p class"heading">foo</p>
 
<h1>foo</h1>
 Für Überschriften werden Überschriftenelemente verwendet. 
<p><font size="2">bar</font></p>
 
<p>bar</p>

p { font-size: 1em; }
 Die Verwaltung von Präsentations- auszeichnungen ist teuer. 
<table>
  <tr>
    <td class="heading">baz</td>
  </tr>
  <tr>
    <td>scribble</td>
  </tr>
</table>
 
<h1>baz</h1>
<p>scribble</p>
 Für Tabellendaten werden Tabellenelemente verwendet. 
<div class="newrow">foo</div>
<div>1</div>
<div class="newrow">bar</div>
<div>2</div>
 
<table>
  <tr>
    <th>foo</th>
    <td>1</td>
  </tr>
  <tr>
    <th>bar</th>
    <td>2</td>
  </tr>
</table>
 Für Tabellendaten werden Tabellenelemente verwendet. 
foo bar.<br><br>baz scribble.
 
<p>foo bar.</p>
<p>baz scribble.</p>
 Paragraphen werden mit Paragraphenelementen gekennzeichnet, nicht mit Zeilenumbrüchen.

Autor: Jens O. Meiert , Senior Web Architect, Google Webmaster-Team. Veröffentlicht von Uli Lutz , Search Quality