Article, Section or Div: Which Is the Proper Choice?

Question

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.

Answer 1

Naming conventions come down to personality and how you program. You want to make it readable as possible. So think about a magazine, you have different topics (let's say music, movies, books) which we could call 'section'. Then we have all the creative from different authors, we could call 'article'. Sections work really well with new mobile websites to allow changing pages without loading new data (the data is preloaded but you can make mobile show one section at a time as if your navigating, but you actually on the same pgae "file").

I would think your first example is better.