skip to main content

<!DOCTYPE>

html

Кратко 🔗

<!DOCTYPE> или «доктайп » —  это сокращение «тип документа» (document type). Доктайп  говорит браузеру «работай со страницей в стандартном режиме, плиз». Единственный доктайп, который вам нужно знать <!DOCTYPE html> — поставьте его первой строчкой 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), ведь каждый из них содержит самое важное: <!DOCTYPE HTML — что идёт дальше браузер уже не интересует, лишь бы оно заканчивалось закрывающей скобкой >.

Поэтому проще всего писать: <!DOCTYPE html>.

Теги и атрибуты в HTML не зависят от регистра (хотя доктайп это не тег, строго говоря), поэтому все вариации ниже абсолютно равнозначны, даже последняя — но лучше не надо так писать.

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype HTML>
<!doctype html>
<!DoCtYPe hTMl>

Доктайп стал для HTML чем-то вроде use strict из JS.

В работе 🔗

Владимир 👨‍🔧

🛠 Если сравнивать HTML с устройством человека, то <!DOCTYPE> — это его вид. Важно знать, что было раньше, но не надо быть австралопитеком. Единственный вариант, который можно использовать — это <!DOCTYPE html>, все остальные устарели.

Алёна,

🛠 Программисты прошлого соревновались в том, кто может написать один из доктайпов по памяти и без ошибок.

Сейчас такого веселья уже не видать. Во-первых, доктайп усох <!DOCTYPE html> — сложно НЕ написать его без ошибок. А во-вторых, все разработчики используют плагин Emmet для написания стандартной разметки страницы. Гораздо удобнее напечатать ! и нажать клавишу Tab чем запоминать доктайп. Аналогичного результата можно добиться, набрав в файле html:5 и нажав Tab.

Так что нужно просто знать что такой тег есть, где он должен находится в разметке и за что отвечает. Остальное сделает машина.

🛠 Некоторые особо хитрые работодатели любят спросить о доктайпе на собеседовании. Будьте готовы 😏

Вопрос обычно звучит так: «Что делает DOCTYPE?»

<!DOCTYPE>  —  это сокращение от «document type» (тип документа). Он объявляется в HTML для того, чтобы различать стандартный режим или режим совместимости (quirks mode). <!DOCTYPE>  говорит браузеру: «Работай со страницей в стандартном режиме, плиз».

Мораль истории  —  просто добавляй <!DOCTYPE html> в начало страницы.


Автор: Макс 👨‍🔧