100 FAQ HTML...

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

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

Не є мовою програмування, а декларативною мовою розмітки.

Cучасна версія HTML5 — Living Standard (живий стандарт), що постійно оновлюється. Використовується з CSS ( для оформлення) і JavaScript (для поведінки).

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

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

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

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

▸ 3. Що таке HTML теги і як вони працюють?

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

Теги записуються у кутових дужках: <tagname>.

Більшість тегів мають відкриваючу (<p>) і закриваючу (</p>) частину.

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

Деякі теги є самозакриваючимися (void tags), наприклад <img>, <br>, <hr>, які не мають закриваючого тегу.

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

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

Атрибути пишуться всередині відкриваючого тегу: <tagname attribute="value">.

Вони надають елементу додаткову інформацію, наприклад:

id — унікальний ідентифікатор елемента
class — класи для стилів CSS
src — шлях до зображення чи медіа
href — посилання для <a> тегу

Деякі атрибути є обов’язковими, інші — необов’язковими.

Завдяки атрибутам HTML стає більш гнучким і функціональним, дозволяючи стилізувати і взаємодіяти з елементами через CSS та JavaScript.

▸ 5. Чим відрізняються блокові та рядкові (inline) елементи в HTML?

Блокові елементи ( <div>, <p>, <h1>–<h6>, <section>, <article>, <ul>, <li> ):

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

Рядкові (inline) елементи ( <span>, <a>, <strong>, <em>, <img> ):

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

Тип відображення можна змінювати через CSS: display: block;, display: inline;, display: inline-block; тощо.

▸ 6. У чому різниця між <div> і <span> в HTML?

<div> (division) — блоковий елемент для групування великих фрагментів контенту.
- займає всю ширину контейнера;
- часто використовується для структурування макета сторінки;
- може містити інші блокові й рядкові елементи.

<div class="card">
  <h2>Заголовок</h2>
  <p>Опис всередині блоку.</p>
</div>

<span> — рядковий елемент для виділення чи стилізації невеликої частини тексту або контенту.
- займає лише ширину свого вмісту;
- застосовується для стилізації або виділення частини тексту.

<p>Це <span class="highlight">важливе слово</span> у реченні.</p>

Обидва елементи не мають власного семантичного значення, а використовуються як «контейнери» для стилізації та групування контенту через CSS або JavaScript.

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

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

Елементи можуть бути:

Контейнерні (мають вміст): <p>, <div>, <h1>
Порожні / самозакриваючі (не мають вмісту): <img>, <br>, <hr>

Елементи утворюють ієрархію (дерево DOM), де один елемент може містити інші, формуючи батьківські та дочірні відносини.

Приклади:

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

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

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

<!DOCTYPE html> — оголошення типу документа, вказує браузеру, що використовується HTML5.
<html> — кореневий елемент всього документа.
<head> — мета-дані сторінки:
- <title> — заголовок у вкладці браузера
- <meta> — кодування, ключові слова, автор, viewport для адаптивності
- підключення CSS/скриптів через <link> і <script>
<body> — вміст сторінки, що відображається користувачу: текст, зображення, посилання, таблиці, форми, скрипти.

Приклад мінімальної HTML-сторінки:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <title>Моя сторінка</title>
</head>
<body>
  <h1>Привіт, світ!</h1>
  <p>Це мій перший HTML-документ.</p>
</body>
</html>

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

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

<!DOCTYPE html>

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

▸ 10. Що містить <head> і яка його роль?

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

Найчастіше зустрічаються елементи:

<title> — заголовок сторінки у вкладці браузера;
<meta> — кодування (charset), опис сторінки, ключові слова, автор, viewport для адаптивності;
<link> — підключення CSS;
<link rel="icon"> — підключення фавіконки;
<script> — підключення зовнішніх JS-файлів (якщо не в кінці <body>);
<style> — внутрішні стилі CSS (якщо потрібні).

Приклад:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Моя сторінка</title>
  <link rel="stylesheet" href="style.css">
</head>

▸ 11. Що таке <body> і яка його роль у HTML-документі?

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

Структура <body>:

Блокові елементи: <div>, <section>, <article>, <header>, <footer>
Рядкові елементи: <span>, <a>, <strong>, <em>
Текстові елементи: <h1>–<h6>, <p>, <span>
Мультимедіа: <img>, <video>, <audio>
Посилання та навігація: <a>, <nav>
Списки та таблиці: <ul>, <ol>, <table>
Форми та інтерактивні елементи: <form>, <input>, <button>

Приклад:

<body>
  <h1>Привіт, світ!</h1>
  <p>Це мій перший HTML-документ.</p>
  <img src="image.jpg" alt="Приклад зображення">
</body>

▸ 12. Що таке метатеги <meta> і для чого вони потрібні?

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

SEO (оптимізацію для пошуку)
Кодування
Адаптивність
Поведіку браузера

Види метатегів і їх призначення:

<meta charset="UTF-8"> — задає кодування сторінки,

<meta name="description" content="Опис сторінки для пошукових систем"> — короткий опис для SEO,

<meta name="keywords" content="HTML, CSS, SEO"> — ключові слова (в сучасному SEO майже не використовуються)

<meta name="viewport" content="width=device-width, initial-scale=1.0"> — адаптивність для мобільних пристроїв

<meta http-equiv="refresh" content="30"> — автоматичне оновлення сторінки через 30 секунд

<meta property="og:title" content="Назва сторінки"> — для Facebook, LinkedIn

<meta name="twitter:card" content="summary"> — для Twitter

<meta name="author" content="Ім’я автора">

▸ 13. Що таке фавікон і як його підключають у <head>?

Фавікон — це маленька іконка сайту, що відображається у вкладці браузера, закладках або історії. Підключається через тег <link> у <head>.

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

<link rel="icon" href="favicon.ico" type="image/x-icon">

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

rel="icon" — вказує, що це фавікон
href — шлях до файлу іконки
type — тип файлу (image/x-icon, image/png тощо)

▸ 14. Що таке атрибут class і як його використовують?

Атрибут class використовується для групування елементів для стилізації або маніпуляцій через CSS і JavaScript і дозволяє призначати один або кілька класів елементу.

Приклад:

<p class="highlight important">Це важливий абзац.</p>

Можна звертатись у CSS:

.highlight { color: red; }
.important { font-weight: bold; }

Атрибут class використовується для повторного застосування стилів та зручної взаємодії через JavaScript.

▸ 15. Що таке атрибут id і чим він відрізняється від class?

Атрибут id надає елементу унікальний ідентифікатор, тоді як class може бути спільним для кількох елементів.

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

Стилізації через CSS: #elementID { ... }
Доступу через JavaScript: document.getElementById('elementID')
Як анкер для навігації сторінки: <a href="#section1">Перейти</a>

Приклад:

<div id="header">Верхня частина сторінки</div>

▸ 16. Як підключають CSS до HTML-документа?

Існує 3 типи підключення CSS:

Зовнішній CSS (рекомендований для великих сайтів). Розміщується у <head>, всі стилі виносяться в окремий файл:

<link rel="stylesheet" href="style.css">

Внутрішній CSS у <head> у блоці <style> Зручно для невеликих проєктів або тестування:

<style>
  body { background-color: #f0f0f0; }
  p { color: blue; }
</style>

Інлайн-стилі (усередині тегу через атрибут style). Використовуються рідко, тільки для швидких змін.

<p style="color: red; font-size: 16px;">Текст червоним</p>

Висновок: зовнішній CSS дозволяє розділяти контент і стиль, що спрощує підтримку і масштабування сайту.

▸ 17. Як підключають JavaScript до HTML-документа?

Існує 2 типи підключення JavaScript:

Зовнішній скрипт (рекомендований спосіб):
JavaScript підключають через тег <script> для додавання інтерактивності на веб-сторінку. Розміщується в <head> або перед закриваючим </body> (краще внизу для швидшого завантаження).

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

Внутрішній скрипт (безпосередньо у HTML):

<script>
  console.log("Привіт, світ!");
</script>

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

<script src="script.js" defer></script> <!-- підключення скрипта з defer -->

Можливості JavaScript:

Змінювати вміст сторінки динамічно
Обробляти події користувача
Створювати анімації та інтерактивні ефекти

▸ 18. Що таке заголовки в HTML <h1>–<h6> і їх роль?

Заголовки в HTML — це теги <h1>–<h6>, які використовуються для позначення заголовків різних рівнів на веб-сторінці.

<h1> — найважливіший заголовок (зазвичай основна тема сторінки)
<h2>–<h6> — підзаголовки, де <h6> має найменшу важливість

Роль заголовків:

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

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

<h1>Моя сторінка</h1>
<h2>Розділ 1</h2>
<h3>Підрозділ 1.1</h3>
<h2>Розділ 2</h2>

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

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

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

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

<img src="photo.jpg" alt="Фото" />
<br />
<input type="text" name="name" />

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

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

Приклади семантичних тегів і їх призначення:

<header> — шапка сторінки або секції
<nav> — навігаційне меню
<main> — головний вміст сторінки
<article> — окремий змістовний блок (стаття, пост)
<section> — розділ сторінки
<aside> — бічна панель або додаткова інформація
<footer> — підвал сторінки або секції
<h1>–<h6> — заголовки різних рівнів
<figure> — ілюстрація або графіка з підписом
<figcaption> — підпис до <figure>
<mark> — виділений текст, важливий для користувача
<time> — дата або час
<address> — контактна інформація
<summary> — заголовок для елемента <details>.
<details> — деталі, які можна розкривати/згортати
<blockquote> — цитата з іншого джерела
<q> — коротка цитата

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

<div> — просто контейнер
<span> — виділення частини тексту

▸ 21. Що таке форматування тексту у HTML?

HTML-теги для форматування тексту змінюють його вигляд без зміни семантики:

<strong> — важливий текст (жирний, з акцентом на значенні — семантичний).
- <b> — жирний текст (без семантичного значення).
- <em> — наголошений текст (курсив, підкреслює інтонацію — семантичний).
- <i> — курсивний текст (без семантики, наприклад для назв).
- <u> — підкреслений текст.
- <mark> — виділений маркером (жовтим за замовчуванням).
- <s> — перекреслений текст (неактуальний).
- <small> — зменшує розмір шрифту.
- <sub> — нижній індекс (H₂O).
- <sup> — верхній індекс (x²).

Це <b>жирний</b> текст.
Це <i>курсив</i> текст.
Це <u>підкреслений</u> текст.
Це <mark>виділений</mark> текст.

Результат на сторінці:

Це жирний текст.
Це курсив текст.
Це підкреслений текст.
Це виділений текст.

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

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

Приклад:

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

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

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

▸ 23. Що таке абзаци <p> і як їх використовують?

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

Приклад:

<p>Це перший абзац тексту на сторінці.</p>

<p> А це другий абзац, який відокремлений від першого.</p>

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

▸ 24. Які бувають списки OL та UL у HTML і як їх створюють?

В HTML існують два основні типи списків для впорядкування елементів:

<ul> — ненумерований список (маркери/bullet points).
<ol> — нумерований список (цифри або букви).
<li> — елемент списку, використовується всередині <ul> або <ol>.

<ul>
  <li>Яблуко</li>
  <li>Банан</li>
</ul>

<ol>
  <li>Підготовка</li>
  <li>Виконання</li>
</ol>

▸ 25. Що таке описові списки DL, DT, DD і як їх використовують?

Описові списки дозволяють створювати пари «термін — опис»:

<dl> — контейнер описового списку.
<dt> — термін.
<dd> — опис терміну.

<dl>
  <dt>HTML</dt>
  <dd>Мова розмітки для створення веб-сторінок.</dd>

  <dt>CSS</dt>
  <dd>Мова стилів для оформлення веб-сторінок.</dd>
</dl>

Результат на сторінці:

HTML: Мова розмітки для створення веб-сторінок.
CSS: Мова стилів для оформлення веб-сторінок.

▸ 26. Що таке таблиці в HTML і як їх створюють?

Таблиці використовуються для впорядкування даних у рядки та стовпці:

<table> — контейнер таблиці.
<tr> — рядок таблиці.
<th> — заголовочна комірка (жирна, по центру).
<td> — звичайна комірка з даними.

<table style="border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid #000; padding: 5px;">Ім’я</th>
    <th style="border: 1px solid #000; padding: 5px;">Вік</th>
  </tr>
  <tr>
    <td style="border: 1px solid #000; padding: 5px;">Оля</td>
    <td style="border: 1px solid #000; padding: 5px;">25</td>
  </tr>
  <tr>
    <td style="border: 1px solid #000; padding: 5px;">Іван</td>
    <td style="border: 1px solid #000; padding: 5px;">30</td>
  </tr>
</table>

Результат на сторінці:

Ім’я	Вік
Оля	25
Іван	30

▸ 27. Що таке мнемонізація в HTML?

Мнемонізація в HTML — це використання спеціальних символьних кодів (мнемонік), які починаються з & та закінчуються на ;. Вони дозволяють відображати символи, які мають службове значення в HTML або не завжди доступні на клавіатурі.

Приклади:

< → < (менше)
> → > (більше)
& → & (амперсанд)
" → " (лапки)
© → © (знак копірайту)
  → (нерозривний пробіл)

▸ 28. Що таке тег <article> у HTML?

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

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

<article>
  <h3>Новина дня</h3>
  <p>Сьогодні відбулася важлива подія у світі технологій...</p>
</article>

Результат на сторінці:

Новина дня

Сьогодні відбулася важлива подія у світі технологій...

▸ 29. Як створювати вкладені списки (<ul> або <ol> всередині <li>) у HTML?

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


      <p>Продукти:</p>
      <ul>
  <li><u>Фрукти</u>
    <ul>
      <li>Яблуко</li>
      <li>Банан</li>
    </ul>
  </li>
  <li><u>Овочі</u>
    <ul>
      <li>Морква</li>
      <li>Буряк</li>
    </ul>
  </li>
</ul>

Результат на сторінці:

Продукти:

Фрукти
- Яблуко
- Банан
Овочі
- Морква
- Буряк

▸ 30. Як робити коментарі у HTML і для чого вони потрібні ?

Коментарі в HTML використовуються для пояснень у коді, які не відображаються на сторінці:

Допомагають розробникам зрозуміти структуру або логіку.
Можна тимчасово відключати частину коду.

<!-- Це коментар, він не відображається на сторінці -->
<p>Цей абзац відобразиться.</p>
<!-- <p>Цей абзац прихований.</p> -->

Результат на сторінці:

Цей абзац відобразиться.

▸ 31. Що таке абревіатури та скорочення <abbr> та <acronym> і як їх використовувати?

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

<abbr title="HyperText Markup Language">HTML</abbr> — абревіатура з підказкою.
<acronym> — аналогічно, але застарілий у HTML5 (рекомендовано <abbr>).

<p>Мова розмітки: <abbr title="HyperText Markup Language">HTML</abbr></p>

Результат на сторінці:

Мова розмітки: HTML

▸ 32. Як вставляти код у HTML <code>, <pre>?

Для відображення коду використовують спеціальні теги:

<code> — короткий фрагмент коду всередині абзацу.
<pre> — блок коду з форматуванням пробілів і переносів рядків.

<p>Приклад функції: <code>alert('Hello');</code></p>

<pre>
function greet() {
  alert('Привіт!');
}
</pre>

Результат на сторінці:

Приклад функції: alert('Hello');

function greet() {
  alert('Привіт!');
}

▸ 33. Що таке цитати у HTML <q> і <blockquote>?

Для вставки цитат використовуються два основні теги:

<q> — короткі цитати в тексті, вставляє лапки автоматично.
<blockquote> — довгі цитати або виділені абзаци.

<p>Як сказав Вінстон Черчілль: <q>Never give up.</q></p>

<blockquote>Це приклад довгої цитати, яка виділяється блоком.</blockquote>

Результат на сторінці:

Як сказав Вінстон Черчілль: Never give up.

Це приклад довгої цитати, яка виділяється блоком.

▸ 34. Що таке порожні теги <br> і <hr> і як їх використовувати?

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

<br> — розрив рядка всередині тексту:

<p>Перше речення.<br>Друге речення на новому рядку.</p>

<hr> — горизонтальна лінія для візуального поділу контенту:

<h2>Розділ 1</h2>
<hr>
<h2>Розділ 2</h2>

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

▸ 35. Як робити нумерацію та маркери у списках <ul> та <ol>?

Маркерований список (<ul>):
- Використовує крапки (●) або інші маркери за замовчуванням.
- Можна змінювати тип маркерів через CSS (list-style-type).
- Приклад:
```
<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>
```
Нумерований список (<ol>):
- Автоматично додає числа (1, 2, 3…) перед пунктами.
- Можна змінювати тип нумерації через атрибут type або CSS (list-style-type).
- Приклад:
```
<ol>
  <li>Перший пункт</li>
  <li>Другий пункт</li>
  <li>Третій пункт</li>
</ol>
```

Поради:

Для вкладених списків можна комбінувати <ul> та <ol>.
CSS властивість list-style-type дозволяє змінювати стиль маркерів (disc, circle, square, decimal, lower-alpha тощо).

▸ 36. Що таке теги <small> і <strong> у HTML?

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

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

<p>Це звичайний текст. <small> А це примітка дрібним шрифтом.</small></p>
<p>Важливе повідомлення: <strong>Увага!</strong></p>

Результат на сторінці:

Це звичайний текст. А це примітка дрібним шрифтом.

Важливе повідомлення: Увага!

▸ 37. Як використовуються теги <sub> і <sup>?

Теги застосовуються для відображення тексту у вигляді нижніх або верхніх індексів:

<sub> — нижній індекс (наприклад, у хімічних формулах).
<sup> — верхній індекс (наприклад, степені чи примітки).

<p>Хімічна формула: H<sub>2</sub>O</p>
<p>Математика: x<sup>2</sup> + y<sup>2</sup> = r<sup>2</sup></p>

Результат на сторінці:

Хімічна формула: H₂O

Математика: x² + y² = r²

▸ 38. Що таке теги <details> і <summary> у HTML?

<details> і <summary> дозволяють створювати розкривні блоки, які користувач може відкрити або закрити.

<details> — контейнер, який приховує/показує вміст.
<summary> — заголовок блоку, на який можна натиснути, щоб розкрити вміст.

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

<details>
  <summary>Натисни, щоб дізнатися більше</summary>
  <p>Цей текст з’являється після розкриття.</p>
</details>

Результат на сторінці:

Натисни, щоб дізнатися більше

Цей текст з’являється після розкриття.

▸ 39. Що таке тег <address> у HTML?

<address> використовується для позначення контактної інформації автора чи власника документа або статті.

Може містити ім’я, email, телефон, посилання на профілі чи адресу.
Браузери за замовчуванням відображають текст курсивом.
Використовується в футері або в секції з інформацією про автора.

<footer>
  <address>
    Автор: Іван Петренко<br>
    Email: <a href="mailto:ivan@example.com">ivan@example.com</a><br>
    Київ, Україна
  </address>
</footer>

Результат на сторінці:

▸ 40. Що таке тег <aside> у HTML?

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

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

<article>
  <h2>Основний текст статті</h2>
  <p>Це головний контент сторінки.</p>

  <aside>
    <h3>Додаткова інформація</h3>
    <p>Це примітка або корисне посилання.</p>
  </aside>
</article>

Результат на сторінці:

Основний текст статті

Це головний контент сторінки.

▸ 41. Що таке тег <form> і яка його роль?

Тег <form> використовується для створення форми на веб-сторінці, яка збирає дані від користувача та відправляє їх на сервер.

<form action="/submit" method="post">
  <input type="text" name="username" placeholder="Ваше ім’я" />
  <button type="submit">Надіслати</button>
</form>

▸ 42. Які основні атрибути має <form>?

action — адреса, куди надсилаються дані. Вже не використовується
method — спосіб передачі: GET або POST.
enctype — кодування даних (важливо для завантаження файлів).

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="photo" />
  <button>Завантажити</button>
</form>

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

▸ 43. Для чого використовується тег <input> і які в нього типи?

Тег <input> створює поле для вводу даних. Має багато типів:

text, password, email
checkbox, radio
file, date, number, color
submit, reset, button

<input type="email" name="mail" placeholder="Введіть email" />

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

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

<label for="name">Ваше ім’я:</label>
<input id="name" type="text" />

Або обгортанням:

<label>Email: <input type="email" /></label>

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

Тег <textarea> створює багаторядкове текстове поле для введення великого обсягу тексту.

<textarea rows="4" cols="30" placeholder="Ваш відгук"></textarea>

▸ 46. Що таке <select>, <option> і <optgroup>?

Ці теги створюють випадаючий список:

<select> — контейнер списку.
<option> — окремий пункт.
<optgroup> — група пунктів.

<select name="country">
  <optgroup label="Європа">
    <option>Україна</option>
    <option>Польща</option>
  </optgroup>
  <optgroup label="Америка">
    <option>США</option>
    <option>Канада</option>
  </optgroup>
</select>

▸ 47. Як працює тег <button> і чим він відрізняється від <input type="submit">?

<button> більш гнучкий: може містити текст, іконки, HTML-вміст. <input type="submit"> обмежується лише кнопкою без внутрішнього контенту.

<button type="submit">🔒 Увійти</button>
<input type="submit" value="Увійти" />

▸ 48. Що таке валідація форм і які є HTML-атрибути для неї?

Валідація форм — це перевірка правильності введених даних до відправлення на сервер.

required — обов’язкове поле.
pattern — регулярний вираз.
min, max, maxlength
type="email", type="url" — автоматична перевірка.

<input type="email" required placeholder="Ваш email" />

▸ 49. Як додати аудіо та відео на сторінку і які атрибути можна використовувати?

Для вставки аудіо використовується тег <audio>, а для відео — тег <video>.

Основні атрибути для обох елементів:

controls — показує елементи керування (старт, пауза, гучність).
autoplay — автоматичний запуск при завантаженні.
loop — зациклене відтворення.
muted — початково без звуку.
width / height — задають розміри відео (тільки для <video>).

Для відео можна додавати субтитри за допомогою <track>, а для обох елементів використовувати <source> для різних форматів:

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

<video width="320" height="240" controls autoplay loop muted>
  <source src="movie.mp4" type="video/mp4">
  <track src="subs.vtt" kind="subtitles" srclang="en" label="English">
  Ваш браузер не підтримує відео.
</video>

▸ 50. Що таке посилання в HTML та які атрибути вони підтримують?

Посилання створюються тегом <a> з атрибутом href, щоб переходити на інші сторінки, файли чи секції.

Абсолютні — повний шлях із протоколом (https://site.com/page.html).
Відносні — шлях відносно поточного файлу (about.html, ../img/pic.jpg).

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

href — адреса ресурсу.
target — спосіб відкриття (наприклад, _blank — у новій вкладці).
rel — відношення до ресурсу (nofollow, noopener).
download — вказує на завантаження файлу.
title — підказка при наведенні.

<a href="about.html" title="Про нас">Відносне посилання</a>
<a href="https://google.com" target="_blank" rel="noopener">Абсолютне посилання</a>
<a href="file.pdf" download>Завантажити PDF</a>

▸ 52. Деякі основні атрибути.

Required — робить поле обов’язковим для заповнення.
Button — кнопка, яка може надсилати форму (submit) або бути простою (button).
Fieldset і Legend — групують поля форми і додають заголовок для групи.
Textarea — для введення багаторядкового тексту.
Placeholder — відображає підказку всередині поля введення.
Autocomplete — дозволяє браузеру підказувати дані для введення.
Autofocus — автоматично ставить курсор у поле при завантаженні сторінки.
Disabled — робить поле форми неактивним для введення.
Hidden input — поле <input type="hidden">, яке зберігає невидимі дані.
Pattern — дозволяє перевіряти введення за регулярним виразом.
Progress — елемент для відображення прогресу виконання завдання.
Meter — використовується для відображення кількісного значення в межах діапазону.
Datalist — надає список підказок для поля введення.
Track — додає субтитри до відео (<video>).
Source — визначає кілька джерел для медіа (<audio>, <video>).
Tabindex — визначає порядок переходу між елементами за допомогою клавіші Tab.
Microdata — специфікація для додавання структурованих даних у HTML (для SEO).
JSON-LD — формат для опису структурованих даних у <script type="application/ld+json">.
Meta description — тег <meta name="description">, описує сторінку для пошукових систем.
Robots.txt — файл для керування індексацією сайту пошуковими системами.
Sitemap.xml — файл зі списком усіх сторінок сайту для пошукових систем.
DesignMode — властивість документа, яка дозволяє редагувати весь HTML.
Sandbox — атрибут, який обмежує права вбудованого контенту у <iframe>.
CSP — Content Security Policy, механізм безпеки для контролю ресурсів у браузері.
XSS — Cross-Site Scripting, вразливість, що дозволяє виконувати шкідливий код у браузері.
Захист від XSS — використовувати escaping, CSP, не довіряти введеним даним.
HTTPS — протокол передачі даних із шифруванням (HTTP + TLS).
Cookies — невеликі дані, які зберігаються у браузері для сесій і налаштувань.
Web Storage API — інтерфейси localStorage і sessionStorage для збереження даних.
WebSockets — протокол для двостороннього з’єднання між клієнтом і сервером у реальному часі.
SSE — Server-Sent Events, одностороннє з’єднання для надсилання даних від сервера.
Preload — атрибут <link rel="preload"> для завантаження критичних ресурсів.

▸ 53. Як у HTML вставляють зовнішній контент?

Зовнішній контент можна вставляти за допомогою тегів <iframe>, <embed>, <object> або <script> для скриптів.

<iframe> — вбудовує інший HTML-документ у сторінку.
<embed> — вставляє мультимедійний або плагінний контент.
<object> — вставляє будь-який ресурс, включаючи HTML, SVG або мультимедіа.
<script src="..."></script> — підключає зовнішній JavaScript.
Важливо використовувати атрибути безпеки, наприклад sandbox для <iframe>.

<iframe src="https://example.com" width="600" height="400" sandbox></iframe>
<embed src="video.mp4" type="video/mp4">
<object data="graphic.svg" type="image/svg+xml"></object>
<script src="script.js"></script>

▸ 54. Що таке семантичні теги в HTML і навіщо вони потрібні?

Семантичні теги описують зміст елемента та його роль у документі. Вони покращують SEO, доступність і структуру коду.

<header>, <footer>, <main>
<section>, <article>, <aside>
<nav>, <figure>, <figcaption>

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

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

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

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

<section> групує тематично пов’язаний контент. Зазвичай має заголовок.

<section>
  <h2>Контакти</h2>
  <p>Email: info@example.com</p>
</section>

▸ 57. Для чого використовується <header> і <footer>?

<header> — верхня частина сторінки або секції: логотип, меню.
<footer> — нижня частина: контакти, авторське право.

<header><h1>Мій сайт</h1></header>
<footer>© 2025 Всі права захищені</footer>

▸ 58. Що таке <nav> і коли його варто застосовувати?

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

<nav>
  <a href="/">Головна</a> |
  <a href="/about">Про нас</a> |
  <a href="/contacts">Контакти</a>
</nav>

▸ 59. Яка роль тегу <main>?

Тег <main> визначає основний зміст сторінки, унікальний для цієї сторінки, відмінний від заголовків, навігації та футера.

Має бути лише один на сторінці.
Допомагає скрінрідерам і пошуковим системам швидко зрозуміти головний контент.
Покращує семантику HTML та доступність.

<main>
  <h1>Заголовок статті</h1>
  <p>Основний текст статті...</p>
</main>

▸ 60. Що таке <figure> та <figcaption>?

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

<figure>
  <img src="diagram.png" alt="Схема" />
  <figcaption>Схема процесу</figcaption>
</figure>

▸ 61. Що таке зображення в HTML <img> і як їх правильно вставляти?

Тег <img> використовується для вставки зображень на веб-сторінку. Це самозакриваючийся (void) тег — не має закриваючого тегу.

Важливо:

Завжди використовувати alt для доступності та SEO.
Оптимізувати розмір файлу.
Стилізувати через CSS (розмір, обтікання текстом, тіні, фільтри).

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

src — шлях до зображення (локальний або URL)
alt — альтернативний текст для доступності та SEO
width / height — розміри зображення (опційно)
title — підказка при наведенні миші

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

▸ 62. Як зробити адаптивні зображення і коли використовувати <picture> або <svg>?

Для адаптивних зображень використовують атрибути srcset і sizes або тег <picture> з <source>:

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

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(max-width: 1200px)" srcset="medium.jpg">
  <img src="large.jpg" alt="Картинка">
</picture>

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

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

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

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

Тег <time> використовується для позначення дати або часу у машиночитному форматі, що допомагає браузерам, пошуковим системам і додаткам правильно обробляти часові дані.

Може містити атрибут datetime у форматі ISO 8601 (YYYY-MM-DD, YYYY-MM-DDThh:mm).
Покращує SEO та доступність контенту.
Використовується для подій, публікацій, дедлайнів тощо.

<time datetime="2025-09-28T14:30">28 вересня 2025, 14:30</time>
<time datetime="2025-09-28">28 вересня 2025</time>

▸ 65. Які формати зображень існують і де їх застосовують?

JPEG: фотографії, стиснення з втратами.
PNG: з прозорістю, графіка, іконки.
SVG: векторні іконки, лого.
WebP: сучасний формат з меншим розміром файлу.

▸ 66. Що таке SEO?

Визначення: SEO (Search Engine Optimization) — оптимізація сайту для пошукових систем, щоб він краще ранжувався у пошуку і привертав більше відвідувачів.

Мета SEO — зробити сторінку зручною для користувачів і зрозумілою для пошукових систем (Google, Bing тощо).

Основні складові SEO:

Контент: якісний текст, заголовки, ключові слова, семантика;
Структура: семантичні теги (<header>, <article>, <section>), заголовки (<h1>–<h6>), абзаци (<p>);
Метадані: <title>, <meta name="description">, alt для зображень;
Посилання: внутрішні та зовнішні;
Швидкість завантаження та адаптивність: сторінка повинна швидко відкриватися на всіх пристроях.

SEO допомагає:

підвищити видимість сайту в пошуку;
залучити більше відвідувачів;
покращити користувацький досвід.

▸ 67. Які основні SEO-метатеги варто використовувати?

<title> — заголовок сторінки.
<meta name="description"> — опис сторінки.
<meta name="keywords"> — ключові слова.

<head>
  <title>Мій сайт</title>
  <meta name="description" content="Опис сайту">
  <meta name="keywords" content="HTML,CSS,SEO">
</head>

▸ 68. Як працює тег <title> і чому він важливий?

Тег <title> задає заголовок сторінки, який показується у вкладці браузера і використовується пошуковими системами.

<title>Головна сторінка — Мій сайт</title>

▸ 69. Що таке Open Graph і для чого він потрібен?

Open Graph теги (og:title, og:image тощо) допомагають коректно відображати сторінку при шарінгу у соцмережах.

<meta property="og:title" content="Мій сайт">
<meta property="og:image" content="image.jpg">

▸ 70. Що таке meta name="robots"?

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

index, noindex — дозволити/заборонити індексацію.
follow, nofollow — дозволити/заборонити слідувати за посиланнями.

▸ 71. Як правильно використовувати заголовки <h1>–<h6> для SEO?

Заголовки структурують контент:

<h1> — головна тема сторінки (один на сторінку).
<h2>–<h6> — підрозділи.

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

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

▸ 73. Що таке canonical-посилання?

Тег <link rel="canonical" href="URL"> вказує пошуковим системам, яка сторінка є основною, щоб уникнути дублювання контенту.

▸ 74. Що таке доступність (a11y) у вебі?

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

▸ 75. Як працює атрибут aria-label і aria-hidden?

aria-label — додає опис елемента для скрін-рідерів.
aria-hidden="true" — приховує елемент від скрін-рідерів.

▸ 76. Для чого використовують атрибут tabindex?

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

<input type="text" tabindex="1">
<button tabindex="2">Надіслати</button>

▸ 77. Як правильно будувати навігацію для screen reader?

Використовувати семантичний тег <nav> для основного меню.
Чіткі та описові тексти посилань.
Використовувати атрибути aria-current="page" для поточної сторінки.
Підтримувати логічну послідовність заголовків і tabindex.

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

▸ 78. Чому важливо використовувати семантичні теги для доступності?

Семантичні теги (<header>, <main>, <footer>, <section>) допомагають скрін-рідерам та допоміжним технологіям розуміти структуру сторінки і швидко переходити між розділами.

▸ 79. Що таке контрастність і як її перевіряти?

Контрастність — різниця між кольорами тексту і фону. Високий контраст покращує читабельність для людей з порушенням зору.

Мінімальний рекомендований коефіцієнт для тексту нормального розміру: 4.5:1.
Можна перевіряти онлайн-інструментами, наприклад, contrast-ratio.com.

▸ 80. Як забезпечити доступність форм для людей з інвалідністю?

Завжди використовувати <label> для полів вводу.
Використовувати атрибути aria-required та aria-invalid.
Додавати підказки і повідомлення про помилки текстом, а не тільки кольором.
Дотримуватися логічного порядку елементів для клавіатурної навігації.

<label for="email">Email:</label>
<input id="email" type="email" aria-required="true">
<span id="error">Будь ласка, введіть валідний email</span>

▸ 81. Що таке HTML5 API?

HTML5 API — набір сучасних інтерфейсів для роботи з браузером:

Canvas API — малювання графіки.
Geolocation API — отримання координат користувача.
LocalStorage / SessionStorage — зберігання даних на стороні клієнта.
Web Workers — фонові процеси.

▸ 82. Що таке Canvas та для чого він використовується?

Тег <canvas> дозволяє малювати графіку через JavaScript.

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const ctx = document.getElementById('myCanvas').getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 50);
</script>

▸ 83. Що таке LocalStorage і SessionStorage?

Обидва API дозволяють зберігати дані на стороні клієнта:

LocalStorage — зберігає дані постійно.
SessionStorage — зберігає дані на час сесії (закривається при закритті вкладки).

localStorage.setItem('user', 'Ivan');
sessionStorage.setItem('token', '12345');

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

API для отримання координат користувача через браузер.

navigator.geolocation.getCurrentPosition(function(position) {
  console.log(position.coords.latitude, position.coords.longitude);
});

▸ 85. Що таке Web Workers?

Web Workers дозволяють запускати JavaScript у фоновому потоці без блокування UI.

const worker = new Worker('worker.js');
worker.postMessage('Hello');

▸ 86. Що таке WebSockets?

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

const socket = new WebSocket('wss://example.com');
socket.onmessage = (event) => console.log(event.data);

▸87. Як захистити форми в HTML?

Використовувати HTTPS для захищеного передавання даних.
Валідувати дані на сервері, а не тільки на клієнті.
Застосовувати HTML-атрибути: required, pattern, maxlength для базової перевірки.
Не зберігайте паролі в явному вигляді.
Хешуйте і сольте паролі на сервері.
Використовуйте type="password" для полів введення пароля.
Захищати від CSRF за допомогою токенів (csrf-token).
Не зберігати чутливі дані у localStorage чи cookie без шифрування.
Використання CAPTCHA — додатковий захист від автоматизованих ботів.
Просте правило: безпека форм — це комбінація правильного HTML, серверної обробки та захищеного з’єднання.

<form action="/submit" method="POST">
  <input type="text" name="username" required pattern="[A-Za-z0-9]{3,20}">
  <input type="password" name="password" required>
  <button type="submit">Відправити</button>
</form>

▸ 88. Що таке Content Security Policy (CSP)?

Content Security Policy (CSP) — це механізм безпеки, який дозволяє веб-розробнику контролювати, які ресурси (скрипти, стилі, зображення, фрейми) можуть завантажуватися та виконуватися на сторінці.

Захищає від атак типу XSS (Cross-Site Scripting).
Обмежує виконання скриптів лише з дозволених джерел.
Дозволяє забороняти inline-скрипти та eval.
Може окремо контролювати зображення, стилі, шрифти, фрейми тощо.

Приклад заголовка CSP:

Content-Security-Policy: default-src 'self'; img-src https://cdn.example.com; script-src 'self' https://apis.google.com

У цьому прикладі:

За замовчуванням ресурси завантажуються тільки з того ж домену ('self').
Зображення дозволені з cdn.example.com.
Скрипти дозволені з поточного сайту і з apis.google.com.

▸ 89. Що таке lazy loading ?

Для зображень - відкладене завантаження зображень, щоб економити трафік та покращити швидкість завантаження сторінки - тільки при скролі.

<img src="photo.jpg" loading="lazy" alt="Фото">

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

▸ 90. Що таке defer і async для скриптів?

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

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

▸ 91. Які бувають типи кешу в веб-розробці?

Браузерний кеш — зберігає статичні файли (HTML, CSS, JS, зображення) локально у браузері.
CDN кеш — розподіляє ресурси між серверами по всьому світу для швидшої доставки.
Service Worker кеш — працює у PWA, дозволяє створювати офлайн-режим та кешувати динамічні запити.

Налаштовується через HTTP-заголовки, конфігурацію CDN або скрипти Service Workers.

▸ 92. Що таке Progressive Web App (PWA)?

PWA — веб-додаток із можливістю роботи офлайн, push-повідомленнями та встановленням на пристрій.

▸ 93. Що таке кешування ресурсів у браузері?

Кешування — це збереження браузером статичних ресурсів (зображень, CSS, JS, шрифтів) на комп’ютері користувача для швидшого завантаження сторінок.

Зменшує кількість запитів до сервера.
Прискорює повторне відкриття сторінки.
Може керуватись HTTP-заголовками (Cache-Control, Expires).
Використовується Service Workers для офлайн-доступу.

Cache-Control: max-age=31536000
Expires: Wed, 21 Oct 2025 07:28:00 GMT

▸ 94. Як оптимізувати завантаження зображень?

Використовувати сучасні формати (WebP, AVIF).
Задавати атрибут loading="lazy" для відкладеного завантаження.
Використовувати srcset і <picture> для адаптивних картинок.
Стискати зображення без значної втрати якості (TinyPNG, Squoosh).
Встановлювати правильні width і height, щоб уникати «стрибків» макета.
Кешувати зображення через HTTP-заголовки або CDN.

<img src="photo.webp" alt="Фото" loading="lazy" width="600" height="400">

▸ 95. Що таке критичний CSS?

Критичний CSS — це мінімальний набір стилів, необхідний для відображення видимої частини сторінки (above the fold) під час першого завантаження.

Вбудовується прямо у <head>, щоб зменшити час до першого рендерингу.
Допомагає уникати «білих екранів» і прискорює LCP (Largest Contentful Paint).
Нестратегічні стилі завантажуються асинхронно через <link rel="stylesheet" media="print"> або preload.

<style>
/* критичні стилі */
body { font-family: Arial, sans-serif; }
header { background: #333; color: #fff; padding: 1rem; }
</style>

<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

▸ 96. Як зменшити розмір JS та CSS?

Мінімізація та бандлінг:

Мінімізація (uglify, terser, csso).
Об’єднання файлів для зменшення кількості запитів.
Використання CDN для популярних бібліотек.

▸ 97. Web Storage API — що це і для чого використовується?

Web Storage API дозволяє зберігати дані на стороні клієнта у браузері. Складається з двох основних механізмів:

LocalStorage — зберігає дані постійно, навіть після закриття браузера.
SessionStorage — зберігає дані лише протягом однієї сесії (до закриття вкладки).

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

// LocalStorage
localStorage.setItem('username', 'Ivan');
const name = localStorage.getItem('username');

// SessionStorage
sessionStorage.setItem('token', '12345');
const token = sessionStorage.getItem('token');

▸ 98. Що таке HTTPS і чому він важливий?

HTTPS (HyperText Transfer Protocol Secure) — це протокол обміну даними між браузером і сервером з використанням шифрування TLS/SSL.

Захищає дані від перехоплення та підміни.
Підтверджує автентичність сайту (SSL-сертифікат).
Підвищує довіру користувачів (замок у браузері).
Є фактором ранжування в SEO (Google надає перевагу HTTPS-сайтам).
Необхідний для роботи сучасних API (наприклад, Service Workers, Geolocation).

Різниця між HTTP і HTTPS:

HTTP — передає дані у відкритому вигляді, легко перехопити.
HTTPS — всі дані шифруються (TLS/SSL), захищені від атак.

http://example.com   ❌ незахищене з’єднання
https://example.com  ✅ захищене з’єднання

▸ 99. Що таке Subresource Integrity (SRI)?

SRI — механізм перевірки цілісності сторонніх ресурсів (JS, CSS), щоб браузер впевнився, що файл не змінений.

<script src="script.js" integrity="sha384-..." crossorigin="anonymous"></script>

▸ 100. Що таке оптимізація критичного рендерингу?

Покращення швидкості відображення сторінки за рахунок завантаження лише критично важливих ресурсів спочатку (CSS, JS, шрифти).