• Christian Hinzmann
  • IT-Blog

Semantische Tags

 

Sieht man heutige Webseiten sich an, kommt den Betrachter des Quellcodes eine Sammlung - ach was, ein Heer - an div-tags entgegen, die die Webseite in Form bringen sollen und für "Übersicht" sorgen sollen. Das Problem, abgesehen davon, dass es Mist ausschaut, ist, dass Beispielsweise Screenreader und Bots von Suchmaschinen den Inhalt vor lauter Div's nicht sieht. Dadurch, dass sämtliche Informationen in div-Containern enthalten sind, wissen diese Programme oft zum Beispiel nicht, wo fängt der Inhalt an, und wo geht die Navigation los. Woher soll ein Screenreader wissen, ob die Überschrift nun zur Webseite allgemein gehört, oder zum gerade angezeigten Artikel? Woher soll der Crawler wissen, welche Links zur Navigation gehören und welche z.B. Worterklärungen sind? 
 
Für dieses Problem hat HTML5 eine smarte Lösung parat. Die Macher von HTML5 haben sich in Kooperation mit den Suchmaschinenbetreibern hingesetzt und die Quellcodes der Webseiten noch häufig genutzten Beschriftungen geguckt und eine Rangliste erstellt. Für die ersten Plätze und Sinnvollen Namen wurden einfach neue Tag-Namen heraus gearbeitet, die die Internetseite logisch unterteilen kann / den umschließenden Inhalten eine Bedeutung zuordnen kann - Semantik (Bedeutung) . Spitzenreiter der am häufigsten verwendeten Namen waren zum Beispiel : "Footer", "Header", "Article", "Navigation" und so weiter.  Mit den neuen semantischen Tags können wir also unsere Webseite schön unterteilen und den Crawlern wie Screenreader ein ganzes Stück Arbeit abnehmen (super für SEO - Google wertet das). Dabei ist keine feste Reihenfolge vorgegeben. Auch können die Tags ineinander mehrfach verschachtelt werden. Es sollte nur Sinn ergeben :) .
So kann ich Beispielsweise eine Seite so aufbauen und anschließend via CSS die Tags direkt formatieren :
 
HTML5:

<header>Ich bin der Kopfbereich der gesamten Webseite</header>
<nav>Ich bin eine Navigation und ich liebe Links für meine Hauptseite</nav>
<article>
  Ich bin ein Bereich einer Webseite, der Inhalt enthält
  <header>Ich bin der Kopfbereich von diesem Inhaltsbereich und nehme freudig h-Tags entgegen</header>
  <section>Ich bin ein Teil des Inhaltsbereiches und schlucke einfach alles gerne</section>
  <aside>Ich habe nähere Informationen, Zusatzinformationen etc. in mir, z.B. den Autor, ein Bild, Video usw. ...</aside>
</article>
<footer>Ich bin die Fußzeile der ganzen Internetseite</footer>

HTML - alt:


<div id='header'>Kopfbereich oder auch evtl. was ganz anderes</div>
<div id='navigation'>Ich enthalte die Navigation - oder auch nicht</div>

…. weiter brauche ich das sicherlich nicht auszuführen :D


Wir merken also, dass semantische Tags eine tolle Sache sind und zu einer der größten Vorteile von HTML5 gezählt werden können.
 
 
Sollen Sie Fragen haben, nähere Informationen über HTML5 Programmierung wollen oder einfach ein Projekt in HTML5 planen und benötigen Hilfe - dann schreiben Sie uns einfach. Wir helfen gerne weiter.

  • Erstellt am .
  • Aufrufe: 4605