HTML — основа структури вебсторінки. Він описує, де знаходиться заголовок, абзац, посилання, зображення, список, форма або інший елемент, а браузер на основі цієї розмітки будує документ, який потім оформлюється CSS і за потреби отримує інтерактивну поведінку за допомогою JavaScript.
HTML не є мовою програмування: у ньому немає звичайної моделі обчислень, умов і циклів. Це мова розмітки, завдання якої — описувати структуру та зміст контенту так, щоб браузер й інші програми могли коректно його інтерпретувати.
Що означає абревіатура HTML
HTML розшифровується як HyperText Markup Language — мова гіпертекстової розмітки. «Гіпертекст» підкреслює можливість пов’язувати документи посиланнями, а «розмітка» означає, що частини тексту отримують структурну роль за допомогою елементів.
Наочний приклад. Спрощений макет нижче показує, як логічні частини HTML-документа перетворюються на видиму сторінку ще до складного оформлення.
Це лише візуальна схема. У робочому документі такі частини оформлюються відповідними семантичними елементами, а повний каркас HTML5 наведено нижче в коді.
Найпростіша сторінка може виглядати так:
<!doctype html>
<html lang="uk">
<head>
<meta charset="utf-8">
<title>Приклад сторінки</title>
</head>
<body>
<h1>Заголовок</h1>
<p>Текст сторінки.</p>
</body>
</html>Браузер читає цей документ згори вниз, розбирає елементи й будує об’єктну модель документа — DOM. CSS і JavaScript працюють уже з цією структурою.
HTML, CSS і JavaScript — різні рівні
Початківці часто змішують ці технології, тому що в одній сторінці вони використовуються одночасно. Зручно розділяти їхні ролі:
- HTML — структура та семантика контенту;
- CSS — оформлення, розташування, розміри, кольори та адаптивність;
- JavaScript — інтерактивна логіка й зміна стану сторінки.
Наприклад, HTML створює кнопку, CSS визначає її зовнішній вигляд, а JavaScript може обробити натискання. Такий поділ допомагає підтримувати код і не перетворювати розмітку на набір презентаційних атрибутів.
Що таке HTML5 сьогодні
Термін HTML5 історично позначав велике оновлення мови, яке закріпило нові семантичні елементи, мультимедіа та багато сучасних API. Сьогодні вебплатформа розвивається постійно, тому для практичної роботи важливіше орієнтуватися на актуальний HTML, а не шукати «HTML6» як наступну окрему версію.
Документ і надалі починається з короткого doctype:
<!doctype html>Він повідомляє браузеру, що сторінку потрібно відображати у стандартному режимі. Старі довгі DTD-декларації часів HTML 4 для нових документів не потрібні.
Семантика HTML
Сучасна розмітка намагається описувати зміст блока, а не лише його зовнішній вигляд. Заголовок розмічається як h1–h6, навігація — nav, самостійний матеріал — article, основна частина сторінки — main.
Семантика корисна одразу кільком системам:
- браузеру простіше побудувати передбачувану структуру документа;
- скринрідери отримують більше інформації про призначення блоків;
- пошукові та інші автоматичні системи краще розуміють структуру контенту;
- розробнику простіше читати й підтримувати код;
- CSS можна змінювати без переписування змісту документа.
Водночас не потрібно замінювати кожен div на «семантичний» тег. div залишається нормальним універсальним контейнером там, де спеціального змістового елемента немає.
Як браузер обробляє HTML
Вихідний код сторінки й DOM — не завжди одне й те саме. Якщо розмітка містить помилкову вкладеність, браузер намагається відновити структуру за правилами парсингу. Тому візуально «працюючий» код може приховувати помилки, які проявляться під час роботи CSS, JavaScript або в іншому контексті.
Через інструменти розробника можна переглянути підсумковий DOM і побачити, як браузер інтерпретував вихідну розмітку. Це корисний спосіб навчання, особливо на списках, таблицях, формах і неправильно вкладених елементах.
Що HTML не повинен робити.
HTML не варто використовувати як заміну CSS. Старі уроки пропонували задавати колір, вирівнювання, розміри та фон презентаційними атрибутами або елементами. Для нового коду такі завдання краще вирішувати в stylesheet.
Також HTML сам по собі не виконує серверну роботу, не підключається до бази даних і не обробляє бізнес-логіку застосунку. Сервер може згенерувати HTML за допомогою PHP, Python, JavaScript або іншої технології, але браузер у підсумку отримує розмітку та пов’язані ресурси.
З чого почати вивчення HTML.
Для впевненої базової роботи не потрібно запам’ятовувати сотні елементів. Значно важливіше освоїти структуру документа, заголовки, абзаци, посилання, зображення, списки, форми та правила вкладеності.
Хороша послідовність для початківця виглядає так:
- розібратися в елементах, тегах та атрибутах;
- навчитися будувати правильну ієрархію заголовків;
- освоїти посилання, зображення та списки;
- зрозуміти семантичні контейнери;
- відокремити оформлення в CSS;
- перевіряти код в інструментах розробника та валідаторі.
Після цього простіше переходити до Flexbox, Grid, адаптивної верстки та JavaScript, тому що базова структура документа вже не викликає питань.
Підсумок
HTML — мова розмітки, яка описує структуру та зміст вебдокумента. Браузер перетворює її на DOM, CSS оформлює цю структуру, а JavaScript додає поведінку. Сучасний підхід будується на семантиці, коректній вкладеності й поділі змісту та оформлення.
Наступний логічний матеріал — «HTML-теги: що це, які бувають і як правильно використовувати».
