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

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

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

ура

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

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

На вики-странице 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>

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

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

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

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

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

И для статьи

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

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

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

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

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

Я бы использовал <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>

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

например

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

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

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

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

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

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

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

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

Раздел

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

Статья

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

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

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

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

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

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

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

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

Для записи в блоге используйте следующий синтаксис статьи и раздела.

<article>
         <h1>Heading 1</h1>
         <p>Article Description</p>
         <section id="sec1">
                <h2>Section Heading</h2>
                <p>Section Description</p>
         </section>
         <section id="sec2">
                <h2>Section Heading</h2>
                <p>Section Description</p>
         </section>
</article>