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

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

39 голосов
/ 31 марта 2011

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

<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>

Что ты думаешь?

Ответы [ 8 ]

46 голосов
/ 31 марта 2011

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

27 голосов
/ 24 августа 2012

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

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

Элемент *1011* start * элемента может быть опущен, если элемент пуст или если первым элементом в элементе head является элемент.

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

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

Элемент элемента *1040* end * может быть опущен, если сразу за элементом body не следует комментарий .

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

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

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

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

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

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

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

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

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

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

[...]

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

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

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

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

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

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

17 голосов
/ 19 октября 2014

Я вижу, что вы пытаетесь сделать, вы пытаетесь использовать тег <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.

9 голосов
/ 21 марта 2015

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

<html>
    <head>
    </head>
    <body>
        <header>
        </header>
        <main>
            <section></section>
            <article></article>
        </main>
        <footer>
        </footer>
    <body>
</html>
3 голосов
/ 31 марта 2011

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

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

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

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

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

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

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

<html>
    ... content ...
    <body>
        ... content ...
    </body>
    ... content ...
</html>
2 голосов
/ 23 августа 2012

Я согласен с некоторыми ответами других. Теги <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>
1 голос
/ 19 октября 2014

Это общая структура 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>
0 голосов
/ 31 марта 2011

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...