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

Question

Чтение статьи о теге <article> в HTML5, я действительно думаю, что моя самая большая путаница в первом вопросе этого раздела:

Использование <article> придает контенту больше смысла. В отличие от этого <section> является только блоком связанного контента, а <div> является только блоком контента ... Чтобы решить, какой из этих трех элементов подходит, выберите первый подходящий вариант:

1. Будет ли содержание иметь смысл сам по себе в ридере? Если это так, используйте <article>.
2. Связано ли содержание? Если это так, используйте <section>.
3. Наконец, если нет семантических отношений, используйте <div>.

Итак, я думаю, что мой вопрос действительно: Какие типы контента принадлежат программе чтения каналов?

Answer 1

Спецификация отвечает на это довольно четко:

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

см. http://dev.w3.org/html5/spec/Overview.html#the-article-element

Answer 2

Вы привели хороший аргумент, и да, спецификация довольно четко определяет <article> как достойную синдикации коллекцию контента. На мой взгляд, ваша статья будет составной статьей в блоге - то, что вы, как автор контента сайта, создаете. Хотя комментарии к этому разделу связаны со статьей, на самом деле они не являются частью статьи и должны быть отнесены к другому блоку в <section>, несемантическом <div> или просто <p> s. с набором display:block. Это решение остается за дизайнером, в зависимости от того, как они семантически оценивают ценность комментария.

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

Answer 3

Спецификация W3C оставляет много открытых для интерпретации, и в конечном итоге все сводится к мнению автора. Вот краткий и простой ответ в виде вопроса:

Каковы основные значимые фрагменты контента, которыми вы хотите поделиться на странице?

Вот несколько примеров:

• На этой самой странице каждый ответ может быть статьей.
• На flickr каждая фотография, отображаемая в фотопотоке, может рассматриваться как статья.
• На ходу каждый снимок, отображаемый на странице , может быть статьей.
• В Google каждый результат поиска может быть статьей.
• В блоге каждая статья .. ну каждая статья может быть статьей.
• На странице блога со статьей и серией комментариев у вас может быть два основных раздела. Один со статьей, а другой для комментариев, в которых каждый комментарий можно считать статьей.

Это усмотрение автора относительно того, как далеко они хотят зайти. Большинство авторов блогов имеют RSS-ленту для своих статей, но другие могут также предоставлять каналы для комментариев и общих ссылок.

Многие люди написали на эту тему. Для получения дополнительной информации я настоятельно рекомендую прочитать:

• http://html5doctor.com/the-article-element/ (вы уже поделились этим)
• http://www.impressivewebs.com/html5-section/
• http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article

Answer 4

Большинство читателей фидов могут обрабатывать различные типы контента, включая копирование, изображения, видео и т. Д. Фид для вашего сайта будет содержать контент на вашем сайте, который повторяется или содержит несколько версий. Сайт с вопросами и ответами будет содержать новые вопросы. На сайте обмена видео будет поток новых видео. На сайте обзора программного обеспечения будет поток нового программного обеспечения или новых обзоров.

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

Answer 5

Читатель ленты, как правило, должен содержать список историй. Посмотрите на http://google.com/elections/ - это хороший пример того, что может содержать читатель. Важной частью является то, что все истории являются самодостаточными, и в теории вообще не нужно связывать их.

Answer 6

Разметка для этого документа может выглядеть следующим образом:

<body>
     <header>...</header>
     <nav>...</nav>
     <article>
          <section>
               ...
          </section>
     </article>
     <aside>...</aside>
     <footer>...</footer>
</body>

Более подробную информацию вы можете найти в этой статье на странице A List Apart .