<section> или <article>, который содержится в котором

StackOverflow https://stackoverflow.com/questions/1789692

  •  22-09-2019
  •  | 
  •  

Вопрос

Пытаюсь разобраться в новых семантических элементах в HTML5.

Делает ли <section> принадлежать к <article> или все наоборот?Имеет ли это вообще значение?

Я рассматриваю возможность реструктуризации блога на WordPress.

Это было полезно?

Решение

Из самого Спецификация HTML5:

Тот самый section элемент представляет собой общий документ или раздел приложения.Раздел, в данном контексте, представляет собой тематическую группу контента, обычно с верхним и, возможно, нижним колонтитулами.

и

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

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

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

Может быть, использовать <div> для внешнего?

Другие советы

В Вики-страница W3 о структурировании HTML5, там написано:

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

И затем отображает изображение то, что я убрал:

enter image description here

Также важно знать, как использовать <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>? Потому что это часть что раздел.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top