Das section Tag

Das section (Abschnitts-) Element ist ein neues Element, dessen Anwendung am schwersten zu erlernen ist. Ist es übergreifender als das <article> Element aber man muss trotzdem einen wirklichen Abschnitt in seinem Dokument haben um das <section> Element zu benutzen.

Des heißt man muss immer noch drüber nachdenken ob es eher angemessen wäre das <nav>, das <aside>, das <header>, das <footer>, oder das <article> Element zu benutzen, bevor man das <section> Element nutzt. (Manche Elemente sind vielleicht noch neu, aber werden hier in anderen Kapiteln auch erklärt).

Schauen wir uns einmal an wie man das <section> Element nutzen könnte um verschiedene Teile des Mehl Artikels in Abschnitte aufzuteilen:

</header>
<section>
	<h2>The Two Types of Wheat</h2>
	<p>There are two …</p>
</section>

<section>
	<h2>All-Purpose Flour</h2>
	<p>All-purpose … </p>
</section>
...
<footer>...</footer>
</article>

As you can see, this adds several lines of markup to your document and some prefer as little markup as possible. Luckily for them, you do not need to use the section element inside the article, but it often creates a more correct document outline.
As the section element divides your content into sections, it is important to remember that all section elements must be followed by a heading tag - if this doesn't make sense semantically, then you should not be using the section element (consider using the one of the other new semantic HTML5 elements or perhaps no element at all?).

Manche könnten nun in Versuchung geraten das section Tag als Styling Element für z.B. pullquotes zu nutzen, aber widersteht diesem Drang. Dazu gibt es angemessenere Elemente, die man nutzen kann, statt des section Elements, zum Beispiel das aside Element.

Was wir gelernt haben

• Das <section> Element sollte nicht für Styling genutzt werden.
• Wenn man etwas benötigt um sein Styling umzusetzen, sollte man <div> benutzen.
• Das <section> Element sollte nur als allerletzte Wahl gewählt werden, nachdem man sichergestellt hat, dass kein anderes Element passend ist.
• Man kann es für das Kleingedruckte nehmen, indem man die vielen Seiten in nummerierte Abschnitte aufteilt.
• Nutze das <section> Element um Inhaltsgruppen zu umrahmen, z.B. eine Artikelsammlung auf einer Nachrichtenseite.
• Benutzt das <section> Element nicht für Zitate oder Seitenleisten - dafür gibt es das <aside> Element.
• Wenn dem <section> Element nicht direkt eine Überschrift (<h1> bis <h6>) folgt, dann ist das <section> Element nicht das was man benötigt!
• Man kann article in section und section in article Tags einbinden.
• Das <section> Element ist ein Blockbasiertes Element.