Для чего предназначен тег doctype
Элемент предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .
Согласно спецификациям HTML и XHTML тег DOCTYPE (что означает «объявление типа документа») сообщает валидатору, какую именно версию (X)HTML вы используете в своей странице. Этот тег должен всегда находиться в первой строке каждой страницы. Тег DOCTYPE – ключевой компонент веб-страниц, претендующих на соответствие стандартам: без него ваш код и CSS не пройдут проверку валидатором.
Валидатор — программа проверяющая синтаксическую корректность HTML-, XHTML-, XML-документов и RSS-лент.
(Консорциум W3C — World Wide Web Consortium — определяет синтаксис и правила HTML).
Почему важен 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 | |
| Строгий синтаксис 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
Получается что Более 50% сайтов работают в режиме quirk mode — то есть в режиме IE4!
Устаревшие тэги и аттрибуты
Устаревшие тэги в алфавитном порядке
Устаревшие HTML / XHTML аттрибуты тегов. Все они могут быть заменены CSS стилями.
Разница между HTML и XHTML (указаны правила для XHTML)
- Тэги должны быть написаны в нижнем регистре, вместо , как это было в HTML, нужно писать:
- Все теги должны закрываться, или с использованием тэга со слешем в паре, как параграф ( ) например, или самозакрывающиеся тэги, как например (
). - Все теги должны быть правильно вложены друг в друга, без перекрытий
- Не должны использоваться устаревшие теги
- Все аттрибуты должны быть набраны в нижем регистре
- Все значение аттрибутов должны быть заключены в одинарные или двойные кавычки
- Все аттрибуты должны использоваться в длинной форме, а не в короткой: disabled=»disabled» в XHTML против DISABLED в HTML
- Структура должна быть отделена от контента. Например тег
— это часть контента (параграф) и вы не можете поместить в него например таблицу, потому что таблица это часть структуры (форматирования).
Совместимость и IE8
IE8 имеет четыре режима: IE 5.5 режим совместимости, IE 7 стандартный режим, IE в 8 стандартном режиме и IE 8 в режиме совместимости.
Выбор способа зависит от данных из различных источников: DOCTYPE, meta элементов, заголовков HTTP, периодически загружаемых данных от Microsoft (!), интрасети, настроек, сделанных пользователем, настроек сделанных администратором, наличия сайта в блеклисте microsoft и прочее!
Схема (черт ногу сломит) определения в каком режиме работать браузеру IE8
Источники информации
upd: немного подправил ошибки
Для чего предназначен тег doctype
Что за загадочный доктайп и зачем он нужен? Почему не стоит забывать о нём? Рассмотрим современный доктайп и его исторические версии.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
- Алёна Батицкая ,
- Вадим Макеев
Обновлено 18 сентября 2021
Кратко
Скопировать ссылку «Кратко» Скопировано
или «доктайп» — это сокращение от «тип документа» (document type). Доктайп говорит браузеру: «работай со страницей в стандартном режиме, пожалуйста». Единственный доктайп, который вам нужно знать — это . Поставьте его первой строчкой HTML-документа, и браузер обработает страницу правильно.
Пример
Скопировать ссылку «Пример» Скопировано
Дока DOCTYPE html> html lang="ru"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width,initial-scale=1"> title>Докаtitle> link rel="stylesheet" href="/assets/styles/main.css"> head> html>
Как пишется
Скопировать ссылку «Как пишется» Скопировано
DOCTYPE html>
Как понять
Скопировать ссылку "Как понять" Скопировано
Есть несколько исторических версий HTML, включая специальную — XHTML. Все они обозначались своими доктайпами и их вариациями, которые вы можете встретить в старом коде:
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Сегодня доктайп по спецификации нужен исключительно потому, что без него браузеры переключатся в режим совместимости со старым кодом (quirks mode). Поверьте, вы не хотите оказаться в режиме совместимости. Чтобы переключить браузер в стандартный режим (standards mode), достаточно написать в самом начале документа: . Это единственный стандартный доктайп для современного HTML. Всё, что сверх этого — только риск лишней путаницы и для автора, и для браузера.
Теги и атрибуты в HTML не зависят от регистра (хотя доктайп это не тег, строго говоря), поэтому все вариации ниже абсолютно равнозначны, даже последняя — но лучше не надо так писать.
DOCTYPE html> DOCTYPE HTML> doctype HTML> doctype html> DoCtYPe hTMl>
Доктайп стал для HTML чем-то вроде use strict в JS.
На практике
Скопировать ссылку "На практике" Скопировано
Дока Дог советует
Скопировать ссылку "Дока Дог советует" Скопировано
�� Если сравнивать HTML с устройством человека, то — это его вид. Важно знать, что было раньше, но не надо быть австралопитеком. Единственный вариант, который можно использовать — это , все остальные устарели.
Алёна Батицкая советует
Скопировать ссылку "Алёна Батицкая советует" Скопировано
�� Программисты прошлого соревновались в том, кто может написать один из доктайпов по памяти и без ошибок.
Сейчас такого веселья уже не видать. Во-первых, доктайп усох: — сложно написать это с ошибками. А во-вторых, все разработчики используют плагин Emmet для написания стандартной разметки страницы. Гораздо удобнее напечатать ! и нажать клавишу Tab , чем запоминать доктайп. Аналогичного результата можно добиться, набрав в файле html : 5 и нажав Tab.
Так что нужно просто знать, что такое определение DOCTYPE должно быть во всех HTML-документах, где оно должно находиться в разметке и за что отвечает. Остальное сделает машина.
DOCTYPE: история и варианты применения
DOCTYPE чем-то похож на заголовок для статьи. Он пишется в начале HTML-документа. Если его не будет, то браузер может отобразить вашу страницу в неожиданном виде. Читайте о том, из чего состоит DOCTYPE, и как его использовать правильно.
Определение и значение
Если вы хоть раз работали с HTML-файлом, то наверняка видели в начале страницы ключевое слово DOCTYPE . Если разобрать его по частям, то получается DOC (сокращение от слова document) + TYPE (с английского «тип»). Ключевое слово DOCTYPE в файле HTML — это декларация типа документа. Так браузер узнает, на каком языке и с какими технологиями он был создан. Если не укажете DOCTYPE, то ваша страница может отображаться некорректно.
История
Из истории HTML мы знаем, что спецификация менялась с момента первой публикации в 1992-м году и до наших дней. Вместе с ней, соответственно, менялись и типы документов. Актуальная версия HTML сейчас — это HTML Living Standard. Начиная с версии 4.0 многие элементы стали устаревшими (их рекомендовали не использовать на страницах) — стандарт очистился.
Типы синтаксиса в DOCTYPE
Синтаксис HTML-документа бывает:
- свободным — переходный (transitional);
- строгим — strict. По его правилам парные теги обязательно надо закрывать, атрибуты «заворачивать» в кавычки, нельзя пользоваться устаревшими тегами;
- «рамочным» — frameset. Когда используются фреймы.
Сравниваем DOCTYPE для HTML 1.0 и HTML 4.01 на примерах
Переходный синтаксис
Строгий синтаксис
Фреймы
Формула с расшифровкой параметров (элементов)
- [Элемент верхнего уровня] — корневой элемент на веб-странице, часто html / HTML ;
- [Публичность] — этот параметр для файла может принимать два значения: PUBLIC (публичный) и SYSTEM (локальный);
- [Регистрация] — указывает на наличие регистрации у разработчика DTD внутри ISO (международная организация). Может быть + или .
- [Организация] — название организации стандартизации (W3C);
- [Тип] — определение типа страницы, например DTD ;
- [Имя] — имя документа;
- [Язык] — язык описания объектов (по умолчанию английский EN );
- [URL] — адрес страницы, на которой находится описание для указанного типа документа. Из этой спецификации браузер узнает, как отображать страницу с допустимыми тегами.
И что теперь?
Время проходит, мы во многом стараемся двигаться к упрощению и унификации. В HTML5 декларация типа документа выглядит очень просто:
DOCTYPE для него самый простой из существовавших.
Что происходит, если указать DOCTYPE неправильно или не указывать его вообще
Браузеры покажут страницу по совместимости со своими старыми версиями.
Формально регистр тут значения не имеет. Но корректнее всё же писать заглавными буквами. Потому что в XHTML5 есть разница между именами элементов, написанными в нижнем регистре и ключевыми словами, которые пишут в верхнем регистре.
— запомнить слишком просто.
Напоминалка на дорожку
- DOCTYPE — инструкция, которая ассоциирует веб-страницу с типом документа (DTD).
- Document Type Definition — это близко к DOCTYPE, но не путайте.
- Пример: формальное определение частной версии HTML 2.0 — 4.0.
Простыми словами, прописывая DOCTYPE, мы говорим браузерам/валидаторам, каким языком разметки мы писали свой документ. Вы помните, что кроме простого HTML бывает XHTML и XML. Кроме этого мы можем указать и степень строгости синтаксиса.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.