Зачем нужен Доктайп html и как правильно прописать элемент

Опубликовано

Обновлено

В этом уроке вы узнаете, что такое Doctype html и зачем он нужен на странице.

Разберем причину его появления, все примеры шаблонов, а также рекомендации консорциума W3C по использованию.

А в конце дам описание всех атрибутов этой декларации и покажу, какую версию сейчас лучше использовать.

Как вы знаете, документ html состоит из символов.

Некоторые из них составляют текстовое содержимое.

А другие символы складываются в определенные конструкции (разметку).

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

Элемент doctype html — что это такое и для чего нужен

DOCTYPE (Document Type Declaration или DTD) — это инструкция, которая говорит браузеру, какой тип текущего документа используется и на каком языке разметки он сверстан.

Само слово переводится на русский, как объявление типа документа.

За всю историю развития HTML было разработано большое количество стандартов. Они говорят браузеру, как обрабатывать код и выводить страницу на монитор.

Поэтому важно правильно задать стандарт сайта, а именно для HTML 5.

<!DOCTYPE html>

Тут не имеет значения, в каком регистре вы написали объявление. Главное, чтобы оно шло самым первым на странице.

Правильный вариант записи Doctype для html 5 на странице

<!DOCTYPE html>
<html>
  <head>
	<title>Заголовок страницы</title>
	<meta charset="utf-8"  />
  </head>

  <body>
     <p>Основной контент страницы</p>
  </body>
</html>

Несмотря на угловые скобки, данное объявление ни к тексту, ни к элементу разметки не относится.

Как только браузер открывает страницу и видит это объявление, он понимает, что страница разработана на HTML 5 и ее нужно обрабатывать в соответствии с этим стандартом.

Ниже мы еще рассмотрим другие стандарты.

Они имеют довольно длинные надписи, которые тяжело запомнить.

Вот этим и отличается HTML 5 от других версий.

В нем все оптимизированно. И вместо длинных надписей и ссылок на стандарты, мы просто вводим такую короткую запись.

Причины появления декларации Доктайп в HTML

В те времена, когда html был единственным языком, мы не прописывали никакие инструкции. Тогда просто в качестве объявления вставляли тег html, чтобы браузер определил, что это такое.

А дальше между этими элементами писали другие теги html для страницы.

История объявления doctype уходит в начало 90-х. Тогда к выходу готовилась новая версия браузера Internet Explorer 6 версии.

Декларация Doctype для HTML 5

На то время со стандартами языка все было плохо.

Разработчики браузеров их не соблюдали. А создатели сайтов отвечали им взаимностью.

Каждый браузер работал по своим собственным, ни с чем не совместимыми стандартами.

Консорциум что-то выпускал, но к нему никто не прислушивался.

Разработчики IE поняли, что так дальше продолжаться не может. И имеет смысл сделать так, чтобы новая версия браузера по возможности соответствовала всем стандартам.

Однако выяснилось, что выпустить новую версию, соответствующую стандартам, так просто не получится.

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

Перед разработчиками Internet Explorer стала такая проблема, как несовместимость нового браузера и старых веб-страниц.

Они долго бились над этой проблемой до тех пор, пока один специалист по имени Тантек Челик не предложил следующее.

Турецко-американский ученый-компьютерщик Тантек Челик
Tantek Çelik
Турецко-американский ученый-компьютерщик

А давайте наш браузер будет иметь два режима — соответствие и несоответствие стандартам. И отображать страницу либо в одном, либо в другом режиме.

Но как же браузер догадается, в каком режиме ему отображать страницу?

В таком случае, он будет смотреть на объявление <!Doctype>.

Если в начале документа он его находит, значит, что разработчик был грамотный, и документ отображается по стандартам.

И наоборот.

Если доктайпа нет, то документ будет отображаться, как и раньше.

Благодаря всему этому был создан так называемый переключатель режимов. На данный момент так ведут себя все современные браузеры.

Браузер переключается в режим стандартов если видит строку doctype. В другом же случае он переключается в режим обратной совместимости со старыми версиями языка.

Режимы браузера для обработки веб-страницы

Нам же нужно, чтобы документ отображался в режиме стандартов. Потому что в режиме обратной совместимости может слетать часть страницы в html и css.

Шаблоны Doctype — все виды с правильными примерами

За прошедшее время вышло несколько версий языка html. На данный момент консорциум рекомендует использовать HTML 5. Однако есть и другие типы. И ниже мы их все рассмотрим.

Направления

Некоторые версии языков HTML и XHTML имеют разные направления:

  1. Strict (строгое) — все нежелательные элементы и атрибуты запрещены. Здесь нельзя допускать ошибки. Например, незакрытый тег, пропущенный слэш и так далее. В итоге, если будут ошибки, то страница будет отображаться неправильно.
  2. Transitional (переходное) — многие ошибки разрешены. Оно предназначено для тех, кто не хочет заморачиваться со всей этой валидацией. Здесь можно допускать какие-то ошибки, потому что они никак не повлияют на страницу.
  3. Frameset (вставка фрэймов) — позволяет вставлять на страницу фрэймы. Сейчас это практически не используется. Однако раньше мы могли в одну страницу вложить дополнительно еще несколько страниц. Например, разделить экран на две части и показывать сразу две страницы.

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

ВидПример
HTML 5 и выше<!DOCTYPE html>
HTML 4.01 Strict<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
HTML 4.01 Transitional<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
HTML 4.01 Frameset<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>
XHTML 1.0 Strict<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
XHTML 1.0 Transitional<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
XHTML 1.0 Frameset<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»>
XHTML 1.1 — DTD<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>
XHTML Basic 1.1<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML Basic 1.1//EN» «http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd»>

Инструкции типа документа MathML

ВидПримеры
MathML 2.0 — DTD<!DOCTYPE math PUBLIC «-//W3C//DTD MathML 2.0//EN» «http://www.w3.org/Math/DTD/mathml2/mathml2.dtd»>
MathML 1.01 — DTD<!DOCTYPE math SYSTEM «http://www.w3.org/Math/DTD/mathml1/mathml.dtd»>

Для составных документов

ВидПримеры
XHTML + MathML + SVG — DTD<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN» «http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd»>
XHTML + MathML + SVG профиль (XHTML в качестве основного языка) — DTD<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN» «http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd»>
XHTML + MathML + SVG профиль (с использованием SVG в качестве хоста) — DTD<!DOCTYPE svg:svg PUBLIC «-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN» «http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd»>

Doctype SVG Public

Помимо специфики обработки (X)HTML, объявления доктайп в языках XML полезны только для инструкции именованных сущностей и облегчения проверки документов на основе DTD. 

Поэтому во многих языках XML такие инструкции не обязательны.

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

ТипПример
SVG 1.1 Full — DTD<!DOCTYPE svg PUBLIC «-//W3C//DTD SVG 1.1//EN» «http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd»>
SVG 1.0 — DTD<!DOCTYPE svg PUBLIC «-//W3C//DTD SVG 1.0//EN» «http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd»>
SVG 1.1 Basic — DTD<!DOCTYPE svg PUBLIC «-//W3C//DTD SVG 1.1 Basic//EN» «http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd»>
SVG 1.1 Tiny — DTD<!DOCTYPE svg PUBLIC «-//W3C//DTD SVG 1.1 Tiny//EN» «http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd»>

Устаревшие объявления

Эти инструкции только для общего понимания. Вместо них лучше использовать более новые версии.

ВидПример
HTML 2.0 — DTD<!DOCTYPE html PUBLIC «-//IETF//DTD HTML 2.0//EN»>
HTML 3.2 — DTD<!DOCTYPE html PUBLIC «-//W3C//DTD HTML 3.2 Final//EN»>
XHTML Basic 1.0 — DTD<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML Basic 1.0//EN» «http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd»>

Структура Doctype html — все параметры с описанием

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

Синтаксис

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

Атрибуты с пояснениями

Объявление начинается с восклицательного знака и слова doctype. Далее идут следующие компоненты.

Тип корневого элемента — в языке HTML им является сам тег html.

Публичность — объект является открытым или закрытым.

Ставим PUBLIC если формальные правила являются общедоступными. Если объект является системным ресурсом (например, локальный файл), то ставим значение SYSTEM.

Для HTML/XHTML указывается значение PUBLIC.

Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO).

Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и — (минус) — разработчик не зарегистрирован.

Для W3C значение ставится «-».

Организация — уникальное название организации, разработавшей DTD.

Официально HTML/XHTML публикует W3C, это название и пишется в <!DOCTYPE>.

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

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

Язык — язык, на котором написан текст для описания объекта.

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

URL — адрес документа с DTD. Содержит формальное описание правил языка.

Например:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

Кстати, давайте наберем его в браузере и посмотрим, что же он из себя представляет.

Документ DTD с описаниями правил языка XHTML 1
Правила языка XHTML 1

Как видим, в нем довольно сложно разобраться. Но нам это и не нужно.

Файл .dtd предназначен прежде всего для того, чтобы его читал и обрабатывал браузер.

Этот файл содержит в частности следующую информацию.

Объявление типов элементов — это перечень допустимых типов элементов, которые применяются в данной версии языка.

Объявление о типах элементов языка XHTML 1
Типы элементов в XHTML 1

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

Инструкция dtd по содержанию каждого элемента в языке XHTML 1
Содержание элементов в XHTML 1

Например, в элемент html могут быть вложены элементы head и body.

Объявление атрибутов — это перечень допустимых атрибутов, их значений и типы элементов.

Инструкция файла DTD с объявлением атрибутов для языка XHTML 1
Объявление атрибутов в XHTML 1

Какую версию Доктайп лучше использовать сейчас?

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

<!DOCTYPE html>

Почему именно ее?

При запуске html документа, браузер в первую очередь считывает описание dtd с сайта консорциума W3C. Затем он отображает документ в соответствии с правилами указанного файла dtd.

Однако так думали только разработчики стандарта W3C.

Браузеры в свою очередь делать этого не стали и никогда не будут. Единственное, на что они смотрят, так это на наличие или отсутствие объявления doctype.

В html 5 такая форма инструкции введена, как стандарт. Вот ее рекомендуется использовать.

Частые вопросы

Что будет если не указать DOCTYPE?

Для какого тега элемент DOCTYPE выступает родителем?

У меня возникает синтаксическая ошибка в DOCTYPE html

Добавить в закладки

Сергей Азаров вебмастер и специалист по созданию и продвижению сайтов

Сергей Азаров

Увлекаюсь созданием и продвижением сайтов в интернете. Интересует SEO оптимизация и контент-маркетинг. Немного занимаюсь SMM и Email рассылкой. Также люблю читать интересные материалы по веб-аналитике и заработку в интернете.

Профили автора:

Книга Секреты эффективной рекламы от Alzari

Секреты эффективной рекламы

Успей скачать, пока бесплатно! До конца моего предложения осталось:

Мнения по теме

8 ответов

  1. Аватар пользователя Артем
    Артем

    А как быстро написать doctype html в редакторе? Есть какие-то горячие клавиши для набора?

    1. Аватар пользователя Сергей Азаров
      Сергей Азаров

      Если в вашем редакторе установлено расширение Emmet, то наберите три восклицательных знака !!! и нажмите клавишу TAB.

  2. Аватар пользователя Антон Прохоров
    Антон Прохоров

    При создании HTML-файла с объявлением типа документа у меня выходит сообщение об синтаксической ошибке «неожиданный токен»:

    Uncaught SyntaxError: Unexpected token

    Оно появится в той же строке, что и доктайп. Само объявление у меня написано правильно — проверял.
    Что еще тут может быть?

    1. Аватар пользователя Сергей Азаров
      Сергей Азаров

      Причина этой ошибки не в том, как вы написали объявление для браузеров. Обычно это связано с JavaScript.

      Например, если вы ссылаетесь на js-файл (допустим, core.js) в своем HTML документе, и браузер не может найти этот файл, то он выдаст ошибку «Unexpected token».

      Это распространенная проблема для сайтов, работающих на сервере Apache.

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

      Или же можно переместить сам файл core.js в правильное место, указанное в теге скрипта.

      Допустим, ваш script выглядит следующим образом (скобки я не ставил в примере, чтобы код не обрезался):

      script type="text/javascript" src="/Client/public/core.js"

      В этом случае вы можете либо заменить путь «/Client/public/core.js», либо переместить файл core.js в папку /Client/public/.

      Теперь предположим, что вы переходите в Client/public и видите файл с именем «core.js».

      В этом случае дважды проверьте разрешения, как для общей папки, так и для файла core.js.

      У любого из них могут отсутствовать надлежащие разрешения, что тоже приводит к ошибке «Unexpected token».

  3. Аватар пользователя Елена
    Елена

    А почему убрали цифры и атрибуты у doctype html страницы? Я имею ввиду про последнюю актуальную версию объявления.

    1. Аватар пользователя Сергей Азаров
      Сергей Азаров

      Да, декларация doctype html5 является самой простой и короткой по сравнению с теми, что использовались в предыдущих версиях.

      Дело в том, что версии до HTML5 были основаны на стандартном обобщенном языке разметки (SGML).

      Поэтому их объявление должно было содержать ссылку на соответствующую инструкцию типа документа (DTD) .

      Это также означало сохранение объявления DTD и создание отдельных инструкций для строгого и переходного режимов.

      Однако HTML 5 основан на собственном стандарте, а не на SGML. Поэтому для типа документа в HTML5 не нужно указывать DTD.

  4. Аватар пользователя Олег
    Олег

    А как исправить ошибку doctype must be declared first в Visual Studio Code?

    Редактор кода жалуется на отсутствие доктайпа в html документах.
    Meteor автоматически добавляет типы файлов, и их наличие вызывает ошибки сборки.

    Как заставить VSCode игнорировать отсутствующий тип документа в html-файлах?

    1. Аватар пользователя Сергей Азаров
      Сергей Азаров

      Вам нужно создать .htmlhintrc в своей корневой папке.

      На htmlhint.com можно настроить удобные для вас правила и создать .htmlhintrc

      Вот пример с «doctype-first»: false,, который будет игнорировать данную ошибку

      {
        "tagname-lowercase": true,
        "attr-lowercase": false,
        "attr-value-double-quotes": true,
        "doctype-first": false,
        "tag-pair": true,
        "spec-char-escape": true,
        "id-unique": true,
        "src-not-empty": true,
        "attr-no-duplication": true,
        "title-require": true
      }

Добавить комментарий