Über Web-Semantik

Montag, 16. Juli 2012

Im Kontext der Webentwicklung bezieht sich Semantik auf semantisches Markup, das heißt Markup, das entsprechend seiner Bedeutung und seines Zwecks verwendet wird.

Markup, das entsprechend seinem Zweck verwendet wird, bedeutet die Verwendung von Überschriftenelementen (zum Beispiel h1
to h6) zur Auszeichnung von Überschriften, Absatzelementen (p) für Absätze, Listen
(ul, ol, dl, außerdem datalist oder
menu) für Listen, Tabellen für Datentabellen und so weiter.

Das Offensichtliche festzustellen war früher notwendig, als das Web nur aus wenigen Websites bestand und Autoren Tabellen verwendeten, um ganze Websites zu kodieren, Tabellenzellen oder Absätze für Überschriften nutzten und sich andere kreative Wege einfallen ließen, um das gewünschte Layout zu erreichen. (Zugegebenermaßen hatten diese Autoren weniger Instrumente zur Verfügung als Autoren heute. Es gab Zeiten, in denen das Kodieren eines dreispaltigen Layouts ohne Tabellen oder Bilder buchstäblich unmöglich war.)

Bis heute waren sich Autoren jedoch nicht immer sicher, welches HTML-Element sie für welche funktionale Einheit auf ihrer HTML-Seite verwenden sollten, und „lebendige“ Spezifikationen wie HTML 5 verlangen von Autoren, im Auge zu behalten, welche Elemente es künftig geben wird, um das auszuzeichnen, was andernfalls nach „bedeutungslosen“ Fallback-Elementen wie div oder span.

ruft.
Um zu wissen, welche Elemente HTML bietet und welche Bedeutung diese Elemente haben, ist es notwendig, die HTML-Spezifikationen zu konsultieren. Es gibt Indizes, diealle HTML-Spezifikationen und -Elemente abdecken
, die es ein wenig einfacher machen, die Bedeutung eines Elements nachzuschlagen und herauszufinden. In vielen Fällen kann es jedoch notwendig sein, zu überprüfen, was
die HTML-Spezifikation

sagt.
Nehmen Sie zum Beispiel the code:

element Das code

-Element stellt ein Fragment von Computercode dar. Dies könnte ein XML-Elementname, ein Dateiname, ein Computerprogramm oder jede andere Zeichenkette sein, die ein Computer erkennen würde.

Vom Autor gesteuerte Semantik
HTML-Elemente tragen die durch die HTML-Spezifikationen definierte Bedeutung, doch auch ID- und Klassennamen können Bedeutung tragen. ID- und Klassennamen unterliegen, genau wiemicrodata
,
typischerweise der Kontrolle des Autors, mit der einzigen Ausnahme vonmicroformats

. (Wir werden Microdata oder Microformats in diesem Artikel nicht behandeln.)

• ID- und Klassennamen geben Autoren viel Freiheit im Umgang mit HTML-Elementen. Es gibt ein paar grundlegende Faustregeln, deren Befolgung sicherstellt, dass diese Freiheit nicht zu Problemen führt:
• Halten Sie die Verwendung von IDs und Klassen auf ein Minimum.Verwenden Sie funktionale ID- und Klassennamen
• ;
  wenn das nicht möglich ist, verwenden Sie generische ID- und Klassennamen.

Verwenden Sie Namen, die so kurz wie möglich, aber so lang wie nötig sind.

Vorteile der Verwendung von semantischem Markup

• Die verwendungsgemäße Nutzung von Markup sowie ein sparsamer Einsatz funktionaler ID- und Klassennamen bieten mehrere Vorteile: Es ist das professionelle
• Vorgehen.
• Es ist zugänglicher.

Es ist wartungsfreundlicher.

Spezialfälle

„Neutrale“ Elemente, Elemente mit ambivalenter Bedeutung und präsentative Elemente stellen Spezialfälle dar. div und span

bieten einen „generischen Mechanismus zum Hinzufügen von Struktur zu Dokumenten.“ Sie können immer dann verwendet werden, wenn kein anderes Element verfügbar ist, das dem entspricht, was der betreffende Inhalt darstellt. b, In der Vergangenheit wurde viel Verwirrung durch die Elemente,
istrong und em b verursacht. Autoren verfluchten i und dafür, präsentativ zu sein, und schlugen typischerweise einen 1:1-Ersatz durch strong
undem
vor. Um die Vergangenheit nicht aufzuwühlen, hier ist, was HTML 5 sagt und allen vier Elementen eine:

<p><em>Cats</em> are cute animals.
Nicht zuletzt gibt es echte präsentative Elemente. Diese Elemente werden von Benutzeragenten (Browsern) für immer unterstützt, sollten aber nicht mehr verwendet werden, da
präsentatives Markup nicht wartbar ist,
und sollte stattdessen über Stylesheets geregelt werden. Einige beliebte sind:

• zentrieren
• Schriftart
• s
• u

So erkennen Sie, ob Sie auf dem richtigen Weg sind

Eine schnelle und einfache Methode, um die Semantik Ihrer Seite zu überprüfen und zu verstehen,
wie sie von einem Screenreader interpretiert werden könnte, besteht darin, CSS zu deaktivieren, zum Beispiel mit der verfügbaren Web Developer Toolbar
Erweiterung
für Chrome
und Firefox.
Dies identifiziert nur Probleme im Zusammenhang mit der Verwendung von CSS zur Vermittlung von Bedeutung, kann aber dennoch hilfreich sein.

Andere Methoden reichen von Peer-Reviews (Coding Best Practices) bis hin zu Usability-Tests (Barrierefreiheit).

Was Sie tun und lassen sollten

Die folgende Tabelle gibt einen groben Überblick über einige der schlechten Praktiken beim
Schreiben von HTML, zusammen mit den richtigen Alternativen und einer kurzen Erklärung.

Geschrieben von
Jens O. Meiert,
Senior Web Architect, Google Webmaster Team