HTML5 - Соответствующее использование тега статьи?

Ответ 1

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

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

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

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

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

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

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

* В любом случае для включения естественного заголовка и его отображения "display: none". Это позволит разрешить ссылку на статью/статью чисто по контуру документа.

Ответ 2

<article> контент

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

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

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

Ответ 3

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

Он также может быть указан таким образом.

Ответ 4

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

Ответ 5

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

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

Например:

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