Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке doctype в HTML». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

## Теорія

### TL;DR

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

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

```html

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

<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


<!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-макети.

```js
// ПОМИЛКА: відповідь рендериться у 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

<!DOCTYPEhtml><html>

<!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



<!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, який прибрав кастомний скрипт збірки.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати870 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.