100 запитань та відповідей по темі:

HTML — Шпаргалка

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

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

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

▸ 2. Чим HTML відрізняється від CSS та JavaScript?
  • HTML — описує структуру веб-сторінки.
  • CSS — відповідає за оформлення і стиль.
  • JavaScript — додає динаміку та інтерактивність.

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

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

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

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

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

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

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

Теги можуть мати атрибути:

<a href="https://example.com">Посилання</a>
▸ 4. Що таке HTML елементи?

HTML елемент — це відкриваючий тег + контент + закриваючий тег.

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

Приклади:

<h1>Заголовок</h1> — елемент заголовка
<p>Абзац тексту</p> — елемент абзацу
<img src="photo.jpg" alt="Фото"> — елемент зображення (самозакриваючий)
▸ 5. Опишіть базову структуру HTML-сторінки? 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Назва сторінки</title>
  </head>
  <body>
    <!-- Вміст сторінки -->
  </body>
</html>

Складові: <!DOCTYPE html> — HTML5; <html> — кореневий елемент; <head> — метадані; <body> — видимий контент.

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

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

<!DOCTYPE html>
  • Запобігає режиму сумісності (quirks mode).
  • Забезпечує коректне відображення згідно зі стандартами.
  • Має бути першим рядком документа.
▸ 7. Яка поточна версія HTML?

Поточна версія — HTML5. Це Living Standard (живий стандарт), що постійно оновлюється.

▸ 8. Що роблять атрибути DOCTYPE та html lang? 
<!DOCTYPE html>  — вказує стандарт HTML5
<html lang="uk"> — вказує мову вмісту

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

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

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

  • Назва сторінки — <title>
  • Мета-теги — <meta>
  • Підключення стилів — <link>
  • Скрипти — <script>
  • Фавікон — <link rel="icon">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Назва сторінки</title>
  <link rel="stylesheet" href="styles.css" />
  <script src="script.js"></script>
</head>
▸ 10. Яка різниця між тегами <head> та <body>?

<head> — метадані (не відображаються напряму). <body> — видимий контент (текст, зображення, кнопки тощо).

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

Пробільний простір — пробіли, табуляції та переноси рядків. Браузер зазвичай схлопує кілька пробілів до одного, кілька переносів — до пробілу; початкові та кінцеві пробіли ігноруються.

Приклад:

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

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

Щоб зберегти пробіли й переноси — CSS white-space: pre або тег <pre>.

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

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

  • <br> — розрив рядка
  • <hr> — горизонтальна лінія
  • <img> — зображення
  • <input> — поле вводу
  • <meta>, <link> — метадані/ресурси
<img src="photo.jpg" alt="Фото" />
<br />
<input type="text" name="name" />
▸ 13. У чому різниця між елементами <div> і <span>?
  • <div> — блоковий елемент (повна ширина, з нового рядка) — для великих блоків.
  • <span> — вбудований елемент (лише потрібна ширина, в рядку) — для невеликих фрагментів.
<div>Це блоковий елемент</div>
<div>Він займає всю ширину</div>

<p>Це <span>вбудований елемент</span> всередині абзацу.</p>
▸ 14. Яка різниця між тегами <b> та <strong>?

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

<p>Цей текст <b>жирний</b> тільки візуально.</p>
<p>Цей текст <strong>важливий</strong> за змістом.</p>
▸ 15. Коли використовувати <em> замість <i>?
  • <em> — курсив із логічним/інтонаційним наголосом.
  • <i> — курсив без семантики (назви, іншомовні слова, терміни).
<p>Я <em>дуже</em> хочу це зробити!</p>
<p>Фільм <i>Титанік</i> вийшов у 1997 році.</p>
<p>Слово <i>bonjour</i> означає "привіт" французькою.</p>
▸ 16. Призначення тегів <small>, <s> та <mark>?
  • <small> — другорядна/додаткова інформація (менший текст).
  • <s> — закреслений (втратив актуальність).
  • <mark> — підсвічений фрагмент.
<p>Ціна: <s>100 грн</s> 80 грн</p>
<p><mark>Важливо:</mark> Термін дії до 31 грудня.</p>
<p>Основний текст. <small>© 2023 Всі права захищені.</small></p>
▸ 17. Як створити абзац або розрив рядка?

Абзац:

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

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

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

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

▸ 18. Для чого використовуються теги <sub> та <sup>?
  • <sub> — підрядковий (нижче базової лінії).
  • <sup> — надрядковий (вище базової лінії).
<p>H<sub>2</sub>O — формула води</p>
<p>E = mc<sup>2</sup> — формула Ейнштейна</p>
<p>CO<sub>2</sub> — вуглекислий газ</p>
<p>Цей факт<sup>1</sup> потребує підтвердження.</p>
▸ 19. Розкажіть про тег <samp>?

<samp> — позначає результат виконання програми (повідомлення, вивід). За замовчуванням рендериться моноширинним шрифтом.

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

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

▸ 20. Що таке семантичні теги в HTML?

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

  • <header> — шапка документа або секції
  • <footer> — нижній колонтитул документа або секції
  • <article> — самостійний блок контенту
  • <section> — логічний розділ
  • <nav> — навігаційне меню
▸ 21. Для чого використовується тег <figure> та <figcaption>?

<figure> — контейнер для ілюстрацій, діаграм, фото тощо. <figcaption> — підпис до фігури.

<figure>
  <img src="photo.jpg" alt="Фото">
  <figcaption>Підпис до фото</figcaption>
</figure>
▸ 22. Що таке списки в HTML?

HTML підтримує три основні типи списків:

  • <ul> — ненумерований список
  • <ol> — нумерований список
  • <dl> — список визначень (definition list)
<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ul>
▸ 23. Що таке атрибут alt у тегу <img>?

Атрибут alt описує вміст зображення для доступності та SEO. Якщо зображення не завантажується, користувач побачить текст з alt.

<img src="logo.png" alt="Логотип компанії">
▸ 24. Що таке посилання в HTML?

Посилання створюється тегом <a> з атрибутом href:

<a href="https://example.com">Відкрити сайт</a>

Атрибут target="_blank" відкриває посилання в новій вкладці.

▸ 25. Що таке форма в HTML і які основні елементи вона містить?

Форма збирає дані від користувача:

  • <form> — контейнер форми
  • <input> — поле вводу
  • <textarea> — текстове поле
  • <button> — кнопка відправки
  • <select> — випадаючий список
<form action="/submit" method="post">
  <input type="text" name="name" />
  <button type="submit">Відправити</button>
</form>
▸ 26. Що таке атрибут id і class?

Атрибути для ідентифікації та стилізації елементів:

  • id — унікальний ідентифікатор елемента на сторінці
  • class — група елементів з однаковим класом для стилізації або скриптів
<div id="header">Шапка</div>
<div class="card">Картка 1</div>
<div class="card">Картка 2</div>
▸ 27. Що таке атрибут title?

Атрибут title надає підказку при наведенні курсора на елемент:

<abbr title="HyperText Markup Language">HTML</abbr>

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

▸ 28. Що таке коментарі в HTML?

Коментарі — це текст, який не відображається у браузері:

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

Використовуються для пояснень коду або тимчасового відключення фрагментів HTML.

▸ 29. Що таке медіа-елементи в HTML?

Медіа-елементи додають аудіо та відео на сторінку:

  • <audio> — для звуку
  • <video> — для відео
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
</audio>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>
▸ 30. Що таке фрейми та тег <iframe>?

<iframe> дозволяє вбудовувати інший HTML-документ всередині сторінки:

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

Використовується для вбудовування карт, відео, сторонніх сайтів тощо.

▸ 31. Що таке тег <main> і для чого він використовується?

<main> — головний контент сторінки. Використовується один раз на сторінку і містить основну інформацію.

▸ 32. Що таке <aside> і коли його використовують?

<aside> — бічний блок або додаткова інформація, що не є основним контентом (наприклад, сайдбар, рекламні блоки).

▸ 33. Що таке <mark> і чим він відрізняється від <strong>?

<mark> — підсвічує текст (візуально), <strong> — підкреслює важливість семантично та візуально.

▸ 34. Що таке <time> і як його правильно використовувати?

<time> — відображає дату або час. Має атрибут datetime для стандартизованого формату.

<time datetime="2025-09-04">4 вересня 2025</time>
▸ 35. Що таке <address> і де його доцільно розміщувати?

<address> — контактна інформація автора або організації. Використовується у <footer> або окремому блоці контакту.

▸ 36. Яка різниця між <section> та <article>?

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

▸ 37. Що таке <blockquote> і як його форматують?

<blockquote> — довга цитата. Може мати атрибут cite для джерела.

▸ 38. Що таке <cite> і коли його застосовують?

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

▸ 39. Як використовувати <q> для коротких цитат?

<q> — для коротких цитат у тексті. Браузер автоматично додає лапки.

<p>Він сказав: <q>Привіт!</q></p>
▸ 40. Що таке <details> та <summary> і як їх правильно поєднувати?

<details> — розкривний блок, <summary> — заголовок, який відображається завжди. Використовуються разом для FAQ чи прихованого контенту.

▸ 41. Як створити вкладені списки в HTML? 
<ul>
  <li>Пункт 1
    <ul>
      <li>Підпункт 1</li>
      <li>Підпункт 2</li>
    </ul>
  </li>
  <li>Пункт 2</li>
</ul>
▸ 42. Чим відрізняється <ul> від <ol>?

<ul> — ненумерований список, <ol> — нумерований список. Використовуються для різних контекстів.

▸ 43. Що таке <dl>, <dt> та <dd> і як їх використовувати?

<dl> — список визначень, <dt> — термін, <dd> — визначення.

<dl>
  <dt>HTML</dt>
  <dd>Мова розмітки</dd>
</dl>
▸ 44. Як створити просту таблицю за допомогою <table>? 
<table>
  <tr><th>Ім'я</th><th>Вік</th></tr>
  <tr><td>Оля</td><td>25</td></tr>
</table>
▸ 45. Що таке <thead>, <tbody> та <tfoot> у таблицях?

Розділяють таблицю на заголовок (<thead>), тіло (<tbody>) та нижню частину (<tfoot>).

▸ 46. Як використовувати атрибут colspan та rowspan у таблицях?

Атрибути дозволяють об’єднувати стовпці та рядки:

<td colspan="2">Об'єднані стовпці</td>
<td rowspan="2">Об'єднані рядки</td>
▸ 47. Що таке <caption> у таблиці і навіщо він потрібен?

<caption> — підпис таблиці, який описує її зміст. Розміщується всередині <table> перед рядками.

▸ 48. Як додати форми з <form> та <fieldset>?

<form> — контейнер для вводу даних. <fieldset> групує пов’язані поля, <legend> дає заголовок групи.

▸ 49. Що таке <label> і як він взаємодіє з <input>?

<label for="id">Текст</label> пов’язує підпис з полем вводу через атрибут id для кращої доступності.

▸ 50. Які типи полів <input> існують і для чого вони потрібні?
  • text — звичайний текст
  • password — пароль
  • email — email
  • number — числове значення
  • checkbox, radio — прапорці та радіо-кнопки
  • submit — кнопка відправки
  • file — вибір файлу
▸ 51. Що таке <img> і які основні атрибути він підтримує?

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

▸ 52. Що таке <picture> і як він допомагає адаптивним зображенням?

<picture> дозволяє задавати різні джерела зображень для різних розмірів екрану через <source>.

▸ 53. Що таке <audio> і як додати альтернативні формати аудіо?

<audio controls> додає аудіо. Для підтримки всіх браузерів додають кілька <source> з різними форматами.

▸ 54. Що таке <video> і як працює атрибут controls?

<video controls> — відео з елементами керування: відтворити, пауза, гучність.

▸ 55. Як вставити зовнішнє відео за допомогою <iframe>? 
<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" frameborder="0" allowfullscreen></iframe>
▸ 56. Що таке <source> і де його використовують?

<source> використовується всередині <audio> або <video> для підключення альтернативних форматів.

▸ 57. Як працює <track> для субтитрів у відео?

<track kind="subtitles" src="subtitles.vtt" srclang="ua" label="Українська"> додає субтитри до відео.

▸ 58. Що таке <canvas> і як створювати графіку за допомогою нього?

<canvas id="myCanvas" width="200" height="100"></canvas> дозволяє малювати графіку через JavaScript.

▸ 59. Що таке <svg> і коли краще використовувати замість <img>?

<svg> — векторна графіка. Краще для логотипів, іконок та анімацій, де важлива масштабованість без втрати якості.

▸ 60. Що таке <map> та <area> і як вони створюють клікабельні зони на зображенні?

Створюють інтерактивні зони на зображенні. <map name="mapName"> містить <area shape="rect" coords="x1,y1,x2,y2" href="#">.

▸ 61. Що таке абсолютні та відносні посилання?

Абсолютні: повний URL (https://...). Відносні: шлях від поточної сторінки (./index.html, ../page.html).

▸ 62. Як використовувати <a> з target="_blank" і rel="noopener"?

Відкриває посилання у новій вкладці. rel="noopener" підвищує безпеку та швидкодію.

▸ 63. Що таке якорі (#id) і як на них посилатися?

Позначка в документі. Посилання: <a href="#section1">Перейти</a>.

▸ 64. Що таке маршрутизація через <base>?

<base href="https://example.com/"> встановлює базовий URL для всіх відносних посилань на сторінці.

▸ 65. Як створювати кнопки з <button> та <input type="button">?

<button>Натисни</button> або <input type="button" value="Натисни">. Обидва створюють кнопки, але <button> гнучкіший у розмітці.

▸ 66. Що таке <nav> і для чого він потрібен?

Семантичний блок для навігації по сайту. Може містити списки посилань (<ul><li><a></a></li></ul>).

▸ 67. Як працюють списки навігації з <ul> і <li> у <nav>?

Створюють структуроване меню: <nav><ul><li><a href="#">Посилання</a></li></ul></nav>.

▸ 68. Що таке <menu> та <menuitem> і чи актуально їх використовувати?

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

▸ 69. Як створити “кнопку назад” за допомогою HTML та JavaScript?

<button onclick="history.back()">Назад</button> повертає на попередню сторінку.

▸ 70. Що таке <link> і як він підключає стилі та інші ресурси?

<link rel="stylesheet" href="style.css"> підключає CSS. Може використовуватися для фавіконів, prefetch, альтернативних ресурсів.

▸ 71. Що таке <meta charset> і навіщо його вказувати?

Встановлює кодування сторінки (зазвичай UTF-8) для правильного відображення символів.

▸ 72. Що таке <meta name="viewport"> і як він впливає на мобільні пристрої?

Контролює масштаб та ширину сторінки на мобільних пристроях, наприклад: <meta name="viewport" content="width=device-width, initial-scale=1">.

▸ 73. Що таке <meta name="description"> для SEO?

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

▸ 74. Що таке <meta name="keywords"> і чи варто його використовувати?

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

▸ 75. Як працює <meta http-equiv> і які типи є?

Дозволяє встановлювати заголовки HTTP через HTML, наприклад: Content-Type, refresh, X-UA-Compatible.

▸ 76. Що таке <title> і де його найкраще розміщувати?

Задає заголовок вкладки/сторінки. Розміщується всередині <head>.

▸ 77. Що таке фавікон і як його додати за допомогою <link rel="icon">?

Маленька іконка сайту у вкладці браузера: <link rel="icon" href="favicon.ico" type="image/x-icon">.

▸ 78. Як підключити веб-шрифти за допомогою <link> або <style>?

Через Google Fonts: <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">.

▸ 79. Що таке <base> і як він впливає на посилання в документі?

Встановлює базовий URL для всіх відносних посилань: <base href="https://example.com/">.

▸ 80. Як використовувати <noscript> для альтернативного контенту?

Відображає контент, якщо у користувача вимкнено JavaScript: <noscript>Включіть JS</noscript>.

▸ 81. Що таке атрибут hidden і як він працює?

Приховує елемент на сторінці: <div hidden>Схований блок</div>.

▸ 82. Що таке data-* атрибути і для чого вони потрібні?

Зберігають власні дані для JavaScript: <div data-id="123"></div>.

▸ 83. Як працює contenteditable і де його застосовують?

Дозволяє редагувати текст елемента напряму на сторінці: <div contenteditable>Редагуй мене</div>.

▸ 84. Що таке draggable і як додати перетягування елементів?

Дозволяє перетягування елементів: <div draggable="true">Перетягни мене</div>.

▸ 85. Як використовувати tabindex для управління фокусом?

Встановлює порядок фокусування через Tab: <button tabindex="1">Перша</button>.

▸ 86. Що таке ARIA-атрибути і як вони покращують доступність?

ARIA додає семантику для допоміжних технологій: role="button", aria-label="Опис кнопки".

▸ 87. Що таке spellcheck і як його використовувати в текстових полях?

Увімкнення перевірки орфографії: <input type="text" spellcheck="true">.

▸ 88. Як працює атрибут autofocus?

Автоматично встановлює фокус на елемент при завантаженні сторінки: <input autofocus>.

▸ 89. Що таке required у формах і як він контролює обов’язковість полів?

Змушує користувача заповнити поле перед відправкою форми: <input required>.

▸ 90. Що таке readonly та disabled і в чому різниця між ними?

readonly — поле можна виділити, але не редагувати. disabled — поле неактивне і не відправляється з формою.

▸ 91. Як створити адаптивну картинку за допомогою атрибутів srcset і sizes?

Вказує різні зображення для різних розмірів екранів: <img src="small.jpg" srcset="medium.jpg 600w, large.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw">.

▸ 92. Що таке lazy loading для зображень?

Відкладене завантаження зображень для швидшого відображення сторінки: <img loading="lazy">.

▸ 93. Як створювати чекбокси та радіокнопки у формі?

Чекбокси: <input type="checkbox">, радіо: <input type="radio" name="group">.

▸ 94. Що таке <progress> і як його використовувати?

Відображає прогрес: <progress value="50" max="100"></progress>.

▸ 95. Що таке <meter> і для чого він потрібен?

Показує рівень або міру чогось: <meter value="0.6">60%</meter>.

▸ 96. Як додати фавікон різних форматів для всіх пристроїв?

Використовують різні <link rel="icon"> та rel="apple-touch-icon" для iOS та Android.

▸ 97. Що таке iframe sandbox і як він підвищує безпеку?

Атрибут sandbox обмежує функції в <iframe> (JS, форми, плагіни) для безпеки.

▸ 98. Як створити спойлер або розкривний блок за допомогою <details>?

Створює блок, що можна відкривати/закривати: <details><summary>Показати</summary>Контент</details>.

▸ 99. Як додати елементи для друку сторінки за допомогою CSS?

Використовують медіа-запит @media print { ... } для стилів друку.

▸ 100. Як зробити сторінку доступною для людей з обмеженими можливостями?

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

▸ Що робить font-size: clamp(22px, 3.2vw, 32px);?

Властивість clamp(MIN, PREFERRED, MAX) задає значення, яке завжди буде між мінімумом і максимумом.

font-size: clamp(22px, 3.2vw, 32px);
  • 22px → мінімальний розмір (менше ніколи не стане)
  • 3.2vw → бажане (динамічне, залежить від ширини вікна)
  • 32px → максимальний розмір (більше не виросте)

Шрифт гнучко підлаштовується під екран: від 22px до 32px, а між ними масштабується через vw.

1vw = 1% від ширини вікна браузера (viewport width).

Якщо ширина вікна = 1000px, тоді 1vw = 10px.

Якщо ширина вікна = 500px, тоді 1vw = 5px.

▸ 1. Що таке HTML?

HTML (HyperText Markup Language) — це стандартна мова розмітки для створення веб-сторінок.

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

HTML-документ складається з <!DOCTYPE>, <html>, <head> та <body>.

▸ 3. Що таке тег?

Тег — це елемент розмітки HTML, який описує структуру та зміст документа.

▸ 4. Що таке атрибут у HTML?

Атрибут додає додаткову інформацію до елемента, наприклад href для <a>.

▸ 5. Які є типи тегів у HTML?

Парні (мають відкриваючий і закриваючий) і самозакривні (наприклад, <img />).

▸ 6. Що таке DOCTYPE?

<!DOCTYPE html> вказує браузеру, що використовується HTML5.

▸ 7. Для чого використовується тег <head>?

Містить метадані: заголовок сторінки, підключення стилів, скриптів тощо.

▸ 8. Для чого використовується тег <body>?

Містить основний вміст сторінки, який відображається у браузері.

▸ 9. Як задати заголовки у HTML?

Використати теги <h1>...<h6>.

▸ 10. Як створити абзац?

Використати тег <p>.

▸ 11. Як вставити посилання у HTML?

За допомогою тега <a href="url">текст</a>.

▸ 12. Як додати зображення?

Тег <img src="шлях" alt="опис">.

▸ 13. Що таке списки у HTML?

Нумеровані (<ol>) та марковані (<ul>) списки з елементами <li>.

▸ 14. Як створити таблицю?

Використати <table>, <tr>, <td>, <th>.

▸ 15. Що таке семантичні теги?

Теги, які описують зміст: <header>, <footer>, <article>, <section>.

▸ 16. Для чого тег <nav>?

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

▸ 17. Для чого тег <main>?

Містить основний унікальний контент сторінки.

▸ 18. Для чого тег <aside>?

Використовується для побічного вмісту (наприклад, бокове меню).

▸ 19. Що таке метадані?

Інформація про сторінку: <meta>, <title>, <link>, <script>.

▸ 20. Як додати favicon?

<link rel="icon" href="favicon.ico">

▸ 21. Що таке iframe?

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

▸ 22. Що таке canvas?

HTML-елемент для малювання графіки за допомогою JavaScript.

▸ 23. Що таке SVG?

Мова розмітки для векторної графіки, яку можна вбудовувати в HTML.

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

Додати target="_blank" у <a>.

▸ 25. Що таке форма у HTML?

Елемент <form>, що збирає дані користувача.

▸ 26. Які є типи input?

text, password, email, number, checkbox, radio, date, file тощо.

▸ 27. Для чого використовується textarea?

Для введення багаторядкового тексту.

▸ 28. Що таке label?

Тег для підпису полів форми, пов’язується з input через атрибут for.

▸ 29. Що таке fieldset і legend?

Групують поля форми і додають заголовок для групи.

▸ 30. Що таке button у HTML?

Кнопка, яка може надсилати форму (submit) або бути простою (button).

▸ 31. Що таке атрибут required?

Робить поле обов’язковим для заповнення.

▸ 32. Що таке атрибут placeholder?

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

▸ 33. Що таке autocomplete?

Атрибут, що дозволяє браузеру підказувати дані для введення.

▸ 34. Що таке autofocus?

Автоматично ставить курсор у поле при завантаженні сторінки.

▸ 35. Що таке атрибут disabled?

Робить поле форми неактивним для введення.

▸ 36. Що таке hidden input?

Поле <input type="hidden">, яке зберігає невидимі дані.

▸ 37. Що таке атрибут pattern?

Дозволяє перевіряти введення за регулярним виразом.

▸ 38. Що таке progress?

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

▸ 39. Що таке meter?

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

▸ 40. Що таке datalist?

Надає список підказок для поля введення.

▸ 41. Що таке audio у HTML?

Елемент <audio> використовується для відтворення звуку.

▸ 42. Що таке video у HTML?

Елемент <video> використовується для відтворення відео.

▸ 43. Як додати субтитри до відео?

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

▸ 44. Що таке source?

Тег <source> визначає кілька джерел для медіа (<audio>, <video>).

▸ 45. Що таке responsive images?

Адаптивні зображення з атрибутами srcset і sizes.

▸ 46. Що таке picture?

Елемент <picture> дозволяє вказати кілька варіантів зображень для різних пристроїв.

▸ 47. Як вбудувати YouTube-відео?

За допомогою <iframe> з посиланням на YouTube.

▸ 48. Що таке accessibility (доступність)?

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

▸ 49. Що таке alt у зображеннях?

Атрибут alt описує зображення для скрінрідерів і у випадку помилки завантаження.

▸ 50. Що таке role у HTML?

Атрибут role допомагає визначити роль елемента для assistive technology.

▸ 51. Що таке aria-label?

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

▸ 52. Що таке tabindex?

Атрибут, що визначає порядок переходу між елементами за допомогою клавіші Tab.

▸ 53. Що таке semantic HTML?

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

▸ 54. Що таке microdata?

Специфікація для додавання структурованих даних у HTML (для SEO).

▸ 55. Що таке JSON-LD?

Формат для опису структурованих даних у <script type="application/ld+json">.

▸ 56. Що таке meta description?

Тег <meta name="description"> описує сторінку для пошукових систем.

▸ 57. Що таке viewport?

Тег <meta name="viewport"> керує адаптивністю сторінки.

▸ 58. Що таке Open Graph?

Метатеги (og:title, og:image) для відображення сторінки у соцмережах.

▸ 59. Що таке favicon?

Маленька іконка сайту, що відображається у вкладці браузера.

▸ 60. Що таке robots.txt?

Файл для керування індексацією сайту пошуковими системами.

▸ 61. Що таке sitemap.xml?

Файл зі списком усіх сторінок сайту для пошукових систем.

▸ 62. Що таке lazy loading зображень?

Використання атрибута loading="lazy" для завантаження картинок тільки при скролі.

▸ 63. Що таке defer у script?

Атрибут defer відкладає виконання скрипта до завантаження HTML.

▸ 64. Що таке async у script?

Атрибут async завантажує і виконує скрипт паралельно.

▸ 65. Що таке inline-скрипти?

Скрипти, які пишуться безпосередньо у <script> у HTML.

▸ 66. Чим inline-стилі відрізняються від зовнішніх?

Inline пишуться у тегах, зовнішні — у CSS-файлах через <link>.

▸ 67. Що таке custom data-атрибути?

Атрибути data-*, що дозволяють зберігати додаткові дані у елементах.

▸ 68. Що таке Shadow DOM?

Механізм ізоляції стилів і розмітки всередині Web Components.

▸ 69. Що таке Web Components?

Стандарт для створення власних HTML-елементів із Shadow DOM.

▸ 70. Що таке template у HTML?

Тег <template> містить невидимий фрагмент HTML для подальшого використання.

▸ 71. Що таке slot?

Місце для вставки контенту у Web Components.

▸ 72. Що таке contenteditable?

Атрибут, що робить елемент редагованим у браузері.

▸ 73. Що таке designMode?

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

▸ 74. Що таке sandbox у iframe?

Атрибут sandbox обмежує права вбудованого контенту.

▸ 75. Що таке crossorigin у script?

Атрибут для завантаження ресурсів з інших доменів з CORS.

▸ 76. Що таке integrity у script?

Атрибут для перевірки цілісності ресурсу (Subresource Integrity).

▸ 77. Що таке CSP?

Content Security Policy — механізм безпеки для контролю ресурсів у браузері.

▸ 78. Що таке XSS?

Cross-Site Scripting — вразливість, що дозволяє виконувати шкідливий код у браузері.

▸ 79. Як захиститися від XSS?

Використовувати escaping, CSP, не довіряти введеним даним.

▸ 80. Що таке HTTPS?

Протокол передачі даних із шифруванням (HTTP + TLS).

▸ 81. Що таке Service Worker?

Скрипт, що працює у фоновому режимі для кешування та офлайн-режиму.

▸ 82. Що таке PWA?

Progressive Web App — веб-додаток з можливостями нативного.

▸ 83. Що таке manifest.json?

Файл конфігурації PWA: іконки, назва, кольори.

▸ 84. Що таке localStorage?

API браузера для збереження даних у вигляді ключ-значення.

▸ 85. Що таке sessionStorage?

API для збереження даних лише на час сесії.

▸ 86. Що таке cookies?

Невеликі дані, які зберігаються у браузері для сесій і налаштувань.

▸ 87. Що таке IndexedDB?

База даних у браузері для збереження структурованих даних.

▸ 88. Що таке Web Storage API?

Інтерфейси localStorage і sessionStorage для збереження даних.

▸ 89. Що таке Geolocation API?

API для визначення геолокації користувача.

▸ 90. Що таке Drag and Drop API?

API для перетягування елементів у браузері.

▸ 91. Що таке Fullscreen API?

API для перемикання елементів у повноекранний режим.

▸ 92. Що таке WebRTC?

Технологія для прямої передачі аудіо та відео між браузерами.

▸ 93. Що таке WebSockets?

Протокол для двостороннього з’єднання між клієнтом і сервером у реальному часі.

▸ 94. Що таке SSE?

Server-Sent Events — одностороннє з’єднання для надсилання даних від сервера.

▸ 95. Що таке HTTP/2?

Версія HTTP, яка дозволяє мультиплексування запитів.

▸ 96. Що таке HTTP/3?

Версія HTTP на основі протоколу QUIC для швидшої передачі даних.

▸ 97. Що таке prerender?

Попереднє завантаження сторінок для прискорення переходів.

▸ 98. Що таке prefetch?

Попереднє завантаження ресурсів, які можуть знадобитися.

▸ 99. Що таке preload?

Атрибут <link rel="preload"> для завантаження критичних ресурсів.

▸ 100. Що таке Shadow DOM v1?

Оновлена специфікація Shadow DOM, що використовується у сучасних браузерах для Web Components.

Наразі проєкт ще в розробці...