DOCTYPE. Стандарты HTML

Все, кто знаком с более-менее серьёзным языком программирования, знают, что такой вольности в написании кода, как в HTML , нет. Я знаком (с некоторыми очень даже серьёзно) с целой кучей языков программирования, и смело заявляю: нигде такой свободы, как в HTML , не существует! Однако, из-за этой свободы возникает большое количество противоречий для браузеров. Ведь им же нужно как-то отображать этот "вольный" код, и желательно, чтобы каждый браузер отобразил этот код одинаково. И тут им на помощь приходит DOCTYPE .

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

Прежде чем переходить к различным вариантам DOCTYPE , я всё-таки отвечу на вопрос: "". А нужен он для того, чтобы браузеры правильно отображали разметку Вашего документа. Если Вы не укажите DOCTYPE , то браузер будет добавлять "отсебятину ", причём каждые браузеры будут добавлять свою "отсебятину ". В результате, ни о какой кроссбраузерности и речи идти не может.

Существует несколько вариантов DOCTYPE , однако, в реальности я Вам советую использовать один из двух вариантов:

Данный DOCTYPE означает, что документ соответствует стандарту HTML 4.01 . Это самый частоиспользуемый вариант.

Однако, для любителей чистого кода (к коим отношусь я) советую использовать такой DOCTYPE :

Этот DOCTYPE сообщает браузеру о том, что документ соответствует стандарту XHTML 1.1 . Именно этот DOCTYPE стоит на этом сайте.

И, напоследок, небольшое примечание, просто ради справедливости. Дело в том, что современные браузеры прекрасно отображают сайты и без использования DOCTYPE , причём выглядит сайт примерно везде одинаково, за исключением совсем мелких вещей. Поэтому Вы, конечно, обязательно пишите DOCTYPE , но не забывайте, что с каждым годом это требуется всё меньше и меньше.

Пока я писал эту статью, у меня в голове возникла мысль, что многие из Вас не знают разницу между HTML и XHTML . И почему, на мой взгляд, XHTML лучше? На эти вопросы я отвечу в следующей статье, так что не переключайтесь.

Если Вы хотите узнать больше по HTML , то посмотрите мой бесплатный курс с примером создания сайта на HTML :

Первой строкой в документе HTML, должно идти объявление DOCTYPE . Этим постом, я расскажу что это такое и с чем его едят.

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

DOCTYPE ссылается на определение типа документа (DTD — Document Type Definition ). DTD задает правила для языка разметки, для того чтобы браузеры могли правильно отобразить содержание веб странички.

Рассмотрим все доступные варианты DOCTYPE по рекомендации W3C .

HTML 4.01 Strict

Этот DTD содержит все HTML элементы и атрибуты, но не включает презентационные или устаревшие элементы (например: тег font ). Использование фреймов не допускается.

HTML 4.01 Transitional

Данный DTD содержит все HTML элементы и атрибуты, включая презентационные и устаревшие элементы (например: тег font ). Использование фреймов в документе объявленном с таким DOCTYPE также не допускается.

HTML 4.01 Frameset

Следующий DTD, такой же как и HTML 4.01 Transitional, но позволяет использование фреймов в содержании документа.

Примечание: в целом, в современном веб дизайне, фреймы не используются вовсе. Так что, данный DOCTYPE, можно считать устаревшим.

XHTML 1.0 Strict

DTD, который содержит все HTML элементы и атрибуты, но не включает презентационные или устаревшие элементы (например, все тот же, тег font ). Использование фреймов не допускается. Разметка веб страницы должна быть оформлена по всем правилам документа XML. То есть, все теги должны быть обязательно закрыты. Все теги должны иметь общего родителя, которым в HTML документе является тег . Все атрибуты должны быть заключены в кавычки.

В настоящее время, как по мне, данный DOCTYPE является наиболее предпочтительным для наиболее валидной верстки.

XHTML 1.0 Transitional

И еще один переходной DTD, который содержит все HTML элементы и атрибуты, включая презентационные и устаревшие элементы (например: тег center ). Использование фреймов, данный DTD, также не допускает. Разметка веб страницы тоже должна быть оформлена по всем правилам документа XML.

XHTML 1.0 Frameset

И еще один DTD с фреймами, аналогичен XHTML 1.0 Transitional, но позволяет использование фреймов в содержании веб документа.

XHTML 1.1

И последний DTD, аналогичен XHTML 1.0 Strict, но позволяет добавлять модули (например, обеспечить поддержку Ruby для Восточно-азиатских языков).

В следующем посте можно будет посмотреть на , которые поддерживаются в той или иной DTD.

Для проверки валидности HTML документа можно воспользоваться

-это элемент предназначенный, для типа будущего документа (в частности HTML и XHTML). Абвиотура DTD-что в переводе означает (document type definition) описание е типа документа. Этот элемент необходим для того, что бы браузеры могли понимать, как им следует видеть и отображать будущий документ, веб страницу.
На данном этапе веб разработок существует несколько видов элемента . Ниже в таблице №1, предоставлены несколько основных типов этого элемента и их краткое описание.

Таблица №1

Вид элемента	Краткое описание
HTML 4.01
	Тип строгий синтаксис HTML.
	Тип переходный синтаксис HTML.
	Указывает на то, что в HTML-документе применяются фреймы.
HTML 5
	Для всех документов.
XHTML 1.0
	Тип строгий синтаксис XHTML.
	Тип переходный синтаксис XHTML.
	Указывает на то, что документ написан на XHTML и содержит фреймы.
XHTML 1.1
	Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам.

Разберём по порядку устройство строки с элементом .

Элементверхнегоуровня ][Публичность ]"[Регистрация] //[Организация ]//[Тип ][Имя ]//[Язык ]" "">

- тип будущего документа.

Элемент верхнего уровня — указывает элемент верхнего уровня в документе, для HTML это тег .

Публичность — объект является публичным (значение PUBLIC) или системным ресурсом (значение SYSTEM), например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC.

Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и - (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-».

Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в .

Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD.

Имя — уникальное имя документа для описания DTD.

Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN).

URL — адрес документа с DTD.

Вот, пожалуй, основной принцип, устройства и действия данного элемента ..
Закрывающий тег для данного элемента не требуется.
В качестве примера приведён HTML 4.01:

Приветствую Вас, уважаемые читатели! Сегодня короткий материал о специальном теге doctype. В статье вы узнаете что такое doctype, зачем он нужен и какие бывают версии html-документов.

В любом правильном html-документе, первым элементом в коде идет специальная директива .

Что такое DOCTYPE и зачем он нужен

Элемент — DTD (document type definition, описание типа документа) указывает тип документа, который используется при написании html кода. Это непарный тег, который должен стоять самым первым в коде каждой страницы вашего сайта.

Директива doctype необходима, чтобы браузер понимал как обрабатывать текущую веб-страничку, так как существует несколько версий языка HTML, а еще имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), который похож на HTML, но различается с ним по синтаксису.

Поэтому если вы хотите, чтобы ваш сайт отображался одинаково красиво и ровно во всех популярных браузерах, то обязательно указывайте эту директиву с версией языка html, которую вы используете. Причем doctype следует указывать с общепринятыми правилами.

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

Основные типы документов

Ниже приведены основные типы документов:

DOCTYPE	Описание
HTML 4.01
	Строгий синтаксис HTML
	Переходный синтаксис HTML
	В HTML-документе применяются фреймы
HTML 5
XHTML 1.0
	Строгий синтаксис XHTML
	Переходный синтаксис XHTML
	XHTML-документе применяются фреймы
XHTML 1.1

Пример использования doctype для HTML5 :

Содержимое странички

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

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

Какой doctype использовать?

Выбрать какой doctype использовать стало проще с выходом последней версии HTML5. Так как doctype html5 включает в себя правила предыдущих версий и возможность работы с тегами html4.

Вывод

Подведем итоги:

• DOCTYPE — это элемент, который указывает тип документа и определяет правила по, которым браузер будет обрабатывать ваш html-код;
• элемент doctype всегда должен быть размещен в первой строчке документа;
• всегда указывайте doctype, иначе ваши странички могут отображаться некорректно;
• если не знаете какой doctype использовать, указывайте doctype html5 : .

На этом все, желаю вам успехов! До новых встреч!

Решил проводить регулярные лекции и практические занятия со своими сотрудниками по программированию на 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
	Строгий синтаксис HTML.
	Переходный синтаксис HTML.
	В HTML-документе применяются фреймы.
XHTML 1.0
	Строгий синтаксис XHTML.
	Переходный синтаксис XHTML.
	Документ написан на XHTML и содержит фреймы.
XHTML 1.1
	Разработчики 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!

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

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

• Используйте тег