Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Semantik im Web 3.0: Wir zeigen euch, wie HTML5 dem Web mehr Bedeutung verleiht

    Semantik im Web 3.0: Wir zeigen euch, wie HTML5 dem Web mehr Bedeutung verleiht

Semantik in HTML5. (Foto: sjcockell  / flickr.com, Lizenz: CC-BY)

Eines der wichtigsten Features von HTML5 ist die Möglichkeit, Inhalte in einen semantischen Kontext zu setzen. Heute zeigen wir dir, wie du auch deine Webprojekte auf das Web 3.0 vorbereitest.

Web 3.0 oder das „Semantic Web“ – heutzutage dreht sich fast alles um Semantik und so natürlich auch in HTML5. Nicht umsonst. Das Semantische Web ist im Rahmen des „Internet der Dinge“ eine Notwendigkeit, um der schieren Datenflut durch die Zuordnung von bloßen Daten zu einem Kontext Herr zu werden. Denn erst, wenn Daten einem Kontext zugeführt werden, können daraus Informationen gewonnen werden. Das Problem: Die wichtigste Markup-Sprache im Web war dazu nicht wirklich geeignet – HTML5 soll das ändern.

Semantik in Auszeichnungssprachen

semantik-html-5
Semantik im Web: HTML5 macht es möglich. (Grafik: W3C.org)

Die Hypertext-Markup-Language ist auf ein fixes Set von möglichen Elementen limitiert. Der Vorteil ist, dass jeder Browser diese Elemente kennt und jeder Entwickler sie somit verwenden kann. Das können andere Auszeichnungssprachen wie zum Beispiel XML zwar auch, allerdings sind Entwickler hier bei der Anzahl der Elemente unlimitiert, da sie gewünschte und semantisch sinnvolle Elemente selbst anlegen können – dieser Vorteil ist gleichzeitig der Nachteil von HTML. Denn die Möglichkeit, Elemente selbst anlegen zu können oder zu müssen, birgt auch einen großen Nachteil, den HTML nicht hat: Bei einem ulimitierten Set von Elementen müssen Entwickler dem Parser beibringen, wie mit selbstdefinierten Elementen umgegangen werden soll – sie müssen also eine eigene Dokumenttyp-Definition schreiben beziehungsweise sie erweitern. Wie also können Entwickler sicherstellen, dass ihr HTML-Code auch semantisch sinnvoll ist? Schon im Jahre 2009 schrieb John Allsopp über die Semantik in HTML5:

We don’t need to add specific terms to the vocabulary of HTML, we need to add a mechanism that allows semantic richness to be added to a document as required. John Allsopp

John Allsopp vertrat aber die Meinung, dass die Sprache für Entwickler erweiterbar sein sollte, was den oben angesprochenen Nachteil bedeuten würde. Um im DOM nicht auf Semantik verzichten zu müssen, gibt es zum einen das class-Attribut, das neben CSS auch von Microformats genutzt werden kann. Microformats sind aber ebenfalls limitiert und beheben nur einen Teil der Probleme – für viele Entwickler ist und war das nicht ausreichend.

Semantik und HTML5

Die wohl wichtigste Auszeichnungssprache in der fünften Version stellt uns neue Inline-Elemente zur Verfügung, die in diesem Kontext aber „text-level semantics“ heißen. Elemente wie: progressmetertime und mark basieren auf einem Konsens zwischen der Community von Entwicklern und den Browser-Herstellern – ein erster Schritt zu besserer Semantik im Web.

Neben dem semantischen Mehrwert wird dadurch auch keine komplizierte HTML-Struktur, etwa mit div-Elementen, benötigt. Um zum Beispiel einen Ladebalken anzeigen zu lassen, kann auf das progress-Element zurückgegriffen werden:

<progress min="0" max="100" value="99"></progress>

Es ist auf den ersten Blick ersichtlich, dass es sich bei diesem Schnippsel um etwas handelt, dass Veränderung anzeigt – Code gespart und dem Codeblock einen Kontext verliehen, HTML5 sei Dank. Dabei handelt es sich aber nur um Peanuts, denn HTML5 bietet noch mehr, und zwar auf struktureller Ebene.

Semantische Strukturen in HTML5

Eines der HTML5 Grundprinzipien, nämlich „paving the cowpaths“ – etwa: „Trampelpfade bepflastern“ – ist, dass schon existierende und weit verbreitete Methoden auch in einen Standard übernommen werden sollen. Auf Basis einer von Google durchgeführten Studie aus dem Jahr 2005, welche die Antwort auf die Frage „Welche Klassen werden in Kombination mit welchen Elementen am häufigsten benutzt?“ finden sollte, konnte die Notwendigkeit von header-, aside-, footer-, article-, nav- und section-Elementen festgestellt werden. Anstatt

<div class="nav"></div>

schreibt man in HTML5 nur noch

<nav></nav>

Soweit, so gut – denn jetzt ist ersichtlich, dass es sich nicht „nur“ um eine Aufzählung von Links handelt, sondern um einen inhaltlichen Block, der Informationen zur Navigation innerhalb eines bestimmten Kontexts zur Verfügung stellt. Dabei ist zu beachten, dass es sich um Elemente handelt, die HTML ergänzen und eine semantische Tiefe verleihen. Es handelt sich hierbei nämlich nicht um einen Ersatz für schon existierende Elemente, sondern um eine Spezifizierung.

Viel zu oft sehe ich Webprojekte, die section-Elemente anstatt von div-Elementen verwenden. Das Problem daran: Der Code verliert das, was er durch HTML5 gewonnen hat: die Semantik. Denn eine Section in einem HTML5-Dokument kann sehr wohl div-Elemente enthalten, muss sie auch. Denn wenn Entwickler ein Gitter benutzen, basiert das auf Divisions und nicht auf Sections – das Gitter ist ja nur dazu da, um den eigentlich Inhalt innerhalb einer Section – oder noch spezifischer eines article-Elements – zurechtzurücken. Es ist also kein Inhalt, sondern Struktur/Layout beziehungsweise Design.

Semantisches HTML5 in a Nutshell

Als Entwickler im Semantischen Web sollte man sich also fragen, welche Elemente wie und wann verwendet werden sollen, um die Vorteile von HTML5 voll nutzen zu können.

section-Element

Wie schon angesprochen, verfügt das div-Element über keinerlei semantischer Bedeutung, ganz im Gegensatz zum section-Element, das zur Gruppierung von zusammengehörenden Inhalten verwendet werden sollte.

<section>
     <h1>Heading</h1>
     <p>Lorem ipsum dolor sit <a href="">amet.</a></p>
     <p>Lorem ipsum.</p>
</section>

header-Element

Dieses Element erzeugt oft Verwirrung, da es sich eben nicht um den „Header“ einer Website handelt, wie der Kopfbereich weitläufig von Entwicklern bezeichnet wird. Im Gegensatz zu diesem kann das header-Element öfter in einer Website vorkommen. In der Spezifikation wird dieses Element wie folgt beschrieben: „A group of introductory or navigational aids.“ Das bedeutet, dass ihr eigentlich ein header-Element pro section-Element verwenden solltet, da die Section als „a thematic grouping of content, typically with a heading“ beschrieben wird. Es wird also aus der Perspektive des Inhalts gedacht und nicht aus der Perspektive des Layouts.

nav-Element

Dieses Element – ihr hab es schon erraten – sollte für Navigationsstrukturen verwendet werden. Allerdings reicht es nicht aus, einfach ein paar Links in ein nav-Element zu werfen. Dieses Element sollte für eine „Hauptnavigation“ verwendet werden beziehungsweise als „navigational aid“ innerhalb eines header-Elements.

aside-Element

Ja, inhaltlich gesprochen entspricht dieses Element einer „Sidebar“. Es sollte aber unabhängig von der Position der eigentlichen Sidebar verwendet werden. Die Entscheidung für das aside-Element ist gefallen, wenn ihr eine Sidebar entfernen könnt, ohne dass sich die Information des Inhalt dazu verändert. Unabhängig davon, ob der Sidebar-Inhalt eine echte Sidebar – am Rand der Website – ist oder nicht. Die Fragestellung dreht sich hier immer um den Zusammenhang von Inhalten – und nicht um das Layout.

footer-Element

Genauso wie der Header der Seite hat auch der Footer eine Bedeutung im Web-Entwickler-Jargon, aber wie schon gesagt: Semantik hat nichts mit Layout oder Design zu tun, sondern mit der Gruppierung zusammenhängender Inhalte. Das bedeutet auch, dass das footer-Element mehrfach auf einer Website vorkommen kann – zum Beispiel innerhalb eines section-Elements. Das führt uns zu folgendem Beispiel:

<section>
     <header>
        <h1>Artikelname</h1>
     </header>
        <p>Lorem ipsum dolor sit <a href="">amet.</a></p>
         <p>Lorem ipsum.</p>
     <footer>
        <p>Mario Janschitz</p>
     </footer>
</section>

article-Element

Abschließend möchte ich noch auf ein besonderes Element eingehen: das article-Element. Dieses HTML5-Element sorgt oft für Verwirrung, vor allem im Zusammenhang mit dem section-Element. Der Grund liegt hierfür in der Ähnlichkeit der beiden Elemente, bedingt durch die Möglichkeit der generischen Verwendung.

Es können mehrere article-Elemente in einer Section vorkommen und vice versa, der Hauptunterschied ist aber, dass das article-Element eine in sich geschlossene inhaltliche Einheit bildet. Die Section jedoch ist ein Container für generische Information, der durch die oben genannten Elemente näher spezifiziert werden kann.

Im Unterschied dazu ist das article-Element eine Art von Spezifikation des section-Elements. Natürlich, hier handelt es sich im Einzelfall um reine Interpretation, aber ihr könnt euch mit diesem Trick behelfen: Wenn der fragliche Inhalt auch als RSS-Feed-Artikel sinnvoll wäre, solltet ihr genau hier das article-Element nutzen, da der Inhalt offensichtlich in sich geschlossen ist.

Mehr zu HTML5-Inline-Elementen und deren Semantik findet ihr hier.

Setzt ihr HTML5-Elemente schon ein? Oder bevorzugt ihr die „div-itis“?

Finde einen Job, den du liebst zum Thema Webdesign, Webentwickler

7 Reaktionen
Mario Janschitz

Hallo! Danke für das Feedback!
@Marcel sieh dir doch mal http://modernizr.com an :)

Antworten
Marcel
Marcel

Ich finde den Artikel sehr gelungen. Für Einsteiger ein sehr guter Startpunkt.

Was mir aber fehlt, ist eine Erläuterung dazu, wie sich die Elemente verhalten, wenn der Browser sie nicht erkennt und was mögliche Fallbackstrategien sind. Ich denke, das hier die größte Hürde (Wissenslücke) beim Einsatz der neuen Tags besteht.

Antworten
Sven
Sven

Da kann ich @Lars nur zustimmen!

Antworten
Lars
Lars

Wenn es um Semantik geht, sollten auch ARIA-Landmarks erwähnt werden. Durch entsprechende Attribute lassen sich dann beispielsweise header- oder footer-Tags (für die Seite oder für einen Artikel) unterscheiden. Auch sollte das main-Tag nicht unter den Tisch fallen.

Antworten
THO
THO

Ich finde den Artikel auch sehr interessant.

Nur fehlt mir ein wenig die Nutzungsperspektive der Semantik. Warum mache ich das Ganze? Dass das Handy besser auf die Section-Bereiche zoomen kann? Dass Suchmaschinen besser den Content finden? Dass Screenreader-Nutzer besser navigieren können?

Ich würde die Webseiten gerne semantisch anreichern, aber bis auf ein paar schema.org-Vokabularen habe ich bisher noch keine besonderen Einflüsse gesehen.

Der einzige Vorteil von ein paar HTML5-Tags sind zum Beispiel Formularfelder, wie Colorpicker, die man nun nicht mehr mit JavaScript unterlegen muss. Das trifft aber auf section, nav, header etc. nicht zu ...

Antworten
SamSomm

Guter Artikel. Mehr Beispiele wären hilfreich gewesen. Gerade der Abschnitt mit "article" erfordert doppeltes Lesen.

Ich begrüße die Semantik im Web und glaube auch an eine Erfolgsstory. Gerade in Kombination mit Mikroformaten sehe ich sehr viel Potential.

Antworten
Alex

Das "Web 3.0" ist doch jetzt schon eine Totgeburt. Der Begriff und die Semantik wurden vor 10 Jahren mal kräftig gehypet, dann verlief das bis auf ein paar Spezialanwendungen im Sande, hat sich in der Breite im Web nicht durchgesetzt. Und ganz ehrlich: Ich glaube nicht an einen Wiedergänger.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen