HTML — це мова розмітки, яка описує структуру вебсторінки: що на ній є і в якому порядку. Мовою програмування її не вважають, бо вона нічого не обчислює і не приймає рішень. Нижче — чому це так, коротка історія мови, будова документа і місце HTML серед інших вебтехнологій.
Базове визначення
HTML (HyperText Markup Language, мова гіпертекстової розмітки) — це набір тегів і правил їх застосування для опису структури вебсторінки. Простими словами, HTML визначає, що саме є на сторінці — заголовок, абзац, зображення, посилання, таблиця — і як ці елементи розташовані одне відносно одного.
Чому HTML не є мовою програмування
Відсутність логіки й обчислень
Мова програмування, наприклад Python чи JavaScript, вміє виконувати умови, цикли, обчислення, приймати рішення залежно від даних. HTML нічого цього не робить: він лише декларативно описує структуру документа, без логіки чи послідовності команд. Тег параграфа завжди буде параграфом, тоді як у мові програмування результат виконання коду залежить від вхідних даних і логічних перевірок.
Опис проти виконання
Простіше кажучи, HTML описує, а не виконує. Це схоже на різницю між кресленням будинку і будівельною бригадою: креслення показує, де стіни, двері й вікна, але саме нічого не будує і не приймає рішень у процесі.
Коротка історія виникнення
Тім Бернерс-Лі, творець концепції Всесвітньої павутини, взяв за основу вже існуючу мову розмітки SGML (стандартну узагальнену мову розмітки) і адаптував її принципи, включно з тегами в кутових дужках, для гіпертекстових документів. Перший публічний опис мови Бернерс-Лі оприлюднив 1991 року, і початкова версія містила лише вісімнадцять елементів. Відтоді мова пройшла кілька великих версій, а сучасний стандарт HTML5 додав значно більше семантичних тегів і можливостей порівняно з версіями дев’яностих років.
З чого складається HTML-документ
Теги, елементи й атрибути
Тег — це позначка в кутових дужках, наприклад <p>, яка позначає початок чи кінець певного елемента сторінки. Більшість тегів парні: відкривний і закривний, а вміст між ними формує сам елемент. Атрибути додають тегам додаткову інформацію: наприклад, у <a href=”/storinka.html”> атрибут href вказує, куди веде посилання.
Мінімальний приклад документа
Найпростіший HTML-документ складається з оголошення типу документа і кореневого тегу html, всередині якого розташовані два основні блоки: head зі службовою інформацією на кшталт назви вкладки браузера і body з усім видимим вмістом сторінки — заголовками, текстом, зображеннями. Браузер зчитує цю структуру зверху вниз і відображає результат у тому порядку та вигляді, який описаний тегами.
Як браузер перетворює HTML у сторінку
Коли ви відкриваєте сайт, браузер отримує від сервера текстовий файл із HTML-розміткою і будує на його основі деревоподібну структуру — DOM, об’єктну модель документа. Кожен тег стає окремим вузлом цього дерева, а браузер вирішує, як відобразити кожен вузол на екрані відповідно до правил HTML і, за наявності, стилів CSS. Через це дерево JavaScript може динамічно змінювати вміст сторінки, звертаючись до конкретних вузлів.
Роль HTML серед інших вебтехнологій
У сучасній розробці HTML працює в парі з іншими технологіями, кожна з яких відповідає за свою частину.
HTML і CSS
Якщо HTML визначає, що є на сторінці, то CSS (каскадні таблиці стилів) визначає, як це виглядає: кольори, шрифти, відступи, розташування елементів. Один і той самий HTML-документ може виглядати абсолютно по-різному залежно від застосованих стилів.
HTML і JavaScript
JavaScript додає сторінці поведінку й інтерактивність: реакцію на клік, анімацію, оновлення вмісту без перезавантаження сторінки. Якщо продовжити аналогію з будівництвом, HTML — це стіни й перекриття, CSS — оздоблення й фарба, а JavaScript — електрика й автоматика, яка змушує двері відчинятися самі й світло вмикатися при русі.
Чому семантична розмітка важлива, а не тільки зовнішній вигляд
HTML5 запровадив семантичні теги на кшталт article, nav, header, footer, які позначають смислову роль блоку на сторінці. Це важливо з двох практичних причин. По-перше, програми зчитування екрана для людей з порушеннями зору покладаються на семантичну розмітку, щоб коректно озвучити структуру сторінки. По-друге, пошуковим системам легше розібрати сторінку з чіткою семантичною структурою, ніж набір однакових безіменних блоків. Тому вибір тегів впливає на доступність сайту і на те, як його бачать пошукові системи.
