Anzeige
Anzeige
UX & Design
Artikel merken

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

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.

Von Mario Janschitz
6 Min. Lesezeit
Anzeige
Anzeige

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

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)

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige
<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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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“?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
13 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

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
JF_S

Hi,

Dein Kommentar zeigt eigentlich das Du nicht verstanden hast, was Semantik ist. Es ist nichts, was man hypen kann oder sonst irgendein Trend ist.
Ohne Semantik ist HTML obsolet. Selbst das, was ich grade schreibe ist, ohne Semantik hinfällig und nur das sinnlose aneinanderreihen von Zeichen.
Und um Kommunikation überhaupt zu ermöglichen, sind ja eigentlich drei Dinge notwendig Semantik, Semiotik, Syntaktik.
Und was Du als Spezialanwendung verstehst, ist ja wohl inzwischen eine der am meisten genutzten Anwendungen im Internet nämlich eine Suchmaschine.

Ich denke, Du solltest Dich einfach mal etwas tiefer mit der Materie beschäftigen. Dann wirst Du wahrscheinlich Deinen Standpunkt auch etwas korrigieren.

Grüße

Antworten
AlexS

Danke für den gut gemeinten Rat, aber ich arbeite seit fast 20 Jahren auf dem Gebiet. Du bist derjenige, der da m. E. was nicht verstanden. Mich stört an dem Artikel nämlich nur das Wort „Web 3.0“. Denn das hat nichts, aber auch rein gar nichts mit semantischen Auszeichnungen in HTML5 zu tun, die hier vorgestellt werden und die natürlich sehr sinnvoll sind. Das ist noch gutes altes Web 2.0, weil es dabei „nur“ um die Strukturierung von Websites geht.

Das „Web 3.0“ wird auch als sogenanntes „Semantic Web“ bezeichnet und fußt auf Technologien, die zwar ein W3C-Standard sind, wie RDFa und Mikroformate, die aber für Webanwendungen heute nach wie vor kaum eine Rolle spielen und in HTML selbst nur selten eingesetzt werden. In (X)HTML gab es mal Ansätze wie Dublin Core, das umzusetzen. Das hat sich aber nicht durchgesetzt und wurde nicht dem Standard hinzugefügt.

Ziel des Semantic Web ist es dagegen nicht, wie in diesem Artikel vorgestellt, Websites semantisch zu strukturieren, sondern Daten im Web so maschinenlesbar zu präsentieren, dass man sie z. B. in Beziehung zueinandersetzen kann. Das hat also mit Websites an sich erstmal gar nichts zu tun, sondern war ursprünglich sogar ein Forschungsgebiet der KI. Es gibt Anwendungen dazu, die spielen aber für den gemeinen Webuser nicht die geringste Rolle. Interessant wird das z. B., wenn man Websites für Facebook oder Google aufarbeitet. schema.org ist da ein wichtiges Stichwort. Aber es arbeiten meiner Erfahrung nach nur Wenige damit.

Merke: „Semantik im Web“ ist nicht gleich „Semantic Web“ oder „Web 3.0“.

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
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
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
Sven

Da kann ich @Lars nur zustimmen!

Antworten
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
Mario Janschitz

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

Antworten

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige