Що таке HTML: повне пояснення для початківців

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

Базове визначення

HTML, скорочення від HyperText Markup Language, мова гіпертекстової розмітки, це набір тегів і правил їх застосування для опису структури вебсторінки. Простими словами, HTML визначає, що саме є на сторінці, заголовок, абзац, зображення, посилання, таблиця, і як ці елементи розташовані одне відносно одного.

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

Це той момент, який шкільні уроки констатують як факт, але рідко пояснюють по суті.

Відсутність логіки й обчислень

Справжня мова програмування, наприклад Python чи JavaScript, вміє виконувати умови, цикли, обчислення, приймати рішення залежно від даних. HTML нічого цього не робить: він лише описує структуру документа, декларативно, без жодної логіки чи послідовності виконуваних команд. Тег параграфа завжди буде параграфом незалежно від жодних умов, тоді як у справжній мові програмування результат виконання коду залежить від вхідних даних і логічних перевірок.

Опис проти виконання

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

Коротка історія виникнення

HTML з’явився не на порожньому місці. Тім Бернерс-Лі, творець концепції Всесвітньої павутини, взяв за основу вже існуючу на той час мову розмітки SGML, стандартну узагальнену мову розмітки, і адаптував її принципи, включно з характерними тегами в кутових дужках, для потреб гіпертекстових документів. Перший офіційний опис мови Бернерс-Лі опублікував 1991 року, і початкова версія містила лише вісімнадцять структурних і семантичних елементів. Відтоді мова пройшла кілька великих версій, і сучасний стандарт, HTML5, додав значно більше семантичних тегів і можливостей порівняно з ранніми версіями дев’яностих років.

З чого складається HTML-документ

Розуміння базової структури документа значно спрощує подальше вивчення мови, тому варто розібрати її на найпростішому прикладі.

Теги, елементи й атрибути

Тег це команда в кутових дужках, наприклад <p>, яка позначає початок чи кінець певного елемента сторінки. Більшість тегів парні: відкривний і закривний, а вміст між ними формує сам елемент. Атрибути додають тегам додаткову інформацію, наприклад <a href=”сторінка.html”> вказує, куди саме веде посилання, де href це і є атрибут.

Мінімальний приклад документа

Найпростіший HTML-документ виглядає приблизно так: оголошення типу документа, далі кореневий тег html, всередині якого розташовані два основні блоки, head, де зберігається службова інформація на кшталт назви вкладки браузера, і body, де міститься весь видимий вміст сторінки, заголовки, текст, зображення. Браузер зчитує цю структуру зверху вниз і відображає результат саме в тому порядку та вигляді, який описаний тегами.

Як браузер перетворює HTML у сторінку

Коли ви відкриваєте сайт, браузер отримує від сервера текстовий файл із HTML-розміткою і будує на його основі внутрішню деревоподібну структуру, яку називають DOM, об’єктною моделлю документа. Кожен тег стає окремим вузлом цього дерева, а сам браузер вже вирішує, як саме відобразити кожен вузол на екрані відповідно до правил HTML і, за наявності, стилів CSS. Саме через цю деревоподібну структуру JavaScript пізніше може динамічно змінювати вміст сторінки, звертаючись до конкретних вузлів дерева, а не до самого початкового тексту розмітки.

Роль HTML серед інших вебтехнологій

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

HTML і CSS

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

HTML і JavaScript

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

Чому семантична розмітка важлива, а не тільки зовнішній вигляд

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