HTML5: class op <section> of steeds op <div>?
ik ben de weg van HTML5 wat aan het instappen en besef dat een <section> element enkel dient om de structuur van je document te benadrukken, terwijl men een <div> aanraad om bepaalde zaken te stijlen. Nu is het zo dat ik het sectie element heb gebruikt om aan te geven dat ik een lijst met artikels heb. Die artikels wil ik nu met CSS verder stijlen, maar dan vraag ik me af of ik een klasse "articles" op het sectie element mag plaatsen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<section class="article">
<header>
<h1>Title goes here</h1>
<p>Content goes here</p>
</header>
<article>
<h2>Article title</h2>
<p>Content goes here</p>
</article>
</section>
<header>
<h1>Title goes here</h1>
<p>Content goes here</p>
</header>
<article>
<h2>Article title</h2>
<p>Content goes here</p>
</article>
</section>
Mag dit, of is dit tegen de regels van het gebruik van deze tag? Of moet ik er dus eerder zoiets van maken:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<section>
<header>
<h1>Title goes here</h1>
<p>Content goes here</p>
</header>
<article>
<div class="article">
<h2>Article title</h2>
<p>Content goes here</p>
</div>
</article>
</section>
<header>
<h1>Title goes here</h1>
<p>Content goes here</p>
</header>
<article>
<div class="article">
<h2>Article title</h2>
<p>Content goes here</p>
</div>
</article>
</section>
Bovenstaande zou uiteraard jammer zijn aangezien je een extra <div> in je broncode opneemt...
Alvast bedankt voor de hulp en de tips!
Gewijzigd op 30/04/2013 10:02:59 door Sam Clauw
Code (php)
1
2
3
2
3
article {
border: 1px solid red;
}
border: 1px solid red;
}
Er is geen reden om een extra div te maken ( <div class="article"> )
Een section element geeft echt een nieuwe sectie aan. Alles binnen een sectie hoort bij elkaar. Een dic element heeft geen semantische waarde en groepeert de elementen dus niet.
Omdat een sectie element alle elementen daarin weer groepeert zul je dit dus niet in dit geval "mogen" gebruiken. Het is totaal niet zeker dat deze elementen bij elkaar horen.
Welk element zou ik hier dan wel voor gebruiken? Nou, lees eens je zin na: ik een lijst met artikels heb Bingo! Je bent opzoek naar een lijst. Is het dan ul of ol? Dan moet je jezelf afvragen of de volgorde belangrijk is. Ik zal bijv. op de homepage een ul element gebruiken, maar op een pagina waar je een bepaalde serie artikelen toont een ol element.
En dan komen we bij mijn laatste punt: nooit op elementen stijlen, want je weet nooit op welk element de class zit, de ene pagina kan dit een ul zijn en op de andere een ol.
Gewijzigd op 30/04/2013 12:23:20 door Wouter J
Wouter J op 30/04/2013 12:20:59:
Wouter, wat bedoel je hiermee? Heb je een voorbeeldje?En dan komen we bij mijn laatste punt: nooit op elementen stijlen, want je weet nooit op welk element de class zit, de ene pagina kan dit een ul zijn en op de andere een ol.
Wouter J op 30/04/2013 12:20:59:
...nooit op elementen stijlen, want je weet nooit op welk element de class zit...
Hoe ver ga je in deze redenering?
Ik veronderstel dat je een <a> wel zou stijlen op element.
Ik snap je algemene redenering wel