Верх страницы
Обложка к записи Почему так важен DOCTYPE
Время для прочтения: 0 мин. 41 сек.

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

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

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

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

Что такое DOCTYPE?

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

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

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

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

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

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

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

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

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

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

Я могу потратить весь день в поисках правильных тегов 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"
    "http://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"
    "http://www.w3.org/TR/html4/strict.dtd">
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Стандарт XHTML 1.1 DTD

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

Стандарт HTML5

<!DOCTYPE html> - правда великолепно?

Что дальше?

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

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

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

PS: рекомендую HTML 4.01 Strict (XHTML зашел в тупик, HTML5 поддерживается пока не всеми браузерами).

Оригинальное название: Fixing your site with the right DOCTYPE
Автор: Джеффри Зельдман (Jeffrey Zeldman)
Перевод: Александр Качанов
Рекомендации W3C

ВКонтакте
Одноклассники
Telegram
WhatsApp

Комментарии
Подписаться
Уведомить о
guest
5 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Alexey
Alexey
11 лет назад

Прикольно. Не думал, что этот, казалось бы, ненужный, тэг, играет такое значение!

asp1k
asp1k
10 лет назад

PS: рекомендую HTML 4.01 Strict (XHTML зашел в тупик, HTML5 поддерживается пока не всеми браузерами).

на счёт html5 тут ты не прав)
http://vk.com/video-25724027_159502790

Денис
Денис
10 лет назад

Всеми-не всеми, а всё равно будущее за HTML5. Это ведь мощь. А если ещё и CSS3 использовать… Я не вижу смысла создавать новые странички/сайты на старых доктайпах.