HTML5: Neue semantische HTML5-Tags

Publiziert am 18. Dezember 2012 von Henri Benoit

In den früheren Tagen der Webentwicklung diente HTML dazu Inhalt, Struktur und Aussehen einer Webseite zu definieren.
Mit der Einführung von CSS, gab es eine Wanderung zu einer Art Modell-Präsentation-Muster, wo CSS für die Präsentation zuständig war und HTML nur noch für Inhalt und Struktur.
Mit JavaScript (und besonders mit den vielen JavaScript-Bibliotheken die es zur Zeit gibt) kam man langsam zu einem Modell-Präsentation-Kontroller-Muster (Model-View-Controller), wo JavaScript die Kontroller-Seite übernommen hat.
Aber die Vermischung von Inhalt und Struktur war immer noch da. Das Problem dabei ist nicht nur, dass Inhalt und Struktur beide in HTML definiert wurden, sondern, dass es gar keine richtige Möglichkeit gab, sie zu trennen bzw. zu unterscheiden.

Die strukturelle Seite von HTML wurde vor HTML5 meistens zu einem Baum von div Tags reduziert. Das ist nichts anders als eine Gruppierung von Teilen der Webseite, die aber meistens dadurch entstanden ist, dass man diese Teile in CSS bzw. JavaScript getrennt ansprechen möchte. Es war also mehr eine Präsentation- bzw. Kontroller-getriebene Strukturierung des Inhalts aber auf keinem Fall eine semantisch-relevante Strukturierung.

Eine von den wichtigen Neuerungen in HTML5 adressiert genau dieses Problem. HTML wird jetzt semantisch. Konkret heißt es, dass man in HTML5 die verschiedene logische Teile einer Webseite jetzt auch mit dedizierten HTML-Tags definieren kann. Die Meisten Webseiten haben so eine Struktur (oder eine relativ ähnliche Struktur):

So eine Struktur wird typischerweise so kodiert:

<body>
	<div id="header">
		<h1>Titel</h1>
		<h2>Untertitel</h2>
	</div>
	<div id="navigation">
		<div id="menu_item1" class="menu_item">...</div>
		<div id="menu_item1" class="menu_item">...</div>
	</div>
	<div id="content">
		<div id="post1" class="post">...</div>
		<div id="post2" class="post">...</div>
		<div id="post3" class="post">...</div>
		<div id="post4" class="post">...</div>
	</div>
	<div id="sidebar">
		<div id="widget1" class="widget">...</div>
		<div id="widget2" class="widget">...</div>
		<div id="widget3" class="widget">...</div>
		<div id="widget4" class="widget">...</div>
	</div>
	<div id="footer">
	</div>
</body>

Es gab also schon vor HTML5 eine semantische Strukturierung der Webseiten. Es war aber keine standardisierte Strukturierung, sondern jeder konnte es wie er wollte definieren.
Die Einzigen wirklich semantische Tags, die es in HTML4 gab, waren die Header Tags (h1 bis h6). Sie wurden leider oft nur als Formatierungstags verstanden, auch wenn sie wieder durch ihre Interpretation durch Suchmaschinen langsam wieder mehr semantisch wurden.

In HTML5 wurden spezielle Tags definiert, die es ermöglichen, um diese ganze div Containers zu ersetzen und um die Struktur von jeder Webseite standardisiert zu kodieren. In HTML5 wurde es so aussehen:

<body>
	<header>
		<hgroup>
			<h1>Titel</h1>
			<h2>Untertitel</h2>
		</hgroup>
	</header>
	<nav>
		<div id="menu_item1">...</div>
		<div id="menu_item1">...</div>
	</nav>
	<section>
		<article>...</article>
		<article>...</article>
		<article>...</article>
		<article>...</article>
	</section>
	<aside>
		<section>...</section>
		<section>...</section>
		<section>...</section>
		<section>...</section>
	</aside>
	<footer>
	</footer>
</body>

Der nav Tag kann entweder innerhalb vom header Tag oder außerhalb positioniert werden. Es kommt darauf an, wie man den Header genau versteht.

Der section Tag ist relativ ähnlich zum div Tag. Der Unterschied liegt daran, dass der section Tag auch bedeutet, dass die Inhalte die zusammengefasst werden auch thematisch zusammenhängen, was beim div nicht zwingend der Fall war.

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:

<body>
	<section>
		<header>
			<h1>Artikel-Liste</h1>
		</header>
		<article>
			<header>
				<h1>Artikel-Titel</h1>
			</header>
			<section>
				<h1>Section Titel</h1>        
			 </section>
		 </article>
	 </section>
</body>

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:

<body>
	<header>
		<hgroup>
			<div id="header">
				<h1>Titel</h1>
				<h2>Untertitel</h2>
			</div>
		</hgroup>
	</header>
	<nav>
		<div id="navigation">
			<div id="menu_item1">...</div>
			<div id="menu_item1">...</div>
		</div>
	</nav>
	<section>
		<div id="content">
			<article>
				<div id="post1">...</div>
			</article>
			<article>
				<div id="post2">...</div>
			</article>
			<article>
				<div id="post3">...</div>
			</article>
			<article>
				<div id="post4">...</div>
			</article>
		</div>
	</section>
	<aside>
		<div id="sidebar">
			<section>
				<div id="widget1">...</div>
			</section>
			<section>
				<div id="widget2">...</div>
			</section>
			<section>
				<div id="widget3">...</div>
			</section>
			<section>
				<div id="widget4">...</div>
			</section>
		</div>
	</aside>
	<footer>
		<div id="footer">
		</div>
	</footer>
</body>

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.

18. Dezember 2012

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert