I know this is done to death, believe me, I've read many answers on this site alone. I have done the Googling, and the reading of the specs, and I still cannot seem to decide what the most semantically correct way to mock up this site would be. I just can't get my head around the section element for some reason.
I'm setting up a guitar site to showcase some favorite guitars. I have a header, nav, an intro, then an article for each guitar, and finally a footer. So, below the header, my original thought would be to format as follows:
A section, containing the intro, and including individual articles for each guitar:
</header>
<section class="main" role="main">
<h1>The Guitars</h1>
<p>Intro text...</p>
<p>More intro text...</p>
<article class="guitar-1">
<h1>Gibson Les Paul '57 Goldtop</h1>
<img class="guitar-photo" />
<h2>Specs:</h2>
<p>Spec Details...</p>
<h2>Thoughts:</h2>
<p>Thoughts...</p>
</arcicle>
<article class="guitar-2">
<h1>Music Man JP12</h1>
<img class="guitar-photo" />
<h2>Specs:</h2>
<p>Spec Details...</p>
<h2>Thoughts:</h2>
<p>Thoughts...</p>
</article>
<article class="guitar-3">
<h1>JCS Rhoads RR1T</h1>
<img class="guitar-photo" />
<h2>Specs:</h2>
<p>Spec Details...</p>
<h2>Thoughts:</h2>
<p>Thoughts...</p>
</article>
</section>
<footer>
Or should the intro actually be an article as well:
</header>
<section class="main" role="main">
<article class="intro">
<h1>The Guitars</h1>
<p>Intro text...</p>
<p>More intro text...</p>
</article>
<article class="guitar-1">
<h1>Gibson Les Paul '57 Goldtop</h1>
<img class="guitar-photo" />
<h2>Specs:</h2>
<p>Spec Details...</p>
<h2>Thoughts:</h2>
<p>Thoughts...</p>
</arcicle>
<article class="guitar-2">
<h1>Music Man JP12</h1>
<img class="guitar-photo" />
<h2>Specs:</h2>
<p>Spec Details...</p>
<h2>Thoughts:</h2>
<p>Thoughts...</p>
</article>
<article class="guitar-3">
<h1>JCS Rhoads RR1T</h1>
<img class="guitar-photo" />
<h2>Specs:</h2>
<p>Spec Details...</p>
<h2>Thoughts:</h2>
<p>Thoughts...</p>
</article>
</section>
<footer>
Or, would it be more proper to drop the section element altogether, and just go with a div, containing the four articles?
</header>
<div class="main" role="main">
<article class="intro">
<h1>The Guitars</h1>
<p>Intro text...</p>
<p>More intro text...</p>
</article>
<article class="guitar-1">
<h1>Gibson Les Paul '57 Goldtop</h1>
<img class="guitar-photo" />
<h2>Specs:</h2>
<p>Spec Details...</p>
<h2>Thoughts:</h2>
<p>Thoughts...</p>
</arcicle>
<article class="guitar-2">
<h1>Music Man JP12</h1>
<img class="guitar-photo" />
<h2>Specs:</h2>
<p>Spec Details...</p>
<h2>Thoughts:</h2>
<p>Thoughts...</p>
</article>
<article class="guitar-3">
<h1>JCS Rhoads RR1T</h1>
<img class="guitar-photo" />
<h2>Specs:</h2>
<p>Spec Details...</p>
<h2>Thoughts:</h2>
<p>Thoughts...</p>
</article>
</div>
<footer>
I'm pretty familiar with the spec, but it just seems very broad, maybe I just need it nailed down a little tighter to fully grasp what I'm supposed to be doing here.
I really do look forward to hearing the community's answer on this one.
Thank you.