Должен ли <sections>иметь <articles>или <articles>иметь <sections>? - PullRequest
Новая
       26

Должен ли <sections>иметь <articles>или <articles>иметь <sections>?

7 голосов
/ 02 марта 2012

Я читаю " Погружение в HTML5 " Марка Пилгирма и в разделе семантики рассказывается о том, как HTML5 вводит элементы <article> и <section>. В нем говорится, что <section> s представляют общий документ или раздел, в то время как <article> s представляют автономную композицию. В любом случае я не вижу логически семантических отношений между родителями и детьми.

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

Итак, мой вопрос: должны ли <section> быть вложены в <article> с, должны ли <article> быть вложены в <secion> с, или это не имеет значения с точки зрения семантики? 

<section><h1>section article?</h1>
  <article><h1>art 1</h1></article>
  <article><h1>art 2</h1></article>
  <article><h1>art 3</h1></article>
</section>

<article><h1>article section?</h1>
  <section><h1>sec 1</h1></section>
  <section><h1>sec 2</h1></section>
  <section><h1>sec 3</h1></section>
</article>

Ответы [ 3 ]

11 голосов
/ 02 марта 2012

Вполне приемлемо вкладывать их в любом случае. Хотя схема документа не различает <section> и <article>, с семантической точки зрения это две разные вещи. В этом весь смысл представления их как двух отдельных семантических элементов.

Используйте первый фрагмент, если ваша страница состоит из нескольких статей.

Используйте второй фрагмент, если у вас есть статья, достаточно полная, чтобы содержать несколько разделов.

Вы можете даже комбинировать их оба, если оба они подходят для вашего контента, так что ваша разметка выглядит следующим образом: 

<section><h1>section article?</h1>
  <article><h1>art 1</h1>
    <section><h1>sec 1.1</h1></section>
    <section><h1>sec 1.2</h1></section>
    <section><h1>sec 1.3</h1></section>
  </article>
  <article><h1>art 2</h1>
    <section><h1>sec 2.1</h1></section>
    <section><h1>sec 2.2</h1></section>
    <section><h1>sec 2.3</h1></section>
  </article>
  <article><h1>art 3</h1>
    <section><h1>sec 3.1</h1></section>
    <section><h1>sec 3.2</h1></section>
    <section><h1>sec 3.3</h1></section>
  </article>
</section>
2 голосов
/ 02 марта 2012

HTML-документация имеет тенденцию использовать разделы только внутри статей.Похоже, что вы всегда должны использовать <article> и использовать каждый <section> для раздела этой статьи.Пример , который они дают , включает яблоки: 

<article>
 <hgroup>
  <h1>Apples</h1>
  <h2>Tasty, delicious fruit!</h2>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h1>Red Delicious</h1>
  <p>These bright red apples are the most common found in many supermarkets.</p>
 </section>
 <section>
  <h1>Granny Smith</h1>
  <p>These juicy, green apples make a great filling for apple pies.</p>
 </section>
</article>

Я не вижу много примеров, когда <section> не содержится в <article>, но <article> может содержатьдругой <article> внутри него, такой, что блог будет представлен статьей, а затем комментарий к этому блогу будет представлен другой статьей внутри родительской статьи.Таким образом, это выглядит как направление, в котором вы должны двигаться.

Итак, продолжая с примера с яблоками: если вы хотите, чтобы пользователи могли комментировать каждый тип яблока, то в этом случае у вас будет статья внутрираздел, который все еще будет внутри статьи.

После более подробного изучения и более тщательного обдумывания я сформулировал это обобщение:

Использование статей должно быть зарезервировано для «сообщений», таких как блог, тема (и каждая из последующих публикаций), комментариев и т. Д. Все, что может иметь автор , должно использовать *Элемент 1025 *.

Использование разделов должно быть зарезервировано для разделения разделов вашего веб-сайта, таких как введение (о том, чем может быть ваш сайт), некоторые новостные статьи или область внутристатья, используемая для комментариев.Все, что является «частью» чего-либо (на самом деле не имеет автора).

1 голос
/ 02 марта 2012

Оба семантически действительны

Все зависит от того, как вы хотите, чтобы ваша страница интерпретировалась.

Если вы пишете сообщение в блоге, каждое сообщение будет <article>, а в особенно длинном сообщении в блоге вы можете разделить его на логические <section> с их собственными <h1> и всем остальным необходимо.

Если вы пишете страницу исследования, вы можете использовать <sections> для выделения оглавления, аннотации, основного текста и приложения. В основной части (и приложении) у вас может быть определенный раздел, который действительно является <article>.

Если вы выкладываете страницу, я высоко рекомендую следующий формат: 

<body>
    <div id="page">
        <div id="page-inner">
            <header id="header">
                <div id="header-inner">
                    <!-- logo, site name, search, etc -->
                </div>
            </header>
            <nav id="nav">
                <div id="nav-inner">
                    <ul>
                        <li><a href="">Primary Nav</a></li>
                        ...
                    </ul>
                </div>
            </nav>
            <div id="wrapper">
                <div id="wrapper-inner">
                    <div id="content">
                        <div id="content-inner">
                            <article>
                                <header>
                                    <h1>Title</h1>
                                    <span class="author"></span>
                                    <time class="timestamp"></time>
                                    ...
                                </header>
                                <div class="content">

                                </div>
                                <footer>
                                    ...
                                </footer>
                            </article>
                            ...
                        </div>
                    </div><!-- end #content -->
                    <div id="sidebar">
                        <div id="sidebar-inner">
                            <div class="module"></div>
                            <!-- more sidebar widgets, modules, blocks, what-have-you -->
                        </div>
                    </div><!-- end #sidebar -->
                    <!-- more columns if necessary -->
                </div>
            </div>
            <footer id="footer">
                <div id="footer-inner">
                    <!-- copyright notice, footer menu, contact form, etc -->
                </div>
            </footer>
        </div>
    </div>
</body>

Хотя если вам не нужно так много <div> с, сделайте это просто с помощью: 

<body>
    <header></header>
    <nav></nav>
    <div id="wrapper">
        <div id="content">
            <article></article>
            ...
        </div>
        <div id="sidebar">
            <div class="module"></div>
            ...
        </div>
    </div>
    <footer></footer>
</body>
...