Нужно ли писать теги 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 говорит, что она действительна.
но я редко вижу эту практику в интернете.
есть ли причина писать эти теги?
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 тега.
руководство по стилю Google для HTML рекомендует опустить все дополнительные теги.
Это включает <html>, <head>, <body>, <p> и <li>.
https://google.github.io/styleguide/htmlcssguide.html#Optional_Tags
размер файла оптимизация и целей scannability, рассмотреть опустить необязательные теги. Спецификация 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-элементом не сразу следует комментарий.
начальный тег элемента head может быть опущен, если элемент пуст или если первое, что находится внутри элемента head, является элементом.
конечный тег элемента head может быть опущен, если за элементом head не следует сразу пробел или комментировать.
тело элемента открывающий тег может быть опущен, если элемент является пустым, или если первая вещь внутри тела элемента не пробел или комментарий, если первым делом внутри организма элемент-это скрипт или элемент стиля.
конечный тег элемента 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:
элемент title является обязательным дочерним элементом в большинстве ситуаций, но когда протокол более высокого уровня предоставляет информацию о заголовке, например, в строке темы электронной почты, когда HTML используется в качестве формат создания электронной почты, элемент title можно опустить.
http://www.w3.org/TR/html5/semantics.html#the-title-element-0
недопустимо опускать их в true XHTML5, хотя это почти никогда не используется (по сравнению с XHTML-acting-like-HTML5).
однако с практической точки зрения вы часто хотите, чтобы браузеры работали в "стандартном режиме" для предсказуемости при рендеринге HTML и CSS. Предоставление DOCTYPE и более структурированного дерева HTML гарантирует более предсказуемые результаты кросс-браузера.
Это правда, что спецификации HTML позволяют опустить определенные теги в определенных случаях, но обычно это неразумно.
Он имеет два эффекта - это делает спецификацию более сложной, что, в свою очередь, затрудняет авторам браузера писать правильные реализации (как показано IE, ошибаясь).
это делает вероятность ошибок браузера в этих частях спецификации высокой. Как автор веб-сайта вы можете избежать этой проблемы, включая эти теги - пока spec не говорит, что вы должны, делая это, уменьшает вероятность того, что все пойдет не так, что является хорошей инженерной практикой.
более того, последняя спецификация HTML 5.1 WG в настоящее время говорит (Имейте в виду, что это работа в процессе и может еще измениться).
начальный тег элемента тела может быть опущен, если элемент пуст, или если первая вещь внутри элемента body является не пробелом или комментарий, за исключением случаев, когда первое, что находится внутри элемента body мета, ссылка, сценарий, стиль или элемент шаблона.
http://www.w3.org/html/wg/drafts/html/master/sections.html#the-body-element
Это немного тонкий. Вы можете опустить тело и голову, и браузер затем выведет, где эти элементы должны быть вставлены. Это несет в себе риск не быть явным, что может вызвать путаницу.
это
<html>
<h1>hello</h1>
<script ... >
...
приводит к тому, что элемент script является дочерним элементом элемента body, но это!--4-->
<html>
<script ... >
<h1>hello</h1>
приведет в тег script будучи ребенком главный элемент.
вы можете быть явными, делая это
<html>
<body>
<script ... >
<h1>hello</h1>
и затем, независимо от того, что у вас есть сначала, сценарий или h1, они оба, предсказуемо появятся в элементе body. Это вещи, которые легко упускать из виду при рефакторинге и отладке кода. (скажем, например, у вас есть JS, который ищет 1-й элемент скрипта в теле - во втором фрагменте он будет перестанут работать.)
как общее правило, быть явным о вещах всегда лучше, чем оставлять вещи открытыми для интерпретации. В этом отношении XHTML лучше, потому что он заставляет вас быть полностью явным о вашей структуре элементов в вашем коде, что делает его проще и, следовательно, менее склонным к неправильному толкованию.
Так что да, вы можете опустить их и быть технически обоснованными, но, как правило, неразумно так поступать.
Firebug показывает это правильно, потому что Ваш браузер автоматически исправляет плохую разметку для вас. Такое поведение нигде не указано и может (будет) меняться от браузера к браузеру. Эти теги необходимы для используемого DOCTYPE и не должны быть опущены.
на html элемент является корневым элементом каждой html-страницы. Если вы посмотрите на все остальные элементы описание там написано где элемент может быть использован (и почти все элементы требуют ни тело.)