Що таке doctype в HTML

HTML та CSS~3 хв читання

DOCTYPE - це інструкція браузеру, яка стоїть першим байтом HTML-файлу і перемикає движок рендерингу в режим стандартів W3C.

Теорія

TL;DR

DOCTYPE схожий на наклейку напруги на кабелі: каже браузеру «тут сучасний HTML5», а не логіка IE5.
Без нього: quirks mode, де відступи рахуються поза оголошеною шириною блоку.
З ним: standards mode, CSS box model за специфікацією W3C.
В HTML5 все спростилось до <!DOCTYPE html> — ніяких DTD-посилань і номерів версій.
Одне правило: DOCTYPE стоїть першим рядком. Нічого перед ним.

Швидкий приклад

html

<!-- З DOCTYPE: standards mode -->
<!DOCTYPE html>
<html lang="uk">
<head>
  <style>
    div { height: 100px; border: 1px solid; }
  </style>
</head>
<body>
  <div>Висота рівно 100px у всіх браузерах</div>
</body>
</html>

<!-- БЕЗ DOCTYPE: quirks mode -->
<!-- Той самий CSS, але деякі браузери додадуть 16px+ через стару box model -->
<html>
<head>
  <style>
    div { height: 100px; border: 1px solid; }
  </style>
</head>
<body>
  <div>Висота може виявитись 116px у деяких браузерах</div>
</body>
</html>

Перший варіант рендериться однаково в Chrome, Firefox і Safari. Другий поводиться по-різному залежно від вбудованих шимів сумісності конкретного браузера.

Standards mode означає, що браузер слідує специфікації W3C для CSS box model: width це ширина контенту, padding і border йдуть всередину. Quirks mode повертає логіку до 1998 року, де padding і border додаються поза оголошеним розміром. div шириною 100px з padding: 10px стає 120px у quirks mode. Саме ця різниця породила більшість крос-браузерних багів епохи IE5 і Netscape.

Коли що використовувати

Нова HTML5-сторінка: <!DOCTYPE html> завжди.
Підтримка старого HTML4-документа: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> — але краще мігрувати на HTML5.
XHTML (застарілий): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> — нові проєкти не варто починати з цим.
HTML-листи (Outlook): без DOCTYPE. Email-клієнти самі очікують quirks mode.

Режими рендерингу

Режим	Що це означає
Standards Mode	Браузер суворо дотримується специфікацій W3C
Quirks Mode	Браузер відтворює поведінку IE5/Netscape
Almost Standards Mode	Лише незначні відхилення для висоти комірок таблиць

Як браузер обробляє DOCTYPE

Коли HTML-парсер (Blink у Chrome, Gecko у Firefox) читає перший токен, він шукає <!DOCTYPE html>. Якщо збіг точний, без урахування регістру, він встановлює standards mode ще до парсингу <html>. Вся перевірка займає близько 1ms. Будь-який вміст перед DOCTYPE, навіть порожній рядок або коментар, назавжди перемикає браузер у quirks mode.

Часті помилки

DOCTYPE після коментаря або <html>

html

<!-- ПОМИЛКА: парсер заблокується у quirks mode до того як дійде до DOCTYPE -->
<!-- якийсь коментар -->
<!DOCTYPE html>
<html>

Виправлення: DOCTYPE має бути першим байтом файлу. Нічого перед ним.

Забутий DOCTYPE у серверному HTML

Express з EJS або Pug, Next.js _document.js, public/index.html у React — всюди потрібен DOCTYPE. Без нього CSS-in-JS бібліотеки (styled-components, Emotion) дають зсунуті flex- і grid-макети.

// ПОМИЛКА: відповідь рендериться у quirks mode
res.send('<html><body>...</body></html>');

// ПРАВИЛЬНО
res.send('<!DOCTYPE html><html><body>...</body></html>');

HTML4 DOCTYPE з HTML5-стилями

HTML4 DOCTYPE активує almost-standards mode у деяких браузерах. Вертикальне вирівнювання у комірках таблиць зміщується на 2px. Непомітно і важко знайти причину.

Мінифікатор прибирає пробіл

html

<!-- НЕПРАВИЛЬНО: Firefox 120+ може перейти у quirks mode -->
<!DOCTYPEhtml><html>

<!-- ПРАВИЛЬНО: пробіл обовʼязковий за специфікацією HTML5 -->
<!DOCTYPE html><html>

Де зустрічається

React: кожен public/index.html з Create React App починається з <!DOCTYPE html>.
Next.js: _document.js додає DOCTYPE для стабільного SSR-гідрування на клієнті.
AMP-сторінки: Google вимагає <!doctype html> для валідації.
Service workers: якщо перехоплюєш HTML-відповіді, додай DOCTYPE до тіла відповіді. Після початку парсингу змінити режим рендерингу вже неможливо.

Питання з інтерв'ю

Q: Що станеться, якщо не написати DOCTYPE?
A: Браузер перейде у quirks mode і відтворюватиме поведінку IE5. Padding рахуватиметься поза оголошеною шириною, відступи відрізнятимуться між браузерами, CSS Grid і Flexbox поводитимуться непередбачувано.

Q: Чи важливий регістр у DOCTYPE?
A: Ні. <!DOCTYPE html>, <!doctype html> і <!Doctype HTML> однаково коректні за специфікацією HTML5. За конвенцією пишуть рядковими.

Q: Що таке Almost Standards Mode?
A: Третій режим, який активують деякі старі HTML4/XHTML-doctypes. В основному слідує W3C-специфікації, але застосовує quirks-поведінку до висоти комірок таблиць. З <!DOCTYPE html> з цим не зіткнешся.

Q: Чи можна увімкнути standards mode через JavaScript після завантаження сторінки?
A: Ні. DOCTYPE має бути першим токеном для парсера. Якщо його немає, режим рендерингу не змінити після початку парсингу. У service worker, який перехоплює HTML-відповіді, можна переписати тіло відповіді і дописати <!DOCTYPE html> на початок до того, як браузер почав читати.

Приклади

Базова структура HTML5-сторінки

html

<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Заголовок сторінки</title>
  </head>
  <body>
    <main>
      <h1>Контент</h1>
    </main>
  </body>
</html>

Це мінімальна коректна структура. DOCTYPE йде першим. Атрибут lang допомагає скрінридерам і SEO. charset і viewport розміщують у <head> до решти тегів.

DOCTYPE у React-застосунку (шаблон Create React App)

html

<!-- public/index.html -->
<!-- DOCTYPE забезпечує однакове обчислення розмірів блоків -->
<!-- для styled-components і Tailwind у Chrome, Firefox, Safari -->
<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <noscript>Увімкніть JavaScript для роботи застосунку.</noscript>
    <div id="root"></div>
  </body>
</html>

Без DOCTYPE React portals можуть зміщуватися, а CSS-in-JS бібліотеки дадуть різні розміри блоків у Firefox і Chrome. Якось ми дві години шукали причину зсуву на 4px у flex-контейнері. Виявився відсутній DOCTYPE, який прибрав кастомний скрипт збірки.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?