HTML5 - правильное использование тега статьи?

Question

Я хочу изменить

<section>
  <header>...</header>
  <p class="tweet">This is a tweet preview. You can... <em>6 Hours ago</em></p>
</section>

на

<section>
  <header>...</header>
  <article class="tweet">
    <p>This is a tweet preview. You can... <time pubdate>6 Hours ago</time></p>
  </article>
</section>

Но после прочтения некоторых статей на теге <article> я не уверенэто лучший ход.Что было бы лучше практиковать?

Answer 1

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

<sectioning_element>
    <heading_or_header>
    ... the body text and markup of the section
    <footer>
</sectioning_element>

Нижний колонтитул не является обязательным.Элементы секционирования должны иметь «естественный» заголовок.То есть должно быть легко написать элемент <h?> в начале раздела / статьи, который описывает и суммирует весь контент раздела / статьи, чтобы другие элементы на странице, не находящиеся внутри раздела / статьи, могли бызаголовок не описывается.

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

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

<section> имеет тенденцию использоваться для группировки вещей.Их естественные заголовки, как правило, множественного числа.например, "Cars for Sale"

<article> для единиц контента.Их естественные заголовки обычно являются заголовком для всего текста, который следует.например, «Мой новый автомобиль»

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

<article class="tweet">
  <header>...</header>
  <p>This is a tweet preview. You can... <em>6 Hours ago</em></p>
</article>

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

<p class="tweet">This is a tweet preview. You can... <em>6 Hours ago</em></p>

или

<div class="tweet">
     <p>This is a tweet preview. You can... <em>6 Hours ago</em></p>
</div>

---

* В любом случае есть смысл включить естественный заголовок и сделать его«не дисплей: нет».Это позволит аккуратно ссылаться на раздел / статью по контуру документа.

Answer 2

<article> content

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

( из рабочей спецификации html5 )

фактически один из примеров иллюстрирует вложенные элементы <article>, где внутренний <article> находится внутри <section>

Answer 3

Почему вы не думаете, что это хороший ход?Мне кажется, что Tweet идеально вписался бы в спецификацию W3C о том, что должно быть в статье.Скорее всего, это будет зависеть от контекста, в котором находится ваш пример кода (чего мы не можем сказать по тому, что вы предоставили).

Это также можно выразить так.

Answer 4

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

Разделы могут содержать элементы из разных тем.Статьи должны содержать элементы из той же темы.

Например:

<section>
    <section>
        <article id="article_ONE">
            <header>...</header>
            <p>Not directly related to article_TWO</p>
            <footer>...</footer>
        </article>
    </section>
    <section>
        <article id="article_TWO">
            <article>
                <header>...</header>
                <p>Part 1 of article TWO</p>
                <footer>...</footer>
            </article>
            <article>
                <header>...</header>
                <p>Part 2 of article TWO</p>
                <footer>...</footer>
            </article>
        </article>
    </section>
</section>

Answer 5

Семантика ЭТО не имеет большого значения.Вы могли бы очень хорошо сделать это, если бы захотели, и это было бы хорошо.Суть спора об использовании article против section заключается в том, что все это субъективно, в какой-то степени.Я бы рекомендовал против того, как вы делаете это во второй версии, хотя, потому что кажется, что это просто загромождает код больше.Что вы можете сделать, это просто заменить тег section на тег article.