Почему так важен DOCTYPE

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

Вы написали правильный стандартный XHTML код и стандартный CSS. Вы воспользовались стандартной спецификацией для работы с DOM (Document Object Model), чтобы управлять динамическими элементами на странице. И все-таки, в браузерах, которые казалось бы сделаны с соблюдением именно этих стандартов, ваш сайт не работает. Скорей всего, ошибка кроется в неправильном заголовке DOCTYPE.

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

Что такое DOCTYPE

Согласно спецификациям HTML и XHTML тег DOCTYPE (что означает «объявление типа документа») сообщает валидатору, какую именно версию (X)HTML вы используете в своей странице. Этот тег должен всегда находиться в первой строке каждой страницы. Тег DOCTYPE — ключевой компонент веб-страниц, претендующих на соответствие стандартам: без него ваш код и CSS не пройдут проверку валидатором.

Тег DOCTYPE также важен для правильного отображения и работы страницы в браузерах, соответствующих стандартам (Mozilla, IE5/Mac, и IE6/Win).

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

Если вы будете пользоваться неполным тегом DOCTYPE, устаревшим его видом, или вообще забудете про него, браузер перейдет в «загадочный» режим и будет исходить из предположения, что вы писали код страницы с ошибками и вольно отступали от стандартов, т. е. так, как писали в конце 90-х годов.

В этом режиме браузер попытается разобрать вашу страницу по правилам обратной совместимости и выведет на экран, например, CSS так, как его вывел бы Internet Explorer 4-й версии, а DOM будет работать так, как он работал именно в этом браузере (IE переключается в свой старый DOM, а Mozilla и Netscape 6 переключается вообще неизвестно во что).

Понятно, что для вас эти выкрутасы не желательны. Но именно это вы и получите, если будете пользоваться неполным или неправильным тегом DOCTYPE. Данная статья попробует исправить эту вашу ошибку.

(Внимание: браузер Opera не играет по таким правилам; он всегда пытается отобразить страницу так, как если бы она соответствовала стандартам. Слава Опере! С другой стороны, Opera пока не полностью поддерживает стандарт W3C DOM, но работа над этим уже ведется.)

Где взять правильный DOCTYPE

Так как теги DOCTYPE чрезвычайно важны для работы веба по стандартам, и так как консорциум W3C является ведущей организацией, создающей стандарты для Web-а, следовало бы ожидать, что на сайте W3C будет представлен список всех вариантов тега DOCTYPE, и казалось бы эту информацию на сайте W3C можно найти быстро и просто в каком-то определенном разделе. Но это не так, по крайней мере на момент написания этой статьи.

W3.org — это не сайт со статьями как A List Apart, WebReference или Webmonkey. Он не создан в помощь веб-дизайнерам, разработчикам и авторам сайтов, и он не занимается распространением новейшей информации и полезных советов. Это не его задача.

Да, иногда W3C публикует серии учебных статей, хотя большинство веб-разработчиков об этом даже и не знает. Но в основном, сайт W3C содержит собрание предложений, проектов и Рекомендаций, которые написаны инженерами для инженеров. И когда я говорю об инженерах, я не имею в виду простых специалистов в области веб-разработок, таких спецов, как вы и я. Я имею в виду инженеров, по сравнению с которыми мы выглядим полными болванами.

Я могу потратить весь день в поисках правильных тегов DOCTYPE на сайте w3.org, но не найду ни одной страницы, где они перечислены все вместе. Если же вам все-таки удастся найти какой-нибудь тег DOCTYPE (например, упоминаемый в какой-нибудь Рекомендации или Рабочем проекте), скорей всего окажется, что на вашем сайте он работать не будет.

По всему сайту W3C разбросаны теги DOCTYPE, где в атрибутах отсутствует URI, и теги DOCTYPE, содержащие в атрибутах относительный URI, связанный с документами, находящимися на том же самом сайте W3C. Если вы возьмете этот тег с сайта W3C, перенесете его на свой сайт и вставите в свои страницы, относительный URI будет указывать на несуществующие на вашем сайте документы, следовательно напрасно пропадет ваш труд и усилия браузера.

Например, на многих сайтах можно встретить в страницах следующий вариант тега DOCTYPE, который был без всяких изменений перенесен с сайта w3.org:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

Посмотрите на последнюю часть тега DOCTYPE ("DTD/xhtml1-strict.dtd"). Обратите внимание, что это относительная ссылка на документ, расположенный на сайте W3C. Так как целевой документ находится на сайте W3C, а не на вашем, этот URI для броузера бесполезен.

А выглядеть DOCTYPE должен вот так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Обратите внимание, что этот вариант DOCTYPE содержит в конце полный вариант URI. А так как тег указывает на правильное расположение документа, броузер знает, где этот документ надо найти в сети, и следовательно выведет вашу страницу в том стандарте, который вы упомянули в DOCTYPE.

Правильные варианты тега DOCTYPE

Итак, каким же вариантом тега DOCTYPE надо пользоваться? Ниже перечислены варианты тега DOCTYPE для различных нужд:

Стандарт HTML 4.01 Strict (строгий), Transitional (переходный), Frameset (с фреймами)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "//www.w3.org/TR/html4/frameset.dtd">

Стандарт XHTML 1.0 Strict (строгий), Transitional (переходный), Frameset (с фреймами)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Стандарт XHTML 1.1 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Что дальше

Как вы можете внести свой вклад в распространение стандартов в вебе? Перво-наперво, поместите в закладки данную страницу (либо просто сохраните ее на своем компьютере), а также проверьте, вставляет ли ваш веб-редактор в ваши страницы тег DOCTYPE, а если вставляет, — правильный ли вариант тега он использует?

Многие разработчики ПО просто скопировали неполные варианты тега DOCTYPE с сайта W3C в свои программы. И в результате: вы полагаетесь на программу, которая вставляет неправильный вариант тега, браузер впадает в «загадочный» режим, а вы безуспешно бьетесь над загадкой, почему ваши страницы не работают, как надо.

Стоит также написать тем ребятам, что делают ваш любимый web-редактор, и показать им, как выглядит правильный тег DOCTYPE, после чего, вежливо попросить их внести изменения в новую версию программы.

В ближайшем будущем

У нас есть все причины надеяться, что W3C скоро выложит полный, точный и удобный список всех вариантов тега DOCTYPE на своем сайте.

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

Удачи!

UPD: Будущее уже наступило

Простейшей и надежной декларацией doctype для использования является та, которая определена в HTML5:

<!DOCTYPE html>

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

Шаблон

Используйте следующую разметку в качестве шаблона для создания нового документа HTML с использованием надлежащего объявления Doctype.

<!DOCTYPE html>
<html>

<head>
	<title>Стандартный HTML шаблон</title>
	<meta charset="utf-8"  />
</head>

<body>

     <p>Контент</p>

</body>
</html>