Was sind denn semantische Tags?
Allgemein gesagt sind semantische Tags Kennzeichnungen, welche bestimmte Inhaltstypen markieren.
In HTML5 gibt es die semantischen Tags :
-article: Hiermit werden Bereiche markiert, welche komplett allein stehen können. Mit diesem Tag wird den Suchmaschinen gesagt, wo der Inhalt des Dokuments anfängt.
-aside: „am Rande“. Eine gute Beschreibung dafür, weil damit die Inhalte gefüllt werden, welche nicht im Hauptbereich der Seite zu sehen sind.
-footer: Hiermit wird die Fußzeile markiert
-header: Hier werden, wie auch in HTML, die typischen Kopf- Elemente hineingeschrieben.
-hgroup: Damit wird der Bereich einer Überschrift von einem section- Element markiert.
-main: Hiermit wird der Hauptbereich der Seite markiert. In HTML wird dieser mit einem div, welches die ID ‚main‘ hat, markiert.
-nav: Damit wird der Bereich der Navigation markiert.
-section: Damit wird ein Bereich für den Inhalt markiert. Sections haben eigentlich immer eine Überschrift (hgroup). Sie können auch wie div’s benutzt werden, sind aber nicht für komplizierte JavaScript- Funktionen gedacht.
Und warum sollte ich jetzt diese HTML5 Tags benutzen?
Zum einem wird der Quelltext der Seite etwas übersichtlicher, denn damit wird dem hier:
<head>
Head-Tags
</head>
<body>
<div id=“main“>
<div id=”nav”>
Seitennavigation
</div>
<div id =“content“>
Der Seiteninhalt
</div>
<div id=”left”>
Linke Spalte
</div>
<div id=“footer“>
Fußzeile
</div>
</div>
</body>
das hier:
<head>
Head-Tags
</head>
<body>
<main>
<nav>
Seitennavigation
</nav>
<section>
Der Seiteninhalt
</section>
<aside>
Linke Spalte
</aside>
<footer>
Fußzeile
</footer>
</main>
</body>
Ein zweiter wichtiger Punkt ist, dass die Suchmaschinen Seiten, welche diese Tags haben, besser durchsuchen können. Aus der ersten Struktur liest die Suchmaschine, dass dort ein div ist, wo nocheinmal vier verschachtelte divs enthalten sind. Aus der zweiten Struktur erkennt es, dass dort der Main-Bereicht ist, wo die Navigation, ein Inhaltsbereich und eine linke Spalte , gefolgt von dem footer sind.
Was spricht gegen die Verwendung von semantischen Tags?
Ein großer Punkt gegen semantische Tags ist, dass nicht alle Browser diese unterstützen. Der Internetexplorer von Mircosoft zum Beispiel hat bis zur Version 7 HTML5 nicht unterstützt. Das kann nachträglich über den “modernizr” hinzugefügt werden.
Die meisten Browser erstellen dann ein normales div. Wenn man die Formatierungen über CSS auf das Tag (z.B. <main>) legt, verschwinden diese. Hier muss man dann wieder eine Klasse oder ID vergeben (z.B.<main ID=”main”>).
Der modanizr
Der modernizr ist eine offene JavaScript-Bibliothek, welche überprüft ob der Browser HTML5 und CSS3 kompatibelel ist. Wenn er es nicht ist, werden die HTML5 Tags und die CSS3 Formatierungen umgewandelt, damit sie trotzdem richtig angezeigt werden können.