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

194

Нужно ли писать <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 говорит, что она действительна.

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

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

html tags Ларри Синнабар
источник
5
Валидатору HTML5 по адресу html5.validator.nu необходим titleтег. Это самый маленький документ, который он считает действительным:<!DOCTYPE html> <title>A</title>
Бон

Ответы:

142

Опуская html, headи body теги , безусловно , допускается в HTML спецификации. Основная причина заключается в том, что браузеры всегда стремились соответствовать существующим веб-страницам, и самые ранние версии HTML не определяли эти элементы. Когда HTML2,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начальному тегу.

Alohci
источник
5
HTML 1.0 определил HTML, HEAD и BODY: w3.org/MarkUp/draft-ietf-iiir-html-01.txt
Лиза Дейли
6
@Liza - Что ж, можно утверждать, что этот документ определяет HTML 1.0, но я исправлен, что элементы предшествуют HTML 2.0. Спасибо. Однако, см. W3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/… 1992 года. Элементы тогда не существуют.
Алохчи
1
Эта ошибка, похоже, не влияет на Internet Explorer 11 (я также тестировал IE8, который, как я подтверждаю, затронут)
jornane,
2
@Justin - Эти ограничения носят в основном технический характер и обычно не влияют на вас. Так что да, если для вашей страницы имеет значение, появляется ли узел комментария или пробел непосредственно перед элементом head или только внутри него (JS страницы может зависеть от него), то вы должны явно указать тег start start, чтобы сделать это отношение правильным , Но если этого не произойдет, (а я еще никогда не писал HTML-страницу там, где это делается), то тег head будет выведен где-то разумным, и вы можете смело его опускать. Аналогично для других тегов html, head и body.
Alohci
3
@Justin Этот ответ, похоже, вполне понятен, так как вопрос «Нужно ли писать теги HEAD, BODY и HTML?» не является ли это хорошей практикой. Соглашения, как правило, меняются ... просто взгляните на руководство по стилю Google ... Это соглашение, в котором говорится, что вы должны опустить эти теги ... :-)
Potherca
77

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

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

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

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

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

<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.
трещина
источник
2
Пример несовместимости: инструмент live-reload, который я использую для веб-разработки (puer), автоматически вставляет скрипт в голову. Без, наконец, тега <head>, он не работает.
Offirmo
@Offirmo Что на земле это?
Кен Шарп
@KenSharp LiveReload веб Dev инструменты , как правило , работают, вставив код в страницах служил, как это: <script src="http://localhost:35729/livereload.js"></script>. Для экзотических шаблонов они не понимают, куда они должны вставить свой код.
Offirmo
1
@Offirmo В документации livereload говорится, что вы должны добавить этот скрипт на свои клиентские страницы самостоятельно. Возможно, вы используете волшебную библиотеку, которая делает это за вас. Это должно быть источником ваших трудностей.
kequc
7
Пропускать все возможные теги глупо и глупо. Экономия полосы пропускания составляет крошечный% (особенно с учетом того, что большинство соединений автоматически сжимаются), в то время как шансы человеческой ошибки в крайних случаях высоки (рассмотрите авторов, редакторов и даже авторов синтаксических анализаторов HTML). Также сложнее найти ошибки (из-за изменения энтропии).
TextGeek
48

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

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

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

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

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

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

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

  • Конечный тег элемента body может быть опущен, если за элементом 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>

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

Ян Клелланд
источник
15

Допустимо опускать их в 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 является обязательным дочерним элементом в большинстве ситуаций, но когда протокол более высокого уровня предоставляет информацию о заголовке, например, в строке «Тема» электронного письма, когда HTML используется в качестве формата создания электронного письма, элемент title может быть опущен ,

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

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

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

Лиза Дейли
источник
13
Не путайте элементы с тегами. Смотрите комментарии cHao в других местах на этой странице. Для html, headи body, элементы являются обязательными, но теги являются необязательными.
Alohci
На самом деле вы не правы в последней части. Пропуск тегов является функцией SGML DTD, все браузеры, поддерживающие синтаксический анализ SGML (то есть все браузеры), также поддерживают пропуск тегов. Причина, по которой вы не можете сделать это в XHTML5, заключается в том, что это XML, а не SGML. XML слишком глуп, чтобы выводить элементы.
OdraEncoded
@OdraEncoded Можете ли вы предоставить подтверждение вашего заявления, пожалуйста? Я не считаю, что это так (см. Стандарт HTML ).
зубная щетка
@OdraEncoded - близко, но не совсем верно. Пропуск тегов является необязательной функцией для синтаксических анализаторов SGML (хотя большинство их поддерживают), как определено в стандарте ISO 8879. Почти все синтаксические анализаторы HTML поддерживают его, хотя Python 'html.parse' этого не делает (см. Stackoverflow.com/questions/29954170/… ).
TextGeek
14

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

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

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

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

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

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>

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

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

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

Питер Баньялл
источник
1
В IE все неправильно, потому что авторам наплевать на стандарты. Это их вина, если он не работает должным образом. Стандарты определены, поэтому они должны убедиться, что IE работает с ними.
Кен Шарп
3
@KenSharp Я не согласен, но пока вы не заставите всех своих клиентов не использовать его, мы как-то застряли с ним. Поэтому лучше писать код, который будет совершенно однозначным, а не полагаться на то, что все работает так, как должно.
Питер Багналл
1
Пользователи были вынуждены отказаться от IE в течение многих лет из-за несоответствия. Никто не ожидает, что пользователи продолжат использовать IE6, даже если люди все еще устанавливают Windows XP. Мы также не можем ожидать поддержки Windows 3.1. Ошибка уровня 8 OSI.
Кен Шарп
1
Какие именно теги могут быть пропущены и где именно, также зависит от версии HTML. Это также кажется хорошей причиной избегать их (за исключением самых очевидных и распространенных и последовательных случаев).
TextGeek
@TextGeek <!DOCTYPE html>.
Det
-3

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

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

Хафдан
источник
Таким образом, это может быть не кросс-браузер?
Ларри Синнабар
5
другими словами - плохая практика, дающая неопределенные результаты.
Рэнди
3
@Innuendo То, что что-то большое, не означает, что оно хорошо сложено.
Демиан Брехт
2
Как обращение к власти, я нахожу это неубедительным. google.com также является недействительным HTML. Это не значит, что ты должен быть.
Рейн Хенрикс
17
Элементы должны существовать. Ничто не говорит, что теги делают. HTML без тегов html / head / body, на самом деле, действителен до тех пор, пока не появится элемент, где он не должен отображаться. ( <title>после <p></p>, например.)
cHao