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

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

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

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

Ответ 1

Опускание тегов 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.

Ответ 2

Руководство по стилю 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.

Ответ 3

В отличие от примечания @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> все еще могут быть)

Ответ 4

Это допустимо, чтобы опустить их в 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 гарантируют более предсказуемые результаты кросс-браузера.

Ответ 5

Верно, что спецификации 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 лучше, потому что он заставляет вас полностью указать вашу структуру элементов в вашем коде, что делает его более простым и, следовательно, менее подверженным неправильной интерпретации.

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

Ответ 6

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

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