Для чего нужна декларация doctype

DOCTYPE: история и варианты применения

DOCTYPE чем-то похож на заголовок для статьи. Он пишется в начале HTML-документа. Если его не будет, то браузер может отобразить вашу страницу в неожиданном виде. Читайте о том, из чего состоит DOCTYPE, и как его использовать правильно.

Определение и значение

История

Из истории HTML мы знаем, что спецификация менялась с момента первой публикации в 1992-м году и до наших дней. Вместе с ней, соответственно, менялись и типы документов. Актуальная версия HTML сейчас — это HTML Living Standard. Начиная с версии 4.0 многие элементы стали устаревшими (их рекомендовали не использовать на страницах) — стандарт очистился.

Типы синтаксиса в DOCTYPE

Синтаксис HTML-документа бывает:

Сравниваем DOCTYPE для HTML 1.0 и HTML 4.01 на примерах

Переходный синтаксис

Есть все элементы и атрибуты HTML. С устаревшими и презентационными. Фреймов нет. А разметка должна быть сделана как качественно созданный XML.

Тут есть все элементы и атрибуты HTML, в том числе устаревший тег шрифта. А также новые. Фреймов нет.

Строгий синтаксис

В этом уже нет устаревших и презентационных элементов. Всё ещё нет фреймов. От разметки ждут вида хорошо сформированного XML.

Есть все элементы и атрибуты без устаревших. Фреймов нет.

Фреймы

Здесь определение типа документа как у переходного с XHTML 1.0, но можно пользоваться содержимым фреймов.

Тут DTD как у переходного HTML 4.01 переходный, но тоже есть фреймы. Сейчас применяется редко, потому что фреймы устарели.

Формула с расшифровкой параметров (элементов)

И что теперь?

Время проходит, мы во многом стараемся двигаться к упрощению и унификации. В HTML5 декларация типа документа выглядит очень просто:

DOCTYPE для него самый простой из существовавших.

Что происходит, если указать DOCTYPE неправильно или не указывать его вообще

Браузеры покажут страницу по совместимости со своими старыми версиями.

Формально регистр тут значения не имеет. Но корректнее всё же писать заглавными буквами. Потому что в XHTML5 есть разница между именами элементов, написанными в нижнем регистре и ключевыми словами, которые пишут в верхнем регистре.

— запомнить слишком просто.

Напоминалка на дорожку

Простыми словами, прописывая DOCTYPE, мы говорим браузерам/валидаторам, каким языком разметки мы писали свой документ. Вы помните, что кроме простого HTML бывает XHTML и XML. Кроме этого мы можем указать и степень строгости синтаксиса.

Доктайп нужен на каждой странице

Но не только он. Узнайте всё о структуре HTML-документов в интерактивных тренажёрах.

Нажатие на кнопку — согласие на обработку персональных данных

Источник

DOCTYPE в HTML5. Как и зачем объявлять

ОБЪЯВЛЕНИЕ DOCTYPE в HTML5.

Для начала небольшой спойлер: объявление Doctype в HTML5 имеет скромный минималистичный вид:

При этом вовсе не обязательно писать DOCTYPE большими буквами, так как он не является регистрозависимым. Такие варианты написания, как и также являются верными.

Однако, касательно расположения doctype в html-документе действует строгое правило: doctype должен всегда располагаться в верхней строке! Почему? Чтобы ответить на этот вопрос, необходимо сначала разобраться: для чего нужен doctype и что произойдет, если веб-мастер забудет его указать?

Зачем нужен DOCTYPE?

Позвольте мне начать эту главу с небольшой доброй истории. В далеком 1989 году на свет родился язык гипертекстовой разметки по имени HTML. Он был еще совсем малышом и позволял строить только самые простые веб-конструкции, которые с гордым видом передавал веб-браузеру. Браузер, в свою очередь, радостно считывал html-код и отображал страницы по заранее оговоренным с HTML правилам. Эти правила называются спецификацией. Тогда, в 1989 году HTML был первым представителем династии гипертекстовых языков разметки, подающим надежды на рождение более продвинутых потомков. Поэтому ему дали гордое имя HTML1.0 и издали для него свод правил, собственную спецификацию. По мере развития языка HTML, в мире веб-строительства стали появляться «более продвинутые потомки» HTML: HTML2.0, HTML3.2, HTML4.1 и другие. Для каждой версии HTML создавался свой свод правил, т. е. своя спецификация. Вы только представьте, насколько вырос уровень ответственности браузера! Теперь, читая файл с html расширением, браузер должен был выяснить, какой из потомков HTML «приложил руки» к созданию файла, и отобразить страницу в соответствии с его спецификацией! Поэтому во избежании ошибок со стороны браузера при отображении страницы, был введен doctype. В доктайпе мы сообщаем браузеру, какой свод правил(читай — спецификацию) использовать при отображении страницы.

DOCTYPE— это сокращение от словосочетания «document type«. Что в переводе с английского языка значит «тип документа».

Что случится, если не указать доктайп?

Если веб-мастер не укажет тип документа, то браузер останется наедине со своими мыслями о выборе спецификации для отображения страницы, и может представить страницу совершенно неожиданным для веб-мастера образом. Если разметка страницы составлена абсолютно верно и не содержит ошибок, то больших сюрпризов, конечно, не возникнет. Но если в разметке есть ошибки, то, уважаемый веб-мастер, пеняй на себя! Причем пеняй столько раз, сколько ты будешь открывать страницу в разных браузерах. Ведь у каждого браузера может быть своя версия о спецификации. Поэтому гораздо проще указать doctype в верхней строке html-файла и не переживать о том, что в Mozille страница отображается иначе, чем в Opere. Тем более, что сейчас объявление doctype не требует громоздких строк типа:

как это было в случае использования веб-мастером строгого синтаксиса HTML версии 4.01. А если вдруг в html-файле появились фреймы, то doctype этой же 4.01 версии приобретал уже немного другие очертания:

Согласитесь, запомнить такое количество букв проблематично. Иное дело — лаконичный doctype, появившийся с приходом HTML5:

Что означает: тип документа — html.И запомнить легко, и написать не жалко. Единственный вопрос, возникающий в голове искушенного веб-мастера: почему doctype для 5 версии HTML так сильно отличается от doctype предыдущих версий?

Почему DOCTYPE для HTML5 так отличается от DOCTYPE для прошлых версий HTML?

Таким образом, разумный подход, подкрепленный логическими выводами, облегчает жизнь не только людям, но и браузерам ;-).

Источник

HTML декларация

Декларация определяет версию HTML, которая используется в данном документе. Объявление версии является обязательным условием, так как браузер должен понимать, как интерпретировать страницу. В случае, если декларация отсутствует, браузер может некорректно отображать содержимое веб-страницы.

Декларация указывается до тега. Декларация не чувствительна к регистру.

Синтаксис «>¶

Параметры «>¶

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

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

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

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

URL — ссылка на описание типа документа (например, https://www.w3.org/TR/html4/loose.dtd ).

Типы деклараций «>¶

Различают три типа деклараций :

Строгий (Strict): не содержит «устаревшие» и «не одобряемые» (deprecated) элементы.

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

С фреймами (Frameset): такой же как переходный, но при этом разрешает использование тегов для создания фреймов.

Для HTML 5 используется один вариант декларации.

Источник

Почему важен 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, чтобы соответствовать стандартам полностью, многие веб-сайты, «поползли» бы в большей или меньшей степени или оказались полностью неработоспособными. Такое сближение с соблюдением стандарта повлекло бы за собой проблемы. С другой стороны, не приведение к соответствию стандартов могло бы внести вечную путаницу в эпоху войны браузеров.

Решение

Иными словами, всем браузерам необходимо было работать в двух режимах: режим совместимости для старых правил, и строгого режима для стандарта.
IE Mac был первым браузером использовавшим оба режима, а Windows IE 6, Mozilla, Safari, Opera и последовали его примеру.
IE 5 Windows, а также старые браузеры, как Netscape 4, постоянно заблокированы в режиме совместимости.

Решение о выборе, какой режим отображения требуется вызвать, было найдено в использовании «DOCTYPE» переключения. Согласно стандартам, любой (X) HTML документ должен иметь DOCTYPE который рассказывает всему миру, какой тип (X) HTML документа он использует.

Допустимые DTD

HTML 4.01 DTDs

XHTML 1.0 DTDs

XHTML 1.1 DTD

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

Источник

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

Не лишним будет упомянуть о том, что данный тег имеет достаточно долгую историю. Он был разработан в то время, когда создали Internet Explorer 5 для MacOS и столкнулись с определенными трудностями чтения некоторых страниц.

Почему необходимо указывать именно Doctype?

Как уже было сказано выше, данный тег вставляют в код любого веб-документа для правильного определения его типа. Указание типа документа требуется в первую очередь потому, что сегодня существует сразу несколько версий HTML документов, написанных на разных языках. В том числе существует и расширенная версия – XHTML.

Пример тега Doctype:

Разновидности тега Doctype

Сегодня существует несколько вариантов данного тега, которые используется для разных версий веб-документов:

В данном случае используется строгий html:

Что произойдет, если использовать старые версии тега Doctype?

Значение тега Doctype очень важно, так как именно он позволяет работать всем веб-страницам в соответствии с указанным стандартом.

В том случае, если вы будете использовать неполную версию тега, некорректно его вставите или же не будете использовать его в коде и вовсе, то ваш браузер автоматически перейдет в « загадочный » режим.

Отображение документа в данном случае будет происходить таким образом, будто вы вольно отступали от стандартов.

На сегодняшний день только браузер Opera старается отображать страницы таким образом, как если бы они соответствовали всем стандартам, независимо от того, был ли использован тег Doctype или же нет.

Где можно взять качественный тег Doctype?

Надеюсь, что данная статья оказалась для Вас полезной! Удачи!

Источник