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

Question

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

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

Приветствия

РЕДАКТИРОВАТЬ: я решил использовать тег article, так как он, кажется, тег контейнера для несвязанных элементов, которые, я думаю, мои "разделы". Однако сама статья о тэгах, похоже, вводит в заблуждение, и, хотя они говорят, что HTML5 был разработан с большим вниманием к веб-приложениям , я считаю, что многие теги более ориентированы на блог / документ.

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

Answer 1

На вики-странице W3 о структурировании HTML5 написано:

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

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

Также описывается, как использовать тег <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>

Answer 2

Звучит так, как будто вы должны обернуть каждый из «разделов» (как вы их называете) в <article> теги, а записи в статье в <section> теги.

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

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

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

Примечание : авторам рекомендуется использовать элемент статьи вместо элемент раздела, когда было бы целесообразно объединить содержимое элемент.

А для Артикул

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

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

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

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

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

Answer 3

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

Теперь, я не уверен, что у вас есть в ваших видео, новостной ленте и т. Д., Но вот пример (нет НАСТОЯЩЕГО правильного или неправильного, только руководство о том, как я использую эти теги):

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

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

1010 *, например *

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

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

Answer 4

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

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

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

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

Answer 5

Раздел

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

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

  • Статья имеет свою полнуюзначение.

Answer 6

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

Answer 7

Блок-схема ниже может помочь при выборе одного из различных семантических элементов HTML5:

Answer 8

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

Answer 9

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

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

Answer 10

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

Таким образом, раздел похож на контейнер divкоторый содержит статьи.