HTML5: Die <details> und <summary> Tags

Es gibt in HTML5 zwei neue Tags, die noch weniger bekannt aber sehr nützlich sind: die Details und Summary Tags. Mit diesen neuen Tags kann man einige lange Inhalte verstecken und nur eine Zusammenfassung zeigen bis der Benutzer die Details einblendet. Es wird zum Beispiel oft bei Produktbeschreibungen verwendet.

Solche Elemente kann man schon lang mit JavaScript bzw. jQuery implementieren. Hier ein Beispiel mit jQuery:

Zuerst der HTML-Code: Wir haben zwei Details-Div-Tags mit jeweils einen Summary-Div-Tag und zwei Absätze, die die eigentliche Details enthalten.

<div class='details'>
    <div class='summary'>Summary 1</div>
    <p>Details 1.1</p>
    <p>Details 1.2</p>
</div>
<div class='details'>
    <div class='summary'>Summary 2</div>
    <p>Details 2.1</p>
    <p>Details 2.2</p>
</div>

Wenn man auf einem Summary-Div-Tag klickt, muss die Absätze im selben Details-Div-Tag ein- bzw. ausgeblendet werden. Am Anfang sollen diese Absätze alle ausgeblendet werden.

Das man mann alles mit ein paar Zeilen jQuery-Code:

$('.summary').click(function(){
    $(this).parent('.details').children('p').slideToggle();
});
$('.details p').hide();

Der Code in JSFiddle:

Es ist eigentlich nicht besonders kompliziert. Es wird aber mit den zwei neuen HTML5-Tags noch einfacher.

Die Konvertierung nach HTML5 ist ganz einfach:

<details>
    <summary>Summary 1</summary>
    <p>Details 1.1</p>
    <p>Details 1.2</p>
</details>
<details>
    <summary>Summary 2</summary>
    <p>Details 2.1</p>
    <p>Details 2.2</p>
</details>

Und man braucht kein JavaScript mehr !

Wenn ein von den Details-Elementen von Anfang an, offen angezeigt werden soll, kann man einen Attribut „open“ einfügen:

<details open>

Wer den Pfeil beim Summary nicht mag, kann ihn in Webkit-Browsers (also Safari und Chrome) mit folgendem CSS ausblenden:

summary::-webkit-details-marker {
    display:none;
}

Falls es analog im Standard und bei anderen Browser implementiert, könnte man auch gleich alle folgende gleich berücksichtigen:

summary::-webkit-details-marker,
summary::-moz-details-marker,
summary::-ms-details-marker,
summary::-o-details-marker,
summary::details-marker {
    display:none;
}

Somit kann man auch den Pfeil durch ein Plus-Zeichen ersetzen:

details summary:after {
    content: "+";
    float: left;
    margin-right: 5px;
    margin-left: 5px;
}

Und wenn man auch will, dass Plus-Zeichen durch ein Minus-Zeichen ersetzt wird, wenn die Details offen sind:

details[open] summary:after { 
    content: "-";
}

Leider werden diese zwei neue Tags nicht von allen Browser unterstützt. Zur Zeit gibt es kein Support in Internet-Explorer, Firefox und Opera-Mini. Die Unterstützung in mobilen Browsers ist somit schon gesichert.

Wer auch Desktop-Browsers unterstützen will aber trotzdem nicht auf diese zwei Tags verzichten will, verwendet den jQuery-Plugin jquery-details. Man muss einfach die Datei anbinden und folgendes ausführen:

$('details').details();

Der Plugin wird somit den Browser-Support ermitteln und, wenn notwendig, die neue Tags mit jQuery anpassen.

Man kann auch dasselbe mit Details-Polyfill, jquery.details, Element.details or jquery-deets erreichen. Es fehlt also nicht an Möglichkeiten diese neue Tags einzusetzen und trotzdem eine Ausweichlösung für Browsers zu haben, die sie noch nicht unterstützen.

HTML5

HTML5: Neue semantische HTML5-Tags

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.

HTML5

HTML5: time, datetime und pubdate

Das HTML5-Tag <time> adressiert den Bedarf für das semantische Kennzeichnen eines Datums bzw. einer Uhrzeit. Es ermöglicht die Definition sowohl eines von Maschinen als auch von Menschen lesbaren Datum bzw. einer Uhrzeit. Auf diese Weise können Sie einfach „Gestern“ dem Benutzer angezeigen und Software die ihre Seite parsen wissen lassen, dass es tatsächlich der 7. Dezember 2012 war.

<time> ist natürlich auch nützlich wenn man mit unterschiedlichen Zeitzonen arbeitet. Angenommen, Sie leben in Deutschland, sind aber auf einer Geschäftsreise in Indien und schreiben ein Artikel um 14 Uhr. Für den Leser ist es offensichtlich, dass es 14.00 Uhr indische Zeit ist. Aber eine Maschine wird nicht verstehen, dass, wenn Sie 14 Uhr schreiben, es normalerweise 14 Uhr mitteleuropäischer Zeit bedeutet, aber in diesem bestimmten Artikel ist es nicht der Fall. Auf der anderen Seite, lesen Besucher ihrer Seite sicher nicht gern Uhrzeiten Angaben mit Zeitzonen-Offset (besonders, wenn es aus dem Kontext klar ist, um welche Zeitzone es sich handelt).

Das <time> tag zu verwenden ist ganz einfach. Hier ein Beispiel:

<time>2011.12.25</time>

Natürlich, hier nur „2011.12.25“ als Datum / Uhrzeit zu markieren, bring nicht unbedingt viel. Wenn das datetime-Attribut nicht verwendet wird, muss der Inhalt der Zeitmarke ein gültiges Datum / Uhrzeit enthalten d.h. ein maschinenlesbare Datum / Zeit sein.

Es wird erst wirklich interessant, wenn man „Vergangenes Weihnachten“ als Menschen lesbares Datum schreibt und Robote mitteilt, dass es als den 25. Dezember 2011 zu verstehen ist. Das ist auch wirklich einfach. Man muss einfach folgendes verwenden:

<time datetime="2011-12-25">Vergangenes Weihnachten</time>

Dies wird als Vergangenes Weihnachten angezeigt. Es wird aber durch eine Maschine als 2011.12.25 verstanden.

Anstelle eines Datums, kann auch eine Zeit, z.B.:

<time datetime="14:00">um 14 Uhr</time>

oder ein Datum und eine Zeit z.B.:

<time datetime="2012-12-13T23:07+01:00">Jetzt</time>

verwendet werden.

Wenn ein Datum und eine Uhrzeit angeben werden, muss entweder einen Offset gegenüber der UTC-Zeit oder „Z“ für die UTC-Zeit angegeben werden z.B. 2012-12-13T23:07+00:00 ist dasselbe wie 2012-12-13T23:07Z.

Ein Teil des Datums kann auch weggelassen werden z.B. 12-08 für den 8. Dezember oder es kann auch ein Dauer angegeben werden. Ein Dauer-Angabe fängt mit einem P an (wie Period) und wird so definiert:

• PnYnMnDTnHnMnS z.B. P3Y für drei Jahre oder PT2H25M für 2 Stunden und 25 Minuten
• PnW z.B. P2W für 2 Wochen

Beachten Sie, dass P1M einen Monat bedeutet und PT1M eine Minute.

Eine Einschränkung vom <time> Tag ist, dass es nur Daten in der christlichen Ära darstellen kann. Ältere Daten können nicht kodiert werden. Also, wenn Sie eine Online-Biographie von Julius Caesar erstellen, werden Sie das <time> Tag kaum verwendet können (außer bei Verweisen auf Bücher die über ihn später geschrieben wurden).

Beachten Sie, dass das <time> Tag aus der HTML5-Spezifikation im letzten Jahr wurde entfernt (um vom <data> tag ersetzt zu werden), aber es wieder in HTML5 kurz danach wieder aufgenommen wurde. So ist die Zukunft von diesem Tag nicht 100% klar, aber zumindest ist es in WordPress und Drupal übernommen worden. So ist es recht verbreitet.

Der pubdate Attribut wird verwendet, um zu sagen, wer das angegebene Datum/Uhrzeit,  der Zeitpunkt darstellt, wann  der Artikel / das Dokument veröffentlicht wurde. Um genau zu sein, sagt es, dass es sich um die Veröffentlichung des nähersten <article> falls vorhanden oder des gesamten Dokument. Es gibt auch Chancen, dass pubdate aus der HTML5-Spezifikation entfernt wird. Deshalb melden mehrere HTML5-Validatoren seine Präsenz als Validierungsfehler.

HTML5