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



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



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



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

668   6  

6 ответов:

пропуск 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 start tag.

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

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

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

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

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

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

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

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

  • конечный тег элемента 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> теги еще можно)

допустимо опустить их в 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:

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

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

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

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

Это правда, что спецификации 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>

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

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

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

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

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

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

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

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

Comments

    Ничего не найдено.