Pull to refresh

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

Reading time 7 min
Views 129K
Решил проводить регулярные лекции и практические занятия со своими сотрудниками по программированию на PHP, MySQL, Javascript. А также другим технологиям необходимым для выпуска качественных сайтов. Начать решил с самого «верха», с HTML тэгов. Буду рад, любым комментариям :)
Сразу оговорюсь, что бОльшая часть информации я нашел в интернете, внизу статьи будут приведены ссылки на источники. Часть информации была переведена совместно с google translate.
Итак:

Почему так важен 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 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 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 (не стал искать что это такое :).

Статистика использования различных DTD


Староватая (с 2004 по 2008 гг), конечно, но новой не нашел.
www.qindex.info/Q_get.php?g_clss=forum&g_prcss=thrd&g_tmplt=&g_brd=5&g_thrd=128

Получается что Более 50% сайтов работают в режиме quirk mode — то есть в режиме IE4!



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


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


  • <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 / XHTML аттрибуты тегов. Все они могут быть заменены CSS стилями.


  • align
  • alink
  • background
  • bgcolor
  • color
  • hspace
  • link
  • size
  • text
  • type
  • vlink
  • vspace

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


  • Тэги должны быть написаны в нижнем регистре, вместо  <IMG SRC="resource/frankisboat.gif" WIDTH="389" HEIGHT="227" BORDER="0" ALT="boat">,  как это было в HTML, нужно писать: <img src="resource/frankisboat.gif" width="389" height="227" border="0" alt="boat" />
  • Все теги должны закрываться, или с использованием тэга со слешем в паре, как параграф ( <p></p> ) например, или самозакрывающиеся тэги, как например ( <br /> ).
  • Все теги должны быть правильно вложены друг в друга, без перекрытий
  • Не должны использоваться устаревшие теги
  • Все аттрибуты должны быть набраны в нижем регистре
  • Все значение аттрибутов должны быть заключены в одинарные или двойные кавычки
  • Все аттрибуты должны использоваться в длинной форме, а не в короткой: disabled="disabled" в XHTML против  DISABLED в HTML
  • Структура должна быть отделена от контента. Например тег <p>  -  это часть контента (параграф) и вы не можете поместить в него например таблицу, потому что таблица это часть структуры (форматирования).

 

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


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

Схема (черт ногу сломит) определения  в каком режиме работать браузеру IE8


http://hsivonen.iki.fi/doctype/ie8-mode.pdf
 

Источники информации


http://hsivonen.iki.fi/doctype/   — подробная таблица выбора режима работы (все браузеры)
http://en.wikipedia.org/wiki/Doctype
http://www.htmlbook.ru/html/!doctype.html
http://www.webmascon.com/topics/coding/25a.asp
http://www.quirksmode.org/css/quirksmode.html  — что такое Quirks mode
http://www.quirksmode.org/css/box.html  -  исправление box  модели
Последняя таблица соответствий http://hsivonen.iki.fi/doctype/
http://htmlfixit.com/tutes/tutorial_XHTML_and_HTML_-_The_differences.shtml разница между HTML и XHTML
http://htmlfixit.com/tutes/tutorial_XHTML_and_HTML_Validation__Deprecated_tags_and_attributes.php устаревшие тэги и аттрибуты и чем их заменить
http://www.w3.org/TR/html401/appendix/changes.html точная информация о тегах, устаревших в HTML 4.01

 
upd: немного подправил ошибки
Tags:
Hubs:
+76
Comments 95
Comments Comments 95

Articles