Gleich vorneweg: Semantik ist natürlich nichts zu Essen. Vielmehr stammt der Begriff, wie so oft, aus dem griechischen:

Semantik (gr.σημαίνειν sēmainein „bezeichnen“), auch Bedeutungslehre, nennt man die Theorie oder Wissenschaft von der Bedeutung der (sprachlichen) Zeichen.

Ich möchte mich in diesem Artikel aber weder mit Semasiologie oder Onomasiologie befassen, noch mit den W3C-Prinzipien des semantischen Webs (RDF, OWL o.ä.). Vielmehr werde ich mich in den folgenden Zeilen mit dem Thema semantisches HTML befassen und versuchen, zu erklären, warum der Einsatz von Semantik so wichtig ist.

Was also bedeutet es für einen Frontend-Entwickler semantisches (X)HTML zu schreiben?

Als Erstes bedeutet es, ein Dokument zu strukturieren, die Inhalte zu gliedern und verschiedene Bedeutungen zuzuweisen. Dazu stehen dem Entwickler verschiedene HTML-Elemente zur Verfügung.
Wir kümmern uns also zuallerst um den Inhalt; Welche Teile des Dokumentes sind Kapitelüberschriften, welche Fließtext oder gar Zitate und Quellenangaben? Welche Textteile müssen hervorgehoben oder als Liste dargestellt werden? und so weiter.
In diesem Schritt wird erstmal nicht über das Aussehen der fertigen Seite nachgedacht, sondern über die inhaltliche Gliederung. Das Aussehen wird später per CSS angepasst und folgt damit auch dem Ansatz von XHTML: Die strikte Trennung von Inhalt und Design. Wichtig ist vor allem, die Inhalte logisch zu strukturieren. Nebeneffekt dabei ist, dass Suchmaschinen und vor allem alternative Darstellungsgeräte (Braille-Lesegeräte, Screenreader usw.) die inhaltliche Logik des Dokumentes erfassen und auswerten können.

Sind alle Inhalte klassifiziert und ausgezeichnet, sollte man mit einem gewissen Abstand erneut auf das Dokument schauen und nachprüfen, ob die Auszeichnungen wirklich stimmig sind und sagen sie auch das aus, was ich meine. Bei der Auswahl von groben Textstrukturen (Überschriften, Textblöcke usw.) fällt die Auswahl meistens nicht schwer, die granularen Hervorhebungen sind meistens schwieriger. Da hilft es im Team zu diskutieren, oder falls man alleine ist, die eigene Entscheidung zu hinterfragen. Wie bei vielen anderen Dingen auch, gibt es hier nicht DEN richtigen Weg.

Ein paar kleine Beispiele hierzu:

Beispiel: Ich bin so froh, dass er mir endlich einen Heiratsantrag gemacht hat.
Aussage: “endlich” wird textuell kursiv hervorgehoben um die Wichtigkeit auszudrücken. Zusätzlich wird im eigentlich Sprachfluß das Wort betont. Daher würde ein <i> hier nicht ausreichen.
Markup: Wir zeichnen das “endlich” per <em> aus, um auch Screenreadern die Wichtigkeit des Wortes zu vermitteln.

Beispiel: In seinem Buch erwähnte Alfred Einstein, dass [...]
Aussage: Alfred Einstein wird hier als Quelle angegeben und entsprechend ausgezeichnet. Auch hier wäre ein <i> oder <b> nicht das Mittel der Wahl.
Markup: Wir zeichnen unsere Quelle per <cite> aus. Damit liefern wir Suchmaschinen, Screenreadern und Browsern eine wichtige (und vor allem korrekte) Metainformation.

Im Prinzip verwenden wir also nur die uns gegebenen Elemente, so wie sich eigentlich gedacht sind. Die wichtigste Vorbereitung hierfür, ist es sich mit den HTML-Standards auseinander zu setzen. Nur wenn man die richtigen Elemente kennt, kann man sie auch sinnvoll einsetzen. Klingt irgendwie logisch, oder?

Irgendwann stößt man allerdings an die Grenzen, was mit (X)HTML machbar ist. Ein warscheinlich sehr geläufiges Beispiel hierfür sind Navigationselemente. Wie können wir sowas semantisch korrekt definieren? Als (un)geordnete (<ul>/<ol>) Liste? Als geschachtelte <div>- oder gar <span>-Container?
Diese Frage ist nicht ganz so einfach zu beantworten, da hilft es sich meistens das Ziel eines semantischen Aufbaus des Dokumentes vor Augen zu führen: Wir wollen soviel Metainformationen wie möglich und nur so viel Code wie nötig zu vermitteln. Man wird immer auf einem schmalen Grat wandern, der Platz für Diskussionen lässt. Es ist in idealisiertes Ziel, dem man so nahe wie möglich kommen möchte.

Warum also Semantik, wenn man sie nicht Essen kann?

Weil wir unseren Code auf Diät setzen wollen! Weil wir Herausforderungen lieben! Weil wir uns bei unserer Berufsehre gepackt fühlen und ein möglichst gutes Ergebnis abliefern wollen! Außerdem ist es cool sich an Standards zu halten.

Sch(m)erz beiseite: Gründe für semantisches Markup gibt es viele, die schlagkräftigsten sollten der übersichtlichere und besser strukturierte Code, Barrierefreiheit klar strukturierter Dokumente oder bessere Verwertbarkeit in Suchmaschinen sein.
Ein weiterer Vorteil ist der auf Dauer besser lesbare Code und dadurch natürlich auch die bessere Wartbarkeit. Gerade in größeren Teams ist der einfache Zugang zum Code nicht zu unterschätzen und spart auf Dauer Entwicklungskosten.

Also auf zu neuen Ufern, setzt die Segel und stellt euch der Herausforderung. Genießt die Freiheiten die uns geboten werden und lasst euch von veralteten Browsergenerationen nicht aufhalten.