Почему важен DOCTYPE и как его правильно использовать / Хабр

Элемент <!doctype> определяет вид текущего документа.

Название этого тега образовано из двух слов «document type», что в переводе значит — тип документа. Аббревиатура «DTD» состоит из слов «document type definition» и переводится как — описание типа документа.

Наличие этого тега необходимо для того чтобы браузер понимал, в каком виде следует интерпретировать данную web-страницу, так как существует несколько версий HTML. Это может быть как обычный язык разметки гипертекста HTML , так и расширенный его вариант XHTML который отличается по синтаксису. Для того чтобы браузеру было проще понимать, согласно какому стандарту следует отображать web-страницу и необходим тег , который записывается в первой строке.

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

В HTML-документе применяются фреймы

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

HTML 5

Тег <!DOCTYPE> отвечает за тип документа в HTML (DTD «document type definition», описание типа документа). Если быть точнее, то это инструкция для браузера, что за тип документа представлен ниже.

Возникает логичный вопрос: а что html разве бывает разный? Дело в том, что в разных версиях html появлялись новые теги. Также и в CSS появлялись новые свойства. Чтобы браузер корректно смог понять какому стандарту соответствует страница, рекомендуется четко указывать тип документа в <!DOCTYPE>.

Располагается <!DOCTYPE> в самом начале html-кода (перед тегом <html>).


Синтаксис <!DOCTYPE>

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


Где

  • Элемент верхнего уровня — элемент верхнего уровня в документе (для HTML это тег <html>)
  • Публичность — значение PUBLIC (объект является публичным) или SYSTEM (системным ресурсом). Например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC.
  • Регистрация — принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и минус (-) — разработчик не зарегистрирован. Для W3C значение ставится минус.
  • Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в <!DOCTYPE>.
  • Тип — тип описываемого документа (для HTML/XHTML значение DTD).
  • Имя — уникальное имя документа для описания DTD.
  • Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Например, EN.
  • URL — адрес документа с DTD.


Рассмотрим какие стандартные значения встречаются чаще всего.


Таблица со значениями <!DOCTYPE> и описания к ним

DOCTYPE Описание
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> Строгий синтаксис HTML
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> Переходный синтаксис HTML
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»> В HTML-документе применяются фреймы
<!DOCTYPE html> Стандарт HTML5.

Для всех документов. Рекомендуется использовать его на своих сайтах.

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»> Строгий синтаксис XHTML.

Включает все HTML элементы и атрибуты, кроме устаревших презентационных. Фреймсеты также не разрешены.

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> Переходный синтаксис XHTML. Включает все HTML элементы и атрибуты, вместе с устаревшими презентационными. Фреймсеты не разрешены.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»> Тоже что и XHTML 1.0 Transitional, но разрешает фреймы.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»> Тоже что и XHTML 1.0 Strict, но разрешает добавление модулей.

Какой <!DOCTYPE> выбрать

Подводя итоги можно сказать, что <!DOCTYPE> не является обязательным элементом, но его использование снижает риски возникновения проблем с отображением html-страницы в разных браузерах.

Фактически всем подойдет следующий вариант:

<!DOCTYPEhtml> <html> …

Читайте также:
• HTML тег <form> — подробное описание с примерами
• HTML тег <a> — подробное описание с примерами
• Фреймы (теги <framne>, <frameset>, <noframe>, <iframe>)
• Коды спецсимволов для HTML
• Как сделать фон для сайта
• Что такое микроразметка сайта
• Все про CSS border
• Все про CSS transition
• Кнопка html

← Перейти в каталог html уроков и советов

Справочник HTML — «U», «V», !DOCTYPE и комментарии

Содержание:

Тег UL

Тег Атрибуты Тип IE HTML5 HTML 4.01 | XHTML 1.0 XHTML 1.1 Универ.
атрибуты,
события
Transitional Frameset Strict***
+ блочный + + + + + +
type + + +

Тег ul — применяется для создания маркированного списка. Читать урок Создание списков.

Применение:

    Пункт 1
    Пункт 2

Атрибут: type — указывает тип маркеров. Значения: disk — круглый (по умолчан.), circle — окружность, square — квадратный (в CSS — свойство list-style-type).

Тег VAR

Тег Атрибуты Тип IE HTML5 HTML 4.01 | XHTML 1.0 XHTML 1.1 Универ.
атрибуты,
события
Transitional Frameset Strict***
строчный + + + + + +

Тег var — применяется для выделения переменных компьютерных приложений, отображается курсивом.

Тег VIDEO

Тег Атрибуты Тип IE HTML5 HTML 4.01 | XHTML 1.0 XHTML 1.1 Универ.
атрибуты,
события
Transitional Frameset Strict***
+ 9.0 и выше + +
autoplay 9.0 и выше +
controls 9.0 и выше +
height 9.0 и выше +
loop 9.0 и выше +
poster 9.0 и выше +
preload 9.0 и выше +
src 9.0 и выше +
width 9.0 и выше +

Тег video — новый тег HTML5, размещает видео на веб-странице. Читайте урок о вставке видео на веб-страницу.

Атрибуты тега VIDEO »

autoplay — автоматическое воспроизведение. Значения: false — нет, true — да.
controls — определяет, нужно ли показывать панель управления видео.
height — высота кадра.
loop — варианты воспроизведения. Значения: false — однократное, true — циклическое.
poster — URL изображения-заставки.
preload — определяет, нужно ли предварительно загружать видеозапись в сам элемент.

Значения: auto — загружает на усмотрение браузера, metadata — загрузить только метаданные видеозаписи, none — не загружать (по умолчан.).
src — URL видеозаписи.
width — ширина кадра видео.

Тег WBR

Тег Атрибуты Тип IE HTML5 HTML 4.01 | XHTML 1.0 XHTML 1.1 Универ.
атрибуты,
события
Transitional Frameset Strict***
9.0 и выше +

Тег wbr — инструктирует браузер о месте возможного переноса строки в случае необходимости.

Примечание: нет закрывающего тега.

Тег !DOCTYPE

Тег Атрибуты Тип IE HTML5 HTML 4.01 | XHTML 1.0 XHTML 1.1 Универ.
атрибуты,
события
Transitional Frameset Strict***
+ + + + +

Тег !DOCTYPE — занимает первую строку и указывает тип документа. Примечание: нет закрывающего тега. Подробнее о разнице версий html, xhtml и html5.
HTML5:

HTML 4.01 Transitional:

HTML 4.01 Frameset:

HTML 4.01 Strict:

XHTML 1.1:

XHTML 1.0 Transitional:

XHTML 1.0 Frameset:

XHTML 1.0 Strict:

Тег Атрибуты Тип IE HTML5 HTML 4.01 | XHTML 1.0 XHTML 1.1 Универ.
атрибуты,
события
Transitional Frameset Strict***
+ + + + +

Тег Комментарии — применяется для обособления комментариев (для себя), содержимое не отображается. Примечание: нет закрывающего тега.

Содержание:

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

Закрыть меню