https://github.com/devloversteam/html-interview-questions

Найпопулярніші запитання та відповіді на співбесіді з HTML
https://github.com/devloversteam/html-interview-questions

html-interview-questions html-interview-questions-and-answers html5 interview-questions

Last synced: 6 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/devloversteam/html-interview-questions
Owner: DevLoversTeam
License: mit
Created: 2024-12-21T17:35:45.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2025-12-20T13:49:28.000Z (7 months ago)
Last Synced: 2025-12-22T17:15:24.087Z (7 months ago)
Topics: html-interview-questions, html-interview-questions-and-answers, html5, interview-questions
Homepage:
Size: 698 KB
Stars: 48
Watchers: 1
Forks: 6
Open Issues: 0
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md

Awesome Lists containing this project

README

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 теги — це інструкції (команди), які визначають структуру та зміст
веб-сторінки.

- Теги пишуться у кутових дужках `< >`.

- Більшість тегів мають відкриваючу та закриваючу частини:

```html

Текст абзацу

```

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

```html

Зображення
```

- Теги можуть мати атрибути для додаткової інформації:
```html
Посилання
```

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

#### HTML

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

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

```html
контент
```

#### Приклади:

- `

Заголовок

` — елемент заголовка
- `

Абзац тексту

` — елемент абзацу
- ` Фото

` — елемент зображення (самозакриваючий)

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

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

#### HTML

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

```html

Назва сторінки

```

**Складові:**

1. `` — вказує, що документ у HTML5.

2. `` — кореневий елемент.

3. `` — метадані (кодова сторінка, заголовок, стилі, скрипти).

4. `` — видимий вміст сторінки.

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

#### HTML

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

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

```html

```

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

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

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

#### HTML

- Поточна версія — **HTML5**.

- HTML5 є `Living Standard` (живий стандарт), що означає постійне оновлення без
формальних нових версій.

- Підтримується всіма сучасними браузерами.

- Включає нові семантичні елементи, API, покращену підтримку мультимедіа та
багато інших функцій.

- Розробляється консорціумом WHATWG (Web Hypertext Application Technology
Working Group).

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

#### HTML

- `` — повідомляє браузеру, що документ написаний у стандарті
HTML5, щоб уникнути режиму сумісності.

- `lang` у `` — вказує мову вмісту сторінки для пошукових систем, читачів
екрану та інших сервісів (наприклад, lang="uk").

#### Приклад:

```html

```

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

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

#### HTML

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

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

#### Приклад:

```html
<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">

```

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

#### HTML

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

- `` — містить видимий контент для користувача (текст, зображення, кнопки,
відео тощо).

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

**``:**

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

**``:**

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

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

#### HTML

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

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

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

#### Приклад:

```html

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

```

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

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

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

#### HTML

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

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

- `
` — розрив рядка
- `

` — горизонтальна лінія
- `` — зображення
- `` — поле вводу
- `` — метадані
- `` — посилання на ресурс

#### Синтаксис:

```html

Фото

Фото

```

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

#### HTML

#### `

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

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

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

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

#### Приклад:

```html

Це блоковий елемент

Він займає всю ширину

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

```

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

#### HTML

- `` — просто робить текст візуально жирним, без додаткового смислового
значення.

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

#### Приклади:

```html
Цей текст жирний тільки візуально.

Цей текст важливий за змістом.

```

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

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

#### HTML

- `` — виділяє текст курсивом з семантичним наголосом (інтонаційне чи
логічне підкреслення важливості).

- `` — відображає текст курсивом без зміни смислу (наприклад, іноземні слова,
технічні терміни, назви).

#### Приклади:

```html

Я дуже хочу це зробити!

Фільм Титанік вийшов в 1997 році.

Слово bonjour означає "привіт" французькою.

```

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

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

#### HTML

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

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

- `` — виділяє текст жовтим фоном для підсвічування важливого або
знайденого фрагмента.

#### Приклади:

```html

Ціна: 100 грн 80 грн

Важливо: Термін дії до 31 грудня.

```

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

#### HTML

**Абзац:**

```html

Текст абзацу

```

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

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

```html
Текст першого рядка
Текст другого рядка
```

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

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

- `

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

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

#### HTML

- `_{` — підрядковий текст (нижче базової лінії)

- `^{` — надрядковий текст (вище базової лінії)}}

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

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

```html

H₂O - формула води

E = mc² - формула Ейнштейна

```

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

```html

CO₂ - вуглекислий газ

```

**Сноски:**

```html

Цей факт¹ потребує підтвердження.

```

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

#### HTML

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

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

```html

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

Командний рядок повернув: Hello World!

```

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

- `` — для фрагментів коду - `` — для клавіш клавіатури - `` — для змінних

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

#### HTML

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

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

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

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

- `onclick`, `onmouseover`, `onload` тощо

#### Приклад:

```html

Контент...

```

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

#### HTML

#### Атрибут `id`:

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

#### Атрибут `class`:

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

#### Приклади:

```html

Заголовок сайту

Навігація

Важливий текст

Великий важливий текст

Ще важливий текст
```

#### CSS селектори:

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

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

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

#### HTML

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

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

- Показується, якщо зображення не завантажилось.

- Допомагає скрінрідерам робити сайт доступним.

- Використовується для SEO.

#### Приклади:

```html

Графік продажів за 2023 рік

```

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

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

#### HTML

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

#### Переваги:

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

- Клік по автоматично фокусує пов'язане поле.

#### Приклади:

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

```html
Email:
```

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

```html

Погоджуюсь з умовами

```

**Для групи radio buttons:**

```html

Малий

Великий

```

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

#### HTML

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

#### Синтаксис:

```html

```

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

- Зберігати інформацію для JavaScript без впливу на відображення.

- Легко отримувати через element.dataset.userId або element.dataset.role.

- Наприклад, для інтерактивних елементів, налаштувань чи передачі даних у JS.

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

```html
Видалити

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

```

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

#### HTML

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

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

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

```html

```

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

```html

John Doe
Редагувати

```

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

```html

```

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

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

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

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

#### HTML

Використовуємо тег ``:

```html
Текст посилання
```

- `href` — адреса, куди веде посилання.

- Можна додати `target="_blank"` для відкриття в новій вкладці.

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

```html

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

#### HTML

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

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

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

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

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

```html

Зовнішній сайт

Контакти

Розділ 1
```

**Атрибути:**

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

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

#### HTML

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

```html
Посилання
```

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

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

```html
Посилання
Посилання
Посилання
```

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

```html

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

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

#### HTML

- Додати атрибут `target="_blank"` до тега ``:

```html
Відкрити в новій вкладці
```

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

```html

Відкрити в новій вкладці

```

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

```html

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

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

#### HTML

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

```html

Контакти

```

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

```html
Перейти до контактів
```

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

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

```html

Якірні посилання

Про нас
Послуги
Контакти

Про нас

Інформація про компанію...

Послуги

Опис наших послуг...

Контакти

Контактна інформація...

↑ На верх

```

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

```css
html {
scroll-behavior: smooth;
}
```

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

#### HTML

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

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

```html

Якірні посилання

Про нас
Послуги
Контакти

Про нас

Інформація про компанію...

Послуги

Опис наших послуг...

Контакти

Контактна інформація...

↑ На верх

```

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

```css
html {
scroll-behavior: smooth;
}
```

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

#### HTML

Використати `` з атрибутом `download`:

```html
Завантажити інструкцію
```

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

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

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

```html
Завантажити
```

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

```html

Завантажити PDF

Завантажити звіт

Зберегти фото
```

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

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

#### HTML

Атрибут target визначає, де відкриється посилання:

- `_self` (за замовчуванням) — відкриває в тій самій вкладці.

- `_blank` — відкриває у новій вкладці/вікні.

- `_parent` — відкриває в батьківському фреймі (якщо є фрейми).

- `_top` — відкриває у всьому вікні, виходячи з фреймів.

- `customName` — відкриває в конкретному вікні/фреймі з цим ім'ям.

#### Приклади:

```html

Внутрішня сторінка

Зовнішній сайт

Безпечне зовнішнє посилання

Довідка
```

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

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

#### HTML

Використовуємо тег ``:

```html
Опис зображення
```

- `src` — шлях до зображення.

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

Опційно: `width`, `height`, `title`.

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

```html

Фотографія заходу сонця

Графік продажів

Зовнішнє зображення
```

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

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

#### HTML

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

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

- Показується, якщо зображення не завантажилось.

- Допомагає скрінрідерам робити сайт доступним.

- Використовується для SEO.

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

```html

Графік продажів за 2023 рік показує зростання на 25%

Інфографіка: кроки створення веб-сайту
```

**Правила:**

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

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

#### HTML

**Основні формати, які підтримують сучасні браузери:**

- `JPEG` / `JPG` — фотографії з високою деталізацією, стиснення з втратою
якості.

- `PNG` — графіка з прозорістю, без втрати якості.

- `GIF` — анімація та прості картинки з обмеженою палітрою.

- `WebP` — сучасний формат з високим стисненням і прозорістю.

- `SVG` — векторна графіка, масштабована без втрати якості.

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

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

```html

Пейзаж

Оптимізоване зображення

```

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

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

#### HTML

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

1. **Нумерований список (`

2. **Маркований список (`

3. **Список визначень (`

`)** — термін + опис:

#### Приклади:

```html

Перший крок

Другий крок

Третій крок

Молоко

Хліб

Яйця

HTML: HyperText Markup Language
CSS: Cascading Style Sheets

```

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

#### HTML

1. **Впорядкований список (`

```html

Перший

Другий

2. **Невпорядкований список (`

```html

Пункт 1

Пункт 2

3. **Список з описом (`

`):**

```html

HTML: Мова розмітки
JavaScript: Мова програмування

```

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

```html

Третій пункт (C)

Четвертий пункт (D)

Квадратний маркер

Ще один квадратний маркер

```

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

#### HTML

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

` елемента:

```html

Пункт 1
- Вкладений пункт 1
- Вкладений пункт 2

Пункт 2

```

Можна вкладати будь-які типи списків (`

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

```html

Веб-технології
- Frontend
  - HTML
  - CSS
  - JavaScript
- Backend
  - Node.js
  - Python
  - PHP

Мобільна розробка

**Правило:** Вкладений список завжди має бути всередині `

`, а не між `

`
елементами.

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

#### HTML

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

```html

HTML
CSS
JavaScript

PHP
Python
Node.js

Photoshop
Figma

```

#### Переваги ``:

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

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

```html

Україна
Польща

Японія
Китай

```

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

#### HTML

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

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

```html

Ім'я:

Email:

Відправити

```

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

**Поля вводу** (``, ``, ``) + кнопки (`` або
``).

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

```html

Реєстрація користувача

Логін:

Пароль:

Аватар:

Зареєструватися
Очистити

```

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

#### HTML

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

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

- `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` — кнопки.

#### Приклади:

```html

```

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

#### HTML

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

```html

```

- Браузер не дасть відправити форму, поки поле не заповнене.

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

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

```html

Оберіть країну
Україна
Польща

Я погоджуюсь з умовами використання

```

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

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

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

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

#### HTML

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

#### Переваги:

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

- Клік по автоматично фокусує пов'язане поле.

#### Приклади:

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

```html
Email:
```

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

```html

Погоджуюсь з умовами

```

**Для radio buttons:**

```html

Оберіть розмір:

Малий

Великий

```

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

```html

Пароль *

Мінімум 8 символів

```

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

#### HTML

- Для групування даних у формах використовують `` і ``:

```html

Особисті дані
Ім'я:

Email:

```

#### Навіщо:

- Візуально та логічно об'єднує пов'язані поля.

- Покращує доступність (скрінрідери читають легенду).

- Допомагає структурувати великі форми і робить їх зручнішими для користувача.

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

```html

Контактна інформація
Телефон:

Адреса:

Налаштування акаунту

Отримувати сповіщення

Публічний профіль

Преміум функції

Доступно тільки для преміум користувачів

```

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

#### HTML

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

#### HTML5 валідація:

```html

Логін:

Email:

Вік:

Веб-сайт:

Відправити

```

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

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

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

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

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

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

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

#### HTML

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

#### GET метод:

```html

Шукати

```

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

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

#### POST метод:

```html

Увійти

```

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

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

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

```html

Завантажити

Оновити

```

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

#### HTML

#### Атрибути елемента ``:

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

```html

```

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

```html

```

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

```html

```

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

```html

```

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

```html

```

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

```html

```

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

```html

Відправити

```

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

#### HTML

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

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

```html
Оберіть браузер:

```

#### Переваги:

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

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

```html

```

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

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

#### HTML

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

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

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

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

```html

Кількість:

Ціна:

Загальна сума:
100

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);

```

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

```html

Прогрес:

50%

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

```

**Семантика:** `` є семантично правильним способом показати результати,
на відміну від `` або `

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

#### HTML

- Семантичний HTML — це використання тегів за їхнім змістовим призначенням
(``, ``, ``, ``, ``, ``, а не
`

` всюди).

- Це робить структуру сторінки зрозумілішою для браузерів, пошукових систем і
`assistive`-технологій.

- Для `SEO` це критично: пошуковики краще розпізнають ієрархію контенту,
визначають головні частини сторінки та підвищують релевантність у видачі.

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

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

#### HTML

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

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

- Поліпшують SEO — пошукові системи краще розуміють структуру.

- Доступність — скрінрідери можуть правильно інтерпретувати вміст.

- Легше підтримувати та читати код.

- Стандартизують структуру сторінки.

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

#### HTML

- `` — самостійний контент, який може існувати окремо (новини,
блог-пости, коментарі). Має зміст, зрозумілий поза контекстом сторінки.

- `` — тематичний розділ контенту, частина більшої структури. Зазвичай
має заголовок і логічно пов'язаний із рештою сторінки.

#### Приклад:

```html

Стаття про HTML5

Семантичні теги

Опис семантичних тегів...

Доступність

Як семантика покращує доступність...

```

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

#### HTML

Основні нововведення HTML5:

- Семантичні теги: ``, ``, ``, ``, ``,
``.

- Розширені форми: нові типи `` (email, url, number, date, color тощо) та
атрибути (required, placeholder, pattern).

- Мультимедіа: `` і `` без сторонніх плагінів.

- Графіка: `` для растрової графіки, `` для векторної.

- API для JS: локальне сховище (localStorage, sessionStorage), геолокація,
drag-and-drop, Web Workers.

- Подкастинг та інтеграція: ``, `` для зображень і підписів.

- Покращена підтримка мобільних: `` та адаптивність.

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

#### HTML

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

```html

Про нас

Текст про компанію...

Новина дня

Текст новини...

Підказка

Додаткова інформація

```

- `` — логічний розділ сторінки.

- `` — самостійний блок контенту, який може існувати окремо.

- `` — побічна інформація, наприклад, сайдбар.

- `` і `` — заголовки та підвал розділів або сторінки.

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

#### HTML

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

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

- Новини, блоги, публікації.

- Коментарі користувачів.

- Форумні повідомлення.

#### Переваги:

- Покращує SEO і доступність.

- Легко стилізується та структуровано організовує контент.

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

#### HTML

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

```html

Головна
Про нас

```

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

```html

Поради

Корисна інформація для користувача

```

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

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

#### HTML

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

- `` — підпис до медіа всередині ``.

#### Приклад:

```html

Опис зображення
Підпис до зображення

```

- Покращує семантику та доступність.

- Легко стилізується CSS.

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

#### HTML

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

#### Приклад:

```html

Ім'я
Вік

Іван
25

```

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

#### HTML

- `` — групує рядки заголовків таблиці.

- `` — основна частина таблиці з даними.

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

#### Приклад:

```html

Назва
Ціна

Товар 1
100 грн

Товар 2
200 грн

Загалом
300 грн

```

#### Переваги:

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

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

#### HTML

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

- `rowspan` — об'єднує комірку по кількох рядках.

```html
Об'єднано 2 стовпці
Об'єднано 3 рядки
```

#### Приклад:

```html

Заголовок на 2 колонки
Вертикальний заголовок

Комірка 1
Комірка 2

Комірка 3
Комірка 4
Комірка 5

```

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

#### HTML

- Використовувати семантичні теги: ``, ``, ``, ``,
``.

- Додавати атрибут scope у `` (scope="col" або scope="row") для зв'язку
заголовків і комірок.

- Додавати `` для опису таблиці.

- Уникати зайвого `rowspan/colspan`, якщо вони ускладнюють навігацію.

- Забезпечити достатній контраст та видимі фокуси при навігації з клавіатури.

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

```html

Продажі за 2024 рік

Місяць
Продажі
Прибуток

Січень
1000
200

```

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

#### HTML

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

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

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

#### Приклад:

```html

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();

```

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

#### HTML

#### ``:

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

#### ``:

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

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

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

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

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

#### HTML

- `` — векторна графіка, кожен елемент DOM-структурований, масштабований
без втрати якості, легкий для анімації та стилізації через CSS/JS.

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

#### Порівняння:

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

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

#### HTML

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

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

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

```html

```

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

2. **Як зображення** — через ``:

```html

```

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

3. **CSS background**:

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

4. **Через `` або ``**:

```html

```

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

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

#### HTML

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

#### Приклад:

```html
План будівлі

```

#### Пояснення:

- `usemap="#map1"` — прив'язка картинки до карти
- `` — задає клікабельну область:
- `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

- **Аудіо** — тег `` з атрибутом controls:

```html

Ваш браузер не підтримує аудіо.

```

- **Відео** — тег `` з атрибутом controls:

```html

Ваш браузер не підтримує відео.

```

#### Важливо:

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

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

#### HTML

#### Спільні атрибути для `` та ``:

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

#### Додатково для ``:

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

#### Приклад:

```html

```

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

#### HTML

Використати тег `` всередині ``.

#### Атрибути ``:

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

#### Приклад:

```html

```

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

```
WEBVTT

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

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

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

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

#### HTML

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

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

- `` — задає кодування.

- `` —
адаптивність на мобільних.

- `` — SEO.

- `` — інструкції для пошукових
ботів.

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

```html

```

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

#### HTML

- У `` додаємо тег:

```html

```

#### Атрибути:

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

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

```html

body {
margin: 0;
padding: 20px;
}

```

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

#### HTML

- Через тег ``:

```html
<script src="script.js">
```

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

```html

console.log('Привіт, світ!');

```

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

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

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

#### HTML

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

#### Синтаксис:

```html

```

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

```html

```

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

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

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

```html

```

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

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

#### HTML

#### Синтаксис:

```html

```

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

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

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

```html

Моя сторінка

Про нас

Текст про компанію...

```

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

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

#### HTML

#### `` — для дій:

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

#### `` — для навігації:

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

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

```html

Відправити форму
Відкрити меню
Подобається

Про нас
Перейти до контактів
Завантажити PDF
Зовнішнє посилання
```

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

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

#### Стилізація:

```html

Зареєструватися

Зареєструватися
```

**Правило:** використовуйте `` для навігації, `` для дій.

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

#### HTML

- Використовуємо семантичний тег `` з внутрішнім списком посилань
`

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

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

```html
- Головна
- Про нас
- Послуги
- Контакти
```

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

```html
```

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

1. **Використовуйте ``** для основних навігаційних блоків
2. **Структуруйте списками** `
- `
  3. **Додавайте `aria-label`** для множинних навігацій
  4. **Позначайте поточну сторінку** `aria-current="page"`
  5. **Забезпечте доступність** клавіатурної навігації

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

#### HTML

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

#### Приклад з використанням `` та ``:

```html

Меню

Головна

Про нас

Послуги

Контакти

```

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

```html

☰ Меню

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;
});

```

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

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

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

#### HTML

- Використовуємо вкладені списки `

#### Приклад:

```html

/* Основні стилі меню */
.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;
}

```

#### Переваги:

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

#### Недоліки:

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

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

#### HTML

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

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

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

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

#### Приклади:

```html

Рівень заряду батареї:
70%

Оцінка статті:
8 з 10

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

650 GB з 1000 GB

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/devloversteam/html-interview-questions

Awesome Lists containing this project

README

HTML

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

Заголовок

Контакти

Про нас

Послуги

Контакти

Про нас

Послуги

Контакти

Стаття про HTML5

Семантичні теги

Доступність

Про нас

Новина дня

Підказка

Поради

Моя сторінка

Про нас