Раздел против статьи HTML5

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

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

Приветствия

EDIT: Я решил использовать тег article, поскольку он, кажется, является тегом контейнера для несвязанных элементов, которые, как я полагаю, имеют мои "разделы". Фактическая статья тэга, однако, кажется, довольно вводит в заблуждение, и хотя они говорят, что HTML5 был разработан с большим вниманием к веб-приложениям, я нахожу, что многие теги больше основаны на блогах и документах.

В любом случае спасибо за ваши ответы, кажется, довольно субъективным.

Ответ 1

Похоже, вы должны обернуть каждую из "разделов" (как вы их называете) в тегах <article> и записи в теге <section>.

спецификация HTML5 говорит (раздел):

Элемент сечения представляет собой общий раздел документа или выражение. Раздел в этом контексте представляет собой тематическую группу контента, обычно с заголовком. [...]

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

Примечание. Авторы рекомендуют использовать элемент статьи вместо когда имеет смысл синдицировать содержимое элемент.

И для Article

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

Я думаю, что то, что вы называете "секциями" в OP, соответствует определению статьи, поскольку я вижу, что они являются независимо распространяемыми или многоразовыми.

Обновление: Некоторые незначительные изменения текста для article в проекте последних редакторов для HTML 5.1 (выделены курсивом):

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

Кроме того, обсуждение списка рассылки Public HTML о article в январе и февраль 2013 года.

Ответ 2

На странице W3 wiki о структурировании HTML5 говорится:

<section>. Используется для группировки разных статей в разных целях или предметов или для определения различных разделов одной статьи.

И затем отображает изображение, которое я очистил:

enter image description here

В нем также описывается использование тега <article> (из той же самой ссылки W3 выше):

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

В нашем примере <section id="main"> содержит записи в блоге. Каждый блог запись будет подходящей для синдикации в качестве элемента в RSS-канале и будет иметь смысл, если читать самостоятельно, вне контекста, поэтому <article> идеально подходит для них:

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>

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

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

Ответ 3

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

Теперь я не уверен, что у вас есть в ваших видео, новостях и т.д., но вот пример (нет REAL правильно или неправильно, просто руководство по использованию этих тегов):

<article>
    <h1>People</h1>
    <p>text about people</p>
    <section>
        <h1>fat people</h1>
        <p>text about fat people</p>
    </section>
    <section>
        <h1>skinny people</p>
        <p>text about skinny people</p>
    </section>
</article>
<article>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</article>

Как вы можете видеть, разделы все еще имеют отношение друг к другу, но пока они находятся внутри блока, который группирует их. Разделы DONT должны быть внутри статей. Они могут находиться в теле документа, но я использую разделы в теле, когда весь документ является одной статьей.

например.

<body>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</body>

Надеюсь, что это имеет смысл.

Ответ 4

Мне нравится придерживаться стандартного значения используемых слов: article будет применяться к, ну, статьям. Я бы определил записи в блогах, документы и новостные статьи как articles. Разделы, с другой стороны, будут ссылаться на элементы layout/ux: sidebar, header, footer будут секциями. Однако это все моя личная интерпретация - как вы указали, спецификация для этих элементов не определена.

Поддерживая это, w3c определяет элемент article как раздел контента, который может самостоятельно стоять самостоятельно. Сообщение в блоге может стоять на нем как ценный и потребляемый элемент контента. Однако заголовок не будет.

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

Что более проблематично в том, что статья и раздел настолько аналогичный. Все, что отделяет их, - это слово "самодостаточное". Решать, какой элемент использовать, было бы легко, если бы и быстрые правила. Вместо этого, это вопрос интерпретации. Вы можете иметь несколько статей в разделе, вы можете иметь несколько разделов внутри и в статье вы можете встраивать разделы в разделы и статьи внутри разделов. Вам решать, какой элемент наиболее семантически подходящий в любой конкретной ситуации.

Здесь - очень хороший ответ на тот же вопрос здесь, на SO

Ответ 5

Раздел

  • Используйте это для определения раздела вашего макета. Это может быть mid, left, right и т.д.
  • Это имеет значение связи с каким-то другим элементом, попросту говоря, ЗАВИСИМЫМ.

Статья

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

  • Статья имеет свой законченный смысл.

Ответ 6

Раздел в основном представляет собой обертку для h1 (или других тегов h) и содержимого, которое соответствует этому. article - это, по сути, документ внутри вашего документа, который повторяется или разбивается на страницы... например, каждое сообщение в блоге в вашем документе может быть статьей или каждый комментарий к вашему документу может быть статьей.

Ответ 7

также для синдицированного контента "Авторы рекомендуют использовать элемент статьи вместо элемента раздела, когда имеет смысл синдицировать содержимое элемента".

Ответ 8

Моя интерпретация такова: Я думаю, что на YouTube есть раздел комментариев, а внутри секции комментариев есть несколько статей (в этом случае комментарии).

Итак, раздел похож на div-контейнер, содержащий статьи.

Ответ 9

Article и Section являются семантическими элементами HTML5. Раздел - это общий раздел веб-страницы на уровне блока, но соответствующий содержанию нашей веб-страницы. Статья также является блочным уровнем, но статья относится к отдельному сообщению в блоге, комментарию к веб-странице.

Как статья, так и раздел должны включать заголовочные элементы h2-h6.