Що таке HTML? Історія, розбір розмітки та DOM

Майже все, що ви бачите у вебі, зокрема й цю сторінку, написано на HTML. HTML (HyperText Markup Language) - не мова програмування, а мова розмітки, що описує структуру документа: це заголовок, це абзац, це посилання, це таблиця. І HTML потрібен не лише для сайтів. Він трапляється в шаблонах електронних листів, довідковій документації, експортованих звітах і документах, "збережених як вебсторінка". У цій статті розповідаємо про історію HTML, про те, як браузер його читає й відображає на екрані, про типові проблеми і про те, що варто пам'ятати, конвертуючи файли HTML у Word чи PDF.

Що таке HTML?

HTML - мова у вигляді звичайного тексту, що розмічає вміст за допомогою тегів. Теги пишуться в кутових дужках, і більшість із них утворюють елемент із відкривного та закривного тегів:

<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="utf-8">
    <title>Приклад сторінки</title>
  </head>
  <body>
    <h1>Привіт</h1>
    <p>Цей абзац містить <a href="https://example.com">посилання</a>.</p>
  </body>
</html>

Розділ <head> містить відомості про сторінку (кодування символів, заголовок, таблиці стилів), а <body> - видимий вміст. Вигляд додається за допомогою CSS, а поведінка - за допомогою JavaScript. За такого розподілу HTML описує, чим є вміст, CSS - як він виглядає, а JavaScript - що він робить.

Коротка історія

HTML народився як частина проєкту World Wide Web, який Тім Бернерс-Лі запропонував у CERN 1989 року. Його перший браузер запрацював на комп'ютері NeXT у 1990 році. Найперші версії мови були не стільки формальним стандартом, скільки списком тегів, задокументованих у CERN. Ключові віхи відтоді:

• Листопад 1995 року, HTML 2.0: RFC 1866, автори якого Тім Бернерс-Лі та Ден Конноллі, уперше визначив HTML як формальний стандарт.
• Січень 1997 року, HTML 3.2: версія, яку W3C офіційно схвалив як загальногалузеву специфікацію.
• 24 грудня 1999 року, HTML 4.01: роками залишався основною специфікацією вебу; 27 березня 2018 року W3C офіційно позначив її як застарілу.
• 28 жовтня 2014 року, HTML5: W3C опублікував HTML5 як Рекомендацію. Разом із ним стандартизували відео, аудіо, семантичні елементи розділів і точно визначений алгоритм розбору.
• 28 травня 2019 року, єдиний стандарт: W3C і WHATWG, спільнота, яку утворили виробники браузерів, підписали меморандум про взаєморозуміння. Відповідно до нього HTML і DOM розробляються переважно у WHATWG як неверсійований "живий стандарт" (Living Standard).

Отже, "HTML5" сьогодні фактично означає "актуальний HTML"; офіційна специфікація - це HTML Living Standard, що постійно оновлюється.

Наскільки він поширений? За статистикою W3Techs на 15 жовтня 2026 року, 97,8% вебсайтів із відомою мовою розмітки використовують HTML. Те саме джерело повідомляє, що 99,1% вебсайтів із відомим кодуванням символів використовують UTF-8.

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

Від інших форматів документів HTML відрізняється тим, що навіть погано написані документи кожен браузер інтерпретує однаково. Для цього HTML Living Standard визначає детальну модель розбору:

1. Визначення кодування: спершу браузер має перетворити вхідні байти на символи. Він по черзі перевіряє наявність BOM, кодування, оголошене в HTTP-заголовку сервера, і оголошення <meta charset> у перших 1024 байтах документа; якщо нічого не знайдено, він робить обґрунтоване припущення.
2. Токенізація: скінченний автомат розбиває текст на токени, як-от відкривні теги, закривні теги, коментарі, DOCTYPE і символи.
3. Побудова дерева: токени обробляються відповідно до режимів вставлення, як-от "in body" або "in table". Парсер тримає стек відкритих елементів і виправляє неправильно вкладені теги за визначеними правилами.
4. DOM: результатом є дерево об'єктів, що називається Document Object Model (DOM). До цього дерева застосовується CSS, а JavaScript читає й змінює його.

Специфікація прямо зазначає, що обробку помилок розбору чітко визначено. Наприклад, якщо написати <div/>, HTML ігнорує кінцеву скісну риску, тож наступні елементи опиняються всередині цього div. Незакритий <p> закривається автоматично, щойно з'являється наступний блоковий елемент. Саме ця поблажливість дає вебу змогу працювати попри незліченні недосконалі сторінки, але водночас означає, що будь-який інструмент, який конвертує HTML у формат документа, мусить дотримуватися тих самих правил.

Де використовують HTML?

• Сайти та вебзастосунки: каркас кожної вебсторінки.
• Електронна пошта: відформатовані листи й розсилки пишуть на HTML.
• Документація: довідкові сторінки, документація до програм і сайти, згенеровані з Markdown.
• Електронні книжки: формат EPUB пакує вміст як документи XHTML.
• Звіти й експорт: багато програм створюють звіти в HTML, і результат команди Word "Зберегти як вебсторінку" - теж HTML.

Переваги й недоліки

Якими програмами відкрити HTML?

Кожен браузер, зокрема Chrome, Firefox, Safari та Edge, відображає HTML. Для редагування вихідного коду достатньо редактора коду, як-от Visual Studio Code, або будь-якого текстового редактора. Microsoft Word і LibreOffice Writer можуть відкривати файли HTML і редагувати їх як документи, хоча складна верстка на CSS там спрощується.

Типові проблеми та як їх розв'язати

Спеціальні символи відображаються спотворено

Кодування сторінки не вказано або вказано неправильно. Додайте <meta charset="utf-8"> на початку <head> і переконайтеся, що файл справді збережено в UTF-8. Якщо сервер оголошує інше кодування, виправте також HTTP-заголовок.

У збереженій сторінці немає зображень чи стилів

Файли HTML часто підтягують зображення та CSS з окремих файлів або з адрес в інтернеті. Перенесіть лише файл .html, і ці посилання зламаються. Скористайтеся параметром браузера "Вебсторінка повністю" під час збереження або вбудуйте зображення в документ.

Під час друку сторінка розсипається

Верстка, розрахована на екрани, може не вміщатися на папері. Визначення правил @media print і задання розміру паперу та полів через @page у CSS значно покращують друкований результат.

Поради щодо конвертації HTML

У нашому конвертері файли HTML завантажуються на наш сервер і видаляються протягом 30 хвилин. Під час читання файлу кодування визначається за BOM, потім за оголошенням <meta charset>, а потім за самим вмістом; застарілі турецькі сторінки не в UTF-8 читаються як Windows-1254. Вміст <body> документа та блок <style> сторінки зберігаються, а фрагменти HTML без тегу <body> обробляються як є.

• HTML у PDF працює в рушії браузера: застосовуються стилі CSS для друку, враховується розмір сторінки, заданий через @page (інакше A4), а кольори тла друкуються. З міркувань безпеки JavaScript не виконується, а зображення, шрифти чи таблиці стилів з інтернету не завантажуються; використовуються лише ресурси, вбудовані в документ (data: URI). Якщо хочете бачити зображення в результаті, вбудуйте їх у HTML.
• HTML у Word за допомогою LibreOffice переносить у DOCX заголовки, списки, таблиці, вирівнювання та вбудовані зображення. Складна верстка на CSS (flex, grid) не має відповідника у Word і спрощується.
• HTML у Markdown ідеально підходить, щоб перенести вебсторінку чи довідкову статтю до репозиторію документації: заголовки, виділення, списки, таблиці, посилання й блоки коду зберігаються, а інформація про стилі відкидається.
• У зворотному напрямку Word у HTML вбудовує зображення у файл і створює один самодостатній документ HTML з оголошеним кодуванням символів, тож кирилиця та літери з діакритикою правильно відображаються в браузері.

Часті запитання

Чи є HTML мовою програмування?

Ні. HTML - мова розмітки: вона описує структуру вмісту, але не має циклів, умов чи обчислень. Щоб додати сторінці поведінку, використовують JavaScript.

Чим HTML5 відрізняється від HTML?

HTML5 - назва основної версії, що стала Рекомендацією W3C 2014 року. З 2019 року HTML розвивається у WHATWG без номерів версій як "HTML Living Standard". На практиці HTML5 і HTML сьогодні означають одне й те саме.

Як відкрити файл HTML?

Двічі клацніть його, і він відкриється в браузері за замовчуванням. Щоб побачити вихідний код, відкрийте файл у текстовому редакторі або скористайтеся параметром браузера "Переглянути код сторінки".

Чому під час конвертації HTML у PDF зникають зображення?

Якщо зображення завантажуються з адреси в інтернеті, наш конвертер з міркувань безпеки їх не завантажує. Вбудуйте зображення в HTML як data: URI або спершу конвертуйте документ у Word і додайте зображення там.

Чи безпечно відкривати файл HTML?

HTML може містити JavaScript, тож будьте обережні з файлами з невідомих джерел. Сторінки HTML, що надходять як вкладення в листах і просять ввести пароль, - поширений прийом фішингу.

Джерела

• WHATWG: HTML Living Standard, Parsing HTML documents
• Меморандум про взаєморозуміння між W3C і WHATWG (28 травня 2019 року)
• Пресреліз W3C: Рекомендація HTML5 (28 жовтня 2014 року)
• W3C: HTML 4.01 Specification
• IETF RFC 1866: Hypertext Markup Language - 2.0
• Дейв Раґґетт: історія HTML
• W3Techs: статистика використання мов розмітки на вебсайтах