Раздел, Статья или Div? и Меньший текст в теге раздела и статьи?

Недавно я перешел в w3schools Новые элементы HTML5 и обнаружил тег "section" и "article". Мой вопрос в том, когда следует использовать раздел, статью или тег div и почему текст становится меньше, когда я использую тег раздела и статьи? Например:

<section><h1>H1 tag in a section tag</h1></section>
<article><h1>H1 tag in an article tag</h1></article>
<h1>H1 tag in nothing</h1>

Скопируйте и вставьте здесь. (Просто поместив его для удобства)

Ответы

Ответ 1

Когда использовать section:

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

Полезные эмпирические правила от Html5doctor:

  • Не используйте его как крючок для стилизации или скриптинга; thats a div
  • Не используйте его, если article, aside или nav более подходит
  • Не используйте его, если в начале раздела нет естественно заголовок
  • Используйте article вместо синдицированного контента

Когда использовать article:

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

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

Причина, по которой стиль h1 выглядит по-другому, заключается в том, что отдельные браузеры отображают их по-разному. Вы можете нормализовать ситуацию в браузерах и обрабатывать таблицы стилей браузера по умолчанию с css reset.

Ответ 2

Это предопределено в браузерах. Когда я проверяю один из небольших тегов h1 в Chrome, я получаю следующую таблицу стилей, которая жестко закодирована в браузере ( "Таблица стилей пользовательского агента" ):

:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
}

В то время как стандартная предопределенная таблица стилей для h1 выглядит так:

h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}

Это означает, что браузеры имеют свои собственные пресеты относительно того, что элементы h1 (и, возможно, другие элементы h) должны выглядеть как внутри одного из article, aside и т.д.

Вы можете предотвратить это, указав свои размеры для этих случаев.

Ответ 3

О последнем вопросе (почему текст становится меньше, когда я использую тег раздела и статьи?), я думаю, что для этого события есть разумная причина. Элементы, такие как раздел, статья, в стороне, nav считаются разделяющими элементами. Одной из основных характеристик этих элементов является то, что в описании документов появляется новый отступ, когда браузер обращается к ним (чтобы узнать больше). Поэтому в соответствии с вашим примером кода:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <section><h1>H1 tag in a section tag</h1></section>
        <article><h1>H1 tag in an article tag</h1></article>
        <h1>H1 tag in nothing</h1>
    </body>
</html>

Его схема (вы можете использовать этот онлайн-инструменты):

  • Неверный тег H1

    • Тег H1 в теге раздела
    • тег H1 в теге статьи