Semantisches Markup ist eine Art und Weise, dein HTML (Hypertext Markup Language) so zu schreiben und zu strukturieren, dass es die Semantik oder Bedeutung des Inhalts verstärkt und nicht sein Aussehen. Im weiteren Sinne bedeutet es, dass deine Website-Architektur die Präsentation vom Inhalt trennt; im Wesentlichen heißt das, dass HTML für die Struktur und CSS für den Stil deines Webdesigns verwendet wird.

Semantik und Barrierefreiheit sind ein Teil von HTML by Design, aber sie sind nicht nützlich, wenn sie nicht richtig implementiert sind. Semantisches Markup zu schreiben bedeutet, die Hierarchie deines Inhalts zu verstehen und wie sowohl Nutzer als auch Maschinen ihn lesen werden. Vieles davon kann wie gesunder Menschenverstand erscheinen; wenn du eine Überschrift schreibst, markiere sie mit einem Überschrift-Tag (

,

, etc.). Wenn du einen Absatz schreibst, markiere ihn mit einem Absatz-Tag (). Semantisches Markup bedeutet, dass die HTML-Tags nie aufgrund der Art und Weise ausgewählt werden, wie sie in einem Webbrowser erscheinen – sie werden aufgrund der Wichtigkeit und Struktur des Inhalts ausgewählt. Während HTML von Anfang an semantisches Markup beinhaltete, brachte die Einführung von HTML5 noch mehr semantische Tags wie , , , und mit sich. Das Ziel ist es, Browsern, Entwicklern und Crawlern die Unterscheidung zwischen verschiedenen Datentypen zu erleichtern. All diese semantischen Tags machen es klarer, welche Informationen auf der Webseite sind und welche Bedeutung sie haben. Früher wurde eine Seite vielleicht nur mit Divs strukturiert, die den Suchmaschinen, Crawlern oder anderen Entwicklern keine Informationen darüber geben, worum es in diesem Teil der Seite geht. Durch die Verwendung von semantischem Markup können Entwickler den gesamten Inhalt expliziter darstellen und ihn so schreiben, dass auch Computer ihn verstehen können. semantic-web-designEIN VERGLEICH VON ILLUSTRATED HTML SAMPLES IM WEB DESIGN.
WARUM SOLLTE MICH DAS INTERESSIEREN?
Vielleicht denkst du dir: “Warum sollte es mich interessieren, wie Computer meine Webseite lesen? Ist das nicht etwas, um das sich nur Entwickler kümmern müssen?”. Die kurze Antwort ist: Nein. Jeder, der Inhalte für deine Webseite erstellt (hoffentlich jeder) sollte verstehen, wie die Seiten strukturiert sind und die Vorteile des Schreibens von Inhalten, die zu dieser Struktur passen. Es gibt drei Hauptgründe, warum es wichtig ist, dass deine Seite sowohl für Menschen als auch für Computer lesbar ist: SEO, Barrierefreiheit und Wartung. SEO
Der Begriff “SEO” wird heutzutage häufig im Webdesign verwendet, und es gibt viele Missverständnisse darüber, was er eigentlich bedeutet. Der wichtigste Aspekt der organischen SEO ist das Schreiben wertvoller Inhalte. Das Verständnis und die Verwendung von semantischem Markup hilft sicherzustellen, dass wertvolle Inhalte deine Zielgruppe erreichen. Suchmaschinen gewichten die Wichtigkeit von Keywords anhand ihrer Platzierung in der HTML-Hierarchie. Zum Beispiel werden Keywords, die in einem -Tag eingeschlossen sind, wichtiger genommen als solche, die in einem eingeschlossen sind. Du kannst semantisches HTML verwenden, um Suchmaschinen dabei zu helfen, deine Seite anhand der relevantesten und aussagekräftigsten Inhalte auf der Seite zu ranken. Nimm diesen Blogpost als Beispiel (also meta): Die h1 lautet “Warum die Verwendung von semantischem Markup in Webdesign und -entwicklung wichtig ist”. Die Keywords, für die wir versuchen zu ranken, sind semantisches Markup und Webdesign, da die Leute danach suchen (und nicht nach “sinnvollen Webseiten”). Du wirst bemerken, dass diese Überschrift visuell weniger betont ist, denn obwohl sie für Suchmaschinen mehr Sinn ergibt, bedeutet sie für Menschen, die sie lesen, nicht so viel. “Semantic HTML for Meaningful Webpages” ist die h2. Es ist weniger wichtig in der Inhaltshierarchie, aber es wird ihm mehr visuelle Bedeutung gegeben. Es macht mehr Sinn für Menschen, bedeutet aber nicht viel für Suchmaschinen. Indem du deine wichtigsten Keywords weiter oben in der Hierarchie platzierst, sagst du den Suchmaschinen effektiv, worum es auf deiner Seite geht und warum Menschen, die nach diesen Keywords suchen, an deinem Inhalt interessiert sein könnten. ZUGÄNGLICHKEIT
Barrierefreiheit ist oft ein nachträglicher Gedanke im Webdesign. Während Webanwendungen immer umfangreicher und kreativer wurden, sind sie für die rund 1 Milliarde Menschen mit Behinderungen auf der Welt immer weniger zugänglich. Da semantisches HTML Elemente für ihren jeweiligen Zweck verwendet, ist es sowohl für Menschen als auch für Maschinen einfacher, es zu lesen und zu verstehen. Die Zugänglichkeit von Anwendungen gewährleistet nicht nur den gleichberechtigten Zugang für Menschen mit Behinderungen, sondern kommt auch Menschen ohne Behinderungen zugute, da sie ihre Erfahrungen anpassen können. Die Verwendung von semantischem HTML kommt einer Vielzahl von Benutzern und User Agents zugute, wie z.B. Browsern ohne Stylesheets, Textbrowsern, PDAs und Suchmaschinen. Das Erstellen einer klaren Hierarchie für die Seite ermöglicht es anderen Tools und Geräten, deinen Inhalt richtig zu servieren. MAINTENANCE
Die Verwendung von semantischem Markup führt zu sehr klarem, standardisiertem Code und das bedeutet, dass du auf lange Sicht Zeit sparen wirst. Klarer Code ist einfacher zu warten. Es bedeutet auch, dass ein anderer Entwickler einsteigen und mit dem Code arbeiten kann, ohne dass es zu Verwirrungen kommt, da der Code logisch organisiert ist. Ein weiterer zeitsparender Vorteil des Schreibens von semantischem HTML ist, dass das Aussehen des Inhalts leichter geändert und aktualisiert werden kann. Da der Inhalt komplett von der Darstellung getrennt ist, kannst du die Stile ändern, ohne die Daten zu berühren, oder Stile auf mehrere Datentypen anwenden. Da semantisches HTML Elemente für ihren jeweiligen Zweck verwendet, ist es sowohl für Menschen als auch für Maschinen einfacher, es zu lesen und zu verstehen.
SEMANTISCHES MARKUP EINEN SCHRITT WEITER BRINGEN
Zusätzlich zum Schreiben von semantischem HTML gibt es eine Handvoll reichhaltiger, strukturierter Datenstandards, die es für Maschinen einfacher machen, die Inhaltshierarchie zu verstehen und relevante Informationen für Benutzer anzuzeigen. Dinge wie Microdata, Microformats und RDFa können einzeln oder in Kombination verwendet werden, um die Barrierefreiheit auf die nächste Stufe zu heben. Microdata ist das empfohlene Format von Google und anderen Suchmaschinen sowie Teil der HTML5-Spezifikation und nutzt Informationen aus Microformats und RDFa. Es lohnt sich zu recherchieren, wie man eine (oder alle) dieser Datenstrukturen am besten implementiert, wenn man sicherstellen will, dass Suchmaschinen die wichtigsten Informationen lesen und wiederum an die Nutzer ausgeben können. Ein weiterer logischer nächster Schritt ist es, die WAI-ARIA, auch bekannt als Web Accessibility Initiative – Accessible Rich Internet Applications, Spezifikationen in deine Seite einzubauen. WAI-ARIA hilft dabei, Webseiten und Anwendungen für Menschen mit Behinderungen besser zugänglich zu machen. Es baut auf dem semantischen HTML-Fundament auf, das du gelegt hast, und macht es für Tools und Geräte noch einfacher, deinen Inhalt für Menschen sinnvoll zu nutzen. BAUE EINE SINNVOLLERE WEBSEITE
Letztendlich ist das Befolgen von semantischen Webauszeichnungspraktiken und die Verwendung von sorgfältig strukturiertem und validiertem Code deine beste Strategie, um sicherzustellen, dass deine Webinhalte auch in Zukunft nützlich und sichtbar sind. Kommunikation ist die zentrale Aufgabe von Webdesignern. Meistens denken wir bei Kommunikation an die Worte, die wir verwenden, und die visuellen Darstellungen, die wir erstellen, aber sie erstreckt sich auch auf den Code, den wir schreiben. Bei der Semantik geht es um die Bedeutung, und semantischen Code zu schreiben bedeutet, sinnvollere Webseiten zu bauen.