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. Кроме этого мы можем указать и степень строгости синтаксиса.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Doctype

Элемент Doctype HTML используется для указания типа страницы и языка разметки, который на ней применяется. Это означает, что браузер пользователя в первую очередь читает значение элемента Doctype и определяет как правильно отобразить данную страницу.

Так как язык HTML существует в нескольких различных вариантах, включая XHTML (т.е., так называемый, "расширенный HTML") и HTML5, то при верстке сайта необходимо указывать соответствующее значение для Doctype.

Основные значения элемента Doctype:

При строгом синтаксисе языка HTML (strict doctype):

Здесь параметры элемента означают:

• html - корневой элемент веб-страницы;
• W3C - название организации, которая разработала стандарт (официальной организацией, которая разработала HTML и XHTML является W3C, что и указывается в элементе);
• DTD - задает тип страницы (для HTML и XHTML это DTD или "описание для типа документа");
• EN - язык описания объектов (по умолчани пишется EN - английский);
• http://www.w3.org/TR/html4/strict.dtd - url страницы, на которой находится описание для указанного типа документа;

Пример указания Doctype на HTML-странице:

     
На этой странице указывается Doctype для разметки HTML.
  

Пример указания Doctype на странице с разметкой HTML5:

    
На этой странице указывается Doctype для HTML5-разметки.
  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

     
Основной контент страницы
  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Направления

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

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

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

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

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

Doctype SVG Public

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

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

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

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

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

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

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

Синтаксис

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

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

Тип корневого элемента — в языке 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. Содержит формальное описание правил языка.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ни для какого. У него нет дочерних элементов, поскольку это всего лишь инструкция для браузера, которая не является разметкой страницы.

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

Посмотрите, чтобы объявление стояло на самой первой строчке и перед ним ничего не было. Сверьте со стандартом правильное написание. Также возможно, что html страницу вы выводите на Python. Но напрямую ее нельзя вывести. Поэтому используйте библиотеку шаблонов.

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

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

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

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

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

8 ответов

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

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

Антон Прохоров

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

Uncaught SyntaxError: Unexpected token

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

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

Причина этой ошибки не в том, как вы написали объявление для браузеров. Обычно это связано с JavaScript. Например, если вы ссылаетесь на js-файл (допустим, core.js) в своем HTML документе, и браузер не может найти этот файл, то он выдаст ошибку «Unexpected token». Это распространенная проблема для сайтов, работающих на сервере Apache. Чтобы исправить эту ошибку, вам придется заменить путь к файлу в теге скрипта на правильный. Или же можно переместить сам файл core.js в правильное место, указанное в теге скрипта. Допустим, ваш script выглядит следующим образом (скобки я не ставил в примере, чтобы код не обрезался):

script type="text/javascript" src="https://alzari.ru/Client/public/core.js"

В этом случае вы можете либо заменить путь «/Client/public/core.js», либо переместить файл core.js в папку /Client/public/. Теперь предположим, что вы переходите в Client/public и видите файл с именем «core.js». В этом случае дважды проверьте разрешения, как для общей папки, так и для файла core.js. У любого из них могут отсутствовать надлежащие разрешения, что тоже приводит к ошибке «Unexpected token».