Статья, Раздел или Div: Какой правильный выбор?

Question

Я знаю, что это сделано до смерти, поверьте мне, я прочитал много ответов на этом сайте. Я сделал Googling и прочитал спецификации, и я все еще не могу решить, какой самый семантически правильный способ макетировать этот сайт. По какой-то причине я просто не могу обмануть элемент раздела.

Я создаю сайт гитары, чтобы продемонстрировать некоторые любимые гитары. У меня есть заголовок, навигация, введение, затем статья для каждой гитары и, наконец, нижний колонтитул. Таким образом, под заголовком, моя первоначальная мысль была бы форматировать следующим образом:

раздел, содержащий введение, и в том числе отдельные статьи для каждой гитары:

</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> 

Или интро на самом деле быть статья а также:

</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> 

Или, было бы более правильно уронить раздел элемента в целом, и просто идти с DIV, содержащий четыре статьи?

</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> 

Я довольно хорошо знаком с спецификацией, но это только кажется очень широким, может быть, мне просто нужно это прибито немного туже, чтобы полностью понять, что я должен делать здесь.

Я действительно с нетерпением ожидаю ответа сообщества на этот вопрос.

спасибо.

Answer 1

Соглашения об именах сводятся к индивидуальности и как вы программируете. Вы хотите сделать его доступным для чтения. Поэтому подумайте о журнале, у вас есть разные темы (скажем, музыка, фильмы, книги), которые мы могли бы назвать «секцией». Тогда у нас есть все творчество от разных авторов, мы могли бы назвать «статью». Разделы работают очень хорошо с новыми мобильными веб-сайтами, чтобы разрешить смену страниц без загрузки новых данных (данные предварительно загружены, но вы можете сделать мобильный показ по одной секции за раз, как если бы вы плавали, но на самом деле в одном файле pgae).

Я думаю, что ваш первый пример лучше.