In einem article bzw. section Tag kann natürlich auch einen header Tag verwendet werden, um den Artikel-Titel bzw. Widget-Name zu definieren. Es ist auch interessant zu sehen, dass moderne Browser dadurch auch h1 bis h6 unterschiedlich darstellen abhängig davon, auf welcher Ebene sie sind. Folgendes:
Artikel-Liste
Artikel-Titel
Section Titel
Sieht dann so aus:
So haben diese Header Tags wieder eine reine semantische Bedeutung und sind nicht mehr reine Formatierungselemente. Diese neue HTML5-Struktur ist schöner und, semantisch gesehen, sinnvoller. Sie hat aber einen Nachteil: Ältere Browser verstehen sie nicht. Deswegen werden oft beide Strukturen kombiniert. Die ältere Browser ignorieren einfach die neue Tags, die sie nicht kennen und sehen dann nur die alte Struktur. Neuere Browser sehen aber beide Strukturen, was unschön ist (aber wenn man ältere Browser unterstützen muss, ist man sowieso auf Kompromisse angewiesen). So eine kombinierte Struktur sieht dann so aus:
...
...
...
...
... Semantische tags html5 tutorial.
...
...
...
Natürlich mit der Struktur ist die Frage berechtigt, ob es überhaupt Sinn macht, die HTML5 semantische Tags zu verwenden.
Da gibt es 2 Fälle:
Ist man nicht auf der Unterstützung von älteren Browser hingewiesen, kann man einfach nur die alte DIV Tags durch die neue semantische Tags ersetzen. Ist es nicht der Fall, ist es zwar mehr Arbeit und die lesbarkeit leidet darunter, aber funktional gesehen, verliert man nichts und diese neue HTML5-Tags werden immer eine größere Rolle bei Suchmaschinen spielen. So kann es dafür gesorgt werden, dass Besucher meistens wegen des Inhalts zu der Seite gelangen und nicht weil es was in der Seitenleiste gibt. Die Absprungsrate wird dadurch niedriger. Der Umstieg lohnt sich langfristig auf jeden Fall und ist auch von der technischen Seite nicht so aufwändig. HTML5 – semantische Tags - TILL.DE Internet & Online Marketing Blog. 18. Dezember 2012 HTML5
Die semantischen Elemente sind eine der bedeutsamen Erneuerungen in HTML5. Bis zu ihrem Erscheinen wurde die ganze Auszeichnung der Webseiten mithilfe des Elements
, deren Identifikatoren (id) oder Klassen (class) gegeben wurden. Für die Unterbringung der Seitenpaneele, der oberen und unteren Kolumnentitel, der Elemente der Navigation und der übrigen strukturellen Blöcke wurden die Blöcke div mit den entsprechenden Bedeutungen (zum Beispiel, div="footer") verwendet. In HTML5 sind neue semantische Elemente für die Strukturierung, Gruppierung und der Markierung des Textinhalts erschienen. Sie beschreiben deutlich, welchen Content sie enthalten (war