HTML

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

1. Що таке HTML?

HTML

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

MDN link

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

HTML

Базова структура HTML-сторінки:

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

<!DOCTYPE html> — оголошення типу документа. <html> — корінь HTML-документа. <head> — метаінформація (включає кодування, viewport, заголовок). <body> — основний вміст сторінки. <header>, <main>, <footer> — структурні елементи для організації контенту.

html```

<title>Назва сторінки</title>

Заголовок

Контент сторінки.

```

MDN link

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

HTML

HTML-теги — це основні елементи мови HTML, які використовуються для створення структури та форматування веб-сторінок.
Формат: Теги зазвичай мають відкриваючу та закриваючу частини:

<назва_тега>Вміст</назва_тега>

Наприклад:

html```

Це абзац

```

Типи тегів:

Парні: Мають відкриваючий і закриваючий тег (наприклад, <div></div>).
Одинарні: Самозакриваються (наприклад, <img />).
Теги визначають елементи, такі як заголовки, списки, зображення, таблиці тощо.

MDN link

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

HTML

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

Наприклад:

html```

Це абзац.

```

HTML-елементи можуть мати атрибути, що додають додаткову інформацію, наприклад:

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


Тут `href` — це атрибут елемента `<a>`.

[MDN link](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)

</details>

<details>
<summary>5. Що таке HTML атрибути?</summary>

#### HTML

**Атрибути HTML** — це спеціальні властивості, які додаються до тегів HTML для надання додаткової інформації про елементи або зміни їх поведінки. Вони складаються з пар "ім'я-значення", які записуються в відкриваючому тегу елемента.

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

### Структура атрибутів

Атрибути зазвичай мають таку структуру:

html```
<element attribute="значення">Текст</element>

element: тип HTML елемента (наприклад, <a>, <img>, <input>).
attribute: ім'я атрибута (наприклад, href, src, alt).
значення: значення атрибута, яке може бути обгорнуте в подвійні або одинарні лапки.

Типи атрибутів Існує кілька категорій атрибутів:

Необхідні атрибути: необхідні для коректної роботи елемента (наприклад, src для зображень).
Необов'язкові атрибути: використовуються для зміни стандартної поведінки (наприклад, title для підказок).
Стандартні атрибути: підтримуються багатьма елементами (наприклад, class, id).
Атрибути подій: запускають скрипти при певних діях користувача (наприклад, onclick).

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

Ось кілька прикладів атрибутів у HTML:

1. Посилання:

html``` Приклад посилання


Атрибут `href` вказує URL-адресу, на яку веде посилання. 2. Зображення:

**2. Зображення:**

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

Атрибут src визначає шлях до зображення, а alt надає альтернативний текст.

3. Форма:

html```


Тут `type`, `id`, `name` і `required` є атрибутами, що визначають тип поля вводу та його властивості.

**Важливість атрибутів**

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

[MDN link](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes)

</details>

<details>
<summary>6. Які типи заголовків існують у HTML?</summary>

#### HTML

HTML має шість рівнів заголовків: `<h1>` до `<h6>`. `<h1>` — найбільший і найважливіший, `<h6>` — найменший і найменш важливий.

</details>

<details>
<summary>7. Які типи списків є в HTML?</summary>

#### HTML

- В HTML існують три основні типи списків:

  - **Нумерований список** (Ordered list `<ol>`): Список, елементи якого пронумеровані.

  - **Маркірований список** (Unordered list `<ul>`): Список, елементи якого позначені маркерами.

  - **Описовий список** (Definition list `<dl>`): Cписок відображається у вигляді тексту, де терміни (`<dt>`) виділяються окремо, а їхні описи (`<dd>`) розташовані під ними із відступом.

[W3schoolsua link](https://w3schoolsua.github.io/html/html_lists.html#gsc.tab=0)

</details>

<details>
<summary>8. Як відокремити частину тексту в HTML?</summary>

#### HTML

Щоб відокремити частину тексту в HTML, ви можете використати різні елементи для форматування чи структурування контенту. Ось кілька способів:

### 1. Використання тегів для виділення частини тексту\*\*

**a) Тег &lt;span&gt;**

Якщо вам потрібно виділити частину тексту без зміни його семантики (формату), ви можете використовувати тег `<span>`. Він не впливає на структуру документа і дає змогу застосовувати стилі через CSS.

html```
<p>Це звичайний текст, а ось <span style="color: red;">ця частина тексту</span> виділена червоним кольором.</p>

b) Тег <strong> або <b>

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

html```

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

```

c) Тег <em> або <i>

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

html```

Цей текст потрібно прочитати уважно.

```

2. Використання блочних елементів для відокремлення тексту

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

a) Тег <div> Цей елемент використовується для групування інших елементів або текстів. Ви можете додати до нього стилі або клас.

html```

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

```

b) Тег <section>

Якщо частина тексту має певну тематику, можна використати тег <section>, який позначає логічно відокремлену частину документа.

html```

Розділ 1

Цей текст належить до першого розділу.

```

3. Використання списків для відокремлення пунктів

a) Тег <ul> для ненумерованих списків Використовується для створення списків без нумерації.

html```

Пункт 1
Пункт 2
Пункт 3

```

b) Тег <ol> для нумерованих списків Використовується для створення списків з нумерацією.

html```

Перше завдання
Друге завдання
Третє завдання

```

Підсумок:

Вибір способу для відокремлення частини тексту залежить від того, що ви хочете досягти: чи це просто форматування, чи логічна структура контенту. Для простих стилів — використовуйте <span> чи інші інлайнові елементи, для структуризації — блочні елементи, такі як <div>, <section>, <article>.

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

HTML

У контексті HTML, white space (пробільний простір) — це будь-який невидимий символ, який використовується для розділення елементів або тексту на сторінці. Це може бути:

Пробіли (space): Використовуються для розділення слів або елементів.
Переноси рядка (newlines): Вони відокремлюють рядки тексту або елементів.
Табуляції (tab): Використовуються для відступів або для організації коду, але не впливають на відображення на сторінці.
Різні інші символи пробілу, наприклад, неформатований пробіл ( ), який можна використовувати для створення постійного пробілу, що не згортатиметься.

Як працює пробільний простір у HTML:

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

html```

Це приклад тексту.

```

Відобразиться як:

Це приклад тексту.

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

HTML дозволяє використовувати спеціальні символи для створення пробільного простору, коли це потрібно, наприклад:

  — нерозривний пробіл (не буде згорнутий при згортанні пробілів).
  — також нерозривний пробіл.

Використання пробілу для форматування:

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

Пробіли в текстовому контенті:

Пробільний простір може бути важливим для відображення в текстових елементах, таких як параграфи (<p>), заголовки (<h1>, <h2>, і т.д.), або списки (<ul>, <ol>, <li>). Вони допомагають організувати текст і зробити його більш зрозумілим для користувача.

Підсумок:

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

MDN link

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

HTML

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

Призначення

1. **Режим сумісності:** Вказує браузеру використовувати стандартний режим (standards mode), а не режим сумісності (quirks mode).
2. **Правильний рендеринг:** Забезпечує коректне відображення сторінки відповідно до специфікації обраної версії HTML.

У HTML5 використовується коротка декларація:

<!DOCTYPE html>

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

MDN link

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

HTML

Поточна версія HTML — це HTML5.2. Вона була офіційно рекомендована W3C у грудні 2017 року. HTML продовжує еволюціонувати, але HTML5.2 залишається основою сучасної розробки.

Wiki link

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

HTML

Елементи <div> і <span> в HTML використовуються для структуризації та стилізації веб-контенту, але мають різні характеристики і призначення.

<div> — є блочним елементом. Це означає, що він завжди починається з нового рядка і займає всю ширину доступного простору. Його зазвичай використовують для групування великих частин контенту, таких як кілька абзаців або зображення з підписами
<span> — є рядковим (інлайн) елементом. Він не починає новий рядок і займає лише ту ширину, яку потребує його вміст. Використовується для стилізації менших фрагментів тексту або елементів, таких як слова в реченні

Wiki link

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

HTML

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

Основні характеристики порожніх елементів

Відсутність вмісту: Порожні елементи не містять тексту чи інших тегів між відкриваючим і закриваючим тегами. Наприклад, тег
використовується для вставки розриву рядка, а — для вставки зображення.
Закриваючий тег: У HTML5 порожні елементи можуть бути представлені без закриваючого тегу, але їх можна також закривати за допомогою слешу (/>). Наприклад:
Приклади порожніх елементів: Основні приклади включають:

<img> — для зображень.
<br> — для розриву рядка.
<input> — для елементів форми.
<hr> — для горизонтальної лінії. Ці елементи не містять тексту чи інших елементів всередині.

Семантичне значення: Хоча порожні елементи не містять контенту, вони виконують важливі функції у структурі HTML-документа, забезпечуючи правильну семантику та функціональність сторінки

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

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

HTML

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

css.in.ua link
Attributes list on MDN link

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

HTML

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

html```

Ім'я користувача:

Пароль:

Відправити

```

16. Що таке <marquee> у HTML?

HTML

Тег <marquee> в HTML використовується для створення прокручуваного тексту або елементів на веб-сторінці, відомого як "біжуча строка". Цей елемент дозволяє переміщати текст або зображення в горизонтальному або вертикальному напрямку.

Основні характеристики

Напрямок прокрутки: За замовчуванням текст рухається зліва направо, але можна змінити напрямок на праворуч, вгору чи вниз за допомогою атрибута direction.
Тип поведінки: Атрибут behavior визначає, як буде відбуватися прокрутка:
- scroll: текст постійно рухається в заданому напрямку.
- slide: текст рухається до краю і зупиняється.
- alternate: текст змінює напрямок при досягненні краю12.

Атрибути

Тег <marquee> має кілька атрибутів, які дозволяють налаштувати його вигляд і поведінку:

bgcolor: задає колір фону.
height: висота області прокрутки.
width: ширина області прокрутки.
loop: кількість повторів прокрутки (за замовчуванням — безкінечно).
scrollamount: швидкість руху контенту (значення в пікселях).
scrolldelay: затримка між рухами в мілісекундах13.

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

Ось простий приклад використання тегу <marquee>:

html``` Це біжучий текст!


### Застарілість

Варто зазначити, що тег `<marquee>` вважається застарілим і не рекомендований для використання у сучасних веб-дизайнах. Багато розробників віддають перевагу CSS-анімаціям для досягнення подібного ефекту, оскільки це забезпечує кращу контрольованість і сумісність з новими стандартами HTML

[MDN link](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee)

</details>

<details>
<summary>17. Як відобразити таблицю на веб-сторінці HTML?</summary>

#### HTML

Щоб відобразити таблицю на веб-сторінці HTML, потрібно використовувати спеціальні теги для таблиць. Ось основні кроки та елементи для створення таблиці в HTML:

### 1. Основні теги для таблиці

- **`<table>`**: Створює саму таблицю.
- **`<tr>`**: Означає рядок таблиці (table row).
- **`<th>`**: Означає заголовок таблиці (table header), використовується для створення заголовків стовпців.
- **`<td>`**: Означає клітинку таблиці (table data), використовується для введення даних у таблицю.
- **`<thead>`**, **`<tbody>`**, **`<tfoot>`**: Означають частини таблиці для заголовків, основного вмісту та підсумкових рядків відповідно.

### 2. Приклад базової таблиці в HTML

html```
<table>
  <tr>
    <th>Заголовок 1</th>
    <th>Заголовок 2</th>
  </tr>
  <tr>
    <td>Дані 1</td>
    <td>Дані 2</td>
  </tr>
  <tr>
    <td>Дані 3</td>
    <td>Дані 4</td>
  </tr>
</table>

MDN link

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

HTML

Теги <sub> і <sup> використовуються для відображення тексту у вигляді підрядкового (наприклад, для хімічних формул) або верхньорядкового (наприклад, для степенів) тексту.

html```

H₂O - вода

x² - квадрат числа

```

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

HTML

Опції всередині тегу <select> можна групувати за допомогою тегу <optgroup>.

Приклад:

html``` Яблуко Апельсин Морква Картопля ```

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

HTML

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

Наприклад, замість простого використання <div> для створення заголовків або списків, використовуються спеціалізовані семантичні теги:

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

Це допомагає пошуковим системам і екранним читалям правильно інтерпретувати вміст сторінки.

MDN link

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

HTML

Глобальні атрибути — це атрибути, які можна використовувати з будь-яким HTML-елементом, незалежно від його типу. Вони задають загальні властивості, такі як ідентифікатори, стилі, мова, напрямок тексту та інші.

Глобальні атрибути: id, class, style, title, data-*, lang, dir, hidden, tabindex, accesskey, draggable, spellcheck, translate.

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

HTML

Атрибути class та id в HTML використовуються для ідентифікації та стилізації елементів, але мають різні функції та обмеження.

Атрибут `id`

Унікальність: Атрибут id призначений для унікальної ідентифікації елемента на сторінці. Це означає, що в одному HTML-документі не може бути більше одного елемента з однаковим значенням id.
Використання: Зазвичай використовується для прив'язки стилів у CSS або для доступу до елемента в JavaScript за допомогою методу getElementById().

Наприклад:

html```

Заголовок

```

#header {
  background-color: #f4f4f4;
}

Атрибут `class`

Множинність: Атрибут class дозволяє кільком елементам мати однакове значення класу. Це означає, що один і той же клас може бути застосований до багатьох елементів на сторінці.
Використання: Використовується для групування стилів у CSS або для доступу до елементів у JavaScript через метод getElementsByClassName().

Наприклад:

html```

Київ

Львів

```

const cities = document.getElementsByClassName('city');

Основні відмінності між `class` та `id`

Характеристика	Атрибут `id`	Атрибут `class`
Унікальність	Унікальний на сторінці	Може бути спільним для кількох елементів
Використання	Для конкретного елемента	Для групи елементів
Доступ у JS	`getElementById()`	`getElementsByClassName()`
Чутливість до регістру	Так	Так

Різниця:

class може бути присвоєний кільком елементам, в той час як id має бути унікальним на сторінці (один елемент з таким ідентифікатором).
id має вищий пріоритет у CSS, якщо використовувати селектори з однаковою специфічністю.

Підсумок:

class: для групування елементів з однаковими стилями або функціональністю.
id: для унікальної ідентифікації елемента на сторінці.

w3schoolsua link

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

HTML

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

Внутрішні гіперпосилання — це посилання, яке веде на іншу частину тієї ж веб-сторінки або на іншу сторінку того ж сайту.

Зовнішні гіперпосилання — це посилання, яке веде на інший сайт або домен.

Атрибути для обох типів посилань:

href: Основний атрибут, який вказує на адресу ресурсу (URL).

Для внутрішнього посилання: <a href="#section1">Перейти до розділу 1</a>
Для зовнішнього посилання: <a href="https://example.com">Перейти на зовнішній сайт</a>

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

_self — відкривається в тому ж вікні або вкладці (за замовчуванням).
_blank — відкривається в новій вкладці або вікні.
Приклад для відкриття в новій вкладці: <a href="https://example.com" target="_blank">Відкрити в новій вкладці</a>

rel: Визначає відносини між поточною сторінкою та сторінкою, на яку веде посилання. Для зовнішніх посилань часто використовують:

rel="noopener": запобігає передаванню інформації про джерело.
rel="noreferrer": запобігає передаванню реферера.
Наприклад: <a href="https://example.com" target="_blank" rel="noopener noreferrer">Зовнішнє посилання</a>

Wiki link

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

HTML

Щоб створити посилання на різні секції в межах однієї HTML-сторінки, використовуються ідентифікатори (id) елементів і посилання з символом #.

Приклад:

Додайте ідентифікатори до секцій:

html```

Секція 1

Тут текст секції 1.

Секція 2

Тут текст секції 2.

```

Створіть посилання, які вказують на ці секції:

html``` Перейти до Секції 1 Перейти до Секції 2


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

</details>

<details>
<summary>25. Чи мають елементи HTML власні дефолтні специфічні стилі?</summary>

#### HTML

Так, кожен HTML-елемент має дефолтні стилі, які задаються браузером (user agent styles). Наприклад:

`<h1>` — великий жирний текст.
`<ul>` і `<ol>` — відступи та маркери/нумерація.
`<a>` — синій текст з підкресленням.
`<button>` — стандартне оформлення кнопки.
`<input>` — базова рамка та відступи.

</details>

<details>
<summary>26. Як семантично правильно зверстати зображення з підписом?</summary>

#### HTML

Використовуйте тег `<figure>` для обгортки зображення і `<figcaption>` для підпису.

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

Пояснення:

<figure> — елемент, який містить зображення та його підпис. Це семантичний контейнер, який допомагає групі вмісту (наприклад, зображення, діаграми, таблиці) бути структурованим та зрозумілим.
<img> - сам елемент зображення. Важливо завжди використовувати атрибут alt, який описує зображення. Це необхідно для доступності, щоб люди з вадами зору могли зрозуміти, що зображено.
<figcaption> — елемент підпису, який пояснює зображення. Він може бути розташований як до, так і після тега <img>, але найчастіше ставлять його після зображення для кращої читальності.

Додатково: Якщо картинка має декоративний характер (наприклад, фонова або декоративна іконка), атрибут alt можна залишити порожнім: <img src="image.jpg" alt="">. Використання семантичних елементів покращує доступність та полегшує індексацію сторінки пошуковими системами.

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

HTML

Кнопка (<button>) використовується для виконання дії на сторінці, наприклад, для відправки форми або запуску скрипта.
Посилання (<a>) використовується для навігації до іншої сторінки або ресурсу.

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

HTML

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

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

HTML

Категорії контенту в HTML5 визначають типи елементів і їх роль у документі. Основні категорії:

Metadata content (метадані)
Flow content (потоковий контент)
Sectioning content (секційний контент)
Heading content (заголовки)
Phrasing content (фразовий контент)
Embedded content (вбудований контент)
Interactive content (інтерактивний контент).

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

HTML

Data-атрибути — це спеціальні атрибути в HTML, які дозволяють зберігати додаткову інформацію про елементи без необхідності використовувати нестандартні атрибути. Вони починаються з префікса data-, після якого може слідувати будь-яке слово, що описує дані.

Основні характеристики data-атрибутів

1. Синтаксис: Data-атрибут повинен починатися з data-, після чого йде назва атрибута, яка може містити літери, цифри та дефіси. Наприклад:

html```

```

2. Зберігання даних: Data-атрибути використовуються для зберігання інформації, яка не відображається на екрані, але може бути корисною для скриптів або стилів. Це дозволяє розширити функціональність HTML-елементів без порушення стандартів.

3. Доступ через JavaScript: Для доступу до значень data-атрибутів у JavaScript можна використовувати об'єкт dataset. Наприклад:

JavaScript``` const userId = document.querySelector('div').dataset.userId; // "12345"


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

Data-атрибути також можуть бути використані в CSS для стилізації елементів на основі їх значень. Наприклад:

```css
div[data-user-id="12345"] {
  background-color: yellow;
}

Коли використовувати data-атрибути

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

MDN link MDN link

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

HTML

Створення форм в HTML є важливим аспектом веб-розробки, що дозволяє користувачам вводити та надсилати дані. Для забезпечення коректності введених даних існують різні методи валідації форм. Розглянемо, як створити базову форму та реалізувати її валідацію.

Створення форми в HTML

Основна структура

Форма в HTML визначається за допомогою тегу <form>, який містить інші елементи, такі як поля введення, кнопки тощо. Основні атрибути тега <form>:

action: URL-адреса, куди будуть надсилатися дані форми.
method: метод надсилання даних (зазвичай GET або POST).

Приклад базової форми

html```

Ім'я користувача:

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

<input type="submit" value="Відправити">

```

У цьому прикладі форма містить два поля: для введення імені користувача та пароля. Атрибут required забезпечує, що ці поля повинні бути заповнені перед відправкою.

Валідація форм

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

1. Валідація на стороні клієнта

HTML5 пропонує вбудовану валідацію через атрибути, такі як required, minlength, maxlength, pattern тощо.

Наприклад:

html```


Цей код забезпечує перевірку, що введене значення є дійсною електронною адресою.

**2. Валідація за допомогою JavaScript**

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

Наприклад:

```js
<form id="myForm">
    <label for="age">Вік:</label>
    <input type="number" id="age" name="age">
    <input type="submit" value="Відправити">
</form>

<script>
document.getElementById("myForm").onsubmit = function() {
    var age = document.getElementById("age").value;
    if (age < 18) {
        alert("Вам повинно бути не менше 18 років.");
        return false; // Зупиняє відправку форми
    }
};
</script>

У цьому прикладі при спробі відправити форму перевіряється, чи вік користувача не менше 18 років.

3. Валідація на стороні сервера

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

Висновок

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

freecodecamp link

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

HTML

Існує кілька основних методів відправки даних форми в HTML, які визначають, як дані будуть передані на сервер. Основні з них — це GET та POST.

1. Метод GET

Метод GET передає дані через URL-адресу. Усі параметри запиту додаються до URL, що робить їх видимими в адресному рядку браузера. Це підходить для запитів, які не потребують конфіденційності, наприклад, для форм пошуку.

Приклад:

html```


_Переваги:_

- Простота використання.
- Легкість у кешуванні запитів.

_Недоліки:_

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

**2. Метод `POST`**

Метод `POST` передає дані в тілі HTTP-запиту, що робить їх невидимими для користувача. Цей метод підходить для форм, які містять конфіденційну інформацію (наприклад, паролі) або великі обсяги даних.

Приклад:

html```
<form action="http://example.com/submit" method="post">
    <input type="text" name="username" placeholder="Ім'я користувача" required>
    <input type="password" name="password" placeholder="Пароль" required>
    <input type="submit" value="Увійти">
</form>

Переваги:

Більше обмежень на обсяг переданих даних.
Дані не відображаються в адресному рядку.

Недоліки:

Менш зручний для кешування.

3. Використання FormData

Об'єкт FormData дозволяє збирати дані з форми та надсилати їх за допомогою JavaScript (наприклад, через fetch). Це особливо корисно для асинхронних запитів.

Приклад:

<form id="myForm">
    <input type="text" name="name" value="John">
    <input type="submit">
</form>

<script>
document.getElementById('myForm').onsubmit = async (e) => {
    e.preventDefault();
    let formData = new FormData(e.target);
    let response = await fetch('/submit', {
        method: 'POST',
        body: formData
    });
    let result = await response.json();
    alert(result.message);
};
</script>

Переваги:

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

Висновок

Основними методами відправки даних форм є GET і POST, кожен з яких має свої переваги і недоліки. Для більш складних сценаріїв можна використовувати об'єкт FormData, що забезпечує гнучкість і можливість асинхронного надсилання даних.

MDN link

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

HTML

Основні атрибути HTML-форм:

action: Визначає URL, куди відправляються дані форми.
method: Визначає метод HTTP для відправки даних (GET або POST).
enctype: Вказує тип кодування при відправці форми (наприклад, multipart/form-data для завантаження файлів).
target: Визначає, де відкриється результат після відправки форми (наприклад, _blank для нового вікна).
name: Дає ім'я формі для ідентифікації в JavaScript або під час відправки даних.

Ці атрибути визначають, як дані форми будуть оброблені, куди відправлені та як їх передавати (наприклад, безпечно через POST чи через URL з GET).

Приклад HTML-форм з основними атрибутами:

<form action="/submit" method="POST" enctype="multipart/form-data" target="_blank">
  <label for="username">Ім'я користувача:</label>
  <input type="text" id="username" name="username" required>

  <label for="file">Файл:</label>
  <input type="file" id="file" name="file">

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

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

HTML

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

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

iFrame має кілька основних застосувань:

Вбудовування зовнішнього контенту: За допомогою iFrame можна вставляти контент з інших веб-сайтів, наприклад, новинні стрічки, соціальні мережі або інтерактивні елементи. Це дозволяє збагачувати хост-сайт динамічним контентом без складної інтеграції.
Інтеграція мультимедіа: iFrame часто використовується для вбудовування відео з платформ, таких як YouTube або Vimeo. Це дозволяє користувачам переглядати відео безпосередньо на сторінці без необхідності переходити на інший сайт.
Відображення карт: Наприклад, Google Maps можна вбудувати на сайт за допомогою iFrame, що дозволяє відвідувачам бачити місцезнаходження компанії безпосередньо на сторінці.
Створення "сайту всередині сайту": iFrame може використовуватися для вбудовування інших веб-сайтів або мікросайтів, дозволяючи користувачам переміщатися по них без виходу з основної сторінки.
Ізоляція контенту: Розробники можуть використовувати iFrame для ізоляції контенту, який може поводитися по-різному в різних браузерах. Це може бути корисно для тимчасових рішень під час розробки постійних.

MDN link MDN Embedding link

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

HTML

Елемент <canvas> — це контейнер для малювання графіки за допомогою JavaScript.

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

Створення 2D-графіки (малювання ліній, фігур).
Анімація.
Візуалізація даних (графіки, діаграми).
Обробка зображень.
Рендеринг ігор або інтерактивних ефектів.

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

HTML

Різниця:

1. <canvas>:

Растрова графіка.
Малюнок оновлюється пікселями.
Підходить для анімацій, ігор, візуалізацій із високою частотою оновлення.

2. <svg>:

Векторна графіка.
Заснована на XML, дозволяє працювати з окремими елементами.
Підходить для статичних зображень, діаграм, ікон.

Вибір:

Використовуйте <canvas>, якщо потрібна швидкодіюча динамічна графіка (графіки, ігри). Використовуйте <svg>, якщо важливі чіткість при масштабуванні та інтерактивність окремих елементів.

`<canvas>`

Плюси:

Гнучкість: можна малювати будь-які графічні елементи.
Висока швидкість при великій кількості елементів.
Підходить для анімацій та ігор.

Мінуси:

Векторне масштабування неможливе.
Важче маніпулювати окремими елементами після їх малювання.
Потрібен JavaScript для малювання.

`<svg>`

Плюси:

Векторна графіка: масштабування без втрати якості.
Легко редагувати елементи після малювання.
Підтримка анімацій через CSS та SMIL.

Мінуси:

Менша продуктивність при великій кількості елементів.
Не так гнучко, як canvas для складних анімацій або ігор.

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

HTML

SVG (Scalable Vector Graphics) — це формат векторної графіки, який дозволяє створювати двомірні зображення за допомогою XML. Існує кілька способів додавання SVG на веб-сторінки, кожен з яких має свої особливості.

Варіанти додавання SVG на веб-сторінки

1. Використання тегу <img>

Цей метод є найпростішим способом вставлення SVG. Просто вкажіть шлях до файлу SVG у атрибуті src:

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

Переваги:

Легкість використання.
Підтримка всіх браузерів.

Недоліки:

Обмежена можливість стилізації через CSS.

2. Вбудовування SVG через тег <svg>

Ви можете вставити код SVG безпосередньо в HTML-документ:

<svg width="200" height="200">
    <circle cx="100" cy="100" r="80" fill="green" />
</svg>

Переваги:

Можливість стилізації через CSS.
Легкий доступ до елементів SVG для маніпуляцій за допомогою JavaScript.

Недоліки:

Збільшення розміру HTML-документа, якщо SVG великий.

3. Використання тегу <object>

Цей метод дозволяє вставити SVG як об'єкт:

<object data="my-image.svg" type="image/svg+xml" width="300" height="300"></object>

Переваги:

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

4. Використання тегу <iframe>

SVG можна також вставити через iframe:

<iframe src="my-image.svg" width="300" height="300"></iframe>

Переваги:

Ізоляція контенту, що може бути корисним для безпеки.

Недоліки:

Обмежена можливість взаємодії з CSS і JavaScript на сторінці.

5. Використання псевдоелементів ::before або ::after

SVG можна вставити в CSS через властивість content:

.element::before {
  content: url('my-image.svg');
}

Переваги:

Додає графіку без зміни HTML-коду. Недоліки:
Обмежена можливість взаємодії та стилізації

Висновок

Кожен метод додавання SVG має свої переваги та недоліки. Вибір підходящого способу залежить від конкретних потреб проекту. Вбудовування SVG через тег <svg> забезпечує найбільшу гнучкість у стилізації та інтерактивності, тоді як використання <img> є найпростішим способом для статичних зображень.

freecodecamp link
MDN link

38. Що таке елемент <output> у HTML5?

HTML

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

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

HTML

Елемент <datalist> використовується для створення списку варіантів, які можна вибрати в полі введення <input>.

<input list="options" name="example">
<datalist id="options">
  <option value="Варіант 1">
  <option value="Варіант 2">
  <option value="Варіант 3">
</datalist>

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

HTML

Мета-тег <meta name="viewport"> використовується для управління масштабуванням і відображенням сторінки на мобільних пристроях.

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

41. Що таке ApplicationCache в HTML5?

HTML

ApplicationCache в HTML5 — це механізм для офлайн-доступу до веб-додатків. Він дозволяє зберігати ресурси веб-сторінки (HTML, CSS, JavaScript, зображення) в кеші браузера, що дає змогу користувачам працювати з додатком без інтернет-з’єднання.

Відповідно до специфікації HTML5, цей механізм був застарілий і замінений новими API, такими як Service Workers.

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

HTML

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

Як працює: Вказує кілька варіантів зображень з різною роздільною здатністю або розмірами, і браузер вибирає найкращий залежно від умов. Наприклад:

<img src="image.jpg" srcset="image-480w.jpg 480w, image-800w.jpg 800w" alt="example">

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

HTML

Елемент <picture> використовується для визначення різних варіантів зображень в залежності від умов, таких як розмір екрану або роздільна здатність. Це дозволяє вибирати найкраще зображення для конкретного пристрою.

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

HTML

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

45. Навіщо використовується атрибут 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>

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

HTML

decoding: Визначає, як браузер має обробляти зображення (необов'язкове).
enterkeyhint: Дає браузеру підказку, що робити при натисканні Enter.
novalidate: Вимикає валідацію форми при її відправці.
inputmode: Вказує тип введення (наприклад, текст, телефон).
pattern: Задає регулярний вираз для перевірки введеного значення.

<form novalidate>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>

  <label for="phone">Phone:</label>
  <input type="tel" id="phone" name="phone" inputmode="tel" required>

  <label for="comments">Comments:</label>
  <textarea id="comments" name="comments" decoding="async"></textarea>

  <button type="submit" enterkeyhint="send">Submit</button>
</form>

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

HTML

Атрибут rel="nofollow" вказує пошуковим системам, що не потрібно враховувати дане посилання для оцінки рангу сторінки. Зазвичай використовується для запобігання передачі ваги SEO або для посилань, яким не можна довіряти, наприклад, в коментарях чи рекламних матеріалах.

Приклад використання атрибута rel="nofollow":

<a href="https://example.com" rel="nofollow">Не довіряти цьому посиланню</a>

У цьому випадку, пошукові системи не будуть враховувати це посилання при оцінці сторінки.

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

HTML

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

Приклад:

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

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

HTML

1. Використовувати атрибути `async` або `defer` для завантаження скриптів.

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

2. Мінімізувати HTML, CSS і JavaScript.

Використовуйте інструменти на кшталт UglifyJS для JavaScript та CSS Minifier для CSS, щоб зменшити об'єм файлів.

3. Використовувати кешування браузера.

У файлі .htaccess можна додати правила кешування:

<filesMatch "\.(html|css|js|jpg|jpeg|png|gif|svg)$">
  ExpiresActive On
  ExpiresDefault "access plus 1 year"
</filesMatch>

4. Зменшувати розмір зображень (наприклад, за допомогою формату WebP).

<img src="image.webp" alt="Image" width="600" height="400">

5. Використовувати CDN для статичних файлів.

<link rel="stylesheet" href="https://cdn.example.com/styles.css">

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

<picture>
  <source srcset="image-800w.jpg" media="(min-width: 800px)">
  <img src="image-400w.jpg" alt="Responsive image">
</picture>

7. Обмежити кількість HTTP-запитів.

Об'єднати CSS та JavaScript файли: Замість декількох файлів CSS або JS об'єднайте їх в один, щоб зменшити кількість запитів.

<link rel="stylesheet" href="styles.min.css">
<script src="scripts.min.js"></script>

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

.icon {
  background-image: url('sprite.png');
  background-position: 0 0;
  width: 20px;
  height: 20px;
}

Інлайн-ресурси: Інлайнити невеликі CSS або JavaScript файли прямо в HTML, щоб уникнути окремих запитів.

<style>
  body { background-color: #fff; }
</style>
<script>
  alert('Page Loaded');
</script>

Використовувати кешування: Налаштуйте заголовки для кешування статичних файлів (CSS, JS, зображень), щоб браузер повторно використовував ці ресурси, замість того щоб запитувати їх знову.
Шрифти: Об’єднуйте шрифти в один файл замість використання кількох запитів на різні формати (woff, woff2, ttf).

8. Використовувати Lazy Loading для зображень.

<img src="image.jpg" alt="Image" loading="lazy">

50. Які теги з найсвіжіших оновлень ви знаєте?

HTML

<mark>: Для виділення тексту (позначення важливих фрагментів).
<progress>: Для відображення прогресу виконання задачі.
<meter>: Для вимірювання значення в певному діапазоні (наприклад, рівень батареї).

51. Які переваги згортання пробілів (collapsing white space) в HTML та CSS?

HTML

1. Зменшення розміру файлів: Коли зайві пробіли, нові рядки або табуляції автоматично згортатимуться, це допомагає зменшити розмір файлів, що може бути корисно для оптимізації швидкості завантаження веб-сторінки. Це особливо важливо для мобільних пристроїв або при повільному інтернет-з'єднанні.

2. Спрощення структури документа: Згортання пробілів дозволяє уникнути зайвих пробілів між елементами, що робить код HTML та CSS більш чистим і зрозумілим. Код стає компактнішим, і його легше підтримувати та редагувати.

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

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

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

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

MDN link

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

HTML

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

Приклад:

<a href="https://example.com">Перейти на Example</a>

53. Що таке валідація? Які типи перевірок HTML-документа ви знаєте?

HTML

Валідація — це процес перевірки коректності коду HTML-документа відповідно до стандартів W3C.

Типи перевірок:

Синтаксична валідація — перевірка правильності синтаксису та структури тегів.
Валідація атрибутів — перевірка правильності та відповідності використаних атрибутів.
Валідація доступності (Accessibility) — перевірка на відповідність стандартам доступності, наприклад WCAG.
Перевірка сумісності — оцінка роботи коду в різних браузерах.
SEO-валидация — перевірка оптимізації документа для пошукових систем.
Перевірка швидкодії — аналіз завантаження та продуктивності.

54. Основні етапи перевірок валідності HTML-документа?

HTML

Перевірка синтаксису — аналіз тегів, вкладеності та закриття.
Перевірка атрибутів — відповідність атрибутів специфікації.
Перевірка DocType — відповідність документа заявленому типу.
Перевірка доступності — наявність елементів для підтримки доступності (alt, aria).
Перевірка семантики — правильне використання семантичних тегів.
Перевірка посилань — аналіз працездатності та коректності URL.

55. Якщо представити HTML5 як відкриту веб-платформу, з яких блоків він складається?

HTML

Семантика — семантичні теги для структурування контенту (header, footer, article).
Мультимедіа — підтримка аудіо та відео (audio, video).
Графіка — елементи для роботи з графікою (canvas, SVG).
Сховище і офлайн — API для локального зберігання даних (localStorage, IndexedDB).
Комунікації — WebSocket, Server-Sent Events.
Форми — розширені можливості форм (нові типи input, валідація).
Продуктивність — API для оптимізації роботи (Web Workers).
Доступність — ARIA-атрибути для покращення доступності.

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

HTML

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

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

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

HTML

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

Значення:

on — дозволяє автозаповнення. off — вимикає автозаповнення.

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

HTML

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

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

59. Різниця між <meter> та <progress>?

HTML

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

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

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

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

HTML

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

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

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

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

HTML

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

62. Опишіть основну структуру 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> — видимий вміст сторінки.

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

HTML

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

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

HTML

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

65. Чи можете ви пояснити призначення метатегів у 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"> — інструкції для пошукових ботів.

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

HTML

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

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

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

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

HTML

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

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

Зазвичай ставлять перед </body>, щоб скрипт завантажувався після HTML.
Для асинхронного завантаження можна додати defer або async.

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

HTML

Синтаксис:

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

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

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

69. Як відобразити сторінку кількома мовами?

HTML

Можна зробити кількамовність так:

Окремі HTML-файли для кожної мови — наприклад, index-en.html, index-uk.html, з відповідним lang у <html>.
Серверна локалізація — сервер віддає потрібну мову залежно від налаштувань користувача чи URL (/en/, /uk/).
JavaScript + JSON-файли перекладів — підвантаження текстів без перезавантаження сторінки (часто у SPA).
Фреймворки з i18n — наприклад, react-i18next, vue-i18n, Angular i18n.

Для базового HTML обов’язково вказувати lang="..." і meta charset="UTF-8".

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

HTML

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

Синтаксис:

<div data-user-id="123" data-role="admin"></div>

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

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

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

HTML

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

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

HTML

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

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

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

HTML

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

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

HTML

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

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

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

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

HTML

Абзац:

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

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

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

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

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

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

HTML

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

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

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

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

HTML

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

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

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

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

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

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

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

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
>

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

HTML

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

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

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

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

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

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

HTML

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

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

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

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

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

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

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

HTML

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

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

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

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

HTML

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

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

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

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

HTML

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

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

84. Як створювати карти зображень у 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, circle, poly), coords — координати, href — посилання.

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

HTML

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

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

HTML

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

Нумерований список (
1. Маркований список (
  - Список визначень (
    ) — термін + опис:

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

HTML

Впорядкований список (

):

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

Невпорядкований список (

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

Список з описом (
):

<dl>
  <dt>HTML</dt>
  <dd>Мова розмітки</dd>
</dl>

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

HTML

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

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

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

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

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-атрибути.

90. Що таке 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">).

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

HTML

В HTML5 у <input> з’явилося багато типів для збору різних даних:
- text — звичайне текстове поле.
- password — поле з прихованим введенням.
- email — перевірка формату email.
- url — перевірка формату URL.
- tel — для телефонів (без валідації формату в HTML).
- number — числове поле зі стрілками.
- range — повзунок для вибору значення.
- date — вибір дати.
- month — вибір місяця та року.
- week — вибір тижня.
- time — вибір часу.
- datetime-local — дата і час без часової зони.
- color — вибір кольору.
- checkbox — прапорець.
- radio — перемикач (один із групи).
- file — вибір файлу для завантаження.
- hidden — приховане поле для передачі даних.
- submit, reset, button — кнопки.

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

HTML

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

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

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

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

HTML

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

Переваги:

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

Приклади:

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

або

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

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

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>

Навіщо:

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

95. Що нового в 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"> та адаптивність.

96. Як створити розділ на веб-сторінці за допомогою семантичних елементів 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> — заголовки та підвал розділів або сторінки.

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

HTML

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

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

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

Переваги:

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

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

HTML

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

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

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

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

Коротко:

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

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

HTML

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

Приклад:

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

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

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

HTML

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

Приклад:

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

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

HTML

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

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

HTML

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

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

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

HTML

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

104. Як зробити 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 для кастомних адаптивних таблиць.
Мінімізувати кількість колонок для мобільних.

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

HTML

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

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

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

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

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

HTML

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

Для <video> додатково: width, height, poster (зображення-заставка).

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

HTML

Використати тег <track> всередині <video>.
Атрибути <track>:
- src — файл субтитрів (формат .vtt).
- kind — тип (subtitles, captions, descriptions, chapters, metadata).
- srclang — мова субтитрів (en, uk).
- label — назва треку в меню.

Приклад:

<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="Українська"
  />
</video>

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

108. Яка різниця між вбудовуванням медіафайлів у HTML і посиланням на них?

HTML

Вбудовування — медіа відтворюється прямо на сторінці через теги (<img>, <audio>, <video>, <iframe>). Користувач взаємодіє з контентом без переходу на інший ресурс.
Посилання — файл відкривається або завантажується після кліку по <a href="...">. Контент не відтворюється безпосередньо у сторінці.

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

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

HTML

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

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

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

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

110. Як використовуються медіа-запити (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-структури.

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

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>

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

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

HTML

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

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

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

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

113. Як Flexbox і Grid допомагають створювати адаптивні макети?

HTML

Flexbox — дозволяє легко вирівнювати та розподіляти простір між елементами в одному напрямку (рядок або колонка). Ідеально для адаптивних меню, рядків карток, елементів навігації.
Grid — дозволяє будувати двовимірні макети (рядки + колонки) і керувати складними структурами сторінки. Легко змінювати кількість колонок під різні екрани через медіа-запити.

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

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

HTML

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

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

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

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

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

HTML

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

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

116. Що таке 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 не достатній.

117. Як використовувати атрибут 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>

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

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

HTML

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

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

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

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

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

HTML

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

Приклад:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

120. Яке значення та користь має використання "хлібних крихт" (breadcrumbs) у веб-навігації?

HTML

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

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

HTML

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

Приклад:

<nav>
  <ul>
    <li>
      <a href="#">Services</a>
      <ul class="dropdown">
        <li><a href="#">Web Development</a></li>
        <li><a href="#">UI/UX Design</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<style>
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  nav ul li {
    position: relative;
    display: inline-block;
  }

  nav ul li a {
    padding: 10px 15px;
    display: block;
    text-decoration: none;
  }

  .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
  }

  li:hover .dropdown {
    display: block;
    background: #f9f9f9;
  }
</style>

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

HTML

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

Приклад:

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

123. Як створити розсувне (collapsible/accordion) меню в HTML?

HTML

Через теги <details> і <summary>.

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

124. Що таке 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).
Можна повторно використовувати між різними проєктами чи фреймворками.

125. Що таке 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>

Використовується головним чином у Web Components, щоб створювати незалежні й повторно використовувані UI-елементи.

126. Як створити власний HTML-елемент (Custom Element) у браузері?

HTML

Для створення кастомного елемента використовується API Custom Elements:

Створюємо клас, що наслідує HTMLElement.
Реєструємо його через customElements.define().
Використовуємо у розмітці як звичайний тег.

Приклад:

<script>
  class MyButton extends HTMLElement {
    constructor() {
      super();
      this.innerHTML = `<button>Click me!</button>`;
    }
  }

  customElements.define('my-button', MyButton);
</script>

<my-button></my-button>

Браузер розпізнає <my-button> як нативний елемент.
Можна додати Shadow DOM для інкапсуляції стилів.

127. Що таке HTML-шаблони template і як їх використовують у веброзробці?

HTML

<template> — це тег для визначення розмітки, яка не відображається на сторінці до моменту її програмного клонування. Використовується разом із JavaScript для динамічного створення контенту.

Особливості:

Вміст шаблона не рендериться при завантаженні сторінки.
Можна клонувати через template.content.cloneNode(true).
Часто застосовується у Web Components та при динамічному рендерингу списків.

Приклад:

<template id="item-template">
  <li class="item">Item</li>
</template>

<ul id="list"></ul>

<script>
  const template = document.getElementById('item-template');
  const list = document.getElementById('list');

  for (let i = 1; i <= 3; i++) {
    const clone = template.content.cloneNode(true);
    clone.querySelector('.item').textContent = `Item ${i}`;
    list.appendChild(clone);
  }
</script>

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

Динамічне додавання елементів у DOM.
Інкапсульована розмітка для вебкомпонентів.
Повторне використання UI-блоків без дублювання коду.

128. Як обробляти події, що надходять від сервера, на фронтенді?

HTML

Для взаємодії з подіями сервера зазвичай використовують WebSocket або Server-Sent Events (SSE).

Server-Sent Events (SSE) — для односпрямованих подій від сервера:

const eventSource = new EventSource('/events');

eventSource.onmessage = (event) => {
  console.log('Нові дані від сервера:', event.data);
};

eventSource.onerror = (err) => {
  console.error('Помилка SSE:', err);
};

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 (чат, сповіщення, лічильники).
Стримінг даних без перезавантаження сторінки.
Двостороннє спілкування між клієнтом і сервером.

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

HTML

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

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

HTML

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

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

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

HTML

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

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

132. Як структуровані дані (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>

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

HTML

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

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

133. Що таке 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);
    }
  );
}

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

134. Як у вебдодатках використовувати 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).

135. Як працює 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 (редактори, кастомізація блоків).

136. Що таке 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, щоб реагувати на зміни стану.

137. Як правильно задавати і обробляти кодування символів у HTML?

HTML

Використовують UTF-8, щоб підтримувати всі символи (латиницю, кирилицю, емодзі тощо).
Вказують у <head> сторінки:

<meta charset="UTF-8" />

Сервер також має надсилати правильний заголовок Content-Type: text/html; charset=UTF-8.
Використання UTF-8 запобігає появі “кракозябр” при відображенні тексту.

Краща практика: всі HTML, CSS і JS файли зберігати в UTF-8 без BOM.

138. Що робить атрибут lang у HTML і чому він важливий?

HTML

Атрибут lang визначає мову контенту елемента або сторінки:

<html lang="uk">
  <body>
    <p lang="en">Hello!</p>
  </body>
</html>

Важливість:

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

Краща практика: завжди вказувати lang на <html> і при необхідності на внутрішніх елементах з іншою мовою.

139. Як у HTML враховувати підтримку напрямку тексту LTR (зліва направо) та RTL (справа наліво)?

HTML

Використовують атрибут dir:
- dir="ltr" — текст зліва направо (за замовчуванням для більшості мов).
- dir="rtl" — текст справа наліво (арабська, іврит).

<p dir="ltr">Hello, world!</p>
<p dir="rtl">مرحبا بالعالم</p>

Можна ставити на <html> або окремі елементи.
Потрібно поєднувати з CSS, якщо є специфічне вирівнювання чи флоати (text-align, float, margin).
Враховують при мультимовних сайтах, щоб макет і UI не ламалися.

Краща практика: для мультимовних проєктів задавати lang + dir на кореневому елементі й контролювати локально там, де мова змінюється.

140. ???

HTML

Coming Soon... 😎

Name		Name	Last commit message	Last commit date
Latest commit History 130 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

Наприклад:

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

2. Використання блочних елементів для відокремлення тексту

Розділ 1

3. Використання списків для відокремлення пунктів

Підсумок:

HTML

Як працює пробільний простір у HTML:

Використання пробілу для форматування:

Пробіли в текстовому контенті:

Підсумок:

HTML

Призначення

HTML

HTML

HTML

Основні характеристики порожніх елементів

HTML

HTML

HTML

Основні характеристики

Атрибути

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

HTML

HTML

HTML

HTML

HTML

Атрибут id

Наприклад:

Атрибут class

Наприклад:

Основні відмінності між class та id

HTML

Атрибути для обох типів посилань:

HTML

Секція 1

Секція 2

HTML

HTML

HTML

HTML

Основні характеристики data-атрибутів

Коли використовувати data-атрибути

HTML

Створення форми в HTML

Основна структура

Приклад базової форми

Валідація форм

Висновок

HTML

Висновок

HTML

Основні атрибути HTML-форм:

HTML

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

iFrame має кілька основних застосувань:

HTML

HTML

<canvas>

<svg>

HTML

Варіанти додавання SVG на веб-сторінки

HTML

Атрибут `id`

Атрибут `class`

Основні відмінності між `class` та `id`

`<canvas>`

`<svg>`

1. Використовувати атрибути `async` або `defer` для завантаження скриптів.