Яким тегом починається кожна HTML сторінка: розбір з нуля
Перший рядок будь-якого сучасного HTML-документа кричить на весь світ: <!DOCTYPE html>. Ця фраза, схожа на таємний пароль, відкриває двері до правильного рендерингу сторінки в браузерах. Але ось у чому прикол: це не тег у класичному розумінні, а декларація типу документа. Вона стоїть на варті стандартів, запобігаючи хаосу в інтерпретації коду. Без неї ваша сторінка може перетворитися на реліквію 90-х, де CSS поводиться непередбачувано, а макети ламаються, ніби картковий будиночок під поривом вітру.
Розберемося, чому цей рядок — основа основ. Браузери, як примхливі шеф-кухарі, очікують точних інструкцій з самого початку. DOCTYPE повідомляє: “Ей, це HTML5, поводься по-новому, без старих фокусів”. Історія знає випадки, коли забутий DOCTYPE перетворював елегантний дизайн на візуальний салат. Тепер уявіть радість розробника, коли все клацає ідеально з першого разу.
Чим відрізняється DOCTYPE від справжнього тега
Теги в HTML — це пари на кшталт <p> та </p>, що обгортають контент, ніби подарунок у стрічку. DOCTYPE ж стоїть осторонь: <!DOCTYPE html> не має закриваючого аналога, не створює елемент у DOM і не впливає на структуру. Це інструкція парсеру, яка визначає режим обробки документа. MDN Web Docs чітко зазначає: це преамбула, що запобігає “quirks mode” — режиму, де браузер імітує поведінку Netscape 4.
У HTML5 все спрощено до мінімуму. Раніше, у HTML 4.01, DOCTYPE тягнув за собою довжелезні посилання на DTD — визначення типу документа з w3.org. Сьогодні достатньо одного рядка, і він нечутливий до регістру: <!doctype html> чи <!DOCTYPE HTML> — все сяк-так спрацює. Але стандарт радить lowercase для чистоти.
Цікаво, що парсер браузера реагує миттєво. Знайшовши DOCTYPE на першому рядку (без пробілів перед ним!), він активує standards mode. Будь-який шум — коментар чи тег — перед ним змусить браузер перейти в режим сумісності з реліквіями минулого.
Історія: як DOCTYPE еволюціонував від SGML до HTML Living Standard
Усе почалося в 1990-х, коли Тім Бернерс-Лі винайшов HTML на базі SGML. Перші версії вимагали повного посилання на DTD, щоб валідувати розмітку. HTML 2.0 мав базовий DOCTYPE, але справжній бум стався з HTML 4.01: три варіанти — Strict, Transitional, Frameset — з URL на сервери W3C.
Потім з’явився XHTML 1.0, строгий як XML, з модульною структурою. Розробники мучилися з довгими рядками, копіюючи їх з сайтів. HTML5, запущений WHATWG у 2004-му та стандартизований W3C у 2014-му, радикально спростив: <!DOCTYPE html>. Сьогодні це “living standard” — жива специфікація, що оновлюється постійно, без версійних номерів.
| Версія HTML | DOCTYPE приклад | Особливості |
|---|---|---|
| HTML 4.01 Strict | <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> | Без застарілих елементів, фрейми заборонені |
| XHTML 1.0 Transitional | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> | Дозволяє старі теги, XML-синтаксис |
| HTML5 (поточний) | <!DOCTYPE html> | Спрощений, standards mode за замовчуванням |
Джерела даних: WHATWG.org та MDN Web Docs. Ця таблиця показує еволюцію — від громіздких конструкцій до елегантної простоти. У 2025-му HTML5 домінує на 99% сайтів, за даними W3Techs.
Standards mode проти quirks mode: битва за правильний рендеринг
Без правильного DOCTYPE браузер впадає в quirks mode, де CSS інтерпретується як у 1990-х. У цьому режимі box-model ламається: padding додається до width, а не всередину, як у сучасному standards mode. Firefox, Chrome чи Edge поводяться по-різному, перетворюючи ваш сайт на лотерею.
Є три режими: quirks (повний хаос для старих сайтів), limited-quirks (часткова сумісність) та no-quirks (standards). DOCTYPE <!DOCTYPE html> гарантує останній. Тестуйте в DevTools: Document Mode покаже статус. Без DOCTYPE — привіт, IE6-подібне відображення!
- Quirks mode активується відсутністю DOCTYPE або помилками в ньому — маржа колапсує непередбачувано.
- Standards mode забезпечує точний розрахунок розмірів, підтримку flexbox, grid без сюрпризів.
- Limited-quirks — рідкісний гібрид для transitional DTD.
Практичний приклад: створіть два файли — з DOCTYPE і без. Відкрийте в браузері, додайте div з width: 100px; padding: 20px;. Без декларації ширина стане 140px. Магія режимів у дії!
Повна структура сучасного HTML-документа
Після DOCTYPE йде кореневий елемент <html> — ось перший справжній тег. Він обгортає все: <head> з метаданими та <body> з видимим контентом. Рекомендовано додати lang=”uk” для української, покращуючи доступність і SEO.
- Додайте <!DOCTYPE html> на першому рядку.
- Розпочніть <html lang=”uk”>.
- У <head>: <meta charset=”UTF-8″>, <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>, <title>.
- Потім <body> з контентом.
- Закрийте </html>.
Ось базовий шаблон, що перевершує 90% новачків:
<!DOCTYPE html> <html lang="uk"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Моя перша сторінка</title> </head> <body> <h1>Привіт, світ!</h1> <p>Це працює ідеально.</p> </body> </html>
Такий скелет масштабується: додавайте link до CSS, script для JS. Viewport мета-тег робить сайт мобільно-дружнім, а charset запобігає кракозябрам з кирилицею.
Типові помилки початківців ⚠️
- ❌ Забули DOCTYPE: Сторінка в quirks mode, CSS ламається. Перевірте DevTools!
- ❌ Пробіли чи коментарі перед: Браузер ігнорує декларацію, ніби її нема.
- ❌ Неправильний регістр чи версія: <!DOCTYPE HTML 4> може активувати limited-quirks.
- ❌ DOCTYPE в body: Парсер видасть помилку, ігнорує його.
- ❌ Без lang у html: SEO страждає, screen readers плутаються з мовою.
Ці пастки коштували годин розробникам. Валідуйте на validator.w3.org — безкоштовний рятівник.
Практичні поради для веб-розробників 2025 року
Використовуйте HTML5 boilerplate шаблони з GitHub — вони включають преконфігований viewport, charset і навіть security headers. Для SEO: правильний DOCTYPE + семантичні теги (<article>, <section>) піднімають у видачі Google. Тестуйте кросбраузерно: Chrome Canary, Firefox Nightly показують режими.
У фреймворках як React чи Vue DOCTYPE додається автоматично, але кастомні шаблони вимагають уваги. Додайте rel=”preconnect” у head для швидкості. Пам’ятайте: standards mode — запорука передбачуваності в CSS Grid і Flexbox.
| Браузер | Підтримка HTML5 DOCTYPE | Режим без DOCTYPE |
|---|---|---|
| Chrome 1+ | Повна з 2008 | Quirks |
| Firefox 1+ | Повна з 2004 | Quirks |
| Safari 3+ | Повна з 2007 | Quirks |
Джерела: caniuse.com та MDN Web Docs. Сумісність ідеальна, тож не ризикуйте.
Експериментуйте з інструментами: Lighthouse в Chrome DevTools оцінить валідність. Додавайте ARIA-атрибути для доступності — <html role=”main”>. У 2025-му Core Web Vitals Google карають за поганий рендеринг, тож DOCTYPE — ваш щит.
Коли створюєте лендінг чи блог, починайте з цього рядка. Він ніби якір у бурхливому морі веб-стандартів, тримаючи все на місці. Розробка стає приємнішою, коли знаєш, що фундамент міцний.
