HTML з нуля: Тег DOCTYPE в HTML. Урок №23 Overcod.net

HTML з нуля: Тег DOCTYPE в HTML. Урок №23

HTML с нуля: Тег DOCTYPE в HTML. Урок №23

Коли я тільки починав робити сайти на замовлення, я думав: «Головне — щоб дизайн був крутий, а код… ну, браузер якось розбереться». Ох, як же я помилявся. Мій перший серйозний провал стався через один-єдиний рядок у самому верху файлу, яким я знехтував.

Сьогодні розберемо DOCTYPE — крихітний елемент, який може або врятувати ваш проєкт, або перетворити його на візуальний хаос.

Що це взагалі таке?

Багато хто помилково називає <!DOCTYPE html> тегом. Насправді це декларація. Вона не належить до HTML-тегів безпосередньо, а служить «інструкцією» для браузера.

Уявіть, що ви приходите в бібліотеку. Якщо ви просто кинете книгу на стіл, бібліотекар витратить час, щоб зрозуміти, куди її покласти. Але якщо ви одразу скажете: «Це сучасний детектив українською», робота піде швидше. DOCTYPE каже браузеру: «Гей, це документ на сучасному HTML5, читай його саме так!»

Моя помилка: «Режим примх» (Quirks Mode)

На світанку кар’єри я верстав макет для клієнта. У Chrome все виглядало ідеально, а в Safari та старому IE верстка «попливла»: відступи стали величезними, шрифти зменшилися, а блоки накладалися один на одного.

Причина була простою: я забув прописати DOCTYPE.

Коли браузер не бачить цього рядка, він переходить у Quirks Mode (режим примх). У цьому режимі він імітує баги старих браузерів з 90-х, щоб «древні» сайти не ламалися. Але для сучасного коду це отрута.

Як правильно писати DOCTYPE сьогодні

Раніше (в епоху HTML4) цей рядок виглядав як заклинання з Гаррі Поттера: довгий, страшний і з купою посилань. На щастя, з приходом HTML5 все спростилося до межі.

Ось єдиний стандарт, який вам потрібен у 2026 році:

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок сторінки</title>
  </head>
  <body>
    </body>
</html>

III причини, чому це важливо для вашого бізнесу:

Кросбраузерність. Сайт виглядатиме однаково у всіх сучасних браузерах.
Валідація. Без DOCTYPE сервіси перевірки коду просто не зможуть адекватно оцінити якість вашої верстки.
Продуктивність. Браузер не витрачає ресурси на «вгадування» стандарту.

Запам’ятайте: Цей рядок завжди має бути ПЕРШИМ. Перед ним не повинно бути ні пробілів, ні порожніх рядків, ні коментарів.

Резюме

Якщо ви хочете створювати якісні сайти на замовлення, не давайте браузеру приводу для фантазій. Починайте кожен свій проєкт з <!DOCTYPE html>. Це ознака професіоналізму та страхування від 90% проблем із відображенням верстки.