This article is currently in the process of being translated into German (~62% done).
Der article Tag
The article element is one of the new elements that have been introduced with HTML5. As this is a new element there has been some confusion of how to use this element. But there seems to be an agreement that you use the <article> element when you markup content, that makes sense on its own. What does this mean? It means that you could use the <article> element when marking up an “about me" page, a blog entry, and also every comment to your blog entry.
But you are not supposed to use the <article> element around every single paragraph – the point is, whatever you put in the <article> element it is supposed to make sense on its own.
Am Beispiel des Mehl-Artikels, sollte das article Element wie folgt verwendet werden (der meiste Inhalt wurde durch drei Punkte ersetzt, damit das Beispiel nicht zuviel Platz in Anspruch nimmt und der Inhalt an sich ist auch nicht notwendig um das Markup zu verstehen):
<!DOCTYPE html>
<body>
<article>
<div id="header">
<h1>All About Flour</h1>
...
</div>
<div id="content">
<h2>The Two Types of Wheat</h2>
<p>There are…</p>
<h2>All-Purpose Flour</h2>
<p>All-purpose …</p>
...
</div>
</article>
</body>
</html>Wie man sehen kann enthält das <article> Element den <div id="header"> und den <div id="content"> und der Inhalt der beiden <div>’s kann als normaler Artikel gelesen werden. Ich habe den <div id="footer"> nicht mit eingeschlossen, da dessen Inhalt nichts mit dem eigentlichen Artikel zu tun hat. Wir nutzen immernoch eine Menge div-Element in diesem Beispiel, aber in den folgenden Kapiteln werden wir diese mit neuen HTML5 Elementen, die man besser nutzen sollte, ersetzen.
Manchmal brauchen wir mehr als ein Beispiel und ich habe ein weiteres erstellt. Hier wird der Blog-Eintrag, den wir auch schon in vorherigen Kapiteln genutzt haben verwendet. Hier würde man das article Element nutzen um jeden einzelnen Blog-Eintrag zu umrahmen. Das sieht dann so aus:
<article>
<h1>Just Another Day</h1>
<p>Written by Christina<br />
On January 11th </p>
<p class="content">This is my second blog entry, and I just wanted to check in on you </p>
</article>
<article>
<h1>My First Blog Entry</h1>
<p>Written by Christina<br />
On January 10th </p>
<p class="content">I’m so happy to write my first blog entry – yay!</p>
</article>Was wir gelernt haben
- <article> ist ein neues semantisches HTML5 Element
- <article> sollte verwendet werden, wenn der Inhalt auf sich allein gestellt Sinn ergibt (z.B. in RSS-Readern)
- <article> ist ein sehr spezifisches Element - spezifischer als z.B. das <div> Element
