В HTML5 могут появляться теги <header> и <footer> вне тега <body>?

В настоящее время я использую вышеуказанные теги (классический порядок тегов):

<html>
  <head>...</head>
  <body>
    <header>...</header>
    <section>...</section>
    <footer>...</footer>
  </body>
</html>

Использование тегов и спецификации были очень жесткими в предыдущих версиях HTML (4.x), в то время как HTML5 действительно не нуждается в тегах <head> и даже <body>.

Итак, я бы использовал следующую структуру, которая ИМХО гораздо более семантическая, чем предыдущая.

<html>
  <header>...</header>     <!-- put header and footer outside the body tag -->
  <body>
    <section>...</section>
    <section>...</section>
    <section>...</section>
  </body>
  <footer>...</footer>
</html>

Как вы думаете?

Ответы

Ответ 1

Ну, <head> не имеет ничего общего с <header>. В head появляются все метаданные и прочее, а header - это просто компонент макета.
И макет приходит в body. Поэтому я не согласен с вами.

Ответ 2

Давайте получим здесь канонический ответ. Я буду ссылаться на спецификацию HTML5.

Прежде всего, 12.1.2.4 Дополнительные теги:

A head тег запуска элемента может быть опущен, если элемент пуст, или если первое, что внутри элемента head является элементом.

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

A body тег запуска элемента может быть опущен, если элемент пуст, или если первое, что внутри элемента body не является символом пробела или комментарием, за исключением того, что первое, что находится внутри элемента body является элементом script или style.

A body тег конца элемента может быть опущен, если элемент body не сразу следует комментарию.

Затем 4.1.1 Элемент html:

Модель контента: A head, за которым следует элемент body.

Имея указанные ограничения и строго определенный порядок элементов, мы можем легко определить, какие правила размещения неявного тега <body>.

Так как <head/> должен быть первым, и он может содержать только элементы (а не прямой текст), все элементы, подходящие для <head/>, станут частью неявного <head/>, вплоть до первого блуждающего текста или <body/> -специфический элемент. В этот момент все остальные элементы и текстовые узлы будут помещены в <body/>.

Теперь рассмотрим ваш второй фрагмент:

<html>
  <header>...</header>
  <body>
    <section>...</section>
    <section>...</section>
    <section>...</section>
  </body>
  <footer>...</footer>
</html>

Здесь элемент <header/> не подходит для <head/> (это потоковое содержимое), тег <body> будет помещен непосредственно перед ним. Другими словами, документ будет пониматься браузером следующим образом:

<html>
  <head/>
  <body>
    <header>...</header>
    <body>
      <section>...</section>
      <section>...</section>
      <section>...</section>
    </body>
    <footer>...</footer>
  </body>
</html>

И это, конечно, не то, что вы ожидали. И в качестве примечания это также недействительно; см. 4.4.1 Элемент body:

Контексты, в которых этот элемент может использоваться: В качестве второго элемента в элементе html.

[...]

В соответствующих документах имеется только один элемент body.

Таким образом, <header/> или <footer/> будут корректно использоваться в этом контексте. Ну, они будут практически эквивалентны первому фрагменту. Но это приведет к дополнительному элементу <body/> в середине <body/>, который недействителен.

Как побочная заметка, вы, вероятно, путаете <body/> здесь основную часть контента, которая не имеет определенного элемента. Вы можете найти эту страницу для других решений по получению того, что вы хотите.

Цитата 4.4.1 Элемент body еще раз:

Элемент body представляет основное содержимое документа.

что означает все содержимое. И верхний и нижний колонтитулы являются частью этого содержимого.

Ответ 3

Я вижу, что вы пытаетесь сделать, вы пытаетесь использовать тег <body> в качестве контейнера для основного содержимого страницы. Вместо этого используйте тег <main>, как указано в спецификации HTML5. Я использую этот макет:

    <!DOCTYPE html>
    <html>
        <head> *Metadata* </head>
        <body>
            <header>
                *<h1> and other important stuff </h1>*
                <nav> *Usually a formatted <Ul>* </nav>
            </header>
            <main> *All my content* </main>
            <footer> *Copyright, links, social media etc* </footer>
        </body>
    </html>

Я не уверен на 100%, но я думаю, что что-либо вне тега <body> считается метаданным и не будет отображаться браузером. Я не думаю, что DOM также может получить к нему доступ.

В заключение, используйте тег <main> для вашего контента и сохраните форматирование своего HTML правильно, как в первом фрагменте кода. Вы использовали тег <section>, но я думаю, что при попытке применить CSS возникают некоторые странные проблемы с форматированием.

Ответ 4

Если вы действительно хотите, чтобы он выглядел более семантическим, например, с <body> в середине, вы можете использовать элемент <main>. Со всеми последними достижениями элемент <body> не является семантическим, как когда-то, но вам просто нужно подумать об этом как обертке, в которой видит порт представления.

<html>
    <head>
    </head>
    <body>
        <header>
        </header>
        <main>
            <section></section>
            <article></article>
        </main>
        <footer>
        </footer>
    <body>
</html>

Ответ 5

В соответствии со стандартом HTML модель содержимого элемента HTML:

Элемент головы, за которым следует тело элемент.

Вы можете определить элемент BODY в исходном коде:

<html>
    <body>
        ... web-page ...
    </body>
</html>

или вы можете опустить элемент BODY:

<html>
    ... web-page ...
</html>

Однако недопустимо размещать элемент BODY внутри содержимого веб-страницы (между другими элементами или текстовым контентом), например:

<html>
    ... content ...
    <body>
        ... content ...
    </body>
    ... content ...
</html>

Ответ 6

Я согласен с некоторыми ответами других. Теги <head> и <header> имеют две уникальные и очень несвязанные функции. Тег <header>, если я не ошибаюсь, был введен в HTML5 и был создан для повышения доступности, а именно для чтения с экрана. Он обычно используется для указания заголовка вашего документа и, чтобы работать надлежащим образом и эффективно, должен быть помещен внутри тега <body>. Тег <head>, поскольку он является источником, используется для SEO в том, что он создает все необходимые метаданные и тому подобное. Действительная структура HTML для вашей страницы с включенными двумя тегами будет выглядеть примерно так:

<!DOCTYPE html/>
<html lang="es">
    <head>
        <!--crazy meta stuff here-->
    </head>
    <body>
        <header>
            <!--Optional nav tag-->
            <nav>
            </nav>
        </header>
        <!--Body content-->
    </body>
</html>

Ответ 7

Это общая структура html-документа.

<html>
    <head>
        Title, meta-data, scripts, etc go here... Don't confuse with header
    </head>
    <body>
        You body stuff comes here...
        <footer>
            Your footer stuff goes here...
        </footer>
    </body>
</html>

Ответ 8

Несмотря на то, что теги <head> и <body> не требуются, элементы все еще существуют - это просто, что браузер может решить, где теги были бы из остальной части документа.

Другие элементы, которые вы используете, все еще должны находиться внутри <body>