Das aside Tag

Das <aside> Element wurde mit HTML5 neu eingeführt und kann auf zwei Arten eingesetzt werden. Grundsätzlich basiert der Kontext des <aside> Elements darauf ob es innerhalb oder außerhalb eines article Elementes eingesetzt wird.

In Magazinen sieht man oft Info-Kästen die aus dem eigentlichen Inhalt des Artikels herausgezogen sind und z.B. etwas besonders relevantes aus dem Artikel noch einmal gesondert hervorheben. Wenn das der Einsatzzweck des aside Elementes ist, so muss es innerhalb des article Elementes platziert werden, da es eine Beziehung zum Inhalt des Artikels hat.

Inhalt der mit dem aktuellen Artikel, Blogpost usw. in Beziehung steht

Hier ein Beispiel wo das <aside> Element innerhalb eines <article> Elementes genutzt wird:

<article>
	<header>
		<h1>All About Flour<h1>
		<p class="byline">by Jane Doe</p> 
	</header>
	<section>
		<h2>The Two Types of Wheat</h2>
		<p>There … to rise.</p>
		<p>Where … with less protein.</p>
	</section>
	<aside>
		If you use organic flour you very often get better bread
	</aside>
</article>

Inhalt der sich auf die gesamte Seite bezieht

Das aside Element kann auch genutzt werden um Inhalt hervorzuheben, der für die Seite als ganzes von interesse ist -und kann dort Blog-Rollen, zusätzliche Navigation oder WErbung beinhalten. Wenn das der Anwendungszweck des <aside> Elements sein soll, dann muss es außerhalb des article Tags platziert werden. Hier ein Beispiel:

<aside>
	<h3>Foodblogs I like</h3>
	<a href="http://www.bakerella.com">Bakerella</a>
	<a href="http://sourdough.com/"> Sourdough.com</a>
	<a href="http://www.bakingobsession.com">BakingObsession</a>
</aside>
<article>
	<header>
		<h1>All About Flour<h1>
		<p class="byline">by Jane Doe</p> 
	</header>
	<section>
		<h2>The Two Types of Wheat</h2>
		<p>There … to rise.</p>
		<p>Where … with less protein.</p>
	</section>
</article>

Ob man das aside Element nun für den ersten oder zweiten Zweck einsetzt, man muss daran denken, dass das aside Element für zweitrangigen Inhalt bestimmt ist, egal wie es visuell dargestellt wird. Das impliziert auch, dass man das aside Element für z.B. pulquotes nutzen sollte, da diese Teil des Inhalts darstellen -und nicht das blockquote Element.

Was wir gelernt haben

• Das aside Element kann innerhalb und außerhalb des article Elementes eingesetzt werden.
• Wenn es innerhalb des article Elementes ist, dann muss der Inhalt des aside auch relevant für den Inhalt des Artikels sein.
• Wenn man den Inhalt des <aside> Element entfernt und der Artikel auf den es sich bezieht, nicht mehr komplett ist, dann sollte man das <aside> nicht benutzen.
• Wenn das aside Element außerhalb des article Elementes nutzt, muss der Inhalt relevant für die gesamte Seite sein.
• Das aside Element ist ein blockbasiertes Element
• Man kann sowohl blockbasierte Elemente (wie <h1> bis <h6>) als auch zeilenbasierte Elemente (wie emphasize <em>) innerhalb eines <aside> Elements benutzen.