Ссылка по теме - почему важен DOCTYPE и как его правильно использовать

Почему так важен 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, устаревшим его видом, или вообще забудете про него, броузер перейдет в «загадочный» (quirk) режим и будет исходить из предположения, что вы писали код страницы с ошибками и вольно отступали от стандартов, т.е. так, как писали в конце 90-ых годов.  В этом режиме броузер попытается разобрать вашу страницу по правилам обратной совместимости и выведет на экран, например, CSS так, как его вывел бы Internet Explorer 4-ой версии, а DOM будет работать так, как он работал именно в этом броузере (IE переключается в свой старый DOM, а Mozilla и Netscape 6 переключается вообще в бог знает что). Понятно, что для вас эти выкрутасы не желательны. Но именно это вы и получите, если будете пользоваться неполным или неправильным тегом DOCTYPE.

Проблема

Когда создавали NN4, IE4 выполняли правила CSS не совсем в соответствии со стандартом. Реализация Netscape была просто ужасной, IE4 подошел к реализации стандарта лучше, но тем не менее, реализовал его не до конца. Хотя IE 5 Windows исправил множество ошибок IE 4, но оставались другие сбои в CSS (в основном в модели окон (window model)). Поэтому, когда соответствие стандартам стало важным, W3C поставил производителей браузеров перед жестким выбором.  Приблизится к спецификации W3C было одним из решений проблемы, но если бы производители браузеров просто изменили реализацию CSS, чтобы соответствовать стандартам полностью, многие веб-сайты, «поползли» бы в большей или меньшей степени или оказались полностью неработоспособными. Такое сближение с соблюдением стандарта повлекло бы за собой проблемы.  С другой стороны, не приведение к соответствию стандартов могло бы внести вечную путаницу в эпоху войны браузеров. 

Решение

Поэтому решением этой проблемы было  позволить веб-разработчикам, которые знали о стандартах, выбирать какой режим использовать. продолжать показывать старые страницы по старым (совместимым) правилам. (quirks mode) Иными словами, всем браузерам необходимо было работать в двух режимах: режим совместимости для старых правил, и строгого режима для стандарта. IE Mac был первым браузером использовавшим оба режима, а Windows IE 6, Mozilla, Safari, Opera и последовали его примеру.  IE 5 Windows, а также старые браузеры, как Netscape 4, постоянно заблокированы в режиме совместимости. Решение о выборе, какой режим отображения требуется вызвать, было найдено в использовании «DOCTYPE» переключения. Согласно стандартам, любой (X) HTML документ должен иметь DOCTYPE который рассказывает всему миру, какой тип (X) HTML документа он использует.

Допустимые DTD

DOCTYPE Описание
<html>
HTML 4.01
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "www.w3.org/TR/html4/strict.dtd">	Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "www.w3.org/TR/html4/loose.dtd">	Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Frameset//EN" "www.w3.org/TR/html4/frameset.dtd">	В HTML-документе применяются фреймы.
XHTML 1.0
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Frameset//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">	Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам.
</html>

HTML 4.01 DTDs

HTML 4.01 Strict — Не разрешает презентационной (оформительской) разметки, аргументируя тем, что этоим должен заниматься CSS. Transitional DTD позволяет некоторые устаревшие аттрибуты и элементы Если используются фреймы — должен быть использован frameset doctype

XHTML 1.0 DTDs

XHTML Strict DTD самый строгий существующий DTD: устаревшие (см ниже) теги не поддерживаются, и код должен быть написан правильно XHTML Transitional DTD такой же как XHTML Strict DTD, но старые теги разрешены. Это НАИБОЛЕЕ ПОПУЛЯРНЫЙ в настоящий момент DTD. XHTML Frameset DTD единственный XHTML DTD который поддерживает фреймы.

XHTML 1.1 DTD

Это новый DTD, который имеет строгость как у XHTML 1.0 Strict, и основан на фреймворке и модулях описанных в Modularization of XHTML (не стал искать что это такое :).

Устаревшие тэги и аттрибуты

Устаревшие тэги в алфавитном порядке

<html>
<applet> Используйте тег<object>.
<basefont> используйте CSS.
<blockquote>используйте CSS.
<center>используйте CSS.
<dir>используйте <ul>.
<em>используйте CSS.
<font>используйте CSS.
<isindex>
<listing> используйте <pre> или CSS.
<menu>замените тегом<ul> или CSS.
<nextid>
<plaintext> используйте <pre> или <a href='view-source:http://somesite.com'>Source code</a>.
<s>используйте<del> или <ins>.
<strike> используйте <del> или<ins>.
<u>используйте CSS.
<xmp> используйте <pre> и CSS стиль.
</html>

Устаревшие HTML / XHTML аттрибуты тегов. Все они могут быть заменены CSS стилями.

<html>
align
alink
background
bgcolor
color
hspace
link
size
text
type
vlink
vspace
</html>

Разница между HTML и XHTML (указаны правила для XHTML)

Тэги должны быть написаны в нижнем регистре, вместо ,  как это было в HTML
<html><IMG SRC="resource/frankisboat.gif" WIDTH="389" HEIGHT="227" BORDER="0" ALT="boat"></html>
, нужно писать: 
<html><img src="resource/frankisboat.gif" width="389" height="227" border="0" alt="boat" /></html>
Все теги должны закрываться, или с использованием тэга со слешем в паре, как параграф (

) например, или самозакрывающиеся тэги, как например (
). Все теги должны быть правильно вложены друг в друга, без перекрытий Не должны использоваться устаревшие теги Все аттрибуты должны быть набраны в нижем регистре Все значение аттрибутов должны быть заключены в одинарные или двойные кавычки Все аттрибуты должны использоваться в длинной форме, а не в короткой: disabled="disabled" в XHTML против  DISABLED в HTML Структура должна быть отделена от контента. Например тег
<html><p></html>
 -  это часть контента (параграф) и вы не можете поместить в него например таблицу, потому что таблица это часть структуры (форматирования).

Совместимость и IE8

IE8 имеет четыре режима: IE 5.5 режим совместимости, IE 7 стандартный режим, IE в 8 стандартном режиме и IE 8 в режиме совместимости.  Выбор способа зависит от данных из различных источников: DOCTYPE, meta элементов, заголовков HTTP, периодически загружаемых данных от Microsoft (!), интрасети, настроек, сделанных пользователем, настроек сделанных администратором, наличия сайта в блеклисте microsoft и прочее! 
Дата: 2012-09-26
Теги: DOCTYPE,режим совместимости,Quirks mode, IE4
Редактировать