Das große Missverständnis
HTML5, die sematische Seitenstruktur und strukturierte Daten.
Mehrere h1 Tags auf einer Seite, unsinninger Quelltext, abwertende Links...
Alles schreit nach html5 aber verstanden haben es die Wenigsten ;)
Aber der Reihe nach ...
Seit 2014 ist von der W3C die finale html5 Empfehlung veröffentlicht als Ersatz der alten XML bzw. XMLNS Spezifikation. Innerhalb von TYPO3 war html5 als doctype schon früh möglich.
Mit hmtl5 wurden unter anderem viele neue Elemente eingeführt um ein Dokument besser zu strukturieren, wie z.B. section, article, aside ...
Okay, bis hierhin können die meisten Kunden noch abgeholt werden, da die meisten Validierungs- und Webverbesserungstools das noch berücksichtigen. Schwieriger ist es da bei der Überschriftenhierarchie.
Unter XML verstanden die Suchmaschinen die Dokumentenstruktur anhand der h1 bis hx Tags. Demnach sollte nur eine h1 auf jeder Seite erscheinen und hierarchisch darunter die verschiedenen Verzweigungen.
Ein Beispiel in XML Struktur:
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example document</title>
</head>
<body>
<h1>Seitentitel</h1>
<p>Textabschnitt</p>
<h2>NEWS</h2>
<h3>NEWS EINS</h3>
<p>Text zur ersten NEws</p>
<h3>NEWS ZWEI</h3>
<p>Text zur zweiten News</p>
<h2>Nächste Abschnitt</h2>
<p>Text zum nächsten Abschnitt</p>
</body>
</html>
Um der hierarchischen Überschriftenabfolge gerecht zu werden wurden oft zweifelhafte Klassenbezeichnungen als Krücke benutzt. Solche CSS Auszeichnungen waren keine Seltenheit:
<h2 class="h1">Überschrift</h2>
Unter HTML5 können die Elemente wie z.B. section oder article genutzt werden um den Inhalt zu strukturieren.
In jedem dieser Elemente wird die Hierarchie Struktur zurückgesetzt.
Ein Abschnitt der mit einem article Element umgeben ist beginnt also mit der Überschrift h1.
Und nichts, aber auch so gar nichts anderes, sollte benutzt werden, auch wenn die Webseitenverbesserungstools dies anmeckern.
Ein html5 Dokument könnte im Vergleich zu dem XML Code weiter oben demnach folgende Struktur haben:
<!DOCTYPE html>
<html lang="de" dir="ltr" class="no-js">
<head>
<title>Example document</title>
</head>
<body>
<main>
<section>
<article>
<h1>Seitentitel</h1>
<p>Textabschnitt</p>
</article>
</section>
<section>
<h1>NEWS</h1>
<article>
<h1>NEWS EINS</h1>
<p>Text zur ersten News</p>
</article>
<article>
<h1>NEWS ZWEI</h3>
<p>Text zur zweiten News</p>
</article>
</section>
<section>
<header>
<h1>Nächste Abschnitt</h1>
<h2>Mein Untertitel</h2>
</header>
<p>Text zum nächsten Abschnitt</p>
</section>
</main>
</body>
</html>
