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

0

Я знаю, что это сделано до смерти, поверьте мне, я прочитал много ответов на этом сайте. Я сделал 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>

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

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

Спасибо.

Теги:
article

1 ответ

0
Лучший ответ

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню