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

Решил проводить регулярные лекции и практические занятия со своими сотрудниками по программированию на 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» BORDER=»0″ ALT=»boat»>,  как это было в HTML, нужно писать: <img src=»resource/frankisboat. gif» 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: немного подправил ошибки

что такое DOCTYPE? — Tokar.ua

Doctype (Document Type Declaration или DTD) — это часть html-кода страницы, “инструкция”, которая объявляет тип документа и объясняет браузеру, в какой версии языка разметки он сверстан. Doctype должен указываться в самом верху документа перед тегом <html>. Сам doctype при этом тегом не является.

Doctype не регистрозависим и не требует закрывающего тега. Нужен он для того, чтобы браузер понимал, как обрабатывать текущий документ. Причина в том, что до HTML5 существовало несколько версий HTML, а также более строгий вариант разметки XHTML.

Чтобы более древние версии сайтов отображались нормально во всех браузерах, и был придуман doctype.

Виды Doctype

HTML 5
<!DOCTYPE html>	Самая свежая версия, сейчас используется на подавляющем большинстве сайтов. Содержит указания, что сайт свёрстан с использованием html5-тегов и сообщает браузеру, что тот должен предоставить доступ ко всем свойствам и элементам html5.
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	HTML 4.01 Strict — содержит все HTML элементы и атрибуты, но не включает в себя устаревшие презентационные элементы (например, font) и фреймсет.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	HTML 4.01 Transitional — содержит все HTML элементы и атрибуты, также устаревшиие презентационные. Фреймсеты запрещены.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. 01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">	HTML 4.01 Frameset — аналогичен HTML 4.01 Transitional, но позволяет использовать фреймсет.
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	XHTML 1.0 Strict — включает все HTML элементы и атрибуты, кроме устаревших презентационных. Фреймсеты запрещены.Код должен соблюдать стандарты XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	XHTML 1.0 Transitional — включает все HTML элементы и атрибуты, вместе с устаревшими презентационными. Фреймсеты запрещены. Код должен соблюдать стандарты XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset. dtd">	XHTML 1.0 Frameset — аналогичен XHTML 1.0 Transitional, но позволяет использовать фреймсеты. Код должен соблюдать стандарты XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	XHTML 1.1 This DTD — аналогичен XHTML 1.0 Strict , но позволяет добавлять модули.

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

Поддержка браузерами

DOCTYPE	+	+	+	+	+

Объявление типа документа HTML

❮ Предыдущий Полный справочник HTML Следующий ❯

Пример

Содержание документа. …..

Попробуйте сами »

---

Определение и использование

Все HTML-документы должны начинаться с декларация.

Объявление не является тегом HTML. Это «информация» для браузера о том, какой тип документа ожидать.

В HTML 5 объявление простое:

---

Поддержка браузера

Элемент
	Да	Да	Да	Да	Да

---

Старые документы HTML

В старых документах (HTML 4 или XHTML) объявление более сложное потому что объявление должно ссылаться на DTD (определение типа документа).

HTML 4.01:

w3.org/TR/html4/loose.dtd»>

XHTML 1.1:

---

HTML-элементы и типы документов

Посмотрите на нашу таблицу всех HTML-элементов и типов документов, в которых появляется каждый элемент. Объявление 026 НЕ чувствительно к регистру .

Примеры

❮ Предыдущий Полный справочник HTML Далее ❯

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
9000 3

Основные каталожные номера

Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

---

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

HTML: тег

---

В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом , с синтаксисом и примерами.

Описание

Тег HTML — это самая первая строка в документе HTML. Он сообщает браузеру, в какой версии HTML написан документ, чтобы браузер знал, чего ожидать. Этот тег также обычно называют элементом .

Синтаксис

Синтаксис тега зависит от используемой версии HTML или XHTML. Давайте рассмотрим наиболее распространенные варианты использования.

Синтаксис в HTML5:

Синтаксис в HTML 4.01 Transitional:

Синтаксис в XHTML 1.0 Transitional:

Синтаксис в XHTML 1.0 Strict:

Синтаксис в XHTML 1. 1:

Совместимость с браузерами

Тег имеет базовую поддержку со следующими браузерами:

• Chrome
• Андроид
• Firefox (Геккон)
• Firefox Mobile (Геккон)
• Internet Explorer (IE)
• Пограничный мобильный телефон
• Опера
• Опера Мобайл
• Сафари (веб-кит)
• Сафари Мобильный

Пример

Мы обсудим тег ниже, исследуя примеры использования тега в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.

• HTML5
• HTML4
• XHTML

Документ HTML5

Если вы создали новую веб-страницу в HTML5, ваш тег может выглядеть следующим образом:

 

<голова>
<мета-кодировка="UTF-8">


<тело>
 
Заголовок
 
Это содержание.

 

В этом примере документа HTML5 тег находится в первой строке, которая не содержится в теге.

HTML 4.01 Transitional Document

Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег может выглядеть следующим образом:

 

<голова>



<тело>
 
Заголовок
 
Это содержание.

 

В этом примере переходного документа HTML 4.01 тег находится в первой строке, которая не содержится в теге.

Документ XHTML 1.0 Transitional

Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег может выглядеть следующим образом:

  0 Transitional/ /EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<голова>



<тело>
 
Заголовок
 
Это содержание.

 

В этом примере переходного документа XHTML 1.0 тег находится в первой строке, которая не содержится в теге.

XHTML 1.0 Strict Document

Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег может выглядеть следующим образом:

 

<голова>



<тело>
 
Заголовок
 
Это содержание.

 

В этом примере строгого документа XHTML 1.