Нужно ли писать теги HEAD, BODY и HTML? - PullRequest
183 голосов
/ 13 апреля 2011

Нужно ли писать <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 правильно разделяетголова и тело: enter image description here

Проверка W3C говорит, что она действительна.

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

Есть ли основания для написания этих тегов?

Ответы [ 6 ]

139 голосов
/ 13 апреля 2011

Пропуск тегов 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.

68 голосов
/ 09 сентября 2014

В Руководстве по стилю 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.
45 голосов
/ 26 февраля 2013

Вопреки замечанию @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сразу после символа пробела или комментария.

  • Стартовый тег элемента 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> все еще могут быть)

14 голосов
/ 13 апреля 2011

В 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-действующих-подобных-HTML5).

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

13 голосов
/ 14 января 2014

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

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

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

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

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

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

0 голосов
/ 13 апреля 2011

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

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

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