Що таке HTML і яку роль він виконує у вебсторінці?

1. Що таке HTML простими словами?

HTML (HyperText Markup Language — мова розмітки гіпертексту) — це стандартизована мова розмітки документів, яка використовується для перегляду вебсторінок у браузері. Вона не є мовою програмування, оскільки не виконує обчислень чи логічних операцій. Замість цього HTML описує та визначає «каркас» або структуру вмісту сторінки.

2. Яку роль HTML виконує у створенні вебсторінки?

HTML відповідає за організацію та структурування вмісту сторінки. За допомогою HTML-позначень (тегів) розробник вказує браузеру, де на сторінці розміщені заголовки, текстові абзаци, списки, гіперпосилання, зображення, таблиці чи інтерактивні форми. Браузер зчитує ці позначення, будує внутрішню структуру (DOM) і перетворює код на візуальний інтерфейс для користувача.

3. З яких основних частин складається HTML-документ?

Класичний HTML-документ складається з трьох ключових елементів, які обгортаються у кореневий тег <html>:

Декларація типу документа (<!DOCTYPE html>): розміщується на самому початку і повідомляє браузеру, за яким стандартом (наприклад, HTML5) слід обробляти файл.

Шапка або «голова» документа (<head>): технічний розділ із метаданими.

Тіло документа (<body>): основна частина, що містить видимий контент.

4. Для чого потрібні секції <head> і <body>?

Секція <head>: призначена для зберігання метаданих і технічних відомостей про сторінку, які не відображаються безпосередньо у вікні браузера. Вона містить кодування документа (<meta charset="utf-8">), заголовок вкладки (<title>), опис для пошукових систем (<meta name="description">) та підключення файлів стилів (<link>).

Секція <body>: містить увесь контент сторінки, який бачить відвідувач у браузері — заголовки, тексті, світлини, списки, таблиці та кнопки.

5. Що таке HTML-теги, елементи та атрибути?

Теги: синтаксичні конструкції, написані в кутових дужках (наприклад, <p> та </p>), які позначають початок і кінець розмітки. Поодинокі (порожні) теги (наприклад, <img /> або <br />) не мають закривальної частини й вмісту.

Елементи: базові будівельні блоки HTML, які складаються з початкового тегу, вмісту (контенту) та кінцевого тегу (наприклад, <p>Це абзац</p>).

Атрибути: параметри у форматі «назва-значення» (наприклад, src="photo.jpg" або href="..."), які додаються до початкового тегу і надають елементу додаткові властивості чи інструкції. Прикладами загальних атрибутів є id, class та title.

6. Яку роль відіграють заголовки, абзаци, посилання, зображення, списки та форми?

Заголовки (<h1>–<h6>): створюють чітку ієрархічну структуру тексту, виділяючи головну тему та підтеми сторінки.

Абзаци (<p>): розбивають простий текст на логічні та зручні для читання блоки.

Посилання (<a>): реалізують гіпертекст, дозволяючи переходити між різними сторінками чи розділами документа.

Зображення (<img>): вбудовують візуальний контент через атрибут src та надають текстовий опис у тегу alt на випадок, якщо картинка не завантажиться.

Списки (<ul>, <ol>, <dl>): впорядковують переліки фактів, кроків інструкції або пар «термін-визначення».

Форми (<form>): містять елементи керування (поля введення, кнопки, розкривні списки) для збору даних від користувача та їх відправлення на сервер чи пошту.

7. Що таке семантичний HTML і навіщо використовувати теги header, nav, main, article, section, footer?

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

<header>: позначає шапку всієї сторінки або окремої статті (містить логотип, назву, навігацію).

<nav>: виділяє блоки основних навігаційних посилань.

<main>: вказує на головний, унікальний вміст конкретної сторінки.

<article>: позначає самостійний, завершений фрагмент інформації (статтю, допис у блозі, картку товару), який зберігає зміст навіть окремо від сторінки.

<section>: позначає тематичний розділ усередині сторінки або статті (наприклад, розділи «Про нас» чи «Послуги»).

<footer>: позначає підвал сторінки або розділу (містить копірайт, контактні дані, юридичні посилання).

8. Чим HTML відрізняється від CSS і JavaScript?

HTML визначає структуру та зміст сторінки (що саме знаходиться на сторінці — заголовок, текст, кнопка).

CSS відповідає за зовнішній вигляд та стиль (кольори, шрифти, відступи, закруглення кутів, позиціонування та адаптивність).

JavaScript надає сторінці поведінку та динаміку (реагує на кліки, відкриває меню, надсилає дані без перезавантаження сторінки).

Аналогія з будинком: HTML — це стіни й каркас; CSS — це дизайн інтер'єру та оздоблення; JavaScript — це автоматика та електрика.

9. Чому правильна HTML-структура важлива для Googlebot, Crawling, Indexing та SEO?

Розуміння контексту: Пошуковий робот (Googlebot) читає код послідовно зверху вниз і спирається на семантичні теги, щоб оцінити тему та важливість кожного блоку.

Ієрархія сигналів: Тег <h1> є найважнішим сигналом про головну тему сторінки, а <h2>–<h6> показують структуру підтем.

Пріоритезація індексації: Теги <main> та <article> прямо вказують роботам, де міститься цінний унікальний контент, який потрібно індексувати в першу чергу.

Розширені результати (Sitelinks): Позначення меню через тег <nav> допомагає алгоритмам Google правильно оцінювати вагу посилань і формувати додаткові посилання у видачі.

10. Які типові HTML-помилки можуть погіршувати доступність, структуру сторінки або її розуміння пошуковими системами?

Зловживання <div> та <span> («div-soup»): верстка всього підряд безсемантичними блоками позбавляє пошуковики та скрінрідери підказок про структуру.

Порушення ієрархії заголовків: використання кількох <h1> на сторінці, пропуски рівнів (наприклад, <h1> одразу до <h3>) або вибір тегів <h1>–<h6> лише заради розміру шрифту замість стилізації через CSS.

Проблеми з тегом alt у зображеннях: відсутність атрибута alt або заповнення його некорисними словами (alt="image"), що заважає людям із вадами зору та погіршує індексацію в Google Images.

Форми без тегу <label>: використання placeholder замість повноцінного <label> позбавляє користувачів асистивних технологій можливості дізнатися призначення поля.

Несемантичні кнопки та посилання: створення кнопкоподібних елементів через <div onClick="..."> чи <span style="cursor:pointer"> робить їх недоступними при навігації клавіатурою (Tab/Enter) та непомітними для скрінрідерів.

Приховання рамки фокусу (outline: none): вимкнення контуру фокусованих елементів у CSS позбавляє користувачів клавіатури зорового орієнтира.

Верстка макета через таблиці (<table>): використання таблиць для структури сторінки змушує асистивні технології зачитувати макет як табличні дані, створюючи хаос під час озвучення.