Нужно ли писать теги HEAD, BODY и HTML?

Question

Нужно ли писать теги HEAD, BODY и HTML?

159

Нужно ли писать теги <html>, <head> и <body>?

Например, я могу сделать такую страницу:

<!DOCTYPE html>     
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="js/head_script.js"></script><!-- this script will be in head //-->


<div>Some html</div> <!-- here body starts //-->

    <script src="js/body_script.js"></script>

И Firebug правильно разделяет голову и тело:

W3C Validation говорит, что он действителен.

Но я редко вижу эту практику в Интернете.

Есть ли причина писать эти теги?

Larry Cinnabar 12 апр. 2011, в 23:14

Источник

2

Валидатору HTML5 по адресу html5.validator.nu требуется тег title . Это самый маленький документ, который он считает действительным: <!DOCTYPE html> <title>A</title>
bonh 18 окт. 2015, в 18:01

Теги:

html

html5

6 ответов

63

Руководство по стилю Google для HTML рекомендует исключать все необязательные теги.
Это включает <html>, <head>, <body>, <p> и <li>.

https://google.github.io/styleguide/htmlcssguide.html#Optional_Tags

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

(Этот подход может потребовать установления льготного периода как более широкого поскольку он значительно отличается от того, что веб-разработчики обычно преподается. Для удобства и простоты отменил все необязательные теги, а не только выбор.)

<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>


<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

Rima 09 сен. 2014, в 16:27

1

Пример несовместимости: инструмент live-reload, который я использую для веб-разработки (puer), автоматически вставляет скрипт в голову. Без, наконец, тега <head>, он не работает.
Offirmo 23 янв. 2016, в 20:07
0

@Offirmo Что на земле это?
Ken Sharp 03 фев. 2016, в 09:03
0

@KenSharp Инструменты веб-разработки livereload обычно работают путем вставки некоторого кода в обслуживаемые страницы, например: <script src="http://localhost:35729/livereload.js"></script> . Для экзотических шаблонов они не понимают, куда они должны вставить свой код.
Offirmo 03 фев. 2016, в 12:42
1

@Offirmo В документации livereload говорится, что вы должны добавить этот скрипт на свои клиентские страницы самостоятельно. Возможно, вы используете волшебную библиотеку, которая делает это за вас. Это должно быть источником ваших трудностей.
kequc 06 фев. 2016, в 18:26
0

Таким образом, в Руководстве по стилю Google для HTML / CSS также говорится, что отступ в 2 пробела здесь означает, что эти теги не являются обязательными, не так ли? Или нет?
Ron Royston 04 июль 2016, в 01:40
2

Пропускать все возможные теги - глупо и глупо. Экономия полосы пропускания составляет крошечный% (особенно с учетом того, что большинство подключений автоматически сжимаются), в то время как шансы человеческой ошибки в крайних случаях высоки (рассмотрите авторов, редакторов и даже авторов анализаторов HTML). Также сложнее найти ошибки (из-за изменения энтропии).
TextGeek 21 апр. 2018, в 16:35

Показать ещё 4 комментария

45

В отличие от примечания @Liza Daly о HTML5, эта спецификация на самом деле довольно специфична, о том, какие теги можно опустить, и когда (и правила немного отличаются от HTML 4.01, в основном для выяснения того, где двусмысленные элементы, такие как комментарии и пробелы, )

Соответствующая ссылка http://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tags, и в ней говорится:

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

Итак, ваш пример действителен HTML5 и будет анализироваться следующим образом: с тегами html, head и body в их предполагаемых позициях:

<!DOCTYPE html><HTML><HEAD>     
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="js/head_script.js"></script></HEAD><BODY><!-- this script will be in head //-->


<div>Some html</div> <!-- here body starts //-->

    <script src="js/body_script.js"></script></BODY></HTML>

Обратите внимание, что комментарий "этот script будет в голове" фактически анализируется как часть тела, хотя сам script является частью головы. Согласно спецификации, если вы хотите, чтобы это было совсем другое, теги </HEAD> и <BODY> не могут быть опущены. (Хотя соответствующие теги <HEAD> и </BODY> все еще могут быть)

Ian Clelland 26 фев. 2013, в 17:52

14

Это допустимо, чтобы опустить их в HTML4:

7.3 The HTML element
start tag: optional, End tag: optional

7.4.1 The HEAD element
start tag: optional, End tag: optional

http://www.w3.org/TR/html401/struct/global.html

В HTML5 нет "необходимых" или "необязательных" элементов точно, поскольку синтаксис HTML5 более слабо определен. Например, title:

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

http://www.w3.org/TR/html5/semantics.html#the-title-element-0

Недействительно, чтобы опустить их в true XHTML5, хотя это почти никогда не используется (по сравнению с XHTML-act-like-HTML5).

Однако, с практической точки зрения, вы часто хотите, чтобы браузеры работали в "стандартном режиме", для предсказуемости при отображении HTML и CSS. Предоставление DOCTYPE и структурированное дерево HTML гарантируют более предсказуемые результаты кросс-браузера.

Liza Daly 12 апр. 2011, в 23:15

12

Не путайте элементы с тегами. Смотрите комментарии cHao в других местах на этой странице. Для html , head и body элементы являются обязательными, но теги являются необязательными.
Alohci 12 апр. 2011, в 23:34
0

На самом деле вы не правы в последней части. Пропуск тегов является функцией SGML DTD, все браузеры, поддерживающие синтаксический анализ SGML (то есть все браузеры), также поддерживают пропуск тегов. Причина, по которой вы не можете сделать это в XHTML5, заключается в том, что это XML, а не SGML. XML слишком глуп, чтобы выводить элементы.
OdraEncoded 25 сен. 2013, в 22:02
0

@OdraEncoded Можете ли вы предоставить подтверждение вашего заявления, пожалуйста? Я не считаю, что это так (см. Стандарт HTML ).
Toothbrush 17 окт. 2015, в 16:56
0

@OdraEncoded - близко, но не совсем верно. Пропуск тегов является необязательной функцией для синтаксических анализаторов SGML (хотя большинство их поддерживают), как определено в стандарте ISO 8879. Почти все синтаксические анализаторы HTML поддерживают его, хотя Python 'html.parse' этого не делает (см. Stackoverflow.com/questions/29954170/… ).
TextGeek 21 апр. 2018, в 16:43

Показать ещё 2 комментария

12

Верно, что спецификации HTML позволяют в некоторых случаях опускать определенные теги, но в целом делать это неразумно.

Он имеет два эффекта: он делает сложную спецификацию, что, в свою очередь, затрудняет для авторов браузера правильную реализацию (как показывает IE, ошибочно).

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

Что еще, последняя спецификация WG 5.1 в настоящее время говорит (помните, что это незавершенная работа и может все же измениться).

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

http://www.w3.org/html/wg/drafts/html/master/sections.html#the-body-element

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

Итак, это

<html>
  <h1>hello</h1>
  <script ... >
  ...

приводит к тому, что элемент script является дочерним элементом элемента body, но этот

<html>
  <script ... >
  <h1>hello</h1>

приведет к тому, что тег script будет дочерним элементом элемента head.

Вы можете быть явным, делая это

<html>
    <body>
      <script ... >
      <h1>hello</h1>

а затем, в зависимости от того, что у вас есть, script или h1, они оба будут предсказуемо появляться в элементе body. Это те вещи, которые легко упускать из виду при рефакторинге и отладке кода. (скажем, например, у вас есть JS, который ищет первый элемент script в теле - во втором фрагменте он перестанет работать).

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

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

Peter Bagnall 14 янв. 2014, в 12:56

1

В IE все неправильно, потому что авторам наплевать на стандарты. Это их вина, если он не работает должным образом. Стандарты определены, поэтому они должны убедиться, что IE работает с ними.
Ken Sharp 03 фев. 2016, в 09:08
2

@KenSharp Я не согласен, но пока вы не заставите всех своих клиентов не использовать его, мы как-то застряли с ним. Поэтому лучше писать код, который будет совершенно однозначным, чем полагаться на то, что все работает так, как должно.
Peter Bagnall 11 март 2016, в 13:54
1

Пользователи были вынуждены отказаться от IE в течение многих лет из-за несоответствия. Никто не ожидает, что пользователи продолжат использовать IE6, даже если люди все еще устанавливают Windows XP. Мы не можем ожидать, что поддержим Windows 3.1 навсегда. Ошибка уровня 8 OSI.
Ken Sharp 15 март 2016, в 11:46
1

Какие именно теги могут быть пропущены и где именно, также зависит от версии HTML. Это также кажется хорошей причиной избегать их (за исключением самых очевидных и распространенных и последовательных случаев).
TextGeek 21 апр. 2018, в 16:46

Показать ещё 2 комментария

0

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

элемент html является корневым элементом каждой html-страницы. Если вы посмотрите на описание всех других элементов, в нем указывается, где можно использовать элемент (и почти все элементы требуют головы или тела).

halfdan 12 апр. 2011, в 23:07

0

Таким образом, это может быть не кросс-браузер?
Larry Cinnabar 12 апр. 2011, в 21:50
5

другими словами - плохая практика, дающая неопределенные результаты.
Randy 12 апр. 2011, в 21:52
0

Это определенно не так.
halfdan 12 апр. 2011, в 21:53
0

Я только что нашел большой сайт с такой разметкой. Крупнейший российский поисковик yandex.ru не имеет тегов html, head и body
Larry Cinnabar 12 апр. 2011, в 21:53
3

@Innuendo То, что что-то большое, не означает, что оно хорошо сложено.
Demian Brecht 12 апр. 2011, в 21:54
0

Хороший пример "Как этого не делать".
halfdan 12 апр. 2011, в 21:54
2

Как обращение к власти, я нахожу это неубедительным. google.com также является недействительным HTML. Это не значит, что ты должен быть.
Rein Henrichs 12 апр. 2011, в 21:55
17

Элементы должны существовать. Ничто не говорит, что теги делают. HTML без тегов html / head / body, на самом деле, действителен до тех пор, пока ни один элемент не появляется там, где он должен быть. ( <title> после <p></p> , например.)
cHao 12 апр. 2011, в 22:19
0

HTML разбора поведение определяется в спецификации HTML5, так нет, он не будет отличаться от браузера к браузеру.
Marijn 24 июль 2016, в 13:56
0

@Marjin «поведение при разборе HTML» также указывается в спецификации каждой другой версии HTML. И они немного разные. Браузеры также имеют свои собственные способы решения, какую версию правил (или их собственный микс) использовать; по крайней мере, когда документ явно не говорит, как это обычно не делает. Таким образом, поведение, безусловно, зависит от браузера. К счастью, различия невелики, но не стоит слишком сильно зависеть от крайних случаев.
TextGeek 21 апр. 2018, в 16:52

Показать ещё 8 комментариев

Ещё вопросы

Валидатору HTML5 по адресу html5.validator.nu требуется тег title . Это самый маленький документ, который он считает действительным: <!DOCTYPE html> <title>A</title>
Пример несовместимости: инструмент live-reload, который я использую для веб-разработки (puer), автоматически вставляет скрипт в голову. Без, наконец, тега <head>, он не работает.
@KenSharp Инструменты веб-разработки livereload обычно работают путем вставки некоторого кода в обслуживаемые страницы, например: <script src="http://localhost:35729/livereload.js"></script> . Для экзотических шаблонов они не понимают, куда они должны вставить свой код.
@Offirmo В документации livereload говорится, что вы должны добавить этот скрипт на свои клиентские страницы самостоятельно. Возможно, вы используете волшебную библиотеку, которая делает это за вас. Это должно быть источником ваших трудностей.
Таким образом, в Руководстве по стилю Google для HTML / CSS также говорится, что отступ в 2 пробела здесь означает, что эти теги не являются обязательными, не так ли? Или нет?
Пропускать все возможные теги - глупо и глупо. Экономия полосы пропускания составляет крошечный% (особенно с учетом того, что большинство подключений автоматически сжимаются), в то время как шансы человеческой ошибки в крайних случаях высоки (рассмотрите авторов, редакторов и даже авторов анализаторов HTML). Также сложнее найти ошибки (из-за изменения энтропии).
Не путайте элементы с тегами. Смотрите комментарии cHao в других местах на этой странице. Для html , head и body элементы являются обязательными, но теги являются необязательными.
На самом деле вы не правы в последней части. Пропуск тегов является функцией SGML DTD, все браузеры, поддерживающие синтаксический анализ SGML (то есть все браузеры), также поддерживают пропуск тегов. Причина, по которой вы не можете сделать это в XHTML5, заключается в том, что это XML, а не SGML. XML слишком глуп, чтобы выводить элементы.
@OdraEncoded Можете ли вы предоставить подтверждение вашего заявления, пожалуйста? Я не считаю, что это так (см. Стандарт HTML ).
@OdraEncoded - близко, но не совсем верно. Пропуск тегов является необязательной функцией для синтаксических анализаторов SGML (хотя большинство их поддерживают), как определено в стандарте ISO 8879. Почти все синтаксические анализаторы HTML поддерживают его, хотя Python 'html.parse' этого не делает (см. Stackoverflow.com/questions/29954170/… ).
В IE все неправильно, потому что авторам наплевать на стандарты. Это их вина, если он не работает должным образом. Стандарты определены, поэтому они должны убедиться, что IE работает с ними.
@KenSharp Я не согласен, но пока вы не заставите всех своих клиентов не использовать его, мы как-то застряли с ним. Поэтому лучше писать код, который будет совершенно однозначным, чем полагаться на то, что все работает так, как должно.
Пользователи были вынуждены отказаться от IE в течение многих лет из-за несоответствия. Никто не ожидает, что пользователи продолжат использовать IE6, даже если люди все еще устанавливают Windows XP. Мы не можем ожидать, что поддержим Windows 3.1 навсегда. Ошибка уровня 8 OSI.
Какие именно теги могут быть пропущены и где именно, также зависит от версии HTML. Это также кажется хорошей причиной избегать их (за исключением самых очевидных и распространенных и последовательных случаев).
Таким образом, это может быть не кросс-браузер?
другими словами - плохая практика, дающая неопределенные результаты.
Я только что нашел большой сайт с такой разметкой. Крупнейший российский поисковик yandex.ru не имеет тегов html, head и body
@Innuendo То, что что-то большое, не означает, что оно хорошо сложено.
Хороший пример "Как этого не делать".
Как обращение к власти, я нахожу это неубедительным. google.com также является недействительным HTML. Это не значит, что ты должен быть.
Элементы должны существовать. Ничто не говорит, что теги делают. HTML без тегов html / head / body, на самом деле, действителен до тех пор, пока ни один элемент не появляется там, где он должен быть. ( <title> после <p></p> , например.)
HTML разбора поведение определяется в спецификации HTML5, так нет, он не будет отличаться от браузера к браузеру.
@Marjin «поведение при разборе HTML» также указывается в спецификации каждой другой версии HTML. И они немного разные. Браузеры также имеют свои собственные способы решения, какую версию правил (или их собственный микс) использовать; по крайней мере, когда документ явно не говорит, как это обычно не делает. Таким образом, поведение, безусловно, зависит от браузера. К счастью, различия невелики, но не стоит слишком сильно зависеть от крайних случаев.

Alohci · Accepted Answer · 2011-04-13T01-15-00.000Z

Опускание тегов html, head и body, безусловно, допускается спецификациями HTML. Основная причина заключается в том, что браузеры всегда стремились соответствовать существующим веб-страницам, а самые ранние версии HTML не определяли эти элементы. Когда сначала выполнялся HTML ~~2.0~~, это было сделано так, чтобы теги были выведены при отсутствии.

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

Но...

IE имеет по крайней мере одну известную ошибку в этой области. Даже IE9 демонстрирует это. Предположим, что это разметка:

<!DOCTYPE html>
<title>Test case</title>
<form action='#'>
   <input name="var1">
</form>

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

HTML
    HEAD
        TITLE
    BODY
        FORM action="#"
            INPUT name="var1"

Но в IE вы получите следующее:

HTML
    HEAD
       TITLE
       FORM action="#"
           BODY
               INPUT name="var1"
    BODY

Посмотрите сами.

Эта ошибка, по-видимому, ограничена начальным тегом form, предшествующим любому текстовому контенту и любому тэгу body.

HTML 1.0 определил HTML, HEAD и BODY: w3.org/MarkUp/draft-ietf-iiir-html-01.txt
@Liza - Что ж, можно утверждать, что этот документ определяет HTML 1.0, но я исправлюсь, что элементы предшествуют HTML 2.0. Благодарю. Однако, см. W3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/… 1992 года. Элементы тогда не существуют.
Эта ошибка, похоже, не влияет на Internet Explorer 11 (я также тестировал IE8, который, как я подтверждаю, затронут)
@ Йёрн - Верно. IE10 и более поздние версии используют HTML5-совместимый синтаксический анализатор, что устранило проблему.
Для валидатора validator.w3.org/check требуется <meta charset="utf-8"/> .
@CiroSantilli - Не так. Там просто предупреждение.
@Alohci по какой-то причине ошибка возникает только при использовании: addons.mozilla.org/en-US/firefox/addon/html-validator . Спасибо за проверку.
этот ответ не имеет никакого понятия. хотя да, вы можете оставить их, но это определенные условия, которые применяются. html начальный тег, если первым не является комментарий, html конечный тег, если сразу за ним не следует комментарий ... head start, если элемент пуст или если первым является элемент. тег заголовка, если за ним сразу не следует пробел или комментарий ... и тег начала тела, если он пуст или не является пробелом или комментарием, и тег конца тела, если за ним не следует комментарий ... Итак, да, вы МОЖЕТЕ оставить их, при определенных условиях. Но в действительности нет никакой пользы от этого.
@Justin - Эти ограничения носят в основном технический характер и обычно не влияют на вас. Так что да, если для вашей страницы имеет значение, появляется ли узел комментария или пробел непосредственно перед элементом head или только внутри него (JS страницы может зависеть от него), то вы должны явно указать тег start start, чтобы сделать это отношение правильным , Но если этого не произойдет, (а я еще никогда не писал HTML-страницу там, где это делается), то тег head будет выведен где-то разумным, и вы можете его спокойно пропустить. Аналогично для других тегов html, head и body.
Я могу логически использовать теги стилей ASP или короткие теги с моим PHP - и безопасно делать это ... но это не соответствует стандартам ... То, что вы МОЖЕТЕ сделать что-то, не означает, что вы должны это сделать ... Один следует всегда писать эти теги по нескольким причинам. # 1. Вы не полагаетесь на сломанную функциональность браузера, чтобы автоматически определять, где вы хотите, чтобы вещи были. # 2. это облегчает чтение разметки ... и № 3 это стандарт - так зачем возиться с соглашением?
@Justin Этот ответ, похоже, вполне понятен, так как вопрос «Нужно ли писать теги HEAD, BODY и HTML?» не является ли это хорошей практикой. Соглашения имеют тенденцию меняться ... просто взгляните на руководство по стилю Google ... это соглашение, которое гласит, что вы должны пропустить эти теги ... :-)