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

152

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

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

Приветствия

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

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

  • 2
    это действительно не имеет значения. Используйте то, что имеет смысл для вас. Лично я бы использовал section
  • 0
    @illia choly: я согласен с тобой, нет настоящих правильных или неправильных.
Показать ещё 1 комментарий
Теги:

9 ответов

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

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

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

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

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

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

И для Article

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

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

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

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

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

Поделиться
  • 15
    во время поиска в Интернете я натолкнулся на юридический документ, который читал Article 1, Section 2, Clause 3 . Я надеюсь, что это поможет мне вспомнить логику.
  • 3
    Я не согласен в некоторой степени, но я также считаю, что они могут быть переключены в зависимости от контекста. Чтение описаний спецификаций подсказывает мне, что, если article выступает в роли «виджета», должно быть наоборот. section : «тематическая группировка» и «раздел документа». article : «автономный» и «виджет». Рассмотрим пример домашней страницы, такой как codepen.io/anon/pen/iDEwf
Показать ещё 7 комментариев
107

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

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

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

Изображение 2626

В нем также описывается использование тега <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>
Поделиться
  • 10
    Дополнительно: <main> может использоваться для переноса элементов между верхним и нижним колонтитулом (синие блоки на изображении). <figure> оборачивает изображения внутри статей или разделов.
  • 2
    Прекрасная работа. Это должен быть принятый ответ. Я согласен с логикой-модулем, что вы должны добавить main .
Показать ещё 2 комментария
38

Я бы использовал <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
    I'd use <article> for a text block that is totally unrelated to the other blocks on the page. Я знаю, что вы написали это еще в 2011 году, но не для этого ли используется <aside> ?
17

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

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

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

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

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

Поделиться
  • 0
    Спасибо за эти ссылки, интересного чтения.
5

Раздел

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

Статья

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

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

Поделиться
3

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

Поделиться
1

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

Поделиться
0

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

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

Поделиться
0

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

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

Поделиться

Ещё вопросы

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