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

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

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

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

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

Ответы

Ответ 1

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

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

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

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

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

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

Ответ 2

Спектр довольно четко говорит об этом:

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

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

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

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

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