HTML

Найпопулярніші запитання та відповіді на співбесіді з HTML

Базові концепції HTML

1. Що означає абревіатура HTML і яке її призначення?

HTML

HTML — HyperText Markup Language, мова розмітки для структурування вмісту вебсторінок (текст, зображення, посилання тощо).
Призначення — описувати структуру та семантику контенту, який браузер відображає користувачу.

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

HTML

HTML — описує структуру веб-сторінки (що є: заголовки, абзаци, зображення, посилання).
CSS — відповідає за оформлення і стиль (як виглядає: кольори, шрифти, розташування).
JavaScript — додає динаміку та інтерактивність (що робить: обробка подій, зміна DOM, анімації, логіка).

Разом вони формують основу фронтенд-розробки: HTML — кістяк, CSS — одяг, JavaScript — поведінка.

3. Що таке HTML теги?

HTML

HTML теги — це інструкції (команди), які визначають структуру та зміст веб-сторінки.
Теги пишуться у кутових дужках < >.
Більшість тегів мають відкриваючу та закриваючу частини:
```
<p>Текст абзацу</p>
```

Деякі теги самозакриваючі:

<br />
<img src="image.jpg" alt="Зображення" />

Теги можуть мати атрибути для додаткової інформації:
```
<a href="https://example.com">Посилання</a>
```

4. Що таке HTML елементи?

HTML

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

Структура елемента:

<tagname attribute="value">контент</tagname>

Приклади:

<h1>Заголовок</h1> — елемент заголовка
<p>Абзац тексту</p> — елемент абзацу
<img src="photo.jpg" alt="Фото"> — елемент зображення (самозакриваючий)

Елементи можуть містити інші елементи (вкладеність) і мати атрибути для додаткових налаштувань.

5. Опишіть базову структуру HTML-сторінки?

HTML

Основна структура HTML-документа:

<!DOCTYPE html>
<!-- Оголошення типу документа -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Назва сторінки</title>
  </head>
  <body>
    <!-- Вміст сторінки -->
  </body>
</html>

Складові:

<!DOCTYPE html> — вказує, що документ у HTML5.
<html> — кореневий елемент.
<head> — метадані (кодова сторінка, заголовок, стилі, скрипти).
<body> — видимий вміст сторінки.

6. Що таке DOCTYPE і навіщо його використовують?

HTML

DOCTYPE (Document Type Declaration) — це декларація типу документа, яка повідомляє браузеру, яку версію HTML використовує сторінка.

Синтаксис для HTML5:

<!DOCTYPE html>

Призначення:

Запобігає режиму сумісності (quirks mode) браузера
Забезпечує коректне відображення сторінки згідно зі стандартами
Допомагає валідаторам перевіряти правильність коду
Має стояти першим рядком HTML-документа

7. Яка поточна версія HTML?

HTML

Поточна версія — HTML5.
HTML5 є "Living Standard" (живий стандарт), що означає постійне оновлення без формальних нових версій.
Підтримується всіма сучасними браузерами.
Включає нові семантичні елементи, API, покращену підтримку мультимедіа та багато інших функцій.
Розробляється консорціумом WHATWG (Web Hypertext Application Technology Working Group).

8. Що роблять атрибути DOCTYPE та html lang?

HTML

<!DOCTYPE html> — повідомляє браузеру, що документ написаний у стандарті HTML5, щоб уникнути режиму сумісності.
lang у <html> — вказує мову вмісту сторінки для пошукових систем, читачів екрану та інших сервісів (наприклад, lang="uk").

Приклад:

<!DOCTYPE html>
<html lang="uk">
  <!-- Решта документа -->
</html>

Ці атрибути покращують доступність, SEO та коректність відображення сторінки.

9. Що описується в тегі head?

HTML

Тег <head> містить метаінформацію про документ:

Назва сторінки — <title>.
Мета-теги — <meta> (характеристики документа, ключові слова, опис).
Підключення стилів — <link> (CSS-файли).
Скрипти — <script> (підключення JavaScript).
Фавікон — <link> для іконки сайту.
Інші налаштування — наприклад, <base> для базового URL.

Приклад:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Назва сторінки</title>
  <link rel="stylesheet" href="styles.css" />
  <script src="script.js"></script>
</head>

10. Яка різниця між тегами head та body?

HTML

<head> — містить метадані про документ (назва, кодування, стилі, скрипти, SEO-теги), не відображається безпосередньо на сторінці.
<body> — містить видимий контент для користувача (текст, зображення, кнопки, відео тощо).

Ключові відмінності:

<head>:

Невидимий для користувача
Містить службову інформацію
Налаштування сторінки
SEO-дані

<body>:

Видимий контент
Те, що бачить користувач
Інтерактивні елементи
Основний вміст сторінки

Основи роботи з текстом і структурою

11. Що таке пробільний простір в HTML?

HTML

Пробільний простір в HTML — це пробіли, табуляції та переноси рядків між елементами.

Поведінка браузера:

Браузер автоматично згортає (схлопує) декілька пробілів в один
Кілька переносів рядків замінюються одним пробілом
Провідні та кінцеві пробіли ігноруються

Приклад:

<p>Цей текст має багато пробілів</p>

Відображається як: "Цей текст має багато пробілів"

Для збереження пробілів використовуйте CSS white-space: pre або тег <pre>

12. Що таке порожні елементи в HTML?

HTML

Порожні елементи (void elements) — це HTML теги, які не мають контенту і закриваючого тега.

Основні порожні елементи:

<br> — розрив рядка
<hr> — горизонтальна лінія
<img> — зображення
<input> — поле вводу
<meta> — метадані
<link> — посилання на ресурс

Синтаксис:

<!-- Правильно -->
<img src="photo.jpg" alt="Фото" />
<br />
<input type="text" name="name" />

<!-- В XHTML/XML стилі (необов'язково в HTML5) -->
<img src="photo.jpg" alt="Фото" />
<br />

13. У чому різниця між елементами div і span?

HTML

`<div>` (блоковий елемент):

Займає всю доступну ширину
Починається з нового рядка
Має верхні та нижні відступи
Використовується для великих блоків контенту

`<span>` (вбудований елемент):

Займає тільки необхідну ширину
Не переносить на новий рядок
Не має вертикальних відступів
Використовується для маленьких фрагментів тексту

Приклад:

<div>Це блоковий елемент</div>
<div>Він займає всю ширину</div>

<p>Це <span>вбудований елемент</span> всередині абзацу.</p>

14. Яка різниця між тегами b та strong?

HTML

<b> — просто робить текст візуально жирним, без додаткового смислового значення.
<strong> — робить текст жирним і додає семантичний акцент (важливість), що враховується пошуковими системами та скрінрідерами.

Приклади:

<p>Цей текст <b>жирний</b> тільки візуально.</p>
<p>Цей текст <strong>важливий</strong> за змістом.</p>

Рекомендація: Використовуйте <strong> для смислово важливого тексту, <b> — тільки для стилізації без семантичного значення.

15. Коли слід використовувати em замість i, і навпаки?

HTML

<em> — виділяє текст курсивом з семантичним наголосом (інтонаційне чи логічне підкреслення важливості).
<i> — відображає текст курсивом без зміни смислу (наприклад, іноземні слова, технічні терміни, назви).

Приклади:

<!-- Семантичний наголос -->
<p>Я <em>дуже</em> хочу це зробити!</p>

<!-- Стилістичне виділення -->
<p>Фільм <i>Титанік</i> вийшов в 1997 році.</p>
<p>Слово <i>bonjour</i> означає "привіт" французькою.</p>

Якщо потрібно передати смисловий акцент — використовуємо <em>. Якщо тільки стиль відображення — <i>.

16. Яке призначення тегів small, s та mark?

HTML

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

Приклади:

<p>Ціна: <s>100 грн</s> 80 грн</p>
<p><mark>Важливо:</mark> Термін дії до 31 грудня.</p>
<p>Основний текст. <small>© 2023 Всі права захищені.</small></p>

17. Як створити абзац або розрив рядка в HTML?

HTML

Абзац:

<p>Текст абзацу</p>

створює блок з відступами зверху і знизу.

Розрив рядка:

Текст першого рядка<br />Текст другого рядка

переносить текст без створення нового абзацу.

Коли використовувати:

<p> — для окремих абзаців тексту
<br> — для примусового переносу в межах одного блоку (адреси, вірші)

18. Для чого використовуються теги sub та sup?

HTML

<sub> — підрядковий текст (нижче базової лінії)
<sup> — надрядковий текст (вище базової лінії)

Використання:

Математичні формули:

<p>H<sub>2</sub>O - формула води</p>
<p>E = mc<sup>2</sup> - формула Ейнштейна</p>

Хімічні формули:

<p>CO<sub>2</sub> - вуглекислий газ</p>

Сноски:

<p>Цей факт<sup>1</sup> потребує підтвердження.</p>

19. Розкажіть про тег samp?

HTML

Тег <samp> використовується для позначення тексту, який є результатом виконання комп'ютерної програми, наприклад, повідомлень про помилки або вихідних даних. Він відображається звичайним шрифтом, але зазвичай використовується для стилістичних цілей.

Приклад використання тегу <samp>:

<p>Результат виконання програми: <samp>Помилка: Невірний ввід</samp></p>
<p>Командний рядок повернув: <samp>Hello World!</samp></p>

Пов'язані теги:

<code> — для фрагментів коду
<kbd> — для клавіш клавіатури
<var> — для змінних

Атрибути та їх використання

20. Які глобальні атрибути є в HTML?

HTML

Глобальні атрибути можна використовувати з будь-яким HTML елементом:

Основні глобальні атрибути:

id — унікальний ідентифікатор елемента
class — CSS класи для стилізації
style — вбудовані стилі CSS
title — підказка при наведенні
lang — мова контенту
dir — напрям тексту (ltr/rtl)
tabindex — порядок фокусування
hidden — приховує елемент
data-* — користувацькі атрибути

Атрибути подій:

onclick, onmouseover, onload тощо

Приклад:

<div
  id="main-content"
  class="container highlight"
  title="Основний контент сторінки"
  lang="uk"
  data-section="hero"
>
  Контент...
</div>

21. Як використовують атрибути class та id? Яка різниця між класами та ідентифікаторами?

HTML

Атрибут `id`:

Унікальний ідентифікатор елемента на сторінці
Може бути тільки один елемент з конкретним id
Використовується для JavaScript, якірних посилань, CSS стилізації

Атрибут `class`:

Групує елементи за спільними характеристиками
Один клас можна застосувати до багатьох елементів
Один елемент може мати кілька класів

Приклади:

<!-- ID - унікальний -->
<div id="header">Заголовок сайту</div>
<div id="navigation">Навігація</div>

<!-- Class - може повторюватися -->
<p class="highlight">Важливий текст</p>
<p class="highlight large">Великий важливий текст</p>
<span class="highlight">Ще важливий текст</span>

CSS селектори:

#header {
  color: blue;
} /* ID селектор */
.highlight {
  color: red;
} /* Class селектор */

Рекомендація: Використовуйте id для унікальних елементів і якірних посилань, class — для стилізації та групування.

22. Яке призначення атрибута alt в HTML?

HTML

alt — альтернативний текст для зображення.

Призначення:

Показується, якщо зображення не завантажилось.
Допомагає скрінрідерам робити сайт доступним.
Використовується для SEO.

Приклади:

<!-- Інформативне зображення -->
<img src="chart.png" alt="Графік продажів за 2023 рік" />

<!-- Декоративне зображення -->
<img src="decoration.png" alt="" />

<!-- Зображення-посилання -->
<a href="/home">
  <img src="logo.png" alt="Повернутися на головну сторінку" />
</a>

Важливо: Для декоративних зображень використовуйте порожній alt="", щоб скрін-рідери їх ігнорували.

23. Навіщо використовується тег label?

HTML

<label> пов'язує текстову підказку з елементом форми, щоб користувачу було зрозуміло, що вводити.

Переваги:

Покращує доступність (скрінрідери читають підказку разом із полем).
Клік по автоматично фокусує пов'язане поле.

Приклади:

Зовнішній label (через атрибути for та id):

<label for="email">Email:</label> <input type="email" id="email" name="email" />

Внутрішній label (обгортає елемент):

<label>
  <input type="checkbox" name="agree" />
  Погоджуюсь з умовами
</label>

Для групи radio buttons:

<label for="size-small">
  <input type="radio" id="size-small" name="size" value="small" />
  Малий
</label>
<label for="size-large">
  <input type="radio" id="size-large" name="size" value="large" />
  Великий
</label>

24. Що таке атрибути data-* і коли їх слід використовувати?

HTML

data-* — це користувацькі атрибути для зберігання будь-яких додаткових даних у елементі HTML.

Синтаксис:

<div data-user-id="123" data-role="admin" data-last-login="2023-12-01"></div>

Коли використовувати:

Зберігати інформацію для JavaScript без впливу на відображення.
Легко отримувати через element.dataset.userId або element.dataset.role.
Наприклад, для інтерактивних елементів, налаштувань чи передачі даних у JS.

Приклад використання з JavaScript:

<button data-action="delete" data-id="42">Видалити</button>

<script>
  const button = document.querySelector('button');
  console.log(button.dataset.action); // "delete"
  console.log(button.dataset.id); // "42"
</script>

25. Що таке data-атрибути, в яких випадках їх використовуєте?

HTML

data-* атрибути дозволяють зберігати користувацькі дані прямо в HTML елементах.

Випадки використання:

1. Конфігурація компонентів:

<div class="slider" data-speed="500" data-autoplay="true">
  <!-- Контент слайдера -->
</div>

2. Ідентифікація для JavaScript:

<tr data-user-id="123" data-status="active">
  <td>John Doe</td>
  <td><button data-action="edit">Редагувати</button></td>
</tr>

3. Стан елементів:

<div class="modal" data-visible="false">
  <!-- Модальне вікно -->
</div>

4. CSS стилізація за станом:

[data-status='active'] {
  color: green;
}
[data-status='inactive'] {
  color: gray;
}

Переваги: Валідний HTML, легкий доступ через JavaScript, не впливає на стилізацію.

Посилання і навігація

26. Як створити гіперпосилання в HTML?

HTML

Використовуємо тег <a>:

<a href="https://example.com">Текст посилання</a>

href — адреса, куди веде посилання.
Можна додати target="_blank" для відкриття в новій вкладці.

Різні типи посилань:

<!-- Зовнішнє посилання -->
<a href="https://google.com">Google</a>

<!-- Внутрішнє посилання -->
<a href="/about">Про нас</a>

<!-- Email посилання -->
<a href="mailto:[email protected]">Написати листа</a>

<!-- Телефонне посилання -->
<a href="tel:+380123456789">Зателефонувати</a>

<!-- Посилання на файл -->
<a href="document.pdf">Завантажити PDF</a>

27. Що таке внутрішні та зовнішні гіперпосилання і які вони мають атрибути?

HTML

Зовнішні посилання:

Ведуть на інші веб-сайти
Починаються з http:// або https://

Внутрішні посилання:

Ведуть на сторінки того самого сайту
Використовують відносні або абсолютні шляхи

Основні атрибути:

<!-- Зовнішнє посилання -->
<a
  href="https://example.com"
  target="_blank"
  rel="noopener noreferrer"
  title="Перейти на example.com"
>
  Зовнішній сайт
</a>

<!-- Внутрішнє посилання -->
<a href="/contact" title="Сторінка контактів"> Контакти </a>

<!-- Якірне посилання -->
<a href="#section1" title="Перейти до розділу 1"> Розділ 1 </a>

Атрибути:

href — URL адреса
target — де відкрити (_blank, _self, _parent, _top)
rel — відношення до цільової сторінки
title — підказка при наведенні

28. Яка різниця між відносними та абсолютними URL-адресами?

HTML

Абсолютний URL — містить повний шлях із протоколом і доменом.

<a href="https://example.com/page.html">Посилання</a>

Використовується для переходів на зовнішні ресурси або між доменами.

Відносний URL — вказує шлях відносно поточного документа.

<a href="/page.html">Посилання</a>
<a href="page.html">Посилання</a>
<a href="../page.html">Посилання</a>

Типи відносних URL:

<!-- Відносно кореня сайту -->
<a href="/about/team.html">Команда</a>

<!-- Відносно поточної папки -->
<a href="contact.html">Контакти</a>

<!-- На рівень вище -->
<a href="../index.html">Головна</a>

<!-- На кілька рівнів вище -->
<a href="../../docs/manual.pdf">Інструкція</a>

Зручно для внутрішніх сторінок сайту, особливо при розробці й тестуванні.

29. Як відкрити посилання в новій вкладці?

HTML

Додати атрибут target="_blank" до тега <a>:

<a href="https://example.com" target="_blank">Відкрити в новій вкладці</a>

Рекомендовано також додати rel="noopener noreferrer" для безпеки:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Відкрити в новій вкладці
</a>

Інші значення target:

<!-- Поточна вкладка (за замовчуванням) -->
<a href="page.html" target="_self">Поточна вкладка</a>

<!-- Батьківський фрейм -->
<a href="page.html" target="_parent">Батьківський фрейм</a>

<!-- Верхній рівень вікна -->
<a href="page.html" target="_top">Верхній рівень</a>

<!-- Конкретне вікно/фрейм -->
<a href="page.html" target="myWindow">Конкретне вікно</a>

Безпека: rel="noopener noreferrer" запобігає доступу нової сторінки до поточної через window.opener.

30. Як створити якір для переходу до певної частини сторінки?

HTML

Додаємо ідентифікатор елементу:

<h2 id="contacts">Контакти</h2>

Створюємо посилання на цей id:

<a href="#contacts">Перейти до контактів</a>

При кліку сторінка прокрутиться до елемента з таким id.

Повний приклад:

<!DOCTYPE html>
<html>
  <head>
    <title>Якірні посилання</title>
  </head>
  <body>
    <!-- Навігація -->
    <nav>
      <a href="#about">Про нас</a>
      <a href="#services">Послуги</a>
      <a href="#contacts">Контакти</a>
    </nav>

    <!-- Контент -->
    <section id="about">
      <h2>Про нас</h2>
      <p>Інформація про компанію...</p>
    </section>

    <section id="services">
      <h2>Послуги</h2>
      <p>Опис наших послуг...</p>
    </section>

    <section id="contacts">
      <h2>Контакти</h2>
      <p>Контактна інформація...</p>
    </section>

    <!-- Повернутися на верх -->
    <a href="#top">↑ На верх</a>
  </body>
</html>

CSS для плавної прокрутки:

html {
  scroll-behavior: smooth;
}

31. Як створити посилання на різні розділи на одній веб-сторінці HTML?

HTML

Відповідь: Для створення гіперпосилання використовується тег <a>. Атрибут href вказує URL або шлях.

Повний приклад:

<!DOCTYPE html>
<html>
  <head>
    <title>Якірні посилання</title>
  </head>
  <body>
    <!-- Навігація -->
    <nav>
      <a href="#about">Про нас</a>
      <a href="#services">Послуги</a>
      <a href="#contacts">Контакти</a>
    </nav>

    <!-- Контент -->
    <section id="about">
      <h2>Про нас</h2>
      <p>Інформація про компанію...</p>
    </section>

    <section id="services">
      <h2>Послуги</h2>
      <p>Опис наших послуг...</p>
    </section>

    <section id="contacts">
      <h2>Контакти</h2>
      <p>Контактна інформація...</p>
    </section>

    <!-- Повернутися на верх -->
    <a href="#top">↑ На верх</a>
  </body>
</html>

CSS для плавної прокрутки:

html {
  scroll-behavior: smooth;
}

32. Як створити посилання на файл для завантаження в HTML?

HTML

Використати <a> з атрибутом download:

<a href="files/manual.pdf" download>Завантажити інструкцію</a>

href — шлях до файлу.

download — каже браузеру зберегти файл замість відкриття.

Можна вказати ім'я:

<a href="files/manual.pdf" download="Instrukciya.pdf">Завантажити</a>

Додаткові приклади:

<!-- Завантажити з оригінальним ім'ям -->
<a href="document.pdf" download>Завантажити PDF</a>

<!-- Завантажити з новим ім'ям -->
<a href="report.xlsx" download="financial-report-2023.xlsx">
  Завантажити звіт
</a>

<!-- Завантажити зображення -->
<a href="photo.jpg" download="my-photo.jpg"> Зберегти фото </a>

Примітка: Атрибут download працює тільки для файлів з того самого домену (same-origin).

33. Яке призначення атрибута target у тегу a в HTML?

HTML

Атрибут target визначає, де відкриється посилання:
- _self (за замовчуванням) — відкриває в тій самій вкладці.
- _blank — відкриває у новій вкладці/вікні.
- _parent — відкриває в батьківському фреймі (якщо є фрейми).
- _top — відкриває у всьому вікні, виходячи з фреймів.
- customName — відкриває в конкретному вікні/фреймі з цим ім'ям.

Приклади:

<!-- За замовчуванням - поточна вкладка -->
<a href="page.html">Внутрішня сторінка</a>

<!-- Нова вкладка -->
<a href="https://example.com" target="_blank">Зовнішній сайт</a>

<!-- Нова вкладка з безпекою -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Безпечне зовнішнє посилання
</a>

<!-- Конкретне вікно -->
<a href="help.html" target="helpWindow">Довідка</a>

Безпека: Для target="_blank" рекомендується додавати rel="noopener noreferrer".

Зображення та медіа

34. Як вставляти зображення на HTML-сторінку?

HTML

Використовуємо тег <img>:

<img src="image.jpg" alt="Опис зображення" />

src — шлях до зображення.
alt — текстовий опис для доступності та коли зображення не завантажилось.
Опційно: width, height, title.

Детальніші приклади:

<!-- Основне використання -->
<img src="photo.jpg" alt="Фотографія заходу сонця" />

<!-- З розмірами -->
<img src="logo.png" alt="Логотип компанії" width="200" height="100" />

<!-- З підказкою -->
<img src="chart.png" alt="Графік продажів" title="Натисніть для збільшення" />

<!-- Відносний шлях -->
<img src="../images/banner.jpg" alt="Банер акції" />

<!-- Абсолютний URL -->
<img src="https://example.com/image.jpg" alt="Зовнішнє зображення" />

Краща практика: Завжди включайте атрибут alt для доступності.

35. Яке значення має атрибут alt для зображень?

HTML

alt — альтернативний текст для зображення.

Призначення:

Показується, якщо зображення не завантажилось.
Допомагає скрінрідерам робити сайт доступним.
Використовується для SEO.

Приклади правильного використання:

<!-- Інформативне зображення -->
<img
  src="chart.png"
  alt="Графік продажів за 2023 рік показує зростання на 25%"
/>

<!-- Декоративне зображення -->
<img src="decoration.png" alt="" />

<!-- Зображення-посилання -->
<a href="/home">
  <img src="logo.png" alt="Повернутися на головну сторінку" />
</a>

<!-- Складне зображення -->
<img src="infographic.jpg" alt="Інфографіка: кроки створення веб-сайту" />

Правила:

Для декоративних зображень використовуйте alt=""
Для інформативних - описуйте зміст
Для посилань - описуйте призначення посилання

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

HTML

Основні формати, які підтримують сучасні браузери:
- JPEG / JPG — фотографії з високою деталізацією, стиснення з втратою якості.
- PNG — графіка з прозорістю, без втрати якості.
- GIF — анімація та прості картинки з обмеженою палітрою.
- WebP — сучасний формат з високим стисненням і прозорістю.
- SVG — векторна графіка, масштабована без втрати якості.

Менш поширені: BMP, ICO (для іконок).

Коли використовувати:

<!-- JPEG для фотографій -->
<img src="photo.jpg" alt="Пейзаж" />

<!-- PNG для графіки з прозорістю -->
<img src="logo.png" alt="Логотип" />

<!-- GIF для анімації -->
<img src="loading.gif" alt="Завантаження" />

<!-- WebP для оптимізації -->
<img src="optimized.webp" alt="Оптимізоване зображення" />

<!-- SVG для векторної графіки -->
<img src="icon.svg" alt="Іконка" />

Сучасні тенденції: WebP та AVIF для кращого стиснення, SVG для іконок та простої графіки.

Списки

37. Які різні типи списків доступні в HTML?

HTML

В HTML є три основні типи списків:

Нумерований список (<ol>) — елементи пронумеровані:
Маркований список (<ul>) — елементи з маркерами (кульки, квадрати):
Список визначень (<dl>) — термін + опис:

Приклади:

<!-- Нумерований список -->
<ol>
  <li>Перший крок</li>
  <li>Другий крок</li>
  <li>Третій крок</li>
</ol>

<!-- Маркований список -->
<ul>
  <li>Молоко</li>
  <li>Хліб</li>
  <li>Яйця</li>
</ul>

<!-- Список визначень -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

38. Як створювати впорядковані, невпорядковані списки та списки з описом у HTML?

HTML

Впорядкований список (<ol>):

<ol>
  <li>Перший</li>
  <li>Другий</li>
</ol>

Невпорядкований список (<ul>):

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ul>

Список з описом (<dl>):

<dl>
  <dt>HTML</dt>
  <dd>Мова розмітки</dd>
  <dt>JavaScript</dt>
  <dd>Мова програмування</dd>
</dl>

Розширені приклади:

<!-- Нумерований список з атрибутами -->
<ol type="A" start="3">
  <li>Третій пункт (C)</li>
  <li>Четвертий пункт (D)</li>
</ol>

<!-- Список з різними маркерами (CSS) -->
<ul style="list-style-type: square;">
  <li>Квадратний маркер</li>
  <li>Ще один квадратний маркер</li>
</ul>

39. Чи можна вкладати списки в HTML? Якщо так, то як?

HTML

Так, можна. Вкладені списки створюють всередині <li> елемента:

<ul>
  <li>
    Пункт 1
    <ul>
      <li>Вкладений пункт 1</li>
      <li>Вкладений пункт 2</li>
    </ul>
  </li>
  <li>Пункт 2</li>
</ul>

Можна вкладати будь-які типи списків (<ul> всередині <ol> і навпаки).

Більш складний приклад:

<ol>
  <li>
    Веб-технології
    <ul>
      <li>
        Frontend
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ul>
      </li>
      <li>
        Backend
        <ul>
          <li>Node.js</li>
          <li>Python</li>
          <li>PHP</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Мобільна розробка</li>
</ol>

Правило: Вкладений список завжди має бути всередині <li>, а не між <li> елементами.

40. Як можна згрупувати опції всередині тегу select?

HTML

Для групування опцій у випадаючому списку використовуйте тег <optgroup>:

<select name="course">
  <optgroup label="Фронтенд">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>

  <optgroup label="Бекенд">
    <option value="php">PHP</option>
    <option value="python">Python</option>
    <option value="nodejs">Node.js</option>
  </optgroup>

  <optgroup label="Дизайн">
    <option value="photoshop">Photoshop</option>
    <option value="figma">Figma</option>
  </optgroup>
</select>

Переваги `<optgroup>`:

Візуально групує пов'язані опції
Покращує юзабіліті для довгих списків
Підтримує атрибут label для назви групи
Можна вимкнути групу через disabled

Приклад з вимкненою групою:

<select name="country">
  <optgroup label="Європа">
    <option value="ua">Україна</option>
    <option value="pl">Польща</option>
  </optgroup>

  <optgroup label="Азія" disabled>
    <option value="jp">Японія</option>
    <option value="cn">Китай</option>
  </optgroup>
</select>

Форми і валідація

41. Що таке HTML-форми та як їх створити?

HTML

HTML-форма — це елемент, який збирає дані від користувача та відправляє їх на сервер або обробляє на клієнті.

Приклад створення:

<form action="/submit" method="post">
  <label for="name">Ім'я:</label>
  <input type="text" id="name" name="name" />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />

  <button type="submit">Відправити</button>
</form>

<form> — контейнер форми.
action — URL, куди відправляються дані.
method — спосіб відправки (get або post).

Поля вводу (<input>, <textarea>, <select>) + кнопки (<button> або <input type="submit">).

Розширений приклад:

<form action="/register" method="post" enctype="multipart/form-data">
  <fieldset>
    <legend>Реєстрація користувача</legend>

    <label for="username">Логін:</label>
    <input type="text" id="username" name="username" required />

    <label for="password">Пароль:</label>
    <input type="password" id="password" name="password" required />

    <label for="avatar">Аватар:</label>
    <input type="file" id="avatar" name="avatar" accept="image/*" />

    <button type="submit">Зареєструватися</button>
    <button type="reset">Очистити</button>
  </fieldset>
</form>

42. Опишіть різні типи вхідних даних форм у HTML5.

HTML

В HTML5 у <input> з'явилося багато типів для збору різних даних:

Текстові типи:

text — звичайне текстове поле.
password — поле з прихованим введенням.
email — перевірка формату email.
url — перевірка формату URL.
tel — для телефонів (без валідації формату в HTML).
search — поле пошуку.

Числові типи:

number — числове поле зі стрілками.
range — повзунок для вибору значення.

Дата і час:

date — вибір дати.
month — вибір місяця та року.
week — вибір тижня.
time — вибір часу.
datetime-local — дата і час без часової зони.

Інші типи:

color — вибір кольору.
checkbox — прапорець.
radio — перемикач (один із групи).
file — вибір файлу для завантаження.
hidden — приховане поле для передачі даних.

Кнопки:

submit, reset, button — кнопки.

Приклади:

<input type="email" placeholder="[email protected]" />
<input type="number" min="1" max="100" step="1" />
<input type="range" min="0" max="100" value="50" />
<input type="date" value="2023-12-31" />
<input type="color" value="#ff0000" />

43. Як зробити вхідні дані форм обов'язковими?

HTML

Щоб зробити поле форми обов'язковим, додаємо атрибут required:

<input type="email" name="userEmail" required />

Браузер не дасть відправити форму, поки поле не заповнене.
Для спеціалізованих типів (email, number, url) додатково перевіряється формат введення.

Розширені приклади:

<!-- Обов'язкове текстове поле -->
<input type="text" name="name" required placeholder="Введіть ваше ім'я" />

<!-- Обов'язковий вибір з випадаючого списку -->
<select name="country" required>
  <option value="">Оберіть країну</option>
  <option value="ua">Україна</option>
  <option value="pl">Польща</option>
</select>

<!-- Обов'язкове прийняття умов -->
<input type="checkbox" name="terms" required />
<label for="terms">Я погоджуюсь з умовами використання</label>

<!-- Обов'язкове заповнення textarea -->
<textarea name="message" required placeholder="Ваше повідомлення"></textarea>

Стилізація через CSS:

input:required {
  border-left: 3px solid red;
}

input:valid {
  border-left: 3px solid green;
}

44. Яке призначення елемента label у формах?

HTML

<label> пов'язує текстову підказку з елементом форми, щоб користувачу було зрозуміло, що вводити.

Переваги:

Покращує доступність (скрінрідери читають підказку разом із полем).
Клік по автоматично фокусує пов'язане поле.

Приклади:

Зовнішній label (через for та id):

<label for="email">Email:</label> <input type="email" id="email" name="email" />

Внутрішній label (обгортає елемент):

<label>
  <input type="checkbox" name="agree" />
  Погоджуюсь з умовами
</label>

Для radio buttons:

<fieldset>
  <legend>Оберіть розмір:</legend>
  <label>
    <input type="radio" name="size" value="small" />
    Малий
  </label>
  <label>
    <input type="radio" name="size" value="large" />
    Великий
  </label>
</fieldset>

Складніший приклад:

<div class="form-group">
  <label for="password"> Пароль <span class="required">*</span> </label>
  <input type="password" id="password" name="password" required />
  <small>Мінімум 8 символів</small>
</div>

45. Як групувати вхідні дані форм і чому це потрібно робити?

HTML

Для групування даних у формах використовують <fieldset> і <legend>:

<fieldset>
  <legend>Особисті дані</legend>
  <label for="name">Ім'я:</label>
  <input type="text" id="name" name="name" />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
</fieldset>

Навіщо:

Візуально та логічно об'єднує пов'язані поля.
Покращує доступність (скрінрідери читають легенду).
Допомагає структурувати великі форми і робить їх зручнішими для користувача.

Розширений приклад:

<form>
  <fieldset>
    <legend>Контактна інформація</legend>
    <label for="phone">Телефон:</label>
    <input type="tel" id="phone" name="phone" />

    <label for="address">Адреса:</label>
    <textarea id="address" name="address"></textarea>
  </fieldset>

  <fieldset>
    <legend>Налаштування акаунту</legend>
    <label for="notifications">
      <input type="checkbox" id="notifications" name="notifications" />
      Отримувати сповіщення
    </label>

    <label for="privacy">
      <input type="radio" id="privacy" name="privacy" value="public" />
      Публічний профіль
    </label>
  </fieldset>

  <fieldset disabled>
    <legend>Преміум функції</legend>
    <input type="checkbox" name="premium" disabled />
    <label>Доступно тільки для преміум користувачів</label>
  </fieldset>
</form>

46. Як створити форму в HTML і забезпечити її валідацію?

HTML

Створення форми з валідацією включає використання HTML5 атрибутів та JavaScript для розширеної перевірки.

HTML5 валідація:

<form action="/submit" method="post" novalidate>
  <label for="username">Логін:</label>
  <input
    type="text"
    id="username"
    name="username"
    required
    minlength="3"
    maxlength="20"
    pattern="[a-zA-Z0-9_]+"
    title="Тільки літери, цифри та підкреслення"
  />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />

  <label for="age">Вік:</label>
  <input type="number" id="age" name="age" min="18" max="120" required />

  <label for="website">Веб-сайт:</label>
  <input type="url" id="website" name="website" />

  <button type="submit">Відправити</button>
</form>

Атрибути валідації:

required — обов'язкове поле
minlength/maxlength — мінімальна/максимальна довжина
min/max — мінімальне/максимальне значення для чисел
pattern — регулярний вираз
step — крок для числових полів

CSS для стилізації:

input:valid {
  border: 2px solid green;
}

input:invalid {
  border: 2px solid red;
}

input:required {
  background-color: #fff8dc;
}

47. Які методи відправки даних форми ви знаєте?

HTML

Основні методи HTTP для відправки форм:

GET метод:

<form action="/search" method="get">
  <input type="text" name="query" placeholder="Пошук..." />
  <button type="submit">Шукати</button>
</form>

Характеристики GET:

Дані додаються до URL як параметри запиту
Видимі в адресному рядку
Можна додати в закладки
Обмеження по розміру даних
Використовується для пошуку, фільтрів

POST метод:

<form action="/submit" method="post">
  <input type="text" name="username" required />
  <input type="password" name="password" required />
  <button type="submit">Увійти</button>
</form>

Характеристики POST:

Дані відправляються в тілі запиту
Не видимі в URL
Немає обмежень по розміру
Використовується для створення, оновлення даних

Додаткові атрибути:

<!-- Для завантаження файлів -->
<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="document" required />
  <button type="submit">Завантажити</button>
</form>

<!-- Перевизначення методу -->
<form action="/update" method="post">
  <input type="hidden" name="_method" value="PUT" />
  <button type="submit">Оновити</button>
</form>

48. Основні атрибути HTML-форм? Як вони впливають на надсилання даних з веб-сторінки?

HTML

Атрибути елемента `<form>`:

action — URL для відправки даних:

<form action="/process-form" method="post"></form>

method — HTTP метод (GET, POST):

<form method="post">
  <!-- Безпечно для конфіденційних даних -->
  <form method="get"><!-- Для пошуку та фільтрів --></form>
</form>

enctype — кодування даних:

<!-- За замовчуванням -->
<form enctype="application/x-www-form-urlencoded">
  <!-- Для файлів -->
  <form enctype="multipart/form-data">
    <!-- Простий текст -->
    <form enctype="text/plain"></form>
  </form>
</form>

target — де відкрити результат:

<form target="_blank">
  <!-- В новому вікні -->
  <form target="_self">
    <!-- В поточному вікні -->
    <form target="frame1"><!-- В конкретному фреймі --></form>
  </form>
</form>

novalidate — вимкнути HTML5 валідацію:

<form novalidate>
  <!-- Валідація тільки через JavaScript -->
</form>

autocomplete — автозаповнення:

<form autocomplete="on">
  <!-- Увімкнути -->
  <form autocomplete="off"><!-- Вимкнути --></form>
</form>

Приклад повної форми:

<form
  action="/contact"
  method="post"
  enctype="multipart/form-data"
  autocomplete="on"
  target="_self"
>
  <input type="text" name="name" autocomplete="name" />
  <input type="email" name="email" autocomplete="email" />
  <input type="file" name="attachment" />

  <button type="submit">Відправити</button>
</form>

49. Для чого використовується елемент datalist?

HTML

<datalist> надає список готових варіантів для поля вводу, створюючи автодоповнення (autocomplete dropdown).

Основне використання:

<label for="browser">Оберіть браузер:</label>
<input list="browsers" id="browser" name="browser" />

<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
  <option value="Edge"></option>
  <option value="Opera"></option>
</datalist>

Переваги:

Користувач може обрати зі списку або ввести власний варіант
Покращує UX через швидкий вибір
Працює з різними типами input

Розширені приклади:

<!-- З описом опцій -->
<input list="languages" name="language" placeholder="Мова програмування" />
<datalist id="languages">
  <option value="JavaScript" label="JS - Веб-розробка"></option>
  <option value="Python" label="Python - Дані та ШІ"></option>
  <option value="Java" label="Java - Корпоративна розробка"></option>
</datalist>

<!-- Для емейлів -->
<input type="email" list="email-domains" name="email" />
<datalist id="email-domains">
  <option value="@gmail.com"></option>
  <option value="@yahoo.com"></option>
  <option value="@outlook.com"></option>
</datalist>

<!-- Для URL -->
<input type="url" list="sites" name="website" />
<datalist id="sites">
  <option value="https://github.com/"></option>
  <option value="https://stackoverflow.com/"></option>
  <option value="https://developer.mozilla.org/"></option>
</datalist>

Підтримка браузерів: Всі сучасні браузери. У старих браузерах працює як звичайний input.

50. Що таке елемент output у HTML5?

HTML

<output> представляє результат обчислення або дії користувача. Зазвичай використовується для відображення результатів форм або динамічних розрахунків.

Основні атрибути:

for — вказує на елементи, які впливають на результат
form — пов'язує з конкретною формою
name — ім'я для надсилання з формою

Приклад з обчисленням:

<form>
  <label for="quantity">Кількість:</label>
  <input type="number" id="quantity" name="quantity" value="1" min="1" />

  <label for="price">Ціна:</label>
  <input type="number" id="price" name="price" value="100" step="0.01" />

  <label for="total">Загальна сума:</label>
  <output id="total" name="total" for="quantity price">100</output>
</form>

<script>
  function updateTotal() {
    const quantity = document.getElementById('quantity').value;
    const price = document.getElementById('price').value;
    const total = quantity * price;
    document.getElementById('total').textContent = total.toFixed(2);
  }

  document.getElementById('quantity').addEventListener('input', updateTotal);
  document.getElementById('price').addEventListener('input', updateTotal);
</script>

Приклад з прогрес-баром:

<form>
  <label for="progress-slider">Прогрес:</label>
  <input type="range" id="progress-slider" min="0" max="100" value="50" />

  <output id="progress-value" for="progress-slider">50%</output>
</form>

<script>
  document
    .getElementById('progress-slider')
    .addEventListener('input', function () {
      document.getElementById('progress-value').textContent = this.value + '%';
    });
</script>

Семантика: <output> є семантично правильним способом показати результати, на відміну від <span> або <div>.

Семантика та структура

51. Що таке семантичний HTML?

HTML

Семантичний HTML — це використання тегів за їхнім змістовим призначенням (<header>, <main>, <article>, <section>, <nav>, <footer>, а не <div> всюди).
Це робить структуру сторінки зрозумілішою для браузерів, пошукових систем і assistive-технологій.
Для SEO це критично: пошуковики краще розпізнають ієрархію контенту, визначають головні частини сторінки та підвищують релевантність у видачі.

Семантична розмітка = краща доступність + зрозуміла структура + підсилення SEO.

52. Що таке семантичні теги HTML і чому вони важливі?

HTML

Семантичні теги HTML — це теги, які описують зміст і роль свого вмісту (наприклад, <header>, <main>, <article>, <footer>).

Чому важливі:

Поліпшують SEO — пошукові системи краще розуміють структуру.
Доступність — скрінрідери можуть правильно інтерпретувати вміст.
Легше підтримувати та читати код.
Стандартизують структуру сторінки.

53. Чим відрізняється article від section?

HTML

<article> — самостійний контент, який може існувати окремо (новини, блог-пости, коментарі). Має зміст, зрозумілий поза контекстом сторінки.
<section> — тематичний розділ контенту, частина більшої структури. Зазвичай має заголовок і логічно пов'язаний із рештою сторінки.

Приклад:

<article>
  <h2>Стаття про HTML5</h2>
  <section>
    <h3>Семантичні теги</h3>
    <p>Опис семантичних тегів...</p>
  </section>
  <section>
    <h3>Доступність</h3>
    <p>Як семантика покращує доступність...</p>
  </section>
</article>

54. Що нового в HTML5 порівняно з попередніми версіями?

HTML

Основні нововведення HTML5:
- Семантичні теги: <header>, <footer>, <main>, <article>, <section>, <nav>.
- Розширені форми: нові типи <input> (email, url, number, date, color тощо) та атрибути (required, placeholder, pattern).
- Мультимедіа: <audio> і <video> без сторонніх плагінів.
- Графіка: <canvas> для растрової графіки, <svg> для векторної.
- API для JS: локальне сховище (localStorage, sessionStorage), геолокація, drag-and-drop, Web Workers.
- Подкастинг та інтеграція: <figure>, <figcaption> для зображень і підписів.
- Покращена підтримка мобільних: <meta name="viewport"> та адаптивність.

55. Як створити розділ на веб-сторінці за допомогою семантичних елементів HTML5?

HTML

У HTML5 для створення розділів використовують семантичні теги:

<section>
  <h2>Про нас</h2>
  <p>Текст про компанію...</p>
</section>

<article>
  <h2>Новина дня</h2>
  <p>Текст новини...</p>
</article>

<aside>
  <h3>Підказка</h3>
  <p>Додаткова інформація</p>
</aside>

<section> — логічний розділ сторінки.
<article> — самостійний блок контенту, який може існувати окремо.
<aside> — побічна інформація, наприклад, сайдбар.
<header> і <footer> — заголовки та підвал розділів або сторінки.

56. Яка роль елемента article у HTML5?

HTML

<article> — семантичний елемент для самостійного контенту, який може існувати окремо від сторінки і бути зрозумілий поза контекстом.

Приклади використання:

Новини, блоги, публікації.
Коментарі користувачів.
Форумні повідомлення.

Переваги:

Покращує SEO і доступність.
Легко стилізується та структуровано організовує контент.

57. Чи можете ви пояснити використання елементів nav та aside у HTML5?

HTML

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

<nav>
  <a href="/">Головна</a>
  <a href="/about">Про нас</a>
</nav>

<aside> — для додаткового або побічного контенту, який не є головним, наприклад, сайдбари, підказки, реклами:

<aside>
  <h3>Поради</h3>
  <p>Корисна інформація для користувача</p>
</aside>

Коротко:

= навігація, = допоміжний або боковий контент.

58. Як використовувати елементи figure та figcaption?

HTML

<figure> — контейнер для медіа (зображення, графіка, відео) із підписом.
<figcaption> — підпис до медіа всередині <figure>.

Приклад:

<figure>
  <img src="image.jpg" alt="Опис зображення" />
  <figcaption>Підпис до зображення</figcaption>
</figure>

Покращує семантику та доступність.
Легко стилізується CSS.

Таблиці

59. Як створити таблицю в HTML і які основні теги для цього використовуються?

HTML

В HTML таблиця створюється тегом <table>. Рядки — <tr>, заголовки стовпців — <th>, комірки — <td>.

Приклад:

<table>
  <tr>
    <th>Ім'я</th>
    <th>Вік</th>
  </tr>
  <tr>
    <td>Іван</td>
    <td>25</td>
  </tr>
</table>

60. Що таке thead, tbody та tfoot у HTML-таблиці і для чого вони потрібні?

HTML

<thead> — групує рядки заголовків таблиці.
<tbody> — основна частина таблиці з даними.
<tfoot> — групує рядки підсумків (footer таблиці), відображається після tbody, але може рендеритися браузером перед ним для оптимізації.

Приклад:

<table>
  <thead>
    <tr>
      <th>Назва</th>
      <th>Ціна</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Товар 1</td>
      <td>100 грн</td>
    </tr>
    <tr>
      <td>Товар 2</td>
      <td>200 грн</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Загалом</td>
      <td>300 грн</td>
    </tr>
  </tfoot>
</table>

Переваги:

Покращує семантику та доступність
Дозволяє стилізувати різні частини таблиці окремо
Браузери можуть фіксувати заголовки при прокрутці

61. Що таке атрибути colspan і rowspan у HTML-таблицях?

HTML

colspan — об'єднує комірку по кількох стовпцях.
rowspan — об'єднує комірку по кількох рядках.

<td colspan="2">Об'єднано 2 стовпці</td>
<td rowspan="3">Об'єднано 3 рядки</td>

Приклад:

<table border="1">
  <tr>
    <th colspan="2">Заголовок на 2 колонки</th>
    <th rowspan="2">Вертикальний заголовок</th>
  </tr>
  <tr>
    <td>Комірка 1</td>
    <td>Комірка 2</td>
  </tr>
  <tr>
    <td>Комірка 3</td>
    <td>Комірка 4</td>
    <td>Комірка 5</td>
  </tr>
</table>

62. Як зробити HTML-таблицю доступною для користувачів з екранними рідерами?

HTML

Використовувати семантичні теги: <table>, <thead>, <tbody>, <tfoot>, <th>.
Додавати атрибут scope у <th> (scope="col" або scope="row") для зв'язку заголовків і комірок.
Додавати <caption> для опису таблиці.
Уникати зайвого rowspan/colspan, якщо вони ускладнюють навігацію.
Забезпечити достатній контраст та видимі фокуси при навігації з клавіатури.

Приклад доступної таблиці:

<table>
  <caption>
    Продажі за 2024 рік
  </caption>
  <thead>
    <tr>
      <th scope="col">Місяць</th>
      <th scope="col">Продажі</th>
      <th scope="col">Прибуток</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Січень</th>
      <td>1000</td>
      <td>200</td>
    </tr>
  </tbody>
</table>

Медіа та графіка

63. Що таке елемент canvas? І для чого він використовується?

HTML

<canvas> — растровий холст для малювання графіки через JavaScript API.

Використання:

Ігри та інтерактивна графіка
Складні візуалізації даних
Обробка зображень
Анімації та ефекти

Приклад:

<canvas id="myCanvas" width="400" height="200"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // Малюємо прямокутник
  ctx.fillStyle = 'blue';
  ctx.fillRect(50, 50, 100, 75);

  // Малюємо коло
  ctx.beginPath();
  ctx.arc(200, 100, 50, 0, 2 * Math.PI);
  ctx.fillStyle = 'red';
  ctx.fill();
</script>

64. Різниця між canvas та svg? У яких випадках краще використовувати canvas, а в яких svg?

HTML

`<canvas>`:

Растрова графіка (пікселі)
Малювання через JavaScript API
Підходить для ігор, складної анімації, обробки зображень
Масштабування може погіршити якість
Неможливо стилізувати окремі елементи CSS

`<svg>`:

Векторна графіка (математичні об'єкти)
Описується XML-розміткою
Підходить для іконок, логотипів, простих діаграм
Безкінечне масштабування без втрати якості
Можна стилізувати CSS та анімувати

Коли використовувати:

Canvas → ігри, складна графіка, обробка фото, реал-тайм анімації

SVG → іконки, логотипи, прості діаграми, масштабована графіка

65. Яка різниця між елементами svg та canvas?

HTML

<svg> — векторна графіка, кожен елемент DOM-структурований, масштабований без втрати якості, легкий для анімації та стилізації через CSS/JS.
<canvas> — растровий холст, малювання відбувається через JS API, не має внутрішньої семантики елементів, масштабування може знизити якість, підходить для ігор і складної графіки.

Порівняння:

Характеристика	SVG	Canvas
Тип графіки	Векторна	Растрова
DOM-структура	Так	Ні
Масштабування	Без втрат	З втратами
Стилізація CSS	Так	Обмежено
Продуктивність	Повільніше при багатьох елементах	Швидше для складної графіки

66. Що ви знаєте про SVG? Які є варіанти додавання SVG на сторінки сайту? Чим вони відрізняються?

HTML

SVG (Scalable Vector Graphics) — векторний формат для графіки, що масштабується без втрати якості.

Способи додавання SVG:

Inline SVG — безпосередньо в HTML:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

Переваги: повний контроль CSS/JS, доступність Недоліки: збільшує розмір HTML

Як зображення — через <img>:

<img src="icon.svg" alt="Іконка" />

Переваги: кешується, компактний HTML Недоліки: не можна стилізувати CSS

CSS background:

.icon {
  background-image: url('icon.svg');
}

Через <object> або <embed>:

<object data="graphic.svg" type="image/svg+xml"></object>

Найкращий вибір: inline для іконок, що потребують стилізації; <img> для статичної графіки.

67. Як створювати карти зображень у HTML?

HTML

HTML-карта зображень (image map) дозволяє зробити частини зображення клікабельними.

Приклад:

<img src="plan.jpg" usemap="#map1" alt="План будівлі" />

<map name="map1">
  <area shape="rect" coords="34,44,270,350" href="room1.html" alt="Кімната 1" />
  <area shape="circle" coords="337,300,44" href="room2.html" alt="Кімната 2" />
  <area
    shape="poly"
    coords="400,50,500,50,450,150"
    href="room3.html"
    alt="Кімната 3"
  />
</map>

Пояснення:

usemap="#map1" — прив'язка картинки до карти
<area> — задає клікабельну область:
- shape="rect" — прямокутник (coords: x1,y1,x2,y2)
- shape="circle" — коло (coords: x,y,radius)
- shape="poly" — багатокутник (coords: x1,y1,x2,y2,x3,y3...)
href — посилання при кліку
alt — альтернативний текст для доступності

68. Як додати аудіо та відео в HTML-документ за допомогою вбудованих тегів?

HTML

Аудіо — тег <audio> з атрибутом controls:

<audio controls>
  <source src="sound.mp3" type="audio/mpeg" />
  <source src="sound.ogg" type="audio/ogg" />
  Ваш браузер не підтримує аудіо.
</audio>

Відео — тег <video> з атрибутом controls:

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  Ваш браузер не підтримує відео.
</video>

Важливо:

<source> — дозволяє вказати кілька форматів для кращої сумісності
Текст між тегами — fallback для старих браузерів
controls — показує елементи керування (play/pause/volume)

69. Які основні атрибути підтримують теги video та audio у HTML?

HTML

Спільні атрибути для `<video>` та `<audio>`:

src — шлях до файлу (можна замість <source>)
controls — відображає елементи керування
autoplay — автоматичне відтворення (часто вимагає muted)
loop — повторне відтворення після завершення
muted — без звуку
preload — підвантаження:
- none — не завантажувати наперед
- metadata — тільки метадані
- auto — браузер сам вирішує

Додатково для `<video>`:

width, height — розміри відеоплеєра
poster — зображення-заставка до початку відтворення

Приклад:

<video
  controls
  width="800"
  height="450"
  poster="preview.jpg"
  preload="metadata"
>
  <source src="movie.mp4" type="video/mp4" />
</video>

70. Як додати субтитри або підписи до відео в HTML?

HTML

Використати тег <track> всередині <video>.

Атрибути `<track>`:

src — файл субтитрів (формат .vtt)
kind — тип (subtitles, captions, descriptions, chapters, metadata)
srclang — мова субтитрів (en, uk)
label — назва треку в меню
default — трек за замовчуванням

Приклад:

<video controls>
  <source src="movie.mp4" type="video/mp4" />
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" />
  <track
    src="subtitles_uk.vtt"
    kind="subtitles"
    srclang="uk"
    label="Українська"
    default
  />
  <track
    src="descriptions.vtt"
    kind="descriptions"
    srclang="uk"
    label="Аудіоопис"
  />
</video>

Формат .vtt файлу:

WEBVTT

00:00:00.000 --> 00:00:03.000
Привіт! Це перший рядок субтитрів.

00:00:03.000 --> 00:00:06.000
А це другий рядок.

Браузер покаже вибір субтитрів, якщо формат .vtt коректний.

Інтеграція та зв'язки

71. Чи можете ви пояснити призначення метатегів у HTML?

HTML

Метатеги у <head> зберігають метадані про сторінку — інформацію, яку не видно користувачу, але використовують браузери, пошукові системи та сервіси.

Приклади призначення:

<meta charset="UTF-8"> — задає кодування.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> — адаптивність на мобільних.
<meta name="description" content="Опис сторінки"> — SEO.
<meta name="robots" content="index, follow"> — інструкції для пошукових ботів.

Додаткові приклади:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta
    name="description"
    content="Короткий опис сторінки для пошукових систем"
  />
  <meta name="keywords" content="ключові, слова, для, seo" />
  <meta name="author" content="Ім'я автора" />
  <meta name="robots" content="index, follow" />

  <!-- Open Graph для соціальних мереж -->
  <meta property="og:title" content="Заголовок для Facebook" />
  <meta property="og:description" content="Опис для соціальних мереж" />
  <meta property="og:image" content="image.jpg" />

  <!-- Twitter Cards -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Заголовок для Twitter" />
</head>

72. Як пов'язати CSS-файл з HTML-документом?

HTML

У <head> додаємо тег:

<link rel="stylesheet" href="styles.css" />

Атрибути:

rel="stylesheet" — вказує, що це файл стилів
href — шлях до CSS-файлу

Додаткові варіанти:

<!-- Основний CSS файл -->
<link rel="stylesheet" href="css/main.css" />

<!-- CSS з медіа-запитами -->
<link rel="stylesheet" href="css/print.css" media="print" />
<link rel="stylesheet" href="css/mobile.css" media="(max-width: 768px)" />

<!-- CSS з CDN -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
/>

<!-- Внутрішні стилі -->
<style>
  body {
    margin: 0;
    padding: 20px;
  }
</style>

73. Як пов'язати JavaScript-файл з HTML-документом?

HTML

Через тег <script>:

<script src="script.js"></script>

Розміщення та атрибути:

<!-- В <head> - завантажується до рендерингу сторінки -->
<head>
  <script src="script.js"></script>
</head>

<!-- Перед </body> - завантажується після HTML (рекомендовано) -->
<body>
  <!-- HTML контент -->
  <script src="script.js"></script>
</body>

<!-- Асинхронне завантаження -->
<script src="script.js" async></script>

<!-- Відкладене завантаження -->
<script src="script.js" defer></script>

<!-- Внутрішній JavaScript -->
<script>
  console.log('Привіт, світ!');
</script>

<!-- JavaScript з CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

Різниця між async та defer:

async — завантажується паралельно і виконується одразу
defer — завантажується паралельно, але виконується після HTML

74. Що таке iframe і для чого його використовують?

HTML

<iframe> — це елемент для вбудовування іншої HTML-сторінки всередину поточної сторінки.

Синтаксис:

<iframe src="https://example.com" width="600" height="400"></iframe>

Основні атрибути:

<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="560"
  height="315"
  frameborder="0"
  allowfullscreen
  title="YouTube відео"
  loading="lazy"
>
</iframe>

Використання:

Вбудовування відео (YouTube, Vimeo)
Карти (Google Maps)
Соціальні віджети (Facebook, Twitter)
Зовнішні форми чи додатки
Пісочниці для демонстрації коду

Атрибути безпеки:

<iframe
  src="untrusted-content.html"
  sandbox="allow-scripts allow-same-origin"
  referrerpolicy="no-referrer"
>
</iframe>

Недоліки: може впливати на SEO, безпеку та швидкість завантаження.

75. Як додати коментар у HTML і чому його використовувати?

HTML

Синтаксис:

<!-- Це коментар -->

Призначення:

Пояснення коду для себе або колег
Тимчасове вимкнення частини розмітки без видалення
Позначення секцій коду для зручності навігації
Документування складної структури

Приклади використання:

<!-- Заголовок сторінки -->
<header>
  <h1>Моя сторінка</h1>
  <!-- TODO: додати логотип -->
</header>

<!-- Основний контент -->
<main>
  <section>
    <h2>Про нас</h2>
    <p>Текст про компанію...</p>
  </section>

  <!-- 
    Тимчасово приховано до завершення розробки
    <section>
      <h2>Наші послуги</h2>
      <p>Список послуг...</p>
    </section>
  -->
</main>

<!-- 
  Кінець основного контенту
  Далі йде підвал сторінки
-->
<footer>
  <p>&copy; 2024 Моя компанія</p>
</footer>

Важливо: коментарі видимі в коді сторінки, тому не додавайте конфіденційну інформацію!

Навігація та UX

76. Різниця між кнопкою та посиланням у HTML?

HTML

`<button>` — для дій:

Відправка форм
Виклик JavaScript функцій
Зміна стану сторінки
Інтерактивні елементи UI

`<a>` — для навігації:

Перехід на інші сторінки
Переходи всередині сторінки (якорі)
Завантаження файлів
Посилання на зовнішні ресурси

Приклади правильного використання:

<!-- Кнопки для дій -->
<button type="submit">Відправити форму</button>
<button onclick="toggleMenu()">Відкрити меню</button>
<button type="button" id="likeBtn">❤️ Подобається</button>

<!-- Посилання для навігації -->
<a href="/about">Про нас</a>
<a href="#contacts">Перейти до контактів</a>
<a href="document.pdf" download>Завантажити PDF</a>
<a href="https://external-site.com" target="_blank">Зовнішнє посилання</a>

Семантична важливість:

Кнопки розуміються скрінрідерами як елементи дії
Посилання розуміються як навігаційні елементи
Це впливає на доступність та SEO

Стилізація:

<!-- Посилання, стилізоване як кнопка (але семантично залишається посиланням) -->
<a href="/signup" class="btn">Зареєструватися</a>

<!-- Кнопка для навігації (неправильно з точки зору семантики) -->
<button onclick="location.href='/signup'">Зареєструватися</button>

Правило: використовуйте <a> для навігації, <button> для дій.

77. Як правильно створити семантичну панель навігації в HTML?

HTML

Використовуємо семантичний тег <nav> з внутрішнім списком посилань <ul><li><a>. Це забезпечує доступність і правильну структуру.

Базовий приклад:

<nav>
  <ul>
    <li><a href="/">Головна</a></li>
    <li><a href="/about">Про нас</a></li>
    <li><a href="/services">Послуги</a></li>
    <li><a href="/contact">Контакти</a></li>
  </ul>
</nav>

Розширений приклад з підменю:

<nav aria-label="Основна навігація">
  <ul>
    <li><a href="/" aria-current="page">Головна</a></li>
    <li>
      <a href="/services">Послуги</a>
      <ul>
        <li><a href="/services/web-design">Веб-дизайн</a></li>
        <li><a href="/services/development">Розробка</a></li>
        <li><a href="/services/seo">SEO</a></li>
      </ul>
    </li>
    <li><a href="/about">Про нас</a></li>
    <li><a href="/contact">Контакти</a></li>
  </ul>
</nav>

Принципи семантичної навігації:

Використовуйте <nav> для основних навігаційних блоків
Структуруйте списками <ul><li><a>
Додавайте aria-label для множинних навігацій
Позначайте поточну сторінку aria-current="page"
Забезпечте доступність клавіатурної навігації

78. Як семантично правильно згорнути навігаційне меню?

HTML

Для семантично правильного згортання навігаційного меню використовуйте елемент <nav> всередині якого знаходяться списки з посиланнями.

Приклад з використанням `<details>` та `<summary>`:

<nav>
  <details>
    <summary>Меню</summary>
    <ul>
      <li><a href="/">Головна</a></li>
      <li><a href="/about">Про нас</a></li>
      <li><a href="/services">Послуги</a></li>
      <li><a href="/contact">Контакти</a></li>
    </ul>
  </details>
</nav>

Приклад з кнопкою для мобільного меню:

<nav aria-label="Основна навігація">
  <button aria-expanded="false" aria-controls="main-menu" class="menu-toggle">
    ☰ Меню
  </button>

  <ul id="main-menu" class="nav-menu" hidden>
    <li><a href="/">Головна</a></li>
    <li><a href="/about">Про нас</a></li>
    <li><a href="/services">Послуги</a></li>
    <li><a href="/contact">Контакти</a></li>
  </ul>
</nav>

<script>
  document.querySelector('.menu-toggle').addEventListener('click', function () {
    const menu = document.getElementById('main-menu');
    const isExpanded = this.getAttribute('aria-expanded') === 'true';

    this.setAttribute('aria-expanded', !isExpanded);
    menu.hidden = isExpanded;
  });
</script>

Важливі принципи:

Використовуйте ARIA-атрибути для доступності
aria-expanded показує стан меню
aria-controls вказує на контрольований елемент
hidden приховує меню від скрінрідерів

79. Як створити базове випадаюче меню в HTML і CSS без JavaScript?

HTML

Використовуємо вкладені списки <ul> і керуємо показом підменю через :hover.

Приклад:

<nav>
  <ul class="menu">
    <li>
      <a href="/services">Послуги</a>
      <ul class="dropdown">
        <li><a href="/services/web-development">Веб-розробка</a></li>
        <li><a href="/services/ui-design">UI/UX Дизайн</a></li>
        <li><a href="/services/seo">SEO оптимізація</a></li>
      </ul>
    </li>
    <li><a href="/about">Про нас</a></li>
    <li><a href="/contact">Контакти</a></li>
  </ul>
</nav>

<style>
  /* Основні стилі меню */
  .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .menu li {
    position: relative;
  }

  .menu a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #333;
    background: #f8f9fa;
    border-right: 1px solid #ddd;
  }

  .menu a:hover {
    background: #e9ecef;
  }

  /* Стилі випадаючого меню */
  .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
  }

  .dropdown li {
    width: 100%;
  }

  .dropdown a {
    border-right: none;
    border-bottom: 1px solid #eee;
  }

  /* Показати підменю при наведенні */
  .menu li:hover .dropdown {
    display: block;
  }

  /* Альтернативний варіант з плавною анімацією */
  .dropdown {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .menu li:hover .dropdown {
    opacity: 1;
    visibility: visible;
  }
</style>

Переваги:

Працює без JavaScript
Простота реалізації
Хороша семантика

Недоліки:

Не працює на дотик (мобільні)
Обмежені можливості анімації
Меню зникає при випадковому відведенні курсора

80. Різниця між meter та progress?

HTML

`<meter>` — для виміряних значень:

Рівень заповнення
Температура
Бали або рейтинги
Показники в певному діапазоні

`<progress>` — для прогресу завдань:

Завантаження файлів
Виконання процесів
Прогрес форм
Часові індикатори

Приклади:

<!-- <meter> для виміряного значення -->
<label for="battery">Рівень заряду батареї:</label>
<meter id="battery" value="0.7" min="0" max="1">70%</meter>

<label for="score">Оцінка статті:</label>
<meter id="score" value="8" min="0" max="10">8 з 10</meter>

<label for="storage">Використання диска:</label>
<meter id="storage" value="650" min="0" max="1000" high="900" optimum="200">
  650 GB з 1000 GB
</meter>

<!-- <progress> для прогресу завдання -->
<label for="fileProgress">Прогрес завантаження:</label>
<progress id="fileProgress" value="30" max="100">30%</progress>

<label for="formProgress">Заповнення форми:</label>
<progress id="formProgress" value="2" max="5">Крок 2 з 5</progress>

<!-- Невизначений прогрес -->
<progress>Завантажується...</progress>

Атрибути `<meter>`:

value — поточне значення
min, max — діапазон
high, low — пороги
optimum — оптимальне значення

Атрибути `<progress>`:

value — поточний прогрес
max — максимальне значення
Без value — невизначений прогрес

Візуальні відмінності:

Meter зазвичай показує індикатор рівня
Progress показує смугу прогресу
Браузери стилізують їх по-різному

81. Що таке область перегляду (viewport) у веб-розробці та як її налаштувати?

HTML

Область перегляду — це видима частина веб-сторінки у браузері користувача. Вона важлива для адаптивного дизайну. Налаштовується через мета-тег у <head>:

<meta name="viewport" content="width=device-width, initial-scale=1" />

width=device-width — ширина viewport дорівнює ширині екрана пристрою.
initial-scale=1 — початковий масштаб сторінки.

Це забезпечує коректне відображення на мобільних пристроях.

82. Розкажіть про meta-тег із name="viewport"?

HTML

Мета-тег viewport контролює відображення веб-сторінки на мобільних пристроях:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Основні параметри:

width=device-width — ширина viewport дорівнює ширині екрана.
initial-scale=1.0 — початковий рівень масштабування.
maximum-scale — максимальний масштаб.
minimum-scale — мінімальний масштаб.
user-scalable=no — заборона масштабування користувачем.

Без цього тегу мобільні браузери можуть відображати сторінку неправильно.

83. Як використовуються медіа-запити (media queries) для адаптивного дизайну в HTML/CSS?

HTML

Медіа-запити дозволяють застосовувати різні стилі залежно від розміру екрану або типу пристрою. Використовуються у CSS, а не в HTML:

/* Для екранів до 768px */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* Для екранів від 769px */
@media (min-width: 769px) {
  body {
    font-size: 16px;
  }
}

Так можна робити адаптивний дизайн без зміни HTML-структури.

84. Як робити адаптивні зображення для різних пристроїв та роздільної здатності?

HTML

Використовуються атрибути srcset та sizes у <img> або елемент <picture>:

Приклад з <img>:

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  alt="Адаптивне зображення"
/>

Приклад з <picture>:

<picture>
  <source media="(max-width: 600px)" srcset="image-400.jpg" />
  <source media="(max-width: 1200px)" srcset="image-800.jpg" />
  <img src="image-1200.jpg" alt="Адаптивне зображення" />
</picture>

Це дозволяє браузеру обирати оптимальний розмір зображення під пристрій та економити трафік.

85. Що таке адаптивний веб-дизайн (responsive web design)?

HTML

Адаптивний веб-дизайн — це підхід до створення сайтів, коли макет і контент автоматично підлаштовуються під різні розміри екранів і пристроїв.

Основні принципи:

Гнучкі сітки (flexible grids) — елементи у відсотках, а не в пікселях.
Гнучкі зображення (flexible images) — використання max-width: 100%, srcset або <picture>.
Медіа-запити (media queries) — зміна стилів залежно від ширини/типу пристрою.

Мета — однаково зручний UX на мобільних, планшетах і десктопах.

86. Як зробити HTML-таблицю адаптивною для мобільних пристроїв?

HTML

Горизонтальний скрол (простий спосіб):

.table-wrapper {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

<div class="table-wrapper">
  <table>
    ...
  </table>
</div>

Перетворення в картки на малих екранах через CSS (display: block + ::before з назвами колонок).
CSS Grid / Flexbox для кастомних адаптивних таблиць.
Мінімізувати кількість колонок для мобільних.

87. Що таке srcset? Як працює srcset?

HTML

srcset — атрибут для адаптивних зображень, який дозволяє браузеру обирати найкращий варіант зображення залежно від умов (роздільності екрану, ширини viewport).

Синтаксис:

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Зображення"
/>

400w, 800w, 1200w — дескриптори ширини зображень.
sizes — підказка браузеру про розмір відображення.

Браузер автоматично вибирає найбільш підходящий файл для поточних умов.

88. Навіщо використовується елемент picture?

HTML

Елемент <picture> надає більше контролю над адаптивними зображеннями порівняно з srcset. Дозволяє:
Використовувати різні формати зображень (WebP, AVIF для сучасних браузерів).
Показувати різні зображення на різних пристроях (art direction).

Приклад:

<picture>
  <source media="(max-width: 600px)" srcset="mobile.jpg" />
  <source media="(max-width: 1200px)" srcset="tablet.jpg" />
  <source srcset="desktop.webp" type="image/webp" />
  <img src="desktop.jpg" alt="Основне зображення" />
</picture>

Це забезпечує кращу оптимізацію та UX на різних пристроях.

89. Що таке доступність (accessibility) і чому вона важлива у веб-розробці?

HTML

Доступність — це практика створення веб-сайтів і застосунків, які можуть використовувати люди з різними обмеженнями (зір, слух, моторика, когнітивні особливості).

Чому важлива:

Забезпечує рівний доступ до інформації для всіх користувачів.
Підвищує SEO і відповідність стандартам (WCAG).
Зменшує ризик юридичних проблем.
Покращує загальний UX для всіх користувачів.

Прості кроки: семантичний HTML, alt-теги для зображень, достатній контраст, клавіатурна навігація.

90. Як підвищити доступність веб-сайту (web accessibility)?

HTML

Основні практики:
- Семантичний HTML — використовуйте правильні теги (<header>, <nav>, <main>, <button>).
- Alt-тексти для зображень — описують зміст для користувачів з екранними читачами.
- Контрастність — достатній контраст тексту і фону.
- Клавіатурна навігація — забезпечити доступ до всіх інтерактивних елементів через клавіатуру.
- ARIA-атрибути — для додаткового опису ролей, станів та властивостей елементів.
- Форми та інтерфейси — підписані поля, зрозумілі повідомлення про помилки.
- Відео та аудіо — субтитри, транскрипти, аудіоописи.

Це підвищує UX для всіх і забезпечує відповідність стандартам WCAG.

91. Що таке ARIA-ролі і як їх використовувати у веб-розробці?

HTML

ARIA (Accessible Rich Internet Applications) — це набір атрибутів, які допомагають екранним читачам та іншим допоміжним технологіям розуміти призначення та стан елементів, особливо динамічних.

Приклади використання:

<button aria-label="Закрити модальне вікно">×</button>
<div role="dialog" aria-modal="true" aria-labelledby="modalTitle">
  <h2 id="modalTitle">Форма зворотного зв'язку</h2>
</div>

role — визначає тип елемента (button, dialog, alert).
aria-label — додає опис для елементів без видимого тексту.
aria-labelledby / aria-describedby — пов'язує елемент з текстовим описом.
aria-hidden="true" — ховає елемент від допоміжних технологій.

Використовуйте ARIA тільки коли семантичний HTML не достатній.

92. Як використовувати атрибут tabindex у веб-розробці?

HTML

tabindex визначає порядок фокусування елементів при навігації клавішею Tab.
- tabindex="0" — елемент доступний у природному порядку документу.
- tabindex="-1" — елемент не доступний через Tab, але його можна сфокусувати програмно (.focus()).
- tabindex="1", 2, … — визначає конкретний порядок фокусування (не рекомендується, бо ускладнює підтримку).

Приклад:

<input type="text" tabindex="1" />
<button tabindex="2">Надіслати</button>
<a href="#" tabindex="3">Детальніше</a>

Використовується для покращення доступності і контролю порядку навігації.

93. Як зробити зображення доступними для всіх користувачів?

HTML

Атрибут alt — короткий опис змісту зображення:

<img src="logo.png" alt="Логотип компанії" />

Порожній alt="" — для декоративних зображень, щоб екранні читачі їх ігнорували.
Текстова альтернатива для складних графіків або діаграм — через <figcaption> або окремий опис.
Контрастність та розмір — зображення повинні бути чіткими і читабельними.
Не покладатися тільки на колір — важлива додаткова інформація для людей з порушеннями зору.

Це забезпечує доступність і кращий UX для користувачів з обмеженими можливостями.

94. Які техніки оптимізації HTML допомагають у SEO?

HTML

Використання семантичних тегів (<header>, <article>, <nav>, <footer>).
Коректна структура заголовків (<h1>–<h6>).
Мета-теги: title, meta description, viewport.
Атрибути alt для зображень.
Чистий і валідний HTML без дублікатів.
Використання структурованих даних (Schema.org).
Оптимізація швидкості завантаження (мінімізація DOM, lazy-load).

95. Що таке семантичний HTML і яку роль він відіграє у SEO?

HTML

Семантичний HTML — це використання тегів за їхнім змістовим призначенням (<header>, <main>, <article>, <section>, <nav>, <footer>, а не <div> всюди).
Це робить структуру сторінки зрозумілішою для браузерів, пошукових систем і assistive-технологій.
Для SEO це критично: пошуковики краще розпізнають ієрархію контенту, визначають головні частини сторінки та підвищують релевантність у видачі.

Семантична розмітка = краща доступність + зрозуміла структура + підсилення SEO.

96. Яке значення мають теги заголовків h1 – h6 для SEO?

HTML

<h1> — головний заголовок сторінки, має бути один; сигналізує пошуковикам про основну тему.
<h2>–<h3> — підзаголовки, що структурують контент і допомагають пошуковим системам зрозуміти ієрархію.
<h4>–<h6> — деталізація дрібніших розділів.
Використання ключових слів у заголовках покращує релевантність.
Правильна ієрархія покращує доступність і юзабіліті, що також враховується пошуковими системами.

Заголовки = «карта сторінки» для SEO й користувачів.

97. Як структуровані дані (Schema.org) впливають на SEO та чому їх варто використовувати?

HTML

Структуровані дані — це спеціальна розмітка (JSON-LD, microdata, RDFa), яка пояснює пошуковим системам значення контенту (напр. продукт, стаття, подія).
Завдяки схемам пошуковики можуть показувати rich snippets: рейтинг, ціну, FAQ, дату публікації тощо.
Це покращує CTR (користувачі частіше клікають по результату).
Вони не напряму підвищують рейтинг, але допомагають пошуковим системам краще індексувати сторінку та зробити її більш привабливою у видачі.

Приклад JSON-LD для статті:

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Як оптимізувати HTML для SEO",
    "author": { "@type": "Person", "name": "Іван Іванов" },
    "datePublished": "2025-08-18",
    "publisher": {
      "@type": "Organization",
      "name": "MySite"
    }
  }
</script>

98. Які найкращі практики використання HTML допомагають у SEO-оптимізації сайту?

HTML

Використовувати семантичну розмітку (<header>, <main>, <article>, <section>).
Один <h1> на сторінку, чітка ієрархія заголовків.
Заповнювати title і meta description з ключовими словами.
Додавати alt для зображень.
Оптимізувати URL-адреси (короткі, зрозумілі, з ключовими словами).
Використовувати структуровані дані (Schema.org).
Уникати дублювання контенту, застосовувати canonical.
Забезпечувати швидке завантаження (lazy-loading, мінімізація DOM).
Робити HTML доступним: aria-атрибути, правильні форми, семантичні елементи.

Правильний HTML = краща індексація + зручність для користувача + кращі позиції у видачі.

99. Способи покращення продуктивності веб-сторінки під час використання HTML?

HTML

Мінімізувати HTML, CSS, JS (видалити пробіли, коментарі).
Використовувати gzip/brotli стиснення на сервері.
Кешування (HTTP headers, Service Worker).
Critical CSS inline → решта асинхронно.
Ледаче завантаження (loading="lazy") для зображень/iframe.
Використання CDN для статичних ресурсів.
Оптимізувати DOM: мінімальна кількість елементів, уникати глибокої вкладеності.
Використовувати атрибути async/defer для скриптів:

<script src="script.js" defer></script>
<script src="analytics.js" async></script>

Кожен з цих кроків покращує швидкість завантаження та взаємодії користувача.

100. Що таке категорії контенту в HTML5?

HTML

Категорії контенту в HTML5 — це класифікація елементів за їхньою роллю та способом використання. Основні категорії:

Головні категорії:

Flow content — більшість елементів, які можуть з'являтися у <body> (p, div, span, h1-h6).
Sectioning content — створюють розділи в документі (article, section, nav, aside).
Heading content — заголовки (h1-h6).
Phrasing content — текст та inline-елементи (a, span, strong, em).
Embedded content — зовнішній контент (img, video, audio, iframe).
Interactive content — елементи для взаємодії (button, input, textarea, select).

Спеціальні категорії:

Metadata content — елементи у <head> (title, meta, link, script).
Form-associated content — елементи форм (input, button, select, textarea).

Розуміння категорій допомагає правильно структурувати HTML та дотримуватись стандартів валідності.

101. Що таке marquee у HTML?

HTML

<marquee> — застарілий тег, який створював рухомий текст або зображення на веб-сторінці.
Елемент автоматично прокручував контент горизонтально або вертикально.

Приклад:

<marquee direction="left" behavior="scroll"
  >Рухомий текст зліва направо</marquee
>

Чому застарілий:

Поганий UX — відволікає та дратує користувачів.
Проблеми з доступністю — ускладнює читання для людей з дислексією.
Не підтримується в HTML5 стандарті.

Альтернатива: CSS animations або JavaScript для створення контрольованих анімацій.

102. Що таке властивість valueAsNumber?

HTML

Властивість valueAsNumber повертає значення елемента форми як число. Воно доступне для елементів, таких як <input> з типами number, range та іншими, де очікується числове введення. Якщо значення не число, властивість повертає NaN.

Приклад:

<input type="number" id="age" value="25" />
<script>
  const input = document.getElementById('age');
  console.log(input.valueAsNumber); // 25 (як число)
  console.log(input.value); // "25" (як рядок)
</script>

Це зручно для роботи з числовими розрахунками без додаткового перетворення типів.

103. Навіщо використовується атрибут capture?

HTML

Атрибут capture використовується в елементах форми, таких як <input type="file">, для запуску камери або мікрофона замість вибору файлу з пам'яті пристрою. Це дозволяє користувачу безпосередньо зробити фото або записати аудіо.

Приклад використання атрибута `capture`:

<form>
  <label for="camera">Зробити фото:</label>
  <input
    type="file"
    id="camera"
    name="camera"
    accept="image/*"
    capture="camera"
  />

  <label for="audio">Записати звук:</label>
  <input
    type="file"
    id="audio"
    name="audio"
    accept="audio/*"
    capture="microphone"
  />

  <button type="submit">Відправити</button>
</form>

Особливо корисно для мобільних додатків, де потрібен швидкий доступ до камери чи мікрофона.

104. Для чого використовується атрибут decoding enterkeyhint novalidate inputmode pattern?

HTML

decoding: Визначає, як браузер має обробляти зображення:
```
<img src="photo.jpg" decoding="async" alt="Фото" />
```
Значення: sync, async, auto
enterkeyhint: Дає браузеру підказку, що робити при натисканні Enter на віртуальній клавіатурі:
```
<input type="text" enterkeyhint="search" placeholder="Пошук..." />
```
Значення: enter, done, go, next, previous, search, send
novalidate: Вимикає валідацію форми при її відправці:
```
<form novalidate>
  <input type="email" required />
</form>
```
inputmode: Вказує тип введення для віртуальної клавіатури:
```
<input type="text" inputmode="numeric" placeholder="Телефон" />
```
pattern: Задає регулярний вираз для перевірки введеного значення:
```
<input
  type="text"
  pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
  placeholder="123-456-7890"
/>
```

105. Що таке і навіщо потрібний атрибут rel="nofollow" у HTML?

HTML

Атрибут rel="nofollow" вказує пошуковим системам не передавати "link juice" (вагу посилання) на цільову сторінку.

Використання:

<a href="https://example.com" rel="nofollow">Зовнішнє посилання</a>

Навіщо потрібен:

SEO-контроль — не передавати рейтинг на ненадійні або рекламні сайти.
Спам-захист — запобігання зловживанню коментарями для просування сайтів.
Реклама — позначення оплачених посилань для відповідності вимогам пошуковиків.

Додаткові значення rel:

rel="noopener" — безпека при target="_blank"
rel="noreferrer" — не передавати referrer
rel="sponsored" — для рекламних посилань

106. Навіщо потрібен атрибут autocomplete?

HTML

Атрибут autocomplete в HTML використовується для вказівки браузеру, чи має він автоматично заповнювати поля форми збереженими даними (наприклад, іменем, адресою, електронною поштою). Він може бути включений або вимкнений для окремих полів форми або для всієї форми.

Значення:

on — дозволяє автозаповнення
off — вимикає автозаповнення
Специфічні значення: name, email, current-password, new-password, tel, address-line1 тощо

Приклади:

<form autocomplete="on">
  <input type="text" name="name" autocomplete="name" placeholder="Ім'я" />
  <input type="email" name="email" autocomplete="email" placeholder="Email" />
  <input type="password" name="password" autocomplete="current-password" />
</form>

Покращує UX — користувачі швидше заповнюють форми завдяки автопідказкам браузера.

107. Як можна приховати елемент розмітки без використання CSS і JS?

HTML

Елемент можна приховати за допомогою атрибуту hidden:

<div hidden>Цей елемент прихований</div>

Особливості атрибута `hidden`:

Це булевий атрибут — його наявність робить елемент невидимим.
Елемент повністю видаляється з візуального потоку.
Семантично означає, що контент зараз не релевантний.
Еквівалент CSS display: none.

Порівняння з іншими способами:

<!-- Атрибут hidden -->
<p hidden>Прихований текст</p>

<!-- Можна змінювати через JavaScript -->
<script>
  document.querySelector('p').hidden = false; // показати
</script>

Це найпростіший спосіб приховати контент без CSS, особливо для динамічних змін через JavaScript.

108. Що таке Geolocation API у браузері та як його застосовують у веброзробці?

HTML

Geolocation API — вбудований у браузери інтерфейс, який дозволяє отримати географічне положення користувача (координати широти й довготи).
Використання потребує згоди користувача.
Застосовується для карт, локальних сервісів, геотаргетингу.

Приклад:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    position => {
      console.log('Lat:', position.coords.latitude);
      console.log('Lng:', position.coords.longitude);
    },
    error => {
      console.error('Помилка:', error.message);
    }
  );
}

Основні методи:

getCurrentPosition() — поточна позиція
watchPosition() — відстеження змін позиції
clearWatch() — зупинка відстеження

Підтримується більшістю сучасних браузерів, але точність залежить від пристрою (GPS, Wi-Fi, IP).

109. Як у вебдодатках використовувати Local Storage і Session Storage?

HTML

Це частина Web Storage API для зберігання даних у браузері.
- localStorage — зберігає дані безстроково (доки користувач не очистить вручну або додаток не видалить).
- sessionStorage — зберігає дані тільки в межах поточної сесії браузера (закрив вкладку = дані зникають).

Приклад:

// Local Storage
localStorage.setItem('username', 'Viktor');
console.log(localStorage.getItem('username')); // Viktor
localStorage.removeItem('username');

// Session Storage
sessionStorage.setItem('theme', 'dark');
console.log(sessionStorage.getItem('theme')); // dark
sessionStorage.clear();

Використання:

Local Storage → збереження налаштувань, токенів, кешованих даних.
Session Storage → тимчасові дані (форма, стан сторінки).

Обидва працюють тільки з рядками (для об'єктів треба JSON.stringify / JSON.parse).

110. Як працює Drag and Drop API у браузері та де його застосовують?

HTML

Drag and Drop API дозволяє перетягувати елементи на сторінці та обробляти їх "скидання".

Ключові події:

dragstart — початок перетягування.
dragover — об'єкт знаходиться над зоною скидання (потрібно викликати event.preventDefault()).
drop — елемент скинуто в зону.
dragend — завершення перетягування.

Приклад:

<div id="drag" draggable="true">Перетягни мене</div>
<div id="drop" style="width:200px;height:200px;border:1px solid black;">
  Зона скидання
</div>

<script>
  const drag = document.getElementById('drag');
  const drop = document.getElementById('drop');

  drag.addEventListener('dragstart', e => {
    e.dataTransfer.setData('text/plain', drag.id);
  });

  drop.addEventListener('dragover', e => {
    e.preventDefault(); // дозволяє скидання
  });

  drop.addEventListener('drop', e => {
    e.preventDefault();
    const id = e.dataTransfer.getData('text');
    const el = document.getElementById(id);
    drop.appendChild(el);
  });
</script>

Використання:

Реалізація drag-and-drop інтерфейсів (сортування списків, kanban-дошки).
Завантаження файлів через "перетягни й скинь".
Інтерактивні UI (редактори, кастомізація блоків).

Просунуті питання з HTML

111. Що таке Fullscreen API у браузері та для чого його застосовують?

HTML

Fullscreen API дозволяє елементу сторінки (відео, зображення, canvas, div) переходити в повноекранний режим.
Використовується для медіа (відеоплеєри, презентації, ігри, карти).
Підвищує зручність користувача, коли потрібна максимальна концентрація на контенті.

Приклад:

const elem = document.documentElement;

// Увійти в повноекранний режим
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  }
}

// Вийти з повноекранного режиму
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  }
}

Використовується разом із подіями fullscreenchange, щоб реагувати на зміни стану.

112. Що таке ApplicationCache в HTML5?

HTML

ApplicationCache в HTML5 — це механізм для офлайн-доступу до веб-додатків. Він дозволяє зберігати ресурси веб-сторінки (HTML, CSS, JavaScript, зображення) в кеші браузера, що дає змогу користувачам працювати з додатком без інтернет-з'єднання.

Особливості:

Використовувався для створення офлайн-додатків
Визначався через атрибут manifest в HTML
Дозволяв кешувати статичні ресурси

Приклад застарілого використання:

<html manifest="cache.appcache">
  <head>
    <title>Офлайн додаток</title>
  </head>
  <body>
    ...
  </body>
</html>

Важливо: Відповідно до специфікації HTML5, цей механізм був застарілий і замінений новими API, такими як Service Workers, які надають більш гнучкі можливості для офлайн-функціональності.

113. Як обробляти події, що надходять від сервера, на фронтенді?

HTML

Для взаємодії з подіями сервера зазвичай використовують WebSocket або Server-Sent Events (SSE).

1. Server-Sent Events (SSE) — для односпрямованих подій від сервера:

const eventSource = new EventSource('/events');

eventSource.onmessage = event => {
  console.log('Нові дані від сервера:', event.data);
};

eventSource.onerror = err => {
  console.error('Помилка SSE:', err);
};

2. WebSocket — для двосторонньої взаємодії:

const socket = new WebSocket('ws://localhost:8080');

socket.onopen = () => {
  console.log('З'єднання встановлено');
};

socket.onmessage = (event) => {
  console.log('Повідомлення від сервера:', event.data);
};

socket.onerror = (err) => {
  console.error('Помилка WebSocket:', err);
};

Використання:

Реал-time оновлення UI (чат, сповіщення, лічильники).
Стримінг даних без перезавантаження сторінки.
Двостороннє спілкування між клієнтом і сервером.

114. Як відобразити сторінку кількома мовами?

HTML

Можна зробити кількамовність так:

1. Окремі HTML-файли для кожної мови:

<!-- index-en.html -->
<html lang="en">
  <head>
    <title>Welcome</title>
  </head>
  <body>
    <h1>Welcome to our site</h1>
  </body>
</html>

<!-- index-uk.html -->
<html lang="uk">
  <head>
    <title>Ласкаво просимо</title>
  </head>
  <body>
    <h1>Ласкаво просимо на наш сайт</h1>
  </body>
</html>

2. Серверна локалізація:

Сервер віддає потрібну мову залежно від налаштувань користувача чи URL (/en/, /uk/).

3. JavaScript + JSON-файли перекладів:

Підвантаження текстів без перезавантаження сторінки (часто у SPA).

4. Фреймворки з i18n:

react-i18next, vue-i18n, Angular i18n.

Важливо: Для базового HTML обов'язково вказувати lang="..." і meta charset="UTF-8".

115. Як правильно задавати і обробляти кодування символів у HTML?

HTML

Використовують UTF-8, щоб підтримувати всі символи (латиницю, кирилицю, емодзі тощо).
Вказують у <head> сторінки:

<meta charset="UTF-8" />

Додаткові рекомендації:

Сервер також має надсилати правильний заголовок:
```
Content-Type: text/html; charset=UTF-8
```
Використання UTF-8 запобігає появі "кракозябр" при відображенні тексту.

Краща практика: всі HTML, CSS і JS файли зберігати в UTF-8 без BOM (Byte Order Mark).

Приклад правильного кодування:

<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="UTF-8" />
    <title>Український текст відображається правильно</title>
  </head>
  <body>
    <p>Привіт! Це українські символи: ї, є, ґ, щ</p>
  </body>
</html>

116. Що робить атрибут lang у HTML і чому він важливий?

HTML

Атрибут lang визначає мову контенту елемента або сторінки:

<html lang="uk">
  <body>
    <p>Це український текст</p>
    <p lang="en">This is English text</p>
  </body>
</html>

Важливість:

SEO: Допомагає пошуковим системам і поліпшує ранжування.
Доступність: Читачі екрану правильно озвучують текст з правильною вимовою.
Локалізація: Впливає на правильне відображення шрифтів і форматування дат, чисел.
Браузерні функції: Автоматичні перекладачі працюють точніше.

Приклади використання:

<!-- Основна мова документа -->
<html lang="uk">
  <!-- Окремі фрагменти іншими мовами -->
  <blockquote lang="en">"To be or not to be, that is the question"</blockquote>

  <!-- Для багатомовних сайтів -->
  <div lang="fr">Bonjour le monde!</div>
</html>

Краща практика: завжди вказувати lang на <html> і при необхідності на внутрішніх елементах з іншою мовою.

117. Як у HTML враховувати підтримку напрямку тексту LTR (зліва направо) та RTL (справа наліво)?

HTML

Використовують атрибут dir:
- dir="ltr" — текст зліва направо (за замовчуванням для більшості мов).
- dir="rtl" — текст справа наліво (арабська, іврит).

Приклади:

<p dir="ltr">Hello, world! → (зліва направо)</p>
<p dir="rtl">مرحبا بالعالم ← (справа наліво)</p>

<!-- Змішаний контент -->
<div dir="rtl">
  <p>نص عربي</p>
  <p dir="ltr">English text in RTL context</p>
</div>

Комбінування з CSS:

[dir='rtl'] {
  text-align: right;
}

[dir='rtl'] .menu {
  float: right;
}

Практичні міркування:

Можна ставити на <html> або окремі елементи.
Потрібно поєднувати з CSS, якщо є специфічне вирівнювання чи флоати (text-align, float, margin).
Враховують при мультимовних сайтах, щоб макет і UI не ламалися.

Краща практика: для мультимовних проєктів задавати lang + dir на кореневому елементі й контролювати локально там, де мова змінюється.

118. Яке значення та користь має використання "хлібних крихт" (breadcrumbs) у веб-навігації?

HTML

Покращує юзабіліті: користувач бачить своє місце в ієрархії сайту.
Швидка навігація: дозволяє швидко перейти на вищі рівні структури.
Зменшує кліки: скорочує кількість кліків до потрібної сторінки.
SEO-переваги: має позитивний вплив на SEO (пошуковики краще розуміють структуру сайту).

Приклад HTML для breadcrumbs:

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li><a href="/">Головна</a></li>
    <li><a href="/category">Категорія</a></li>
    <li><a href="/category/subcategory">Підкategорія</a></li>
    <li aria-current="page">Поточна сторінка</li>
  </ol>
</nav>

Структуровані дані для SEO:

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Головна",
        "item": "https://example.com/"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "Категорія",
        "item": "https://example.com/category"
      }
    ]
  }
</script>

Breadcrumbs особливо корисні для великих сайтів з глибокою ієрархією контенту.

119. Як створити розсувне (collapsible/accordion) меню в HTML?

HTML

Метод 1: Через теги `<details>` і `<summary>` (нативний HTML):

<details>
  <summary>Services</summary>
  <ul>
    <li><a href="#">Web Development</a></li>
    <li><a href="#">UI/UX Design</a></li>
    <li><a href="#">SEO</a></li>
  </ul>
</details>

<details>
  <summary>Products</summary>
  <ul>
    <li><a href="#">Product A</a></li>
    <li><a href="#">Product B</a></li>
  </ul>
</details>

Метод 2: CSS-only accordion:

<div class="accordion">
  <input type="checkbox" id="section1" />
  <label for="section1">Section 1</label>
  <div class="content">
    <p>Content for section 1</p>
  </div>

  <input type="checkbox" id="section2" />
  <label for="section2">Section 2</label>
  <div class="content">
    <p>Content for section 2</p>
  </div>
</div>

<style>
  .accordion input[type='checkbox'] {
    display: none;
  }

  .accordion .content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .accordion input[type='checkbox']:checked + label + .content {
    max-height: 200px;
  }
</style>

Переваги `<details>`/`<summary>`:

Нативна підтримка браузерами
Доступність "з коробки"
Не потребує JavaScript
Семантично правильний

120. Яка різниця між вбудовуванням медіафайлів у HTML і посиланням на них?

HTML

Вбудовування медіа:

Медіа відтворюється прямо на сторінці через теги (<img>, <audio>, <video>, <iframe>). Користувач взаємодіє з контентом без переходу на інший ресурс.

<!-- Вбудовані медіафайли -->
<img src="photo.jpg" alt="Фотографія" />
<video controls>
  <source src="video.mp4" type="video/mp4" />
</video>
<audio controls>
  <source src="music.mp3" type="audio/mpeg" />
</audio>

Посилання на медіа:

Файл відкривається або завантажується після кліку по <a href="...">. Контент не відтворюється безпосередньо у сторінці.

<!-- Посилання на медіафайли -->
<a href="document.pdf">Завантажити PDF</a>
<a href="photo.jpg">Переглянути фото</a>
<a href="video.mp4" download>Завантажити відео</a>

Порівняння:

Критерій	Вбудовування	Посилання
UX	Безшовний перегляд	Потребує переходу/завантаження
Швидкість	Повільніше завантаження сторінки	Швидша сторінка
Трафік	Завантажується автоматично	Завантажується на вимогу
Контроль	Повний контроль відтворення	Залежить від браузера

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

121. Що таке Web Components у фронтенд-розробці та для чого їх використовують?

HTML

Web Components — це нативна технологія браузера для створення повторно використовуваних, інкапсульованих UI-компонентів без залежності від фреймворків. Складаються з трьох частин:

Custom Elements — визначення власних HTML-тегів (<my-button>).
Shadow DOM — ізоляція стилів і DOM-компонента від решти сторінки.
HTML Templates — заготовки розмітки (<template>).

Приклад:

<template id="my-card">
  <style>
    .card {
      border: 1px solid #ccc;
      padding: 10px;
      border-radius: 8px;
    }
  </style>
  <div class="card"><slot></slot></div>
</template>

<script>
  class MyCard extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById('my-card').content;
      const shadow = this.attachShadow({ mode: 'open' });
      shadow.appendChild(template.cloneNode(true));
    }
  }
  customElements.define('my-card', MyCard);
</script>

<my-card>Привіт! Я веб-компонент</my-card>

Використання:

Створення UI-бібліотек без прив'язки до React/Angular/Vue.
Інкапсуляція стилів (не конфліктують з глобальними CSS).
Можна повторно використовувати між різними проєктами чи фреймворками.

122. Що таке Shadow DOM у вебкомпонентах і як його правильно застосовувати?

HTML

Shadow DOM — це механізм інкапсуляції DOM і стилів усередині вебкомпонента. Він приховує внутрішню реалізацію від зовнішнього коду та запобігає конфліктам CSS/JS.

Ключові властивості:

Створюється через element.attachShadow({ mode: 'open' | 'closed' }).
Має власне дерево елементів, відокремлене від основного DOM.
Стилі в Shadow DOM не впливають на глобальні стилі і навпаки.

Приклад:

<div id="host"></div>

<script>
  const host = document.getElementById('host');
  const shadow = host.attachShadow({ mode: 'open' });

  shadow.innerHTML = `
    <style>
      p { color: red; }
    </style>
    <p>Цей текст червоний лише в Shadow DOM</p>
  `;
</script>

Режими:

mode: 'open' — можна отримати доступ до shadow DOM через element.shadowRoot
mode: 'closed' — shadow DOM повністю прихований від зовнішнього коду

Використовується головним чином у Web Components, щоб створювати незалежні й повторно використовувані UI-елементи.

123. Як створити власний HTML-елемент (Custom Element) у браузері?

HTML

Для створення кастомного елемента використовується API Custom Elements:

Створюємо клас, що наслідує HTMLElement.
Реєструємо його через customElements.define().
Використовуємо у розмітці як звичайний тег.

Приклад:

<script>
  class MyButton extends HTMLElement {
    constructor() {
      super();
      this.innerHTML = `<button>Click me!</button>`;
    }

    connectedCallback() {
      console.log('Element додано до DOM');
      this.addEventListener('click', this.handleClick);
    }

    disconnectedCallback() {
      console.log('Element видалено з DOM');
      this.removeEventListener('click', this.handleClick);
    }

    handleClick = () => {
      alert('Custom button clicked!');
    };
  }

  customElements.define('my-button', MyButton);
</script>

<my-button></my-button>

Lifecycle методи:

connectedCallback() — викликається при додаванні до DOM
disconnectedCallback() — викликається при видаленні з DOM
attributeChangedCallback() — викликається при зміні атрибутів
Браузер розпізнає <my-button> як нативний елемент.
Можна додати Shadow DOM для інкапсуляції стилів.

124. Що таке HTML-шаблони template і як їх використовують у веброзробці?

HTML

<template> — це тег для визначення розмітки, яка не відображається на сторінці до моменту її програмного клонування. Використовується разом із JavaScript для динамічного створення контенту.

Особливості:

Вміст шаблона не рендериться при завантаженні сторінки.
Можна клонувати через template.content.cloneNode(true).
Часто застосовується у Web Components та при динамічному рендерингу списків.

Приклад:

<template id="item-template">
  <li class="item">
    <h3 class="title"></h3>
    <p class="description"></p>
  </li>
</template>

<ul id="list"></ul>

<script>
  const template = document.getElementById('item-template');
  const list = document.getElementById('list');

  const items = [
    { title: 'Item 1', description: 'Description 1' },
    { title: 'Item 2', description: 'Description 2' },
  ];

  items.forEach(item => {
    const clone = template.content.cloneNode(true);
    clone.querySelector('.title').textContent = item.title;
    clone.querySelector('.description').textContent = item.description;
    list.appendChild(clone);
  });
</script>

Використання:

Динамічне додавання елементів у DOM.
Інкапсульована розмітка для вебкомпонентів.
Повторне використання UI-блоків без дублювання коду.
Шаблони для генерації контенту на основі даних.

125. Як Flexbox і Grid допомагають створювати адаптивні макети?

HTML

Flexbox

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

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

<style>
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .flex-item {
    flex: 1 1 300px; /* grow, shrink, basis */
    margin: 10px;
  }
</style>

Grid

Дозволяє будувати двовимірні макети (рядки + колонки) і керувати складними структурами сторінки. Легко змінювати кількість колонок під різні екрани через медіа-запити.

<div class="grid-container">
  <div class="grid-item">Header</div>
  <div class="grid-item">Sidebar</div>
  <div class="grid-item">Main</div>
  <div class="grid-item">Footer</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }

  /* Адаптивність через медіа-запити */
  @media (max-width: 768px) {
    .grid-container {
      grid-template-columns: 1fr;
    }
  }
</style>

Переваги для адаптивності:

Автоматичне перенесення елементів на новий рядок
Гнучкий розподіл простору
Легка зміна макету через медіа-запити
Менше коду порівняно з float-основними рішеннями

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

126. Що таке валідація? Які типи перевірок HTML-документа ви знаєте?

HTML

Валідація — це процес перевірки коректності коду HTML-документа відповідно до стандартів W3C.

Типи перевірок:

Синтаксична валідація — перевірка правильності синтаксису та структури тегів.
Валідація атрибутів — перевірка правильності та відповідності використаних атрибутів.
Валідація доступності (Accessibility) — перевірка на відповідність стандартам доступності, наприклад WCAG.
Перевірка сумісності — оцінка роботи коду в різних браузерах.
SEO-валідація — перевірка оптимізації документа для пошукових систем.
Перевірка швидкодії — аналіз завантаження та продуктивності.

Приклади помилок:

<!-- Синтаксична помилка: незакритий тег -->
<div>
  <p>Text</p>
</div>

<!-- Помилка атрибута: неіснуючий атрибут -->
<img src="photo.jpg" invalidattr="value" />

<!-- Доступність: відсутній alt -->
<img src="photo.jpg" />

Інструменти валідації:

W3C Markup Validator
HTMLHint (лінтер)
Lighthouse (доступність і SEO)
axe DevTools

Валідний HTML = краща сумісність, доступність і SEO.

127. Основні етапи перевірок валідності HTML-документа?

HTML

Основні етапи перевірки валідності:

Перевірка синтаксису — аналіз тегів, вкладеності та закриття.
Перевірка атрибутів — відповідність атрибутів специфікації.
Перевірка DocType — відповідність документа заявленому типу.
Перевірка доступності — наявність елементів для підтримки доступності (alt, aria).
Перевірка семантики — правильне використання семантичних тегів.
Перевірка посилань — аналіз працездатності та коректності URL.

Детальний процес:

Етап 1: Структурна валідація

<!DOCTYPE html>
<!-- Правильний DOCTYPE -->
<html lang="uk">
  <!-- Мова документа -->
  <head>
    <meta charset="UTF-8" />
    <!-- Кодування -->
    <title>Заголовок</title>
  </head>
  <body>
    <!-- Правильно вкладені елементи -->
  </body>
</html>

Етап 2: Семантична валідація

Використання відповідних тегів (<header>, <main>, <article>)
Правильна ієрархія заголовків (h1-h6)
Коректні форми та їх елементи

Етап 3: Доступність

Alt-тексти для зображень
ARIA-атрибути де потрібно
Табуляційна навігація

Етап 4: Продуктивність і SEO

Оптимізовані зображення
Мета-теги для SEO
Валідні посилання

128. Якими способами перевіряють HTML на валідність і коректність?

HTML

Основні способи перевірки:

1. Онлайн валідатори:

W3C Markup Validator (validator.w3.org) — офіційний сервіс для перевірки синтаксису й стандартів
HTML5 Validator — перевірка специфічно для HTML5

2. Редакторні плагіни та лінтери:

HTMLHint — інтегрується в CI/CD або редактор
ESLint з HTML плагінами
Prettier — форматування коду

3. Браузерні інструменти:

DevTools — виявляють помилки розмітки в консолі
Elements панель — показує структуру та помилки DOM

4. Автоматизоване тестування:

Lighthouse — комплексна перевірка (accessibility, SEO, performance)
axe DevTools — спеціалізовано на доступності
WAVE — онлайн інструмент для accessibility

5. CI/CD інтеграція:

{
  "scripts": {
    "lint:html": "htmlhint src/**/*.html",
    "validate": "html-validate src/**/*.html"
  }
}

6. Командні інструменти:

html-validate — CLI валідатор
htmllint — лінтер для HTML

Приклад перевірки:

# Перевірка через HTMLHint
npx htmlhint index.html

# Автоматична перевірка в pipeline
npm run lint:html

Валідний HTML = краща сумісність, доступність і SEO.

129. Як перевірити, що HTML-код відповідає стандартам і найкращим практикам?

HTML

Комплексний підхід до перевірки:

1. Валідатори:

W3C HTML Validator для перевірки синтаксису
Nu Html Checker — сучасний валідатор HTML5

2. Лінтери:

HTMLHint з налаштованими правилами
ESLint з плагінами для HTML

3. Audits і аналіз:

Chrome Lighthouse → accessibility, SEO, performance
PageSpeed Insights — Google аналіз продуктивності

4. Accessibility тестування:

axe DevTools — найпопулярніший інструмент
WAVE — онлайн accessibility валідатор
Colour Contrast Analyser — перевірка контрастності

5. Code review:

Внутрішні стандарти команди
PR-рецензії з чеклістами
Автоматичні коментарі від ботів

6. CI/CD інтеграція:

# GitHub Actions приклад
- name: Validate HTML
  run: |
    npm install -g htmlhint
    htmlhint src/**/*.html

- name: Accessibility test
  run: |
    npm install -g @axe-core/cli
    axe src/**/*.html

7. Чекліст найкращих практик:

✅ Семантичні теги замість <div>
✅ Один <h1> на сторінку
✅ Alt-тексти для всіх зображень
✅ Правильна ієрархія заголовків
✅ Валідні форми з labels
✅ HTTPS і безпечні атрибути
✅ Мінімізований HTML для продакшену

Комбо автоматичних інструментів + ручне рев'ю = гарантія дотримання best practices.

130. Якщо представити HTML5 як відкриту веб-платформу, з яких блоків він складається?

HTML

HTML5 як відкрита веб-платформа складається з наступних ключових блоків:

1. Семантика

Семантичні теги для структурування контенту:

<header>, <footer>, <main>, <article>, <section>, <nav>, <aside>
Покращують доступність та SEO

2. Мультимедіа

Нативна підтримка аудіо та відео:

<audio>, <video> — без сторонніх плагінів
<track> — субтитри та доступність
Media API для програмного контролю

3. Графіка

Елементи для роботи з графікою:

<canvas> — растрова графіка через JavaScript
<svg> — векторна графіка
WebGL для 3D графіки

4. Сховище і офлайн

API для локального зберігання даних:

localStorage, sessionStorage
IndexedDB — потужна NoSQL база даних
Service Workers — офлайн функціональність
Cache API

5. Комунікації

WebSocket — реал-тайм двостороння комунікація
Server-Sent Events — односпрямовані події від сервера
WebRTC — peer-to-peer зв'язок
Fetch API — сучасні HTTP запити

6. Форми

Розширені можливості форм:

Нові типи <input> (email, url, date, color, range)
Вбудована валідація
<datalist> — автокомпліт

7. Продуктивність

API для оптимізації роботи:

Web Workers — фонові обчислення
Intersection Observer — ефективне відстеження видимості
Performance API — моніторинг швидкодії

8. Доступність

ARIA-атрибути для покращення доступності
Семантичні ролі та стани
Підтримка асистивних технологій

9. Безпека

Content Security Policy (CSP)
Sandbox атрибути
Захищені контексти (HTTPS)

10. Геолокація та пристрої

Geolocation API
Device Orientation API
Vibration API
Battery Status API

Ця платформа забезпечує повноцінну екосистему для розробки сучасних веб-додатків без залежності від сторонніх плагінів.

131. Що таке Living Standard і як HTML підтримує цей підхід?

HTML

Living Standard — модель розвитку веб-стандартів, коли специфікація постійно оновлюється замість випуску фіксованих версій.
HTML (через WHATWG) слідує цій моделі: нові елементи, атрибути й API додаються без формальних великих версій, а застарілі депрекейтяться поступово.

Переваги:

Завжди актуальна специфікація.
Менше застарілих версій у браузерах.
Швидке впровадження нових технологій (Web Components, <dialog>, API для медіа).
Браузери синхронізуються з Living Standard, забезпечуючи сумісність і інновації одночасно.

HTML Living Standard гарантує, що розробники працюють із сучасним, підтримуваним і сумісним кодом.

132. Як HTML еволюціонує у контексті веб-стандартів і нових технологій?

HTML

Семантика та структура: додаються нові теги для сучасних інтерфейсів (<main>, <dialog>, <template>).
Інтерактивність: тісна інтеграція з JavaScript API (Web Components, Canvas, WebRTC, Web Audio).
Безпека: нові атрибути і механізми (CSP, sandbox, form validation).
Доступність: стандарти WAI-ARIA та краща підтримка скрінрідерів.
Мобільність і PWA: API для офлайн-доступу, push-сповіщень, service workers.
HTML оновлюється разом із CSS і JS стандартами, забезпечуючи сумісність, продуктивність і безпеку.

Коротко: HTML розвивається як частина екосистеми веб-стандартів, зберігаючи сумісність і додаючи сучасні функції для UI, доступності та безпеки.

133. Які ключові зміни та нововведення з'явилися в HTML5.1 та HTML5.2?

HTML

HTML5.1 (2016):
- Нові семантичні теги: <main>, <picture>.
- Покращення форм: autocomplete, autofocus, required та нові input types.
- Додано підтримку custom elements (Web Components).
- Поліпшення атрибутів для accessibility (hidden, tabindex).
- Невеликі уточнення в DOM API і інтеграції з JavaScript.
HTML5.2 (2017):
- Нові теги та атрибути: <dialog> для модальних вікон, formaction для <button> та <input>.
- Забезпечення безпечного використання iframe: sandbox, allow атрибути.
- Покращення ARIA підтримки та accessibility.
- Деякі застарілі елементи були депрекейтовані (<menu>, <keygen>).
- Інтеграція з Content Security Policy (CSP) та нові механізми безпеки.

Кожне оновлення робить HTML більш семантичним, безпечним і дружнім до доступності.

134. Які потенційні напрямки розвитку HTML можна очікувати у найближчому майбутньому?

HTML

Більш тісна інтеграція з Web Components → спрощена кастомізація і повторне використання UI.
Нові семантичні елементи для сучасних інтерфейсів (напр. <dialog> покращення, <modal>, <carousel> можливі).
Покращена мультимедіа-підтримка → Web Audio, WebRTC, 3D/AR контент без сторонніх плагінів.
Більш потужні форми → нові input types, краща валідація і accessibility.
Підтримка прогресивних веб-додатків (PWA) → офлайн, push notifications, фонова синхронізація.
Інтеграція зі стандартами безпеки та конфіденційності → CSP, cookie-less auth, sandboxing.
Оптимізація для мобільних і low-power пристроїв → легші елементи та оптимізовані API.

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

135. Які популярні CSS-фреймворки найчастіше інтегрують із HTML для швидкої розробки UI?

HTML

Bootstrap → найпопулярніший, готові компоненти й grid-система.
Tailwind CSS → утилітарний підхід, висока гнучкість.
Foundation (від Zurb) → адаптивна сітка, компоненти.
Bulma → чистий flexbox-фреймворк, простий у використанні.
Materialize → реалізація Google Material Design.
UIkit → легкий, зручний для швидкого прототипування.

Вибір залежить від потреб: Bootstrap — швидкий старт, Tailwind — кастомні дизайн-системи, Bulma/Materialize — простота.

136. Як CSS-фреймворки на кшталт Bootstrap полегшують створення HTML-структур і UI?

HTML

Готові компоненти: кнопки, форми, навігація, модальні вікна.
Адаптивна сітка (Grid) → легке створення макетів для різних екранів.
Уніфіковані стилі → не потрібно писати CSS з нуля.
JavaScript-компоненти → каруселі, модальні, тултіпи без власного JS.
Кросбраузерність → вирішує проблеми сумісності HTML/CSS.

Результат: швидша розробка, менше помилок у верстці, легке прототипування.

137. Які JavaScript-бібліотеки часто використовують для підвищення інтерактивності HTML-сторінок?

HTML

jQuery → прості маніпуляції DOM і анімації (старі проєкти).
GSAP → складні та плавні анімації.
Anime.js → легкі анімації елементів.
Swiper.js → інтерактивні каруселі і слайдери.
Chart.js / D3.js → інтерактивні графіки та діаграми.
Sortable.js / Dragula → drag-and-drop елементи.
Popper.js / Tippy.js → тултіпи та спливаючі підказки.

Вибір залежить від задачі: анімації, інтерактивні UI, графіки або drag-and-drop.

138. Як HTML, CSS та JavaScript працюють разом у веб-розробці?

HTML

HTML → структура сторінки, семантичні елементи.
CSS → оформлення: кольори, шрифти, розташування, адаптивність.
JavaScript → динаміка та інтерактивність (події, анімації, API).

Взаємозв'язок:

HTML надає «скелет».
CSS прикрашає цей скелет.
JS робить його живим, реагуючи на події користувача або сервер.

Приклад:

<button id="btn">Клікни мене</button>
<style>
  #btn {
    background: blue;
    color: white;
    padding: 10px;
  }
</style>
<script>
  document
    .getElementById('btn')
    .addEventListener('click', () => alert('Привіт!'));
</script>

HTML + CSS + JS = базова тріада фронтенду, яка формує структуру, стиль і поведінку сторінки.

139. Які переваги дає використання HTML-препроцесора (наприклад, Pug/Jade) у фронтенд-розробці?

HTML

Скорочений синтаксис → менше коду, швидше писати.
Шаблонізація → змінні, цикли, умови прямо в HTML.
Міксини → повторне використання блоків розмітки.
Краща структура → вкладеність зрозуміліша, ніж у звичайному HTML.
Легко підтримувати динамічні сторінки в SSR (Express, NestJS).

Мінус: потрібна збірка, ще один шар абстракції.

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

HTML

HTML має нативний тег <template> → його вміст не рендериться, доки не буде клонований через JS.
Шаблон зберігає розмітку, стилі й навіть скрипти, але пасивно, поки не активований.
Використовується для динамічного рендерингу контенту та у Web Components.

Приклад:

<template id="user-template">
  <div class="user">
    <p class="name"></p>
  </div>
</template>

<script>
  const tmpl = document.getElementById('user-template');
  const clone = tmpl.content.cloneNode(true);
  clone.querySelector('.name').textContent = 'Alice';
  document.body.appendChild(clone);
</script>

Перевага — можна підготувати заготовки UI та багаторазово їх використовувати.

141. Які переваги дає мінімізація (minification) HTML-коду?

HTML

Менший розмір файлу → швидше завантаження сторінки.
Зменшення трафіку → особливо важливо для мобільних користувачів.
Кращий SEO → швидкість сайту впливає на ранжування.
Економія ресурсів сервера/CDN.
Часто поєднується з мінімізацією CSS/JS і gzip/brotli компресією.

Мінус: складніше читати код → тому в проєктах зберігають оригінал + мініфіковану збірку.

142. Які основні способи оптимізації часу завантаження HTML-сторінки?

HTML

Мінімізувати HTML, CSS, JS (видалити пробіли, коментарі).
Використовувати gzip/brotli стиснення на сервері.
Кешування (HTTP headers, Service Worker).
Critical CSS inline → решта асинхронно.
Ледаче завантаження (loading="lazy") для зображень/iframe.
Використання CDN для статичних ресурсів.
Правильне підключення скриптів: defer або async.
Оптимізація медіа (webp, responsive images).
Зменшити кількість HTTP-запитів (об'єднання ресурсів).

Головна мета — швидкий First Contentful Paint (FCP) і хороший LCP для користувачів і SEO.

143. Які переваги згортання пробілів (collapsing white space) в HTML та CSS?

HTML

1. Зменшення розміру файлів: Коли зайві пробіли, нові рядки або табуляції автоматично згортатимуться, це допомагає зменшити розмір файлів, що може бути корисно для оптимізації швидкості завантаження веб-сторінки. Це особливо важливо для мобільних пристроїв або при повільному інтернет-з'єднанні.

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

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

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

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

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

MDN link

144. Як у HTML реалізується підхід прогресивного вдосконалення (Progressive Enhancement)?

HTML

Progressive Enhancement → спочатку базова функціональність працює на будь-якому браузері, а додаткові можливості додаються через сучасні HTML, CSS і JS.

Принципи:

Базова розмітка — семантичний HTML для всіх користувачів.
Стілі CSS — покращують дизайн, але не ламають функціонал без них.
JavaScript — додає інтерактивність та анімації, але сайт працює і без нього.

Приклад:

<form action="/submit" method="POST">
  <input type="text" name="email" required placeholder="Email" />
  <button type="submit">Відправити</button>
</form>
<script>
  // JS: покращення UX — валідація на клієнті
  document.querySelector('form').addEventListener('submit', e => {
    const email = e.target.email.value;
    if (!email.includes('@')) e.preventDefault();
  });
</script>

Базовий функціонал завжди доступний, а сучасні фічі підвищують зручність і інтерктивність.

145. Які є поширені антипатерни (погані практики) при написанні HTML?

HTML

Використання <div> і <span> замість семантичних тегів.
Кілька <h1> на сторінці без потреби.
Інлайнові стилі та події (style="", onclick="") → важче підтримувати.
Відсутність атрибута alt у зображень.
Дублікат id на сторінці.
Використання застарілих тегів (<font>, <center>, <marquee>).
Зловживання табличною розміткою для layout замість CSS Grid/Flexbox.
Відсутність lang та meta charset="UTF-8".
Використання пустих елементів для відступів (наприклад, <br><br> замість CSS).

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

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

HTML

Підтримуваність коду → інші розробники швидко розуміють структуру та призначення елементів.
Командна робота → зменшує помилки при масштабуванні проєкту.
SEO і доступність → коментарі про призначення блоків, використання семантики.
Стандарти та best practices → легше дотримуватись внутрішніх правил або HTML5-стандартів.

Практики:

Використовувати коментарі .
Документувати складні структури, шаблони та інтерактивні блоки.
Ведення зовнішньої документації (Wiki, Storybook для UI-компонентів).

Добра документація економить час на підтримку, знижує помилки і покращує командну роботу.

147. Що таке інструменти розробника браузера (DevTools) і як вони допомагають працювати з HTML?

HTML

DevTools — вбудовані інструменти у браузерах (Chrome, Firefox, Edge) для налагодження вебсторінок.
З HTML їх використовують для:
- Перегляду та редагування DOM у реальному часі.
- Аналізу атрибутів, структури й доступності елементів.
- Відстеження завантаження ресурсів і продуктивності.
- Перевірки SEO-тегів, метаінформації, семантики.
Дає можливість швидко експериментувати з розміткою без зміни вихідного коду.

Краща практика: перевіряти валідність HTML, доступність і performance прямо через DevTools.

148. Як забезпечити сумісність HTML-коду між різними браузерами?

HTML

Семантичний HTML → базові елементи (<header>, <main>, <form>) працюють у всіх сучасних браузерах.
Поліфіли та шими → підключення JS/CSS для старих або непідтримуваних функцій (e.g., fetch, Promise, <dialog>).
Тестування у кількох браузерах → Chrome, Firefox, Edge, Safari, мобільні.
Can I Use → перевірка підтримки тегів, атрибутів і API.
Progressive Enhancement / Graceful Degradation → базовий функціонал доступний усюди, додаткові можливості — де підтримується.
DevTools і автоматичне тестування → перевірка рендерингу, accessibility і JavaScript API.

👉 Комбінація стандартного HTML, поліфілів, progressive enhancement і ретельного тестування забезпечує максимальну сумісність.

149. Що таке візуалізація даних у HTML і як її реалізувати на вебсторінці?

HTML

Візуалізація даних — графічне відображення інформації (діаграми, графіки, карти) прямо в браузері.
Реалізація в HTML:

Canvas API → малювання графіки через JavaScript.
SVG → векторна графіка, інтерактивна та масштабована.
Бібліотеки JS → полегшують роботу і додають інтерактивність:
- Chart.js — швидке створення графіків.
- D3.js — гнучкі й кастомні візуалізації.
- Plotly.js — інтерактивні графіки з zoom і tooltip.

Приклад із Chart.js:

<canvas id="myChart"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctx = document.getElementById('myChart').getContext('2d');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Green'],
      datasets: [{ label: 'Votes', data: [12, 19, 7] }],
    },
  });
</script>

Візуалізації роблять дані більш зрозумілими і інтерактивними для користувача.

150. Які теги з найсвіжіших оновлень ви знаєте?

HTML

<mark>: Для виділення тексту (позначення важливих фрагментів).
<progress>: Для відображення прогресу виконання задачі.
<meter>: Для вимірювання значення в певному діапазоні (наприклад, рівень батареї).

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

HTML

Для списків в HTML основні атрибути та способи зміни вигляду/поведінки:

type (для <ol> та <ul> в старому HTML, частково застаріло):

<ol type="1"> — цифри (за замовчуванням)
<ol type="A"> — великі літери
<ol type="a"> — малі літери
<ol type="I"> — римські великі
<ol type="i"> — римські малі

start (для
```
<ol start="5">
  <li>Пункт</li>
</ol>
```
1. reversed (для
  1. compact (застарілий) — менш відстані між пунктами.
  2. CSS (сучасний спосіб):
  - list-style-type — тип маркера (disc, circle, square, none).
  - list-style-image — використовувати зображення замість маркера.
  - list-style-position — розташування маркера (inside, outside).
  Сучасні проєкти майже завжди стилізують списки через CSS, а не HTML-атрибути.

152. Як створити посилання на різні розділи на одній веб-сторінці HTML?

HTML

Відповідь: Для створення гіперпосилання використовується тег <a>. Атрибут href вказує URL або шлях.

Приклад:

<a href="https://example.com">Перейти на Example</a>

153. Опишіть основну структуру HTML-документа.

HTML

Основна структура HTML-документа:

<!DOCTYPE html>
<!-- Оголошення типу документа -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Назва сторінки</title>
  </head>
  <body>
    <!-- Вміст сторінки -->
  </body>
</html>

Складові:

<!DOCTYPE html> — вказує, що документ у HTML5.
<html> — кореневий елемент.
<head> — метадані (кодова сторінка, заголовок, стилі, скрипти).
<body> — видимий вміст сторінки.

154. Різниця між кнопкою та посиланням у HTML?

HTML

<button> використовується для виконання дій (відправити форму, викликати JavaScript функції).
<a> використовується для навігації (перехід на іншу сторінку, розділ).

Приклади:

<button type="submit">Відправити</button> <a href="/about">Про нас</a>

Семантика:

Кнопка — дія.
Посилання — навігація.

Використання правильних елементів покращує доступність і SEO.

155. Чим відрізняється article від section?

HTML

<article> — самостійний блок контенту, який може існувати окремо від сторінки і бути зрозумілий поза контекстом.
<section> — логічний розділ сторінки.

Приклади використання:

Article:

Новини, блоги, публікації.
Коментарі користувачів.
Форумні повідомлення.

Section:

Розділи сторінки (Про нас, Контакти).
Тематичні групи контенту.

Переваги:

Покращує SEO і доступність.
Легко стилізується та структуровано організовує контент.

156. Що таке категорії контенту в HTML5?

HTML

Семантика — семантичні теги для структурування контенту (header, footer, article). Мультимедіа — підтримка аудіо та відео (audio, video). Графіка — елементи для роботи з графікою (canvas, SVG). Сховище і офлайн — API для локального зберігання даних (localStorage, IndexedDB). Комунікації — WebSocket, Server-Sent Events. Форми — розширені можливості форм (нові типи input, валідація). Продуктивність — API для оптимізації роботи (Web Workers). Доступність — ARIA-атрибути для покращення доступності.

157. Що таке data-атрибути, в яких випадках їх використовуєте?

HTML

Атрибут autocomplete в HTML використовується для вказівки браузеру, чи має він автоматично заповнювати поля форми збереженими даними (наприклад, іменем, адресою, електронною поштою). Він може бути включений або вимкнений для окремих полів форми або для всієї форми.

Значення:

on — дозволяє автозаповнення. off — вимикає автозаповнення.

158. Як створити форму в HTML і забезпечити її валідацію?

HTML

HTML-форма — це елемент, який збирає дані від користувача та відправляє їх на сервер або обробляє на клієнті.

Приклад створення:

<form action="/submit" method="post">
  <label for="name">Ім'я:</label>
  <input type="text" id="name" name="name" />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />

  <button type="submit">Відправити</button>
</form>

<form> — контейнер форми.
action — URL, куди відправляються дані.
method — спосіб відправки (get або post).

Поля вводу (<input>, <textarea>, <select>) + кнопки (<button> або <input type="submit">).

159. Які методи відправки даних форми ви знаєте?

HTML

ApplicationCache в HTML5 — це механізм для офлайн-доступу до веб-додатків. Він дозволяє зберігати ресурси веб-сторінки (HTML, CSS, JavaScript, зображення) в кеші браузера, що дає змогу користувачам працювати з додатком без інтернет-з'єднання.

Відповідно до специфікації HTML5, цей механізм був застарілий і замінений новими API, такими як Service Workers.

160. ???

HTML

Coming Soon... 😎

Name		Name	Last commit message	Last commit date
Latest commit History 158 Commits
.github		.github
assets		assets
.gitignore		.gitignore
.prettierrc		.prettierrc
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
LICENSE.txt		LICENSE.txt
README.md		README.md
SECURITY.md		SECURITY.md

Uh oh!

License

DevLoversTeam/html-interview-questions

Folders and files

Latest commit

History

Repository files navigation

HTML

Найпопулярніші запитання та відповіді на співбесіді з HTML

Базові концепції HTML

HTML

HTML

HTML

HTML

Структура елемента:

Приклади:

HTML

HTML

Синтаксис для HTML5:

Призначення:

HTML

HTML

Приклад:

HTML

Приклад:

HTML

Ключові відмінності:

Основи роботи з текстом і структурою

HTML

Поведінка браузера:

Приклад:

HTML

Основні порожні елементи:

Синтаксис:

HTML

<div> (блоковий елемент):

<span> (вбудований елемент):

Приклад:

HTML

Приклади:

HTML

Приклади:

HTML

Приклади:

HTML

Коли використовувати:

HTML

Використання:

HTML

Атрибути та їх використання

HTML

Основні глобальні атрибути:

Атрибути подій:

Приклад:

HTML

Атрибут id:

Атрибут class:

Приклади:

CSS селектори:

HTML

Призначення:

Приклади:

HTML

Переваги:

Приклади:

HTML

Синтаксис:

Коли використовувати:

Приклад використання з JavaScript:

HTML

Випадки використання:

Посилання і навігація

HTML

Різні типи посилань:

HTML

Зовнішні посилання:

Внутрішні посилання:

Основні атрибути:

HTML

Типи відносних URL:

`<div>` (блоковий елемент):

`<span>` (вбудований елемент):

Атрибут `id`:

Атрибут `class`:

Переваги `<optgroup>`:

Атрибути елемента `<form>`: