<section> или <article>, который содержится в котором
Вопрос
Пытаюсь разобраться в новых семантических элементах в HTML5.
Делает ли <section>
принадлежать к <article>
или все наоборот?Имеет ли это вообще значение?
Я рассматриваю возможность реструктуризации блога на WordPress.
Решение
Из самого Спецификация HTML5:
Тот самый
section
элемент представляет собой общий документ или раздел приложения.Раздел, в данном контексте, представляет собой тематическую группу контента, обычно с верхним и, возможно, нижним колонтитулами.
и
Тот самый
article
элемент представляет собой независимый раздел документа, страницы или сайта.Это может быть сообщение на форуме, статья в журнале или газете, запись в блоге, комментарий пользователя или любой другой независимый элемент контента.
Так что я бы сказал, и то, и другое section
и article
элементы могут содержать другой элемент, если это уместно.Я думаю, что ваша диаграмма имеет смысл, если не считать вложенных элементов раздела:
Элемент section не является универсальным элементом контейнера.Когда элемент необходим для целей стилизации или для удобства написания сценариев, авторам рекомендуется использовать вместо него элемент div.Общее правило заключается в том, что элемент section уместен только в том случае, если содержимое элемента будет явно указано в структуре документа.
Может быть, использовать <div>
для внешнего?
Другие советы
В Вики-страница 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>
Я бы использовал div для внешнего раздела и div для внутреннего, если только у вас нет заголовка непосредственно внутри внутреннего раздела.
Та
Богатый
Видеть http://html5doctor.com/the-section-element/ для получения дополнительной информации.
ИМХО, это должно быть просто, настолько просто, насколько нормальные люди воспринимают это как должное.Если простое имя тега сбивает людей с толку, это провал.Для меня:
Ан
<article>
это статья.Люди делятся статьями.Когда вы говорите, что что-то является статьей, я ожидаю, что у нее должно быть заголовок, и, возможно, еще небольшое резюме, чтобы я мог решить, читать его или нет.Если будет интересно, поделюсь с друзьями.Это автономно.А
<section>
это раздел.Это отдельно связанных вещей.По сути, вам потребуются другие разделы, чтобы получить полную картину.
Почему ты ставишь <section>
внутри <body>
? О, потому что это часть тела;часть моего сайта.В эту часть я буду помещать свои статьи.
Почему ты ставишь <section>
внутри <section>
? Потому что это часть что раздел.