├── .gitignore
├── assets
    ├── code.png
    └── html.svg
├── .github
    ├── FUNDING.yml
    ├── CONTRIBUTING.md
    └── PULL_REQUEST_TEMPLATE.md
├── .prettierrc
├── SECURITY.md
├── LICENSE.txt
├── CODE_OF_CONDUCT.md
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | #Junk
2 | .DS_Store
3 | .vscode/
4 | .idea/
5 | 


--------------------------------------------------------------------------------
/assets/code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevLoversTeam/html-interview-questions/HEAD/assets/code.png


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # FUNDING.yml
2 | # Налаштування можливостей підтримки проєкту
3 | 
4 | github: ViktorSvertoka
5 | buy_me_a_coffee: viktor.svertoka
6 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "printWidth": 80,
 3 |   "useTabs": false,
 4 |   "semi": true,
 5 |   "singleQuote": true,
 6 |   "trailingComma": "es5",
 7 |   "bracketSpacing": true,
 8 |   "arrowParens": "avoid",
 9 |   "proseWrap": "always"
10 | }
11 | 


--------------------------------------------------------------------------------
/.github/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # 🧠 Як зробити внесок у DevLovers
 2 | 
 3 | Дякуємо, що хочете зробити внесок у наш проєкт! Нижче описано кілька простих правил, які допоможуть вам підготувати якісний pull request.
 4 | 
 5 | ## 🔧 Формат доповнення
 6 | 
 7 | - Кожне питання повинне бути оформлене в HTML-елементі `<details>` зі структурою:
 8 | 
 9 | ![Code](../assets/code.png)
10 | 


--------------------------------------------------------------------------------
/assets/html.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" fill="none" viewBox="0 0 256 256"><rect width="256" height="256" fill="#E14E1D" rx="60"/><path fill="#fff" d="M48 38L56.6098 134.593H167.32L163.605 176.023L127.959 185.661L92.38 176.037L90.0012 149.435H57.9389L62.5236 200.716L127.951 218.888L193.461 200.716L202.244 102.655H85.8241L82.901 69.9448H205.041H205.139L208 38H48Z"/><path fill="#EBEBEB" d="M128 38H48L56.6098 134.593H128V102.655H85.8241L82.901 69.9448H128V38Z"/><path fill="#EBEBEB" d="M128 185.647L127.959 185.661L92.38 176.037L90.0012 149.435H57.9388L62.5236 200.716L127.951 218.888L128 218.874V185.647Z"/></svg>


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!-- Дякуємо за ваш внесок у DevLovers 🎉 -->
 2 | 
 3 | <!-- Ці коментарі є лише підказкою — вони не будуть видимі у створеному pull request -->
 4 | 
 5 | Чекліст:
 6 | 
 7 | - [ ] Я ознайомився з [CONTRIBUTING.md](CONTRIBUTING.md) і дотримувався вказівок.
 8 | - [ ] Моє доповнення не дублює вже існуюче питання чи відповідь.
 9 | - [ ] Я додав(ла) нове запитання у відповідному форматі (див. існуючі приклади).
10 | - [ ] Я додав(ла) нове запитання **в кінець файлу** з **наступним за порядком номером**.
11 | 
12 | ---
13 | 
14 | <!-- Будь ласка, коротко опишіть, що саме ви додаєте або змінюєте, і чому це варте включення. -->
15 | 
16 | ...
17 | 


--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
 1 | # 🔒 Security Policy
 2 | 
 3 | ## Reporting a Vulnerability
 4 | 
 5 | If you discover a security issue in any of my projects, I would greatly appreciate your help in resolving it responsibly. Here's how you can report it:
 6 | 
 7 | 1. **Contact me:**  
 8 |    Please send an email to **[devlovers.net@gmail.com](mailto:devlovers.net@gmail.com)** with:
 9 | 
10 |    - A clear description of the issue.
11 |    - Steps to reproduce the vulnerability.
12 |    - Any relevant code or logs for better understanding.
13 | 
14 | 2. **Handling process:**
15 | 
16 |    - I will acknowledge your report within **48 hours**.
17 |    - Together, we will work on resolving the issue as quickly as possible.
18 | 
19 | 3. **Confidentiality:**  
20 |    Please keep the details of the vulnerability private until it has been resolved.
21 | 
22 | Your cooperation helps ensure the safety and security of my work. Thank you for contributing to a safer tech environment! 🙌
23 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 DevLovers
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 
21 | SOFTWARE.


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
  1 | # Contributor Covenant Code of Conduct
  2 | 
  3 | ## Our Pledge
  4 | 
  5 | We as members, contributors, and leaders pledge to make participation in our
  6 | community a harassment-free experience for everyone, regardless of age, body
  7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
  8 | identity and expression, level of experience, education, socio-economic status,
  9 | nationality, personal appearance, race, religion, or sexual identity and
 10 | orientation.
 11 | 
 12 | We pledge to act and interact in ways that contribute to an open, welcoming,
 13 | diverse, inclusive, and healthy community.
 14 | 
 15 | ## Our Standards
 16 | 
 17 | Examples of behavior that contributes to a positive environment for our
 18 | community include:
 19 | 
 20 | - Demonstrating empathy and kindness toward other people
 21 | - Being respectful of differing opinions, viewpoints, and experiences
 22 | - Giving and gracefully accepting constructive feedback
 23 | - Accepting responsibility and apologizing to those affected by our mistakes,
 24 |   and learning from the experience
 25 | - Focusing on what is best not just for us as individuals, but for the overall
 26 |   community
 27 | 
 28 | Examples of unacceptable behavior include:
 29 | 
 30 | - The use of sexualized language or imagery, and sexual attention or advances of
 31 |   any kind
 32 | - Trolling, insulting or derogatory comments, and personal or political attacks
 33 | - Public or private harassment
 34 | - Publishing others' private information, such as a physical or email address,
 35 |   without their explicit permission
 36 | - Other conduct which could reasonably be considered inappropriate in a
 37 |   professional setting
 38 | 
 39 | ## Enforcement Responsibilities
 40 | 
 41 | Community leaders are responsible for clarifying and enforcing our standards of
 42 | acceptable behavior and will take appropriate and fair corrective action in
 43 | response to any behavior that they deem inappropriate, threatening, offensive,
 44 | or harmful.
 45 | 
 46 | Community leaders have the right and responsibility to remove, edit, or reject
 47 | comments, commits, code, wiki edits, issues, and other contributions that are
 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
 49 | decisions when appropriate.
 50 | 
 51 | ## Scope
 52 | 
 53 | This Code of Conduct applies within all community spaces, and also applies when
 54 | an individual is officially representing the community in public spaces.
 55 | Examples of representing our community include using an official e-mail address,
 56 | posting via an official social media account, or acting as an appointed
 57 | representative at an online or offline event.
 58 | 
 59 | ## Enforcement
 60 | 
 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
 62 | reported to the community leaders responsible for enforcement at
 63 | [devlovers.net@gmail.com](mailto:devlovers.net@gmail.com). All complaints will
 64 | be reviewed and investigated promptly and fairly.
 65 | 
 66 | All community leaders are obligated to respect the privacy and security of the
 67 | reporter of any incident.
 68 | 
 69 | ## Enforcement Guidelines
 70 | 
 71 | Community leaders will follow these Community Impact Guidelines in determining
 72 | the consequences for any action they deem in violation of this Code of Conduct:
 73 | 
 74 | ### 1. Correction
 75 | 
 76 | **Community Impact**: Use of inappropriate language or other behavior deemed
 77 | unprofessional or unwelcome in the community.
 78 | 
 79 | **Consequence**: A private, written warning from community leaders, providing
 80 | clarity around the nature of the violation and an explanation of why the
 81 | behavior was inappropriate. A public apology may be requested.
 82 | 
 83 | ### 2. Warning
 84 | 
 85 | **Community Impact**: A violation through a single incident or series of
 86 | actions.
 87 | 
 88 | **Consequence**: A warning with consequences for continued behavior. No
 89 | interaction with the people involved, including unsolicited interaction with
 90 | those enforcing the Code of Conduct, for a specified period of time. This
 91 | includes avoiding interactions in community spaces as well as external channels
 92 | like social media. Violating these terms may lead to a temporary or permanent
 93 | ban.
 94 | 
 95 | ### 3. Temporary Ban
 96 | 
 97 | **Community Impact**: A serious violation of community standards, including
 98 | sustained inappropriate behavior.
 99 | 
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 | 
106 | ### 4. Permanent Ban
107 | 
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior, harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 | 
112 | **Consequence**: A permanent ban from any sort of public interaction within the
113 | community.
114 | 
115 | ## Attribution
116 | 
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 | 
121 | Community Impact Guidelines were inspired by
122 | [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
123 | 
124 | [homepage]: https://www.contributor-covenant.org
125 | 
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
   1 | <h1>
   2 |   HTML <img src="./assets/html.svg" width="40" height="40" alt="HTML logo"/>
   3 | </h1>
   4 | 
   5 | <h2>Найпопулярніші запитання та відповіді на співбесіді з HTML</h2>
   6 | 
   7 | ## Базові концепції HTML
   8 | 
   9 | <details>
  10 | <summary>1. Що означає абревіатура HTML і яке її призначення?</summary>
  11 | 
  12 | #### HTML
  13 | 
  14 | - HTML — HyperText Markup Language, мова розмітки для структурування вмісту
  15 |   вебсторінок (текст, зображення, посилання тощо).
  16 | 
  17 | - Призначення — описувати структуру та семантику контенту, який браузер
  18 |   відображає користувачу.
  19 | 
  20 | </details>
  21 | 
  22 | <details>
  23 | <summary>2. Чим HTML відрізняється від CSS та JavaScript?</summary>
  24 | 
  25 | #### HTML
  26 | 
  27 | - **HTML** — описує структуру веб-сторінки (що є: заголовки, абзаци, зображення,
  28 |   посилання).
  29 | 
  30 | - **CSS** — відповідає за оформлення і стиль (як виглядає: кольори, шрифти,
  31 |   розташування).
  32 | 
  33 | - **JavaScript** — додає динаміку та інтерактивність (що робить: обробка подій,
  34 |   зміна DOM, анімації, логіка).
  35 | 
  36 | Разом вони формують основу фронтенд-розробки: HTML — кістяк, CSS — одяг,
  37 | JavaScript — поведінка.
  38 | 
  39 | </details>
  40 | 
  41 | <details>
  42 | <summary>3. Що таке HTML теги?</summary>
  43 | 
  44 | #### HTML
  45 | 
  46 | - HTML теги — це інструкції (команди), які визначають структуру та зміст
  47 |   веб-сторінки.
  48 | 
  49 | - Теги пишуться у кутових дужках `< >`.
  50 | 
  51 | - Більшість тегів мають відкриваючу та закриваючу частини:
  52 | 
  53 |   ```html
  54 |   <p>Текст абзацу</p>
  55 |   ```
  56 | 
  57 | - Деякі теги самозакриваючі:
  58 | 
  59 |   ```html
  60 |   <br />
  61 |   <img src="image.jpg" alt="Зображення" />
  62 |   ```
  63 | 
  64 | - Теги можуть мати атрибути для додаткової інформації:
  65 |   ```html
  66 |   <a href="https://example.com">Посилання</a>
  67 |   ```
  68 | 
  69 | </details>
  70 | 
  71 | <details>
  72 | <summary>4. Що таке HTML елементи?</summary>
  73 | 
  74 | #### HTML
  75 | 
  76 | - HTML елемент — це повна конструкція, що складається з відкриваючого тега,
  77 |   контенту та закриваючого тега.
  78 | 
  79 | #### Структура елемента:
  80 | 
  81 | ```html
  82 | <tagname attribute="value">контент</tagname>
  83 | ```
  84 | 
  85 | #### Приклади:
  86 | 
  87 | - `<h1>Заголовок</h1>` — елемент заголовка
  88 | - `<p>Абзац тексту</p>` — елемент абзацу
  89 | - `<img src="photo.jpg" alt="Фото">` — елемент зображення (самозакриваючий)
  90 | 
  91 | Елементи можуть містити інші елементи (вкладеність) і мати атрибути для
  92 | додаткових налаштувань.
  93 | 
  94 | </details>
  95 | 
  96 | <details>
  97 | <summary>5. Опишіть базову структуру HTML-сторінки?</summary>
  98 | 
  99 | #### HTML
 100 | 
 101 | - Основна структура HTML-документа:
 102 | 
 103 | ```html
 104 | <!DOCTYPE html>
 105 | <!-- Оголошення типу документа -->
 106 | <html lang="en">
 107 |   <head>
 108 |     <meta charset="UTF-8" />
 109 |     <title>Назва сторінки</title>
 110 |   </head>
 111 |   <body>
 112 |     <!-- Вміст сторінки -->
 113 |   </body>
 114 | </html>
 115 | ```
 116 | 
 117 | - Складові:
 118 | 
 119 | 1. `<!DOCTYPE html>` — вказує, що документ у HTML5.
 120 | 
 121 | 2. `<html>` — кореневий елемент.
 122 | 
 123 | 3. `<head>` — метадані (кодова сторінка, заголовок, стилі, скрипти).
 124 | 
 125 | 4. `<body>` — видимий вміст сторінки.
 126 | 
 127 | </details>
 128 | 
 129 | <details>
 130 | <summary>6. Що таке DOCTYPE і навіщо його використовують?</summary>
 131 | 
 132 | #### HTML
 133 | 
 134 | - `DOCTYPE` (Document Type Declaration) — це декларація типу документа, яка
 135 |   повідомляє браузеру, яку версію HTML використовує сторінка.
 136 | 
 137 | #### Синтаксис для HTML5:
 138 | 
 139 | ```html
 140 | <!DOCTYPE html>
 141 | ```
 142 | 
 143 | #### Призначення:
 144 | 
 145 | - Запобігає режиму сумісності (quirks mode) браузера
 146 | - Забезпечує коректне відображення сторінки згідно зі стандартами
 147 | - Допомагає валідаторам перевіряти правильність коду
 148 | - Має стояти першим рядком HTML-документа
 149 | 
 150 | </details>
 151 | 
 152 | <details>
 153 | <summary>7. Яка поточна версія HTML?</summary>
 154 | 
 155 | #### HTML
 156 | 
 157 | - Поточна версія — **HTML5**.
 158 | 
 159 | - HTML5 є "Living Standard" (живий стандарт), що означає постійне оновлення без
 160 |   формальних нових версій.
 161 | 
 162 | - Підтримується всіма сучасними браузерами.
 163 | 
 164 | - Включає нові семантичні елементи, API, покращену підтримку мультимедіа та
 165 |   багато інших функцій.
 166 | 
 167 | - Розробляється консорціумом WHATWG (Web Hypertext Application Technology
 168 |   Working Group).
 169 | 
 170 | </details>
 171 | 
 172 | <details>
 173 | <summary>8. Що роблять атрибути DOCTYPE та html lang?</summary>
 174 | 
 175 | #### HTML
 176 | 
 177 | - `<!DOCTYPE html>` — повідомляє браузеру, що документ написаний у стандарті
 178 |   HTML5, щоб уникнути режиму сумісності.
 179 | 
 180 | - `lang` у `<html>` — вказує мову вмісту сторінки для пошукових систем, читачів
 181 |   екрану та інших сервісів (наприклад, lang="uk").
 182 | 
 183 | #### Приклад:
 184 | 
 185 | ```html
 186 | <!DOCTYPE html>
 187 | <html lang="uk">
 188 |   <!-- Решта документа -->
 189 | </html>
 190 | ```
 191 | 
 192 | Ці атрибути покращують доступність, SEO та коректність відображення сторінки.
 193 | 
 194 | </details>
 195 | 
 196 | <details>
 197 | <summary>9. Що описується в тегі head?</summary>
 198 | 
 199 | #### HTML
 200 | 
 201 | Тег `<head>` містить метаінформацію про документ:
 202 | 
 203 | 1. **Назва сторінки** — `<title>`.
 204 | 2. **Мета-теги** — `<meta>` (характеристики документа, ключові слова, опис).
 205 | 3. **Підключення стилів** — `<link>` (CSS-файли).
 206 | 4. **Скрипти** — `<script>` (підключення JavaScript).
 207 | 5. **Фавікон** — `<link>` для іконки сайту.
 208 | 6. **Інші налаштування** — наприклад, `<base>` для базового URL.
 209 | 
 210 | #### Приклад:
 211 | 
 212 | ```html
 213 | <head>
 214 |   <meta charset="UTF-8" />
 215 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 216 |   <title>Назва сторінки</title>
 217 |   <link rel="stylesheet" href="styles.css" />
 218 |   <script src="script.js"></script>
 219 | </head>
 220 | ```
 221 | 
 222 | </details>
 223 | 
 224 | <details>
 225 | <summary>10. Яка різниця між тегами head та body?</summary>
 226 | 
 227 | #### HTML
 228 | 
 229 | - `<head>` — містить метадані про документ (назва, кодування, стилі, скрипти,
 230 |   SEO-теги), не відображається безпосередньо на сторінці.
 231 | 
 232 | - `<body>` — містить видимий контент для користувача (текст, зображення, кнопки,
 233 |   відео тощо).
 234 | 
 235 | #### Ключові відмінності:
 236 | 
 237 | **`<head>`:**
 238 | 
 239 | - Невидимий для користувача
 240 | - Містить службову інформацію
 241 | - Налаштування сторінки
 242 | - SEO-дані
 243 | 
 244 | **`<body>`:**
 245 | 
 246 | - Видимий контент
 247 | - Те, що бачить користувач
 248 | - Інтерактивні елементи
 249 | - Основний вміст сторінки
 250 | 
 251 | </details>
 252 | 
 253 | ## Основи роботи з текстом і структурою
 254 | 
 255 | <details>
 256 | <summary>11. Що таке пробільний простір в HTML?</summary>
 257 | 
 258 | #### HTML
 259 | 
 260 | - Пробільний простір в HTML — це пробіли, табуляції та переноси рядків між
 261 |   елементами.
 262 | 
 263 | #### Поведінка браузера:
 264 | 
 265 | - Браузер автоматично **згортає** (схлопує) декілька пробілів в один
 266 | - Кілька переносів рядків замінюються одним пробілом
 267 | - Провідні та кінцеві пробіли ігноруються
 268 | 
 269 | #### Приклад:
 270 | 
 271 | ```html
 272 | <p>Цей текст має багато пробілів</p>
 273 | ```
 274 | 
 275 | Відображається як: "Цей текст має багато пробілів"
 276 | 
 277 | - Для збереження пробілів використовуйте CSS `white-space: pre` або тег `<pre>`
 278 | 
 279 | </details>
 280 | 
 281 | <details>
 282 | <summary>12. Що таке порожні елементи в HTML?</summary>
 283 | 
 284 | #### HTML
 285 | 
 286 | - Порожні елементи (void elements) — це HTML теги, які не мають контенту і
 287 |   закриваючого тега.
 288 | 
 289 | #### Основні порожні елементи:
 290 | 
 291 | - `<br>` — розрив рядка
 292 | - `<hr>` — горизонтальна лінія
 293 | - `<img>` — зображення
 294 | - `<input>` — поле вводу
 295 | - `<meta>` — метадані
 296 | - `<link>` — посилання на ресурс
 297 | 
 298 | #### Синтаксис:
 299 | 
 300 | ```html
 301 | <!-- Правильно -->
 302 | <img src="photo.jpg" alt="Фото" />
 303 | <br />
 304 | <input type="text" name="name" />
 305 | 
 306 | <!-- В XHTML/XML стилі (необов'язково в HTML5) -->
 307 | <img src="photo.jpg" alt="Фото" />
 308 | <br />
 309 | ```
 310 | 
 311 | </details>
 312 | 
 313 | <details>
 314 | <summary>13. У чому різниця між елементами div і span?</summary>
 315 | 
 316 | #### HTML
 317 | 
 318 | #### `<div>` (блоковий елемент):
 319 | 
 320 | - Займає всю доступну ширину
 321 | - Починається з нового рядка
 322 | - Має верхні та нижні відступи
 323 | - Використовується для великих блоків контенту
 324 | 
 325 | #### `<span>` (вбудований елемент):
 326 | 
 327 | - Займає тільки необхідну ширину
 328 | - Не переносить на новий рядок
 329 | - Не має вертикальних відступів
 330 | - Використовується для маленьких фрагментів тексту
 331 | 
 332 | #### Приклад:
 333 | 
 334 | ```html
 335 | <div>Це блоковий елемент</div>
 336 | <div>Він займає всю ширину</div>
 337 | 
 338 | <p>Це <span>вбудований елемент</span> всередині абзацу.</p>
 339 | ```
 340 | 
 341 | </details>
 342 | 
 343 | <details>
 344 | <summary>14. Яка різниця між тегами b та strong?</summary>
 345 | 
 346 | #### HTML
 347 | 
 348 | - `<b>` — просто робить текст візуально жирним, без додаткового смислового
 349 |   значення.
 350 | 
 351 | - `<strong>` — робить текст жирним і додає семантичний акцент (важливість), що
 352 |   враховується пошуковими системами та скрінрідерами.
 353 | 
 354 | #### Приклади:
 355 | 
 356 | ```html
 357 | <p>Цей текст <b>жирний</b> тільки візуально.</p>
 358 | <p>Цей текст <strong>важливий</strong> за змістом.</p>
 359 | ```
 360 | 
 361 | **Рекомендація:** Використовуйте `<strong>` для смислово важливого тексту, `<b>`
 362 | — тільки для стилізації без семантичного значення.
 363 | 
 364 | </details>
 365 | 
 366 | <details>
 367 | <summary>15. Коли слід використовувати em замість i, і навпаки?</summary>
 368 | 
 369 | #### HTML
 370 | 
 371 | - `<em>` — виділяє текст курсивом з семантичним наголосом (інтонаційне чи
 372 |   логічне підкреслення важливості).
 373 | 
 374 | - `<i>` — відображає текст курсивом без зміни смислу (наприклад, іноземні слова,
 375 |   технічні терміни, назви).
 376 | 
 377 | #### Приклади:
 378 | 
 379 | ```html
 380 | <!-- Семантичний наголос -->
 381 | <p>Я <em>дуже</em> хочу це зробити!</p>
 382 | 
 383 | <!-- Стилістичне виділення -->
 384 | <p>Фільм <i>Титанік</i> вийшов в 1997 році.</p>
 385 | <p>Слово <i>bonjour</i> означає "привіт" французькою.</p>
 386 | ```
 387 | 
 388 | Якщо потрібно передати смисловий акцент — використовуємо `<em>`. Якщо тільки
 389 | стиль відображення — `<i>`.
 390 | 
 391 | </details>
 392 | 
 393 | <details>
 394 | <summary>16. Яке призначення тегів small, s та mark?</summary>
 395 | 
 396 | #### HTML
 397 | 
 398 | - `<small>` — робить текст меншим і семантично позначає додаткову або другорядну
 399 |   інформацію (примітки, дисклеймери).
 400 | 
 401 | - `<s>` — відображає текст закресленим, коли він втратив актуальність, але його
 402 |   варто залишити для перегляду.
 403 | 
 404 | - `<mark>` — виділяє текст жовтим фоном для підсвічування важливого або
 405 |   знайденого фрагмента.
 406 | 
 407 | #### Приклади:
 408 | 
 409 | ```html
 410 | <p>Ціна: <s>100 грн</s> 80 грн</p>
 411 | <p><mark>Важливо:</mark> Термін дії до 31 грудня.</p>
 412 | <p>Основний текст. <small>© 2023 Всі права захищені.</small></p>
 413 | ```
 414 | 
 415 | </details>
 416 | 
 417 | <details>
 418 | <summary>17. Як створити абзац або розрив рядка в HTML?</summary>
 419 | 
 420 | #### HTML
 421 | 
 422 | - Абзац:
 423 | 
 424 | ```html
 425 | <p>Текст абзацу</p>
 426 | ```
 427 | 
 428 | створює блок з відступами зверху і знизу.
 429 | 
 430 | - Розрив рядка:
 431 | 
 432 | ```html
 433 | Текст першого рядка<br />Текст другого рядка
 434 | ```
 435 | 
 436 | переносить текст без створення нового абзацу.
 437 | 
 438 | #### Коли використовувати:
 439 | 
 440 | - `<p>` — для окремих абзаців тексту
 441 | - `<br>` — для примусового переносу в межах одного блоку (адреси, вірші)
 442 | 
 443 | </details>
 444 | 
 445 | <details>
 446 | <summary>18. Для чого використовуються теги sub та sup?</summary>
 447 | 
 448 | #### HTML
 449 | 
 450 | - `<sub>` — підрядковий текст (нижче базової лінії)
 451 | - `<sup>` — надрядковий текст (вище базової лінії)
 452 | 
 453 | #### Використання:
 454 | 
 455 | **Математичні формули:**
 456 | 
 457 | ```html
 458 | <p>H<sub>2</sub>O - формула води</p>
 459 | <p>E = mc<sup>2</sup> - формула Ейнштейна</p>
 460 | ```
 461 | 
 462 | **Хімічні формули:**
 463 | 
 464 | ```html
 465 | <p>CO<sub>2</sub> - вуглекислий газ</p>
 466 | ```
 467 | 
 468 | **Сноски:**
 469 | 
 470 | ```html
 471 | <p>Цей факт<sup>1</sup> потребує підтвердження.</p>
 472 | ```
 473 | 
 474 | </details>
 475 | 
 476 | <details>
 477 | <summary>19. Розкажіть про тег samp?</summary>
 478 | 
 479 | #### HTML
 480 | 
 481 | Тег `<samp>` використовується для позначення тексту, який є результатом
 482 | виконання комп'ютерної програми, наприклад, повідомлень про помилки або вихідних
 483 | даних. Він відображається звичайним шрифтом, але зазвичай використовується для
 484 | стилістичних цілей.
 485 | 
 486 | Приклад використання тегу `<samp>`:
 487 | 
 488 | ```html
 489 | <p>Результат виконання програми: <samp>Помилка: Невірний ввід</samp></p>
 490 | <p>Командний рядок повернув: <samp>Hello World!</samp></p>
 491 | ```
 492 | 
 493 | **Пов'язані теги:**
 494 | 
 495 | - `<code>` — для фрагментів коду
 496 | - `<kbd>` — для клавіш клавіатури
 497 | - `<var>` — для змінних
 498 | 
 499 | </details>
 500 | 
 501 | ## Атрибути та їх використання
 502 | 
 503 | <details>
 504 | <summary>20. Які глобальні атрибути є в HTML?</summary>
 505 | 
 506 | #### HTML
 507 | 
 508 | Глобальні атрибути можна використовувати з будь-яким HTML елементом:
 509 | 
 510 | #### Основні глобальні атрибути:
 511 | 
 512 | - `id` — унікальний ідентифікатор елемента
 513 | - `class` — CSS класи для стилізації
 514 | - `style` — вбудовані стилі CSS
 515 | - `title` — підказка при наведенні
 516 | - `lang` — мова контенту
 517 | - `dir` — напрям тексту (ltr/rtl)
 518 | - `tabindex` — порядок фокусування
 519 | - `hidden` — приховує елемент
 520 | - `data-*` — користувацькі атрибути
 521 | 
 522 | #### Атрибути подій:
 523 | 
 524 | - `onclick`, `onmouseover`, `onload` тощо
 525 | 
 526 | #### Приклад:
 527 | 
 528 | ```html
 529 | <div
 530 |   id="main-content"
 531 |   class="container highlight"
 532 |   title="Основний контент сторінки"
 533 |   lang="uk"
 534 |   data-section="hero"
 535 | >
 536 |   Контент...
 537 | </div>
 538 | ```
 539 | 
 540 | </details>
 541 | 
 542 | <details>
 543 | <summary>21. Як використовують атрибути class та id? Яка різниця між класами та ідентифікаторами?</summary>
 544 | 
 545 | #### HTML
 546 | 
 547 | #### Атрибут `id`:
 548 | 
 549 | - Унікальний ідентифікатор елемента на сторінці
 550 | - Може бути тільки один елемент з конкретним id
 551 | - Використовується для JavaScript, якірних посилань, CSS стилізації
 552 | 
 553 | #### Атрибут `class`:
 554 | 
 555 | - Групує елементи за спільними характеристиками
 556 | - Один клас можна застосувати до багатьох елементів
 557 | - Один елемент може мати кілька класів
 558 | 
 559 | #### Приклади:
 560 | 
 561 | ```html
 562 | <!-- ID - унікальний -->
 563 | <div id="header">Заголовок сайту</div>
 564 | <div id="navigation">Навігація</div>
 565 | 
 566 | <!-- Class - може повторюватися -->
 567 | <p class="highlight">Важливий текст</p>
 568 | <p class="highlight large">Великий важливий текст</p>
 569 | <span class="highlight">Ще важливий текст</span>
 570 | ```
 571 | 
 572 | #### CSS селектори:
 573 | 
 574 | ```css
 575 | #header {
 576 |   color: blue;
 577 | } /* ID селектор */
 578 | .highlight {
 579 |   color: red;
 580 | } /* Class селектор */
 581 | ```
 582 | 
 583 | **Рекомендація:** Використовуйте `id` для унікальних елементів і якірних
 584 | посилань, `class` — для стилізації та групування.
 585 | 
 586 | </details>
 587 | 
 588 | <details>
 589 | <summary>22. Яке призначення атрибута alt в HTML?</summary>
 590 | 
 591 | #### HTML
 592 | 
 593 | - `alt` — альтернативний текст для зображення.
 594 | 
 595 | #### Призначення:
 596 | 
 597 | - Показується, якщо зображення не завантажилось.
 598 | 
 599 | - Допомагає скрінрідерам робити сайт доступним.
 600 | 
 601 | - Використовується для SEO.
 602 | 
 603 | #### Приклади:
 604 | 
 605 | ```html
 606 | <!-- Інформативне зображення -->
 607 | <img src="chart.png" alt="Графік продажів за 2023 рік" />
 608 | 
 609 | <!-- Декоративне зображення -->
 610 | <img src="decoration.png" alt="" />
 611 | 
 612 | <!-- Зображення-посилання -->
 613 | <a href="/home">
 614 |   <img src="logo.png" alt="Повернутися на головну сторінку" />
 615 | </a>
 616 | ```
 617 | 
 618 | **Важливо:** Для декоративних зображень використовуйте порожній `alt=""`, щоб
 619 | скрін-рідери їх ігнорували.
 620 | 
 621 | </details>
 622 | 
 623 | <details>
 624 | <summary>23. Навіщо використовується тег label?</summary>
 625 | 
 626 | #### HTML
 627 | 
 628 | - `<label>` пов'язує текстову підказку з елементом форми, щоб користувачу було
 629 |   зрозуміло, що вводити.
 630 | 
 631 | #### Переваги:
 632 | 
 633 | - Покращує доступність (скрінрідери читають підказку разом із полем).
 634 | 
 635 | - Клік по <label> автоматично фокусує пов'язане поле.
 636 | 
 637 | #### Приклади:
 638 | 
 639 | **Зовнішній label (через атрибути for та id):**
 640 | 
 641 | ```html
 642 | <label for="email">Email:</label> <input type="email" id="email" name="email" />
 643 | ```
 644 | 
 645 | **Внутрішній label (обгортає елемент):**
 646 | 
 647 | ```html
 648 | <label>
 649 |   <input type="checkbox" name="agree" />
 650 |   Погоджуюсь з умовами
 651 | </label>
 652 | ```
 653 | 
 654 | **Для групи radio buttons:**
 655 | 
 656 | ```html
 657 | <label for="size-small">
 658 |   <input type="radio" id="size-small" name="size" value="small" />
 659 |   Малий
 660 | </label>
 661 | <label for="size-large">
 662 |   <input type="radio" id="size-large" name="size" value="large" />
 663 |   Великий
 664 | </label>
 665 | ```
 666 | 
 667 | </details>
 668 | 
 669 | <details>
 670 | <summary>24. Що таке атрибути data-* і коли їх слід використовувати?</summary>
 671 | 
 672 | #### HTML
 673 | 
 674 | - `data-*` — це користувацькі атрибути для зберігання будь-яких додаткових даних
 675 |   у елементі HTML.
 676 | 
 677 | #### Синтаксис:
 678 | 
 679 | ```html
 680 | <div data-user-id="123" data-role="admin" data-last-login="2023-12-01"></div>
 681 | ```
 682 | 
 683 | #### Коли використовувати:
 684 | 
 685 | - Зберігати інформацію для JavaScript без впливу на відображення.
 686 | 
 687 | - Легко отримувати через element.dataset.userId або element.dataset.role.
 688 | 
 689 | - Наприклад, для інтерактивних елементів, налаштувань чи передачі даних у JS.
 690 | 
 691 | #### Приклад використання з JavaScript:
 692 | 
 693 | ```html
 694 | <button data-action="delete" data-id="42">Видалити</button>
 695 | 
 696 | <script>
 697 |   const button = document.querySelector('button');
 698 |   console.log(button.dataset.action); // "delete"
 699 |   console.log(button.dataset.id); // "42"
 700 | </script>
 701 | ```
 702 | 
 703 | </details>
 704 | 
 705 | <details>
 706 | <summary>25. Що таке data-атрибути, в яких випадках їх використовуєте?</summary>
 707 | 
 708 | #### HTML
 709 | 
 710 | - `data-*` атрибути дозволяють зберігати користувацькі дані прямо в HTML
 711 |   елементах.
 712 | 
 713 | #### Випадки використання:
 714 | 
 715 | **1. Конфігурація компонентів:**
 716 | 
 717 | ```html
 718 | <div class="slider" data-speed="500" data-autoplay="true">
 719 |   <!-- Контент слайдера -->
 720 | </div>
 721 | ```
 722 | 
 723 | **2. Ідентифікація для JavaScript:**
 724 | 
 725 | ```html
 726 | <tr data-user-id="123" data-status="active">
 727 |   <td>John Doe</td>
 728 |   <td><button data-action="edit">Редагувати</button></td>
 729 | </tr>
 730 | ```
 731 | 
 732 | **3. Стан елементів:**
 733 | 
 734 | ```html
 735 | <div class="modal" data-visible="false">
 736 |   <!-- Модальне вікно -->
 737 | </div>
 738 | ```
 739 | 
 740 | **4. CSS стилізація за станом:**
 741 | 
 742 | ```css
 743 | [data-status='active'] {
 744 |   color: green;
 745 | }
 746 | [data-status='inactive'] {
 747 |   color: gray;
 748 | }
 749 | ```
 750 | 
 751 | **Переваги:** Валідний HTML, легкий доступ через JavaScript, не впливає на
 752 | стилізацію.
 753 | 
 754 | </details>
 755 | 
 756 | ## Посилання і навігація
 757 | 
 758 | <details>
 759 | <summary>26. Як створити гіперпосилання в HTML?</summary>
 760 | 
 761 | #### HTML
 762 | 
 763 | - Використовуємо тег `<a>`:
 764 | 
 765 | ```html
 766 | <a href="https://example.com">Текст посилання</a>
 767 | ```
 768 | 
 769 | - `href` — адреса, куди веде посилання.
 770 | 
 771 | - Можна додати `target="_blank"` для відкриття в новій вкладці.
 772 | 
 773 | #### Різні типи посилань:
 774 | 
 775 | ```html
 776 | <!-- Зовнішнє посилання -->
 777 | <a href="https://google.com">Google</a>
 778 | 
 779 | <!-- Внутрішнє посилання -->
 780 | <a href="/about">Про нас</a>
 781 | 
 782 | <!-- Email посилання -->
 783 | <a href="mailto:contact@example.com">Написати листа</a>
 784 | 
 785 | <!-- Телефонне посилання -->
 786 | <a href="tel:+380123456789">Зателефонувати</a>
 787 | 
 788 | <!-- Посилання на файл -->
 789 | <a href="document.pdf">Завантажити PDF</a>
 790 | ```
 791 | 
 792 | </details>
 793 | 
 794 | <details>
 795 | <summary>27. Що таке внутрішні та зовнішні гіперпосилання і які вони мають атрибути?</summary>
 796 | 
 797 | #### HTML
 798 | 
 799 | #### Зовнішні посилання:
 800 | 
 801 | - Ведуть на інші веб-сайти
 802 | - Починаються з `http://` або `https://`
 803 | 
 804 | #### Внутрішні посилання:
 805 | 
 806 | - Ведуть на сторінки того самого сайту
 807 | - Використовують відносні або абсолютні шляхи
 808 | 
 809 | #### Основні атрибути:
 810 | 
 811 | ```html
 812 | <!-- Зовнішнє посилання -->
 813 | <a
 814 |   href="https://example.com"
 815 |   target="_blank"
 816 |   rel="noopener noreferrer"
 817 |   title="Перейти на example.com"
 818 | >
 819 |   Зовнішній сайт
 820 | </a>
 821 | 
 822 | <!-- Внутрішнє посилання -->
 823 | <a href="/contact" title="Сторінка контактів"> Контакти </a>
 824 | 
 825 | <!-- Якірне посилання -->
 826 | <a href="#section1" title="Перейти до розділу 1"> Розділ 1 </a>
 827 | ```
 828 | 
 829 | **Атрибути:**
 830 | 
 831 | - `href` — URL адреса
 832 | - `target` — де відкрити (\_blank, \_self, \_parent, \_top)
 833 | - `rel` — відношення до цільової сторінки
 834 | - `title` — підказка при наведенні
 835 | 
 836 | </details>
 837 | 
 838 | <details>
 839 | <summary>28. Яка різниця між відносними та абсолютними URL-адресами?</summary>
 840 | 
 841 | #### HTML
 842 | 
 843 | **Абсолютний URL** — містить повний шлях із протоколом і доменом.
 844 | 
 845 | ```html
 846 | <a href="https://example.com/page.html">Посилання</a>
 847 | ```
 848 | 
 849 | - Використовується для переходів на зовнішні ресурси або між доменами.
 850 | 
 851 | **Відносний URL** — вказує шлях відносно поточного документа.
 852 | 
 853 | ```html
 854 | <a href="/page.html">Посилання</a>
 855 | <a href="page.html">Посилання</a>
 856 | <a href="../page.html">Посилання</a>
 857 | ```
 858 | 
 859 | #### Типи відносних URL:
 860 | 
 861 | ```html
 862 | <!-- Відносно кореня сайту -->
 863 | <a href="/about/team.html">Команда</a>
 864 | 
 865 | <!-- Відносно поточної папки -->
 866 | <a href="contact.html">Контакти</a>
 867 | 
 868 | <!-- На рівень вище -->
 869 | <a href="../index.html">Головна</a>
 870 | 
 871 | <!-- На кілька рівнів вище -->
 872 | <a href="../../docs/manual.pdf">Інструкція</a>
 873 | ```
 874 | 
 875 | - Зручно для внутрішніх сторінок сайту, особливо при розробці й тестуванні.
 876 | 
 877 | </details>
 878 | 
 879 | <details>
 880 | <summary>29. Як відкрити посилання в новій вкладці?</summary>
 881 | 
 882 | #### HTML
 883 | 
 884 | - Додати атрибут `target="_blank"` до тега `<a>`:
 885 | 
 886 | ```html
 887 | <a href="https://example.com" target="_blank">Відкрити в новій вкладці</a>
 888 | ```
 889 | 
 890 | - Рекомендовано також додати `rel="noopener noreferrer"` для безпеки:
 891 | 
 892 | ```html
 893 | <a href="https://example.com" target="_blank" rel="noopener noreferrer">
 894 |   Відкрити в новій вкладці
 895 | </a>
 896 | ```
 897 | 
 898 | #### Інші значення target:
 899 | 
 900 | ```html
 901 | <!-- Поточна вкладка (за замовчуванням) -->
 902 | <a href="page.html" target="_self">Поточна вкладка</a>
 903 | 
 904 | <!-- Батьківський фрейм -->
 905 | <a href="page.html" target="_parent">Батьківський фрейм</a>
 906 | 
 907 | <!-- Верхній рівень вікна -->
 908 | <a href="page.html" target="_top">Верхній рівень</a>
 909 | 
 910 | <!-- Конкретне вікно/фрейм -->
 911 | <a href="page.html" target="myWindow">Конкретне вікно</a>
 912 | ```
 913 | 
 914 | **Безпека:** `rel="noopener noreferrer"` запобігає доступу нової сторінки до
 915 | поточної через `window.opener`.
 916 | 
 917 | </details>
 918 | 
 919 | <details>
 920 | <summary>30. Як створити якір для переходу до певної частини сторінки?</summary>
 921 | 
 922 | #### HTML
 923 | 
 924 | - Додаємо ідентифікатор елементу:
 925 | 
 926 | ```html
 927 | <h2 id="contacts">Контакти</h2>
 928 | ```
 929 | 
 930 | - Створюємо посилання на цей id:
 931 | 
 932 | ```html
 933 | <a href="#contacts">Перейти до контактів</a>
 934 | ```
 935 | 
 936 | При кліку сторінка прокрутиться до елемента з таким id.
 937 | 
 938 | #### Повний приклад:
 939 | 
 940 | ```html
 941 | <!DOCTYPE html>
 942 | <html>
 943 |   <head>
 944 |     <title>Якірні посилання</title>
 945 |   </head>
 946 |   <body>
 947 |     <!-- Навігація -->
 948 |     <nav>
 949 |       <a href="#about">Про нас</a>
 950 |       <a href="#services">Послуги</a>
 951 |       <a href="#contacts">Контакти</a>
 952 |     </nav>
 953 | 
 954 |     <!-- Контент -->
 955 |     <section id="about">
 956 |       <h2>Про нас</h2>
 957 |       <p>Інформація про компанію...</p>
 958 |     </section>
 959 | 
 960 |     <section id="services">
 961 |       <h2>Послуги</h2>
 962 |       <p>Опис наших послуг...</p>
 963 |     </section>
 964 | 
 965 |     <section id="contacts">
 966 |       <h2>Контакти</h2>
 967 |       <p>Контактна інформація...</p>
 968 |     </section>
 969 | 
 970 |     <!-- Повернутися на верх -->
 971 |     <a href="#top">↑ На верх</a>
 972 |   </body>
 973 | </html>
 974 | ```
 975 | 
 976 | **CSS для плавної прокрутки:**
 977 | 
 978 | ```css
 979 | html {
 980 |   scroll-behavior: smooth;
 981 | }
 982 | ```
 983 | 
 984 | </details>
 985 | 
 986 | <details>
 987 | <summary>31. Як створити посилання на різні розділи на одній веб-сторінці HTML?</summary>
 988 | 
 989 | #### HTML
 990 | 
 991 | Відповідь: Для створення гіперпосилання використовується тег `<a>`. Атрибут href
 992 | вказує URL або шлях.
 993 | 
 994 | #### Повний приклад:
 995 | 
 996 | ```html
 997 | <!DOCTYPE html>
 998 | <html>
 999 |   <head>
1000 |     <title>Якірні посилання</title>
1001 |   </head>
1002 |   <body>
1003 |     <!-- Навігація -->
1004 |     <nav>
1005 |       <a href="#about">Про нас</a>
1006 |       <a href="#services">Послуги</a>
1007 |       <a href="#contacts">Контакти</a>
1008 |     </nav>
1009 | 
1010 |     <!-- Контент -->
1011 |     <section id="about">
1012 |       <h2>Про нас</h2>
1013 |       <p>Інформація про компанію...</p>
1014 |     </section>
1015 | 
1016 |     <section id="services">
1017 |       <h2>Послуги</h2>
1018 |       <p>Опис наших послуг...</p>
1019 |     </section>
1020 | 
1021 |     <section id="contacts">
1022 |       <h2>Контакти</h2>
1023 |       <p>Контактна інформація...</p>
1024 |     </section>
1025 | 
1026 |     <!-- Повернутися на верх -->
1027 |     <a href="#top">↑ На верх</a>
1028 |   </body>
1029 | </html>
1030 | ```
1031 | 
1032 | **CSS для плавної прокрутки:**
1033 | 
1034 | ```css
1035 | html {
1036 |   scroll-behavior: smooth;
1037 | }
1038 | ```
1039 | 
1040 | </details>
1041 | 
1042 | <details>
1043 | <summary>32. Як створити посилання на файл для завантаження в HTML?</summary>
1044 | 
1045 | #### HTML
1046 | 
1047 | - Використати `<a>` з атрибутом `download`:
1048 | 
1049 | ```html
1050 | <a href="files/manual.pdf" download>Завантажити інструкцію</a>
1051 | ```
1052 | 
1053 | href — шлях до файлу.
1054 | 
1055 | download — каже браузеру зберегти файл замість відкриття.
1056 | 
1057 | - Можна вказати ім'я:
1058 | 
1059 | ```html
1060 | <a href="files/manual.pdf" download="Instrukciya.pdf">Завантажити</a>
1061 | ```
1062 | 
1063 | #### Додаткові приклади:
1064 | 
1065 | ```html
1066 | <!-- Завантажити з оригінальним ім'ям -->
1067 | <a href="document.pdf" download>Завантажити PDF</a>
1068 | 
1069 | <!-- Завантажити з новим ім'ям -->
1070 | <a href="report.xlsx" download="financial-report-2023.xlsx">
1071 |   Завантажити звіт
1072 | </a>
1073 | 
1074 | <!-- Завантажити зображення -->
1075 | <a href="photo.jpg" download="my-photo.jpg"> Зберегти фото </a>
1076 | ```
1077 | 
1078 | **Примітка:** Атрибут `download` працює тільки для файлів з того самого домену
1079 | (same-origin).
1080 | 
1081 | </details>
1082 | 
1083 | <details>
1084 | <summary>33. Яке призначення атрибута target у тегу a в HTML?</summary>
1085 | 
1086 | #### HTML
1087 | 
1088 | - Атрибут target визначає, де відкриється посилання:
1089 | 
1090 |   - `_self` (за замовчуванням) — відкриває в тій самій вкладці.
1091 | 
1092 |   - `_blank` — відкриває у новій вкладці/вікні.
1093 | 
1094 |   - `_parent` — відкриває в батьківському фреймі (якщо є фрейми).
1095 | 
1096 |   - `_top` — відкриває у всьому вікні, виходячи з фреймів.
1097 | 
1098 |   - `customName` — відкриває в конкретному вікні/фреймі з цим ім'ям.
1099 | 
1100 | #### Приклади:
1101 | 
1102 | ```html
1103 | <!-- За замовчуванням - поточна вкладка -->
1104 | <a href="page.html">Внутрішня сторінка</a>
1105 | 
1106 | <!-- Нова вкладка -->
1107 | <a href="https://example.com" target="_blank">Зовнішній сайт</a>
1108 | 
1109 | <!-- Нова вкладка з безпекою -->
1110 | <a href="https://example.com" target="_blank" rel="noopener noreferrer">
1111 |   Безпечне зовнішнє посилання
1112 | </a>
1113 | 
1114 | <!-- Конкретне вікно -->
1115 | <a href="help.html" target="helpWindow">Довідка</a>
1116 | ```
1117 | 
1118 | **Безпека:** Для `target="_blank"` рекомендується додавати
1119 | `rel="noopener noreferrer"`.
1120 | 
1121 | </details>
1122 | 
1123 | ## Зображення та медіа
1124 | 
1125 | <details>
1126 | <summary>34. Як вставляти зображення на HTML-сторінку?</summary>
1127 | 
1128 | #### HTML
1129 | 
1130 | - Використовуємо тег `<img>`:
1131 | 
1132 | ```html
1133 | <img src="image.jpg" alt="Опис зображення" />
1134 | ```
1135 | 
1136 | - `src` — шлях до зображення.
1137 | 
1138 | - `alt` — текстовий опис для доступності та коли зображення не завантажилось.
1139 | 
1140 | - Опційно: `width`, `height`, `title`.
1141 | 
1142 | #### Детальніші приклади:
1143 | 
1144 | ```html
1145 | <!-- Основне використання -->
1146 | <img src="photo.jpg" alt="Фотографія заходу сонця" />
1147 | 
1148 | <!-- З розмірами -->
1149 | <img src="logo.png" alt="Логотип компанії" width="200" height="100" />
1150 | 
1151 | <!-- З підказкою -->
1152 | <img src="chart.png" alt="Графік продажів" title="Натисніть для збільшення" />
1153 | 
1154 | <!-- Відносний шлях -->
1155 | <img src="../images/banner.jpg" alt="Банер акції" />
1156 | 
1157 | <!-- Абсолютний URL -->
1158 | <img src="https://example.com/image.jpg" alt="Зовнішнє зображення" />
1159 | ```
1160 | 
1161 | **Краща практика:** Завжди включайте атрибут `alt` для доступності.
1162 | 
1163 | </details>
1164 | 
1165 | <details>
1166 | <summary>35. Яке значення має атрибут alt для зображень?</summary>
1167 | 
1168 | #### HTML
1169 | 
1170 | - `alt` — альтернативний текст для зображення.
1171 | 
1172 | #### Призначення:
1173 | 
1174 | - Показується, якщо зображення не завантажилось.
1175 | 
1176 | - Допомагає скрінрідерам робити сайт доступним.
1177 | 
1178 | - Використовується для SEO.
1179 | 
1180 | #### Приклади правильного використання:
1181 | 
1182 | ```html
1183 | <!-- Інформативне зображення -->
1184 | <img
1185 |   src="chart.png"
1186 |   alt="Графік продажів за 2023 рік показує зростання на 25%"
1187 | />
1188 | 
1189 | <!-- Декоративне зображення -->
1190 | <img src="decoration.png" alt="" />
1191 | 
1192 | <!-- Зображення-посилання -->
1193 | <a href="/home">
1194 |   <img src="logo.png" alt="Повернутися на головну сторінку" />
1195 | </a>
1196 | 
1197 | <!-- Складне зображення -->
1198 | <img src="infographic.jpg" alt="Інфографіка: кроки створення веб-сайту" />
1199 | ```
1200 | 
1201 | **Правила:**
1202 | 
1203 | - Для декоративних зображень використовуйте `alt=""`
1204 | - Для інформативних - описуйте зміст
1205 | - Для посилань - описуйте призначення посилання
1206 | 
1207 | </details>
1208 | 
1209 | <details>
1210 | <summary>36. Які формати зображень підтримуються веббраузерами?</summary>
1211 | 
1212 | #### HTML
1213 | 
1214 | - **Основні формати, які підтримують сучасні браузери:**
1215 | 
1216 |   - `JPEG` / `JPG` — фотографії з високою деталізацією, стиснення з втратою
1217 |     якості.
1218 | 
1219 |   - `PNG` — графіка з прозорістю, без втрати якості.
1220 | 
1221 |   - `GIF` — анімація та прості картинки з обмеженою палітрою.
1222 | 
1223 |   - `WebP` — сучасний формат з високим стисненням і прозорістю.
1224 | 
1225 |   - `SVG` — векторна графіка, масштабована без втрати якості.
1226 | 
1227 | Менш поширені: BMP, ICO (для іконок).
1228 | 
1229 | #### Коли використовувати:
1230 | 
1231 | ```html
1232 | <!-- JPEG для фотографій -->
1233 | <img src="photo.jpg" alt="Пейзаж" />
1234 | 
1235 | <!-- PNG для графіки з прозорістю -->
1236 | <img src="logo.png" alt="Логотип" />
1237 | 
1238 | <!-- GIF для анімації -->
1239 | <img src="loading.gif" alt="Завантаження" />
1240 | 
1241 | <!-- WebP для оптимізації -->
1242 | <img src="optimized.webp" alt="Оптимізоване зображення" />
1243 | 
1244 | <!-- SVG для векторної графіки -->
1245 | <img src="icon.svg" alt="Іконка" />
1246 | ```
1247 | 
1248 | **Сучасні тенденції:** WebP та AVIF для кращого стиснення, SVG для іконок та
1249 | простої графіки.
1250 | 
1251 | </details>
1252 | 
1253 | ## Списки
1254 | 
1255 | <details>
1256 | <summary>37. Які різні типи списків доступні в HTML?</summary>
1257 | 
1258 | #### HTML
1259 | 
1260 | - В HTML є три основні типи списків:
1261 | 
1262 | 1. **Нумерований список (`<ol>`)** — елементи пронумеровані:
1263 | 
1264 | 2. **Маркований список (`<ul>`)** — елементи з маркерами (кульки, квадрати):
1265 | 
1266 | 3. **Список визначень (`<dl>`)** — термін + опис:
1267 | 
1268 | #### Приклади:
1269 | 
1270 | ```html
1271 | <!-- Нумерований список -->
1272 | <ol>
1273 |   <li>Перший крок</li>
1274 |   <li>Другий крок</li>
1275 |   <li>Третій крок</li>
1276 | </ol>
1277 | 
1278 | <!-- Маркований список -->
1279 | <ul>
1280 |   <li>Молоко</li>
1281 |   <li>Хліб</li>
1282 |   <li>Яйця</li>
1283 | </ul>
1284 | 
1285 | <!-- Список визначень -->
1286 | <dl>
1287 |   <dt>HTML</dt>
1288 |   <dd>HyperText Markup Language</dd>
1289 |   <dt>CSS</dt>
1290 |   <dd>Cascading Style Sheets</dd>
1291 | </dl>
1292 | ```
1293 | 
1294 | </details>
1295 | 
1296 | <details>
1297 | <summary>38. Як створювати впорядковані, невпорядковані списки та списки з описом у HTML?</summary>
1298 | 
1299 | #### HTML
1300 | 
1301 | 1. **Впорядкований список (`<ol>`):**
1302 | 
1303 | ```html
1304 | <ol>
1305 |   <li>Перший</li>
1306 |   <li>Другий</li>
1307 | </ol>
1308 | ```
1309 | 
1310 | 2. **Невпорядкований список (`<ul>`):**
1311 | 
1312 | ```html
1313 | <ul>
1314 |   <li>Пункт 1</li>
1315 |   <li>Пункт 2</li>
1316 | </ul>
1317 | ```
1318 | 
1319 | 3. **Список з описом (`<dl>`):**
1320 | 
1321 | ```html
1322 | <dl>
1323 |   <dt>HTML</dt>
1324 |   <dd>Мова розмітки</dd>
1325 |   <dt>JavaScript</dt>
1326 |   <dd>Мова програмування</dd>
1327 | </dl>
1328 | ```
1329 | 
1330 | #### Розширені приклади:
1331 | 
1332 | ```html
1333 | <!-- Нумерований список з атрибутами -->
1334 | <ol type="A" start="3">
1335 |   <li>Третій пункт (C)</li>
1336 |   <li>Четвертий пункт (D)</li>
1337 | </ol>
1338 | 
1339 | <!-- Список з різними маркерами (CSS) -->
1340 | <ul style="list-style-type: square;">
1341 |   <li>Квадратний маркер</li>
1342 |   <li>Ще один квадратний маркер</li>
1343 | </ul>
1344 | ```
1345 | 
1346 | </details>
1347 | 
1348 | <details>
1349 | <summary>39. Чи можна вкладати списки в HTML? Якщо так, то як?</summary>
1350 | 
1351 | #### HTML
1352 | 
1353 | - Так, можна. Вкладені списки створюють всередині `<li>` елемента:
1354 | 
1355 | ```html
1356 | <ul>
1357 |   <li>
1358 |     Пункт 1
1359 |     <ul>
1360 |       <li>Вкладений пункт 1</li>
1361 |       <li>Вкладений пункт 2</li>
1362 |     </ul>
1363 |   </li>
1364 |   <li>Пункт 2</li>
1365 | </ul>
1366 | ```
1367 | 
1368 | Можна вкладати будь-які типи списків (`<ul>` всередині `<ol>` і навпаки).
1369 | 
1370 | #### Більш складний приклад:
1371 | 
1372 | ```html
1373 | <ol>
1374 |   <li>
1375 |     Веб-технології
1376 |     <ul>
1377 |       <li>
1378 |         Frontend
1379 |         <ul>
1380 |           <li>HTML</li>
1381 |           <li>CSS</li>
1382 |           <li>JavaScript</li>
1383 |         </ul>
1384 |       </li>
1385 |       <li>
1386 |         Backend
1387 |         <ul>
1388 |           <li>Node.js</li>
1389 |           <li>Python</li>
1390 |           <li>PHP</li>
1391 |         </ul>
1392 |       </li>
1393 |     </ul>
1394 |   </li>
1395 |   <li>Мобільна розробка</li>
1396 | </ol>
1397 | ```
1398 | 
1399 | **Правило:** Вкладений список завжди має бути всередині `<li>`, а не між `<li>`
1400 | елементами.
1401 | 
1402 | </details>
1403 | 
1404 | <details>
1405 | <summary>40. Як можна згрупувати опції всередині тегу select?</summary>
1406 | 
1407 | #### HTML
1408 | 
1409 | Для групування опцій у випадаючому списку використовуйте тег `<optgroup>`:
1410 | 
1411 | ```html
1412 | <select name="course">
1413 |   <optgroup label="Фронтенд">
1414 |     <option value="html">HTML</option>
1415 |     <option value="css">CSS</option>
1416 |     <option value="js">JavaScript</option>
1417 |   </optgroup>
1418 | 
1419 |   <optgroup label="Бекенд">
1420 |     <option value="php">PHP</option>
1421 |     <option value="python">Python</option>
1422 |     <option value="nodejs">Node.js</option>
1423 |   </optgroup>
1424 | 
1425 |   <optgroup label="Дизайн">
1426 |     <option value="photoshop">Photoshop</option>
1427 |     <option value="figma">Figma</option>
1428 |   </optgroup>
1429 | </select>
1430 | ```
1431 | 
1432 | #### Переваги `<optgroup>`:
1433 | 
1434 | - Візуально групує пов'язані опції
1435 | - Покращує юзабіліті для довгих списків
1436 | - Підтримує атрибут `label` для назви групи
1437 | - Можна вимкнути групу через `disabled`
1438 | 
1439 | #### Приклад з вимкненою групою:
1440 | 
1441 | ```html
1442 | <select name="country">
1443 |   <optgroup label="Європа">
1444 |     <option value="ua">Україна</option>
1445 |     <option value="pl">Польща</option>
1446 |   </optgroup>
1447 | 
1448 |   <optgroup label="Азія" disabled>
1449 |     <option value="jp">Японія</option>
1450 |     <option value="cn">Китай</option>
1451 |   </optgroup>
1452 | </select>
1453 | ```
1454 | 
1455 | </details>
1456 | 
1457 | ## Форми і валідація
1458 | 
1459 | <details>
1460 | <summary>41. Що таке HTML-форми та як їх створити?</summary>
1461 | 
1462 | #### HTML
1463 | 
1464 | - HTML-форма — це елемент, який збирає дані від користувача та відправляє їх на
1465 |   сервер або обробляє на клієнті.
1466 | 
1467 | #### Приклад створення:
1468 | 
1469 | ```html
1470 | <form action="/submit" method="post">
1471 |   <label for="name">Ім'я:</label>
1472 |   <input type="text" id="name" name="name" />
1473 | 
1474 |   <label for="email">Email:</label>
1475 |   <input type="email" id="email" name="email" />
1476 | 
1477 |   <button type="submit">Відправити</button>
1478 | </form>
1479 | ```
1480 | 
1481 | - `<form>` — контейнер форми.
1482 | - `action` — URL, куди відправляються дані.
1483 | - `method` — спосіб відправки (get або post).
1484 | 
1485 | **Поля вводу** (`<input>`, `<textarea>`, `<select>`) + кнопки (`<button>` або
1486 | `<input type="submit">`).
1487 | 
1488 | #### Розширений приклад:
1489 | 
1490 | ```html
1491 | <form action="/register" method="post" enctype="multipart/form-data">
1492 |   <fieldset>
1493 |     <legend>Реєстрація користувача</legend>
1494 | 
1495 |     <label for="username">Логін:</label>
1496 |     <input type="text" id="username" name="username" required />
1497 | 
1498 |     <label for="password">Пароль:</label>
1499 |     <input type="password" id="password" name="password" required />
1500 | 
1501 |     <label for="avatar">Аватар:</label>
1502 |     <input type="file" id="avatar" name="avatar" accept="image/*" />
1503 | 
1504 |     <button type="submit">Зареєструватися</button>
1505 |     <button type="reset">Очистити</button>
1506 |   </fieldset>
1507 | </form>
1508 | ```
1509 | 
1510 | </details>
1511 | 
1512 | <details>
1513 | <summary>42. Опишіть різні типи вхідних даних форм у HTML5.</summary>
1514 | 
1515 | #### HTML
1516 | 
1517 | - В HTML5 у `<input>` з'явилося багато типів для збору різних даних:
1518 | 
1519 | #### Текстові типи:
1520 | 
1521 | - `text` — звичайне текстове поле.
1522 | - `password` — поле з прихованим введенням.
1523 | - `email` — перевірка формату email.
1524 | - `url` — перевірка формату URL.
1525 | - `tel` — для телефонів (без валідації формату в HTML).
1526 | - `search` — поле пошуку.
1527 | 
1528 | #### Числові типи:
1529 | 
1530 | - `number` — числове поле зі стрілками.
1531 | - `range` — повзунок для вибору значення.
1532 | 
1533 | #### Дата і час:
1534 | 
1535 | - `date` — вибір дати.
1536 | - `month` — вибір місяця та року.
1537 | - `week` — вибір тижня.
1538 | - `time` — вибір часу.
1539 | - `datetime-local` — дата і час без часової зони.
1540 | 
1541 | #### Інші типи:
1542 | 
1543 | - `color` — вибір кольору.
1544 | - `checkbox` — прапорець.
1545 | - `radio` — перемикач (один із групи).
1546 | - `file` — вибір файлу для завантаження.
1547 | - `hidden` — приховане поле для передачі даних.
1548 | 
1549 | #### Кнопки:
1550 | 
1551 | - `submit`, `reset`, `button` — кнопки.
1552 | 
1553 | #### Приклади:
1554 | 
1555 | ```html
1556 | <input type="email" placeholder="user@example.com" />
1557 | <input type="number" min="1" max="100" step="1" />
1558 | <input type="range" min="0" max="100" value="50" />
1559 | <input type="date" value="2023-12-31" />
1560 | <input type="color" value="#ff0000" />
1561 | ```
1562 | 
1563 | </details>
1564 | 
1565 | <details>
1566 | <summary>43. Як зробити вхідні дані форм обов'язковими?</summary>
1567 | 
1568 | #### HTML
1569 | 
1570 | - Щоб зробити поле форми обов'язковим, додаємо атрибут `required`:
1571 | 
1572 | ```html
1573 | <input type="email" name="userEmail" required />
1574 | ```
1575 | 
1576 | - Браузер не дасть відправити форму, поки поле не заповнене.
1577 | 
1578 | - Для спеціалізованих типів (email, number, url) додатково перевіряється формат
1579 |   введення.
1580 | 
1581 | #### Розширені приклади:
1582 | 
1583 | ```html
1584 | <!-- Обов'язкове текстове поле -->
1585 | <input type="text" name="name" required placeholder="Введіть ваше ім'я" />
1586 | 
1587 | <!-- Обов'язковий вибір з випадаючого списку -->
1588 | <select name="country" required>
1589 |   <option value="">Оберіть країну</option>
1590 |   <option value="ua">Україна</option>
1591 |   <option value="pl">Польща</option>
1592 | </select>
1593 | 
1594 | <!-- Обов'язкове прийняття умов -->
1595 | <input type="checkbox" name="terms" required />
1596 | <label for="terms">Я погоджуюсь з умовами використання</label>
1597 | 
1598 | <!-- Обов'язкове заповнення textarea -->
1599 | <textarea name="message" required placeholder="Ваше повідомлення"></textarea>
1600 | ```
1601 | 
1602 | **Стилізація через CSS:**
1603 | 
1604 | ```css
1605 | input:required {
1606 |   border-left: 3px solid red;
1607 | }
1608 | 
1609 | input:valid {
1610 |   border-left: 3px solid green;
1611 | }
1612 | ```
1613 | 
1614 | </details>
1615 | 
1616 | <details>
1617 | <summary>44. Яке призначення елемента label у формах?</summary>
1618 | 
1619 | #### HTML
1620 | 
1621 | - `<label>` пов'язує текстову підказку з елементом форми, щоб користувачу було
1622 |   зрозуміло, що вводити.
1623 | 
1624 | #### Переваги:
1625 | 
1626 | - Покращує доступність (скрінрідери читають підказку разом із полем).
1627 | 
1628 | - Клік по <label> автоматично фокусує пов'язане поле.
1629 | 
1630 | #### Приклади:
1631 | 
1632 | **Зовнішній label (через for та id):**
1633 | 
1634 | ```html
1635 | <label for="email">Email:</label> <input type="email" id="email" name="email" />
1636 | ```
1637 | 
1638 | **Внутрішній label (обгортає елемент):**
1639 | 
1640 | ```html
1641 | <label>
1642 |   <input type="checkbox" name="agree" />
1643 |   Погоджуюсь з умовами
1644 | </label>
1645 | ```
1646 | 
1647 | **Для radio buttons:**
1648 | 
1649 | ```html
1650 | <fieldset>
1651 |   <legend>Оберіть розмір:</legend>
1652 |   <label>
1653 |     <input type="radio" name="size" value="small" />
1654 |     Малий
1655 |   </label>
1656 |   <label>
1657 |     <input type="radio" name="size" value="large" />
1658 |     Великий
1659 |   </label>
1660 | </fieldset>
1661 | ```
1662 | 
1663 | **Складніший приклад:**
1664 | 
1665 | ```html
1666 | <div class="form-group">
1667 |   <label for="password"> Пароль <span class="required">*</span> </label>
1668 |   <input type="password" id="password" name="password" required />
1669 |   <small>Мінімум 8 символів</small>
1670 | </div>
1671 | ```
1672 | 
1673 | </details>
1674 | 
1675 | <details>
1676 | <summary>45. Як групувати вхідні дані форм і чому це потрібно робити?</summary>
1677 | 
1678 | #### HTML
1679 | 
1680 | - Для групування даних у формах використовують `<fieldset>` і `<legend>`:
1681 | 
1682 | ```html
1683 | <fieldset>
1684 |   <legend>Особисті дані</legend>
1685 |   <label for="name">Ім'я:</label>
1686 |   <input type="text" id="name" name="name" />
1687 | 
1688 |   <label for="email">Email:</label>
1689 |   <input type="email" id="email" name="email" />
1690 | </fieldset>
1691 | ```
1692 | 
1693 | #### Навіщо:
1694 | 
1695 | - Візуально та логічно об'єднує пов'язані поля.
1696 | 
1697 | - Покращує доступність (скрінрідери читають легенду).
1698 | 
1699 | - Допомагає структурувати великі форми і робить їх зручнішими для користувача.
1700 | 
1701 | #### Розширений приклад:
1702 | 
1703 | ```html
1704 | <form>
1705 |   <fieldset>
1706 |     <legend>Контактна інформація</legend>
1707 |     <label for="phone">Телефон:</label>
1708 |     <input type="tel" id="phone" name="phone" />
1709 | 
1710 |     <label for="address">Адреса:</label>
1711 |     <textarea id="address" name="address"></textarea>
1712 |   </fieldset>
1713 | 
1714 |   <fieldset>
1715 |     <legend>Налаштування акаунту</legend>
1716 |     <label for="notifications">
1717 |       <input type="checkbox" id="notifications" name="notifications" />
1718 |       Отримувати сповіщення
1719 |     </label>
1720 | 
1721 |     <label for="privacy">
1722 |       <input type="radio" id="privacy" name="privacy" value="public" />
1723 |       Публічний профіль
1724 |     </label>
1725 |   </fieldset>
1726 | 
1727 |   <fieldset disabled>
1728 |     <legend>Преміум функції</legend>
1729 |     <input type="checkbox" name="premium" disabled />
1730 |     <label>Доступно тільки для преміум користувачів</label>
1731 |   </fieldset>
1732 | </form>
1733 | ```
1734 | 
1735 | </details>
1736 | 
1737 | <details>
1738 | <summary>46. Як створити форму в HTML і забезпечити її валідацію?</summary>
1739 | 
1740 | #### HTML
1741 | 
1742 | Створення форми з валідацією включає використання HTML5 атрибутів та JavaScript
1743 | для розширеної перевірки.
1744 | 
1745 | #### HTML5 валідація:
1746 | 
1747 | ```html
1748 | <form action="/submit" method="post" novalidate>
1749 |   <label for="username">Логін:</label>
1750 |   <input
1751 |     type="text"
1752 |     id="username"
1753 |     name="username"
1754 |     required
1755 |     minlength="3"
1756 |     maxlength="20"
1757 |     pattern="[a-zA-Z0-9_]+"
1758 |     title="Тільки літери, цифри та підкреслення"
1759 |   />
1760 | 
1761 |   <label for="email">Email:</label>
1762 |   <input type="email" id="email" name="email" required />
1763 | 
1764 |   <label for="age">Вік:</label>
1765 |   <input type="number" id="age" name="age" min="18" max="120" required />
1766 | 
1767 |   <label for="website">Веб-сайт:</label>
1768 |   <input type="url" id="website" name="website" />
1769 | 
1770 |   <button type="submit">Відправити</button>
1771 | </form>
1772 | ```
1773 | 
1774 | #### Атрибути валідації:
1775 | 
1776 | - `required` — обов'язкове поле
1777 | - `minlength/maxlength` — мінімальна/максимальна довжина
1778 | - `min/max` — мінімальне/максимальне значення для чисел
1779 | - `pattern` — регулярний вираз
1780 | - `step` — крок для числових полів
1781 | 
1782 | #### CSS для стилізації:
1783 | 
1784 | ```css
1785 | input:valid {
1786 |   border: 2px solid green;
1787 | }
1788 | 
1789 | input:invalid {
1790 |   border: 2px solid red;
1791 | }
1792 | 
1793 | input:required {
1794 |   background-color: #fff8dc;
1795 | }
1796 | ```
1797 | 
1798 | </details>
1799 | 
1800 | <details>
1801 | <summary>47. Які методи відправки даних форми ви знаєте?</summary>
1802 | 
1803 | #### HTML
1804 | 
1805 | Основні методи HTTP для відправки форм:
1806 | 
1807 | #### GET метод:
1808 | 
1809 | ```html
1810 | <form action="/search" method="get">
1811 |   <input type="text" name="query" placeholder="Пошук..." />
1812 |   <button type="submit">Шукати</button>
1813 | </form>
1814 | ```
1815 | 
1816 | **Характеристики GET:**
1817 | 
1818 | - Дані додаються до URL як параметри запиту
1819 | - Видимі в адресному рядку
1820 | - Можна додати в закладки
1821 | - Обмеження по розміру даних
1822 | - Використовується для пошуку, фільтрів
1823 | 
1824 | #### POST метод:
1825 | 
1826 | ```html
1827 | <form action="/submit" method="post">
1828 |   <input type="text" name="username" required />
1829 |   <input type="password" name="password" required />
1830 |   <button type="submit">Увійти</button>
1831 | </form>
1832 | ```
1833 | 
1834 | **Характеристики POST:**
1835 | 
1836 | - Дані відправляються в тілі запиту
1837 | - Не видимі в URL
1838 | - Немає обмежень по розміру
1839 | - Використовується для створення, оновлення даних
1840 | 
1841 | #### Додаткові атрибути:
1842 | 
1843 | ```html
1844 | <!-- Для завантаження файлів -->
1845 | <form action="/upload" method="post" enctype="multipart/form-data">
1846 |   <input type="file" name="document" required />
1847 |   <button type="submit">Завантажити</button>
1848 | </form>
1849 | 
1850 | <!-- Перевизначення методу -->
1851 | <form action="/update" method="post">
1852 |   <input type="hidden" name="_method" value="PUT" />
1853 |   <button type="submit">Оновити</button>
1854 | </form>
1855 | ```
1856 | 
1857 | </details>
1858 | 
1859 | <details>
1860 | <summary>48. Основні атрибути HTML-форм? Як вони впливають на надсилання даних з веб-сторінки?</summary>
1861 | 
1862 | #### HTML
1863 | 
1864 | #### Атрибути елемента `<form>`:
1865 | 
1866 | **action** — URL для відправки даних:
1867 | 
1868 | ```html
1869 | <form action="/process-form" method="post"></form>
1870 | ```
1871 | 
1872 | **method** — HTTP метод (GET, POST):
1873 | 
1874 | ```html
1875 | <form method="post">
1876 |   <!-- Безпечно для конфіденційних даних -->
1877 |   <form method="get"><!-- Для пошуку та фільтрів --></form>
1878 | </form>
1879 | ```
1880 | 
1881 | **enctype** — кодування даних:
1882 | 
1883 | ```html
1884 | <!-- За замовчуванням -->
1885 | <form enctype="application/x-www-form-urlencoded">
1886 |   <!-- Для файлів -->
1887 |   <form enctype="multipart/form-data">
1888 |     <!-- Простий текст -->
1889 |     <form enctype="text/plain"></form>
1890 |   </form>
1891 | </form>
1892 | ```
1893 | 
1894 | **target** — де відкрити результат:
1895 | 
1896 | ```html
1897 | <form target="_blank">
1898 |   <!-- В новому вікні -->
1899 |   <form target="_self">
1900 |     <!-- В поточному вікні -->
1901 |     <form target="frame1"><!-- В конкретному фреймі --></form>
1902 |   </form>
1903 | </form>
1904 | ```
1905 | 
1906 | **novalidate** — вимкнути HTML5 валідацію:
1907 | 
1908 | ```html
1909 | <form novalidate>
1910 |   <!-- Валідація тільки через JavaScript -->
1911 | </form>
1912 | ```
1913 | 
1914 | **autocomplete** — автозаповнення:
1915 | 
1916 | ```html
1917 | <form autocomplete="on">
1918 |   <!-- Увімкнути -->
1919 |   <form autocomplete="off"><!-- Вимкнути --></form>
1920 | </form>
1921 | ```
1922 | 
1923 | #### Приклад повної форми:
1924 | 
1925 | ```html
1926 | <form
1927 |   action="/contact"
1928 |   method="post"
1929 |   enctype="multipart/form-data"
1930 |   autocomplete="on"
1931 |   target="_self"
1932 | >
1933 |   <input type="text" name="name" autocomplete="name" />
1934 |   <input type="email" name="email" autocomplete="email" />
1935 |   <input type="file" name="attachment" />
1936 | 
1937 |   <button type="submit">Відправити</button>
1938 | </form>
1939 | ```
1940 | 
1941 | </details>
1942 | 
1943 | <details>
1944 | <summary>49. Для чого використовується елемент datalist?</summary>
1945 | 
1946 | #### HTML
1947 | 
1948 | `<datalist>` надає список готових варіантів для поля вводу, створюючи
1949 | автодоповнення (autocomplete dropdown).
1950 | 
1951 | #### Основне використання:
1952 | 
1953 | ```html
1954 | <label for="browser">Оберіть браузер:</label>
1955 | <input list="browsers" id="browser" name="browser" />
1956 | 
1957 | <datalist id="browsers">
1958 |   <option value="Chrome"></option>
1959 |   <option value="Firefox"></option>
1960 |   <option value="Safari"></option>
1961 |   <option value="Edge"></option>
1962 |   <option value="Opera"></option>
1963 | </datalist>
1964 | ```
1965 | 
1966 | #### Переваги:
1967 | 
1968 | - Користувач може обрати зі списку або ввести власний варіант
1969 | - Покращує UX через швидкий вибір
1970 | - Працює з різними типами input
1971 | 
1972 | #### Розширені приклади:
1973 | 
1974 | ```html
1975 | <!-- З описом опцій -->
1976 | <input list="languages" name="language" placeholder="Мова програмування" />
1977 | <datalist id="languages">
1978 |   <option value="JavaScript" label="JS - Веб-розробка"></option>
1979 |   <option value="Python" label="Python - Дані та ШІ"></option>
1980 |   <option value="Java" label="Java - Корпоративна розробка"></option>
1981 | </datalist>
1982 | 
1983 | <!-- Для емейлів -->
1984 | <input type="email" list="email-domains" name="email" />
1985 | <datalist id="email-domains">
1986 |   <option value="@gmail.com"></option>
1987 |   <option value="@yahoo.com"></option>
1988 |   <option value="@outlook.com"></option>
1989 | </datalist>
1990 | 
1991 | <!-- Для URL -->
1992 | <input type="url" list="sites" name="website" />
1993 | <datalist id="sites">
1994 |   <option value="https://github.com/"></option>
1995 |   <option value="https://stackoverflow.com/"></option>
1996 |   <option value="https://developer.mozilla.org/"></option>
1997 | </datalist>
1998 | ```
1999 | 
2000 | **Підтримка браузерів:** Всі сучасні браузери. У старих браузерах працює як
2001 | звичайний input.
2002 | 
2003 | </details>
2004 | 
2005 | <details>
2006 | <summary>50. Що таке елемент output у HTML5?</summary>
2007 | 
2008 | #### HTML
2009 | 
2010 | `<output>` представляє результат обчислення або дії користувача. Зазвичай
2011 | використовується для відображення результатів форм або динамічних розрахунків.
2012 | 
2013 | #### Основні атрибути:
2014 | 
2015 | - `for` — вказує на елементи, які впливають на результат
2016 | - `form` — пов'язує з конкретною формою
2017 | - `name` — ім'я для надсилання з формою
2018 | 
2019 | #### Приклад з обчисленням:
2020 | 
2021 | ```html
2022 | <form>
2023 |   <label for="quantity">Кількість:</label>
2024 |   <input type="number" id="quantity" name="quantity" value="1" min="1" />
2025 | 
2026 |   <label for="price">Ціна:</label>
2027 |   <input type="number" id="price" name="price" value="100" step="0.01" />
2028 | 
2029 |   <label for="total">Загальна сума:</label>
2030 |   <output id="total" name="total" for="quantity price">100</output>
2031 | </form>
2032 | 
2033 | <script>
2034 |   function updateTotal() {
2035 |     const quantity = document.getElementById('quantity').value;
2036 |     const price = document.getElementById('price').value;
2037 |     const total = quantity * price;
2038 |     document.getElementById('total').textContent = total.toFixed(2);
2039 |   }
2040 | 
2041 |   document.getElementById('quantity').addEventListener('input', updateTotal);
2042 |   document.getElementById('price').addEventListener('input', updateTotal);
2043 | </script>
2044 | ```
2045 | 
2046 | #### Приклад з прогрес-баром:
2047 | 
2048 | ```html
2049 | <form>
2050 |   <label for="progress-slider">Прогрес:</label>
2051 |   <input type="range" id="progress-slider" min="0" max="100" value="50" />
2052 | 
2053 |   <output id="progress-value" for="progress-slider">50%</output>
2054 | </form>
2055 | 
2056 | <script>
2057 |   document
2058 |     .getElementById('progress-slider')
2059 |     .addEventListener('input', function () {
2060 |       document.getElementById('progress-value').textContent = this.value + '%';
2061 |     });
2062 | </script>
2063 | ```
2064 | 
2065 | **Семантика:** `<output>` є семантично правильним способом показати результати,
2066 | на відміну від `<span>` або `<div>`.
2067 | 
2068 | </details>
2069 | 
2070 | ## Семантика та структура
2071 | 
2072 | <details>
2073 | <summary>51. Що таке семантичний HTML?</summary>
2074 | 
2075 | #### HTML
2076 | 
2077 | - Семантичний HTML — це використання тегів за їхнім змістовим призначенням
2078 |   (`<header>`, `<main>`, `<article>`, `<section>`, `<nav>`, `<footer>`, а не
2079 |   `<div>` всюди).
2080 | 
2081 | - Це робить структуру сторінки зрозумілішою для браузерів, пошукових систем і
2082 |   `assistive`-технологій.
2083 | 
2084 | - Для `SEO` це критично: пошуковики краще розпізнають ієрархію контенту,
2085 |   визначають головні частини сторінки та підвищують релевантність у видачі.
2086 | 
2087 | Семантична розмітка = краща доступність + зрозуміла структура + підсилення SEO.
2088 | 
2089 | </details>
2090 | 
2091 | <details>
2092 | <summary>52. Що таке семантичні теги HTML і чому вони важливі?</summary>
2093 | 
2094 | #### HTML
2095 | 
2096 | - Семантичні теги HTML — це теги, які описують зміст і роль свого вмісту
2097 |   (наприклад, `<header>`, `<main>`, `<article>`, `<footer>`).
2098 | 
2099 | #### Чому важливі:
2100 | 
2101 | - Поліпшують SEO — пошукові системи краще розуміють структуру.
2102 | 
2103 | - Доступність — скрінрідери можуть правильно інтерпретувати вміст.
2104 | 
2105 | - Легше підтримувати та читати код.
2106 | 
2107 | - Стандартизують структуру сторінки.
2108 | 
2109 | </details>
2110 | 
2111 | <details>
2112 | <summary>53. Чим відрізняється article від section?</summary>
2113 | 
2114 | #### HTML
2115 | 
2116 | - `<article>` — самостійний контент, який може існувати окремо (новини,
2117 |   блог-пости, коментарі). Має зміст, зрозумілий поза контекстом сторінки.
2118 | 
2119 | - `<section>` — тематичний розділ контенту, частина більшої структури. Зазвичай
2120 |   має заголовок і логічно пов'язаний із рештою сторінки.
2121 | 
2122 | #### Приклад:
2123 | 
2124 | ```html
2125 | <article>
2126 |   <h2>Стаття про HTML5</h2>
2127 |   <section>
2128 |     <h3>Семантичні теги</h3>
2129 |     <p>Опис семантичних тегів...</p>
2130 |   </section>
2131 |   <section>
2132 |     <h3>Доступність</h3>
2133 |     <p>Як семантика покращує доступність...</p>
2134 |   </section>
2135 | </article>
2136 | ```
2137 | 
2138 | </details>
2139 | 
2140 | <details>
2141 | <summary>54. Що нового в HTML5 порівняно з попередніми версіями?</summary>
2142 | 
2143 | #### HTML
2144 | 
2145 | - Основні нововведення HTML5:
2146 | 
2147 |   - Семантичні теги: `<header>`, `<footer>`, `<main>`, `<article>`, `<section>`,
2148 |     `<nav>`.
2149 | 
2150 |   - Розширені форми: нові типи `<input>` (email, url, number, date, color тощо)
2151 |     та атрибути (required, placeholder, pattern).
2152 | 
2153 |   - Мультимедіа: `<audio>` і `<video>` без сторонніх плагінів.
2154 | 
2155 |   - Графіка: `<canvas>` для растрової графіки, `<svg>` для векторної.
2156 | 
2157 |   - API для JS: локальне сховище (localStorage, sessionStorage), геолокація,
2158 |     drag-and-drop, Web Workers.
2159 | 
2160 |   - Подкастинг та інтеграція: `<figure>`, `<figcaption>` для зображень і
2161 |     підписів.
2162 | 
2163 |   - Покращена підтримка мобільних: `<meta name="viewport">` та адаптивність.
2164 | 
2165 | </details>
2166 | 
2167 | <details>
2168 | <summary>55. Як створити розділ на веб-сторінці за допомогою семантичних елементів HTML5?</summary>
2169 | 
2170 | #### HTML
2171 | 
2172 | - У HTML5 для створення розділів використовують семантичні теги:
2173 | 
2174 | ```html
2175 | <section>
2176 |   <h2>Про нас</h2>
2177 |   <p>Текст про компанію...</p>
2178 | </section>
2179 | 
2180 | <article>
2181 |   <h2>Новина дня</h2>
2182 |   <p>Текст новини...</p>
2183 | </article>
2184 | 
2185 | <aside>
2186 |   <h3>Підказка</h3>
2187 |   <p>Додаткова інформація</p>
2188 | </aside>
2189 | ```
2190 | 
2191 | - `<section>` — логічний розділ сторінки.
2192 | 
2193 | - `<article>` — самостійний блок контенту, який може існувати окремо.
2194 | 
2195 | - `<aside>` — побічна інформація, наприклад, сайдбар.
2196 | 
2197 | - `<header>` і `<footer>` — заголовки та підвал розділів або сторінки.
2198 | 
2199 | </details>
2200 | 
2201 | <details>
2202 | <summary>56. Яка роль елемента article у HTML5?</summary>
2203 | 
2204 | #### HTML
2205 | 
2206 | - `<article>` — семантичний елемент для самостійного контенту, який може
2207 |   існувати окремо від сторінки і бути зрозумілий поза контекстом.
2208 | 
2209 | #### Приклади використання:
2210 | 
2211 | - Новини, блоги, публікації.
2212 | 
2213 | - Коментарі користувачів.
2214 | 
2215 | - Форумні повідомлення.
2216 | 
2217 | #### Переваги:
2218 | 
2219 | - Покращує SEO і доступність.
2220 | 
2221 | - Легко стилізується та структуровано організовує контент.
2222 | 
2223 | </details>
2224 | 
2225 | <details>
2226 | <summary>57. Чи можете ви пояснити використання елементів nav та aside у HTML5?</summary>
2227 | 
2228 | #### HTML
2229 | 
2230 | - `<nav>` — семантичний контейнер для основної навігації по сайту: меню,
2231 |   посилання на розділи чи сторінки.
2232 | 
2233 | ```html
2234 | <nav>
2235 |   <a href="/">Головна</a>
2236 |   <a href="/about">Про нас</a>
2237 | </nav>
2238 | ```
2239 | 
2240 | - `<aside>` — для додаткового або побічного контенту, який не є головним,
2241 |   наприклад, сайдбари, підказки, реклами:
2242 | 
2243 | ```html
2244 | <aside>
2245 |   <h3>Поради</h3>
2246 |   <p>Корисна інформація для користувача</p>
2247 | </aside>
2248 | ```
2249 | 
2250 | Коротко: <nav> = навігація, <aside> = допоміжний або боковий контент.
2251 | 
2252 | </details>
2253 | 
2254 | <details>
2255 | <summary>58. Як використовувати елементи figure та figcaption?</summary>
2256 | 
2257 | #### HTML
2258 | 
2259 | - `<figure>` — контейнер для медіа (зображення, графіка, відео) із підписом.
2260 | 
2261 | - `<figcaption>` — підпис до медіа всередині `<figure>`.
2262 | 
2263 | #### Приклад:
2264 | 
2265 | ```html
2266 | <figure>
2267 |   <img src="image.jpg" alt="Опис зображення" />
2268 |   <figcaption>Підпис до зображення</figcaption>
2269 | </figure>
2270 | ```
2271 | 
2272 | - Покращує семантику та доступність.
2273 | 
2274 | - Легко стилізується CSS.
2275 | 
2276 | </details>
2277 | 
2278 | ## Таблиці
2279 | 
2280 | <details>
2281 | <summary>59. Як створити таблицю в HTML і які основні теги для цього використовуються?</summary>
2282 | 
2283 | #### HTML
2284 | 
2285 | - В HTML таблиця створюється тегом `<table>`. Рядки — `<tr>`, заголовки стовпців
2286 |   — `<th>`, комірки — `<td>`.
2287 | 
2288 | #### Приклад:
2289 | 
2290 | ```html
2291 | <table>
2292 |   <tr>
2293 |     <th>Ім'я</th>
2294 |     <th>Вік</th>
2295 |   </tr>
2296 |   <tr>
2297 |     <td>Іван</td>
2298 |     <td>25</td>
2299 |   </tr>
2300 | </table>
2301 | ```
2302 | 
2303 | </details>
2304 | 
2305 | <details>
2306 | <summary>60. Що таке thead, tbody та tfoot у HTML-таблиці і для чого вони потрібні?</summary>
2307 | 
2308 | #### HTML
2309 | 
2310 | - `<thead>` — групує рядки заголовків таблиці.
2311 | 
2312 | - `<tbody>` — основна частина таблиці з даними.
2313 | 
2314 | - `<tfoot>` — групує рядки підсумків (footer таблиці), відображається після
2315 |   tbody, але може рендеритися браузером перед ним для оптимізації.
2316 | 
2317 | #### Приклад:
2318 | 
2319 | ```html
2320 | <table>
2321 |   <thead>
2322 |     <tr>
2323 |       <th>Назва</th>
2324 |       <th>Ціна</th>
2325 |     </tr>
2326 |   </thead>
2327 |   <tbody>
2328 |     <tr>
2329 |       <td>Товар 1</td>
2330 |       <td>100 грн</td>
2331 |     </tr>
2332 |     <tr>
2333 |       <td>Товар 2</td>
2334 |       <td>200 грн</td>
2335 |     </tr>
2336 |   </tbody>
2337 |   <tfoot>
2338 |     <tr>
2339 |       <td>Загалом</td>
2340 |       <td>300 грн</td>
2341 |     </tr>
2342 |   </tfoot>
2343 | </table>
2344 | ```
2345 | 
2346 | #### Переваги:
2347 | 
2348 | - Покращує семантику та доступність
2349 | - Дозволяє стилізувати різні частини таблиці окремо
2350 | - Браузери можуть фіксувати заголовки при прокрутці
2351 | 
2352 | </details>
2353 | 
2354 | <details>
2355 | <summary>61. Що таке атрибути colspan і rowspan у HTML-таблицях?</summary>
2356 | 
2357 | #### HTML
2358 | 
2359 | - `colspan` — об'єднує комірку по кількох стовпцях.
2360 | 
2361 | - `rowspan` — об'єднує комірку по кількох рядках.
2362 | 
2363 | ```html
2364 | <td colspan="2">Об'єднано 2 стовпці</td>
2365 | <td rowspan="3">Об'єднано 3 рядки</td>
2366 | ```
2367 | 
2368 | #### Приклад:
2369 | 
2370 | ```html
2371 | <table border="1">
2372 |   <tr>
2373 |     <th colspan="2">Заголовок на 2 колонки</th>
2374 |     <th rowspan="2">Вертикальний заголовок</th>
2375 |   </tr>
2376 |   <tr>
2377 |     <td>Комірка 1</td>
2378 |     <td>Комірка 2</td>
2379 |   </tr>
2380 |   <tr>
2381 |     <td>Комірка 3</td>
2382 |     <td>Комірка 4</td>
2383 |     <td>Комірка 5</td>
2384 |   </tr>
2385 | </table>
2386 | ```
2387 | 
2388 | </details>
2389 | 
2390 | <details>
2391 | <summary>62. Як зробити HTML-таблицю доступною для користувачів з екранними рідерами?</summary>
2392 | 
2393 | #### HTML
2394 | 
2395 | - Використовувати семантичні теги: `<table>`, `<thead>`, `<tbody>`, `<tfoot>`,
2396 |   `<th>`.
2397 | 
2398 | - Додавати атрибут scope у `<th>` (scope="col" або scope="row") для зв'язку
2399 |   заголовків і комірок.
2400 | 
2401 | - Додавати `<caption>` для опису таблиці.
2402 | 
2403 | - Уникати зайвого `rowspan/colspan`, якщо вони ускладнюють навігацію.
2404 | 
2405 | - Забезпечити достатній контраст та видимі фокуси при навігації з клавіатури.
2406 | 
2407 | #### Приклад доступної таблиці:
2408 | 
2409 | ```html
2410 | <table>
2411 |   <caption>
2412 |     Продажі за 2024 рік
2413 |   </caption>
2414 |   <thead>
2415 |     <tr>
2416 |       <th scope="col">Місяць</th>
2417 |       <th scope="col">Продажі</th>
2418 |       <th scope="col">Прибуток</th>
2419 |     </tr>
2420 |   </thead>
2421 |   <tbody>
2422 |     <tr>
2423 |       <th scope="row">Січень</th>
2424 |       <td>1000</td>
2425 |       <td>200</td>
2426 |     </tr>
2427 |   </tbody>
2428 | </table>
2429 | ```
2430 | 
2431 | </details>
2432 | 
2433 | ## Медіа та графіка
2434 | 
2435 | <details>
2436 | <summary>63. Що таке елемент canvas? І для чого він використовується?</summary>
2437 | 
2438 | #### HTML
2439 | 
2440 | - `<canvas>` — растровий холст для малювання графіки через JavaScript API.
2441 | 
2442 | #### Використання:
2443 | 
2444 | - Ігри та інтерактивна графіка
2445 | - Складні візуалізації даних
2446 | - Обробка зображень
2447 | - Анімації та ефекти
2448 | 
2449 | #### Приклад:
2450 | 
2451 | ```html
2452 | <canvas id="myCanvas" width="400" height="200"></canvas>
2453 | 
2454 | <script>
2455 |   const canvas = document.getElementById('myCanvas');
2456 |   const ctx = canvas.getContext('2d');
2457 | 
2458 |   // Малюємо прямокутник
2459 |   ctx.fillStyle = 'blue';
2460 |   ctx.fillRect(50, 50, 100, 75);
2461 | 
2462 |   // Малюємо коло
2463 |   ctx.beginPath();
2464 |   ctx.arc(200, 100, 50, 0, 2 * Math.PI);
2465 |   ctx.fillStyle = 'red';
2466 |   ctx.fill();
2467 | </script>
2468 | ```
2469 | 
2470 | </details>
2471 | 
2472 | <details>
2473 | <summary>64. Різниця між canvas та svg? У яких випадках краще використовувати canvas, а в яких svg?</summary>
2474 | 
2475 | #### HTML
2476 | 
2477 | #### `<canvas>`:
2478 | 
2479 | - Растрова графіка (пікселі)
2480 | - Малювання через JavaScript API
2481 | - Підходить для ігор, складної анімації, обробки зображень
2482 | - Масштабування може погіршити якість
2483 | - Неможливо стилізувати окремі елементи CSS
2484 | 
2485 | #### `<svg>`:
2486 | 
2487 | - Векторна графіка (математичні об'єкти)
2488 | - Описується XML-розміткою
2489 | - Підходить для іконок, логотипів, простих діаграм
2490 | - Безкінечне масштабування без втрати якості
2491 | - Можна стилізувати CSS та анімувати
2492 | 
2493 | #### Коли використовувати:
2494 | 
2495 | **Canvas** → ігри, складна графіка, обробка фото, реал-тайм анімації
2496 | 
2497 | **SVG** → іконки, логотипи, прості діаграми, масштабована графіка
2498 | 
2499 | </details>
2500 | 
2501 | <details>
2502 | <summary>65. Яка різниця між елементами svg та canvas?</summary>
2503 | 
2504 | #### HTML
2505 | 
2506 | - `<svg>` — векторна графіка, кожен елемент DOM-структурований, масштабований
2507 |   без втрати якості, легкий для анімації та стилізації через CSS/JS.
2508 | 
2509 | - `<canvas>` — растровий холст, малювання відбувається через JS API, не має
2510 |   внутрішньої семантики елементів, масштабування може знизити якість, підходить
2511 |   для ігор і складної графіки.
2512 | 
2513 | #### Порівняння:
2514 | 
2515 | | Характеристика | SVG                               | Canvas                      |
2516 | | -------------- | --------------------------------- | --------------------------- |
2517 | | Тип графіки    | Векторна                          | Растрова                    |
2518 | | DOM-структура  | Так                               | Ні                          |
2519 | | Масштабування  | Без втрат                         | З втратами                  |
2520 | | Стилізація CSS | Так                               | Обмежено                    |
2521 | | Продуктивність | Повільніше при багатьох елементах | Швидше для складної графіки |
2522 | 
2523 | </details>
2524 | 
2525 | <details>
2526 | <summary>66. Що ви знаєте про SVG? Які є варіанти додавання SVG на сторінки сайту? Чим вони відрізняються?</summary>
2527 | 
2528 | #### HTML
2529 | 
2530 | **SVG (Scalable Vector Graphics)** — векторний формат для графіки, що
2531 | масштабується без втрати якості.
2532 | 
2533 | #### Способи додавання SVG:
2534 | 
2535 | 1. **Inline SVG** — безпосередньо в HTML:
2536 | 
2537 | ```html
2538 | <svg width="100" height="100">
2539 |   <circle cx="50" cy="50" r="40" fill="red" />
2540 | </svg>
2541 | ```
2542 | 
2543 | _Переваги:_ повний контроль CSS/JS, доступність _Недоліки:_ збільшує розмір HTML
2544 | 
2545 | 2. **Як зображення** — через `<img>`:
2546 | 
2547 | ```html
2548 | <img src="icon.svg" alt="Іконка" />
2549 | ```
2550 | 
2551 | _Переваги:_ кешується, компактний HTML _Недоліки:_ не можна стилізувати CSS
2552 | 
2553 | 3. **CSS background**:
2554 | 
2555 | ```css
2556 | .icon {
2557 |   background-image: url('icon.svg');
2558 | }
2559 | ```
2560 | 
2561 | 4. **Через `<object>` або `<embed>`**:
2562 | 
2563 | ```html
2564 | <object data="graphic.svg" type="image/svg+xml"></object>
2565 | ```
2566 | 
2567 | **Найкращий вибір:** inline для іконок, що потребують стилізації; `<img>` для
2568 | статичної графіки.
2569 | 
2570 | </details>
2571 | 
2572 | <details>
2573 | <summary>67. Як створювати карти зображень у HTML?</summary>
2574 | 
2575 | #### HTML
2576 | 
2577 | - HTML-карта зображень (image map) дозволяє зробити частини зображення
2578 |   клікабельними.
2579 | 
2580 | #### Приклад:
2581 | 
2582 | ```html
2583 | <img src="plan.jpg" usemap="#map1" alt="План будівлі" />
2584 | 
2585 | <map name="map1">
2586 |   <area shape="rect" coords="34,44,270,350" href="room1.html" alt="Кімната 1" />
2587 |   <area shape="circle" coords="337,300,44" href="room2.html" alt="Кімната 2" />
2588 |   <area
2589 |     shape="poly"
2590 |     coords="400,50,500,50,450,150"
2591 |     href="room3.html"
2592 |     alt="Кімната 3"
2593 |   />
2594 | </map>
2595 | ```
2596 | 
2597 | #### Пояснення:
2598 | 
2599 | - `usemap="#map1"` — прив'язка картинки до карти
2600 | - `<area>` — задає клікабельну область:
2601 |   - `shape="rect"` — прямокутник (coords: x1,y1,x2,y2)
2602 |   - `shape="circle"` — коло (coords: x,y,radius)
2603 |   - `shape="poly"` — багатокутник (coords: x1,y1,x2,y2,x3,y3...)
2604 | - `href` — посилання при кліку
2605 | - `alt` — альтернативний текст для доступності
2606 | 
2607 | </details>
2608 | 
2609 | <details>
2610 | <summary>68. Як додати аудіо та відео в HTML-документ за допомогою вбудованих тегів?</summary>
2611 | 
2612 | #### HTML
2613 | 
2614 | - **Аудіо** — тег `<audio>` з атрибутом controls:
2615 | 
2616 | ```html
2617 | <audio controls>
2618 |   <source src="sound.mp3" type="audio/mpeg" />
2619 |   <source src="sound.ogg" type="audio/ogg" />
2620 |   Ваш браузер не підтримує аудіо.
2621 | </audio>
2622 | ```
2623 | 
2624 | - **Відео** — тег `<video>` з атрибутом controls:
2625 | 
2626 | ```html
2627 | <video controls width="640" height="360">
2628 |   <source src="video.mp4" type="video/mp4" />
2629 |   <source src="video.webm" type="video/webm" />
2630 |   Ваш браузер не підтримує відео.
2631 | </video>
2632 | ```
2633 | 
2634 | #### Важливо:
2635 | 
2636 | - `<source>` — дозволяє вказати кілька форматів для кращої сумісності
2637 | - Текст між тегами — fallback для старих браузерів
2638 | - `controls` — показує елементи керування (play/pause/volume)
2639 | 
2640 | </details>
2641 | 
2642 | <details>
2643 | <summary>69. Які основні атрибути підтримують теги video та audio у HTML?</summary>
2644 | 
2645 | #### HTML
2646 | 
2647 | #### Спільні атрибути для `<video>` та `<audio>`:
2648 | 
2649 | - `src` — шлях до файлу (можна замість `<source>`)
2650 | - `controls` — відображає елементи керування
2651 | - `autoplay` — автоматичне відтворення (часто вимагає muted)
2652 | - `loop` — повторне відтворення після завершення
2653 | - `muted` — без звуку
2654 | - `preload` — підвантаження:
2655 |   - `none` — не завантажувати наперед
2656 |   - `metadata` — тільки метадані
2657 |   - `auto` — браузер сам вирішує
2658 | 
2659 | #### Додатково для `<video>`:
2660 | 
2661 | - `width`, `height` — розміри відеоплеєра
2662 | - `poster` — зображення-заставка до початку відтворення
2663 | 
2664 | #### Приклад:
2665 | 
2666 | ```html
2667 | <video
2668 |   controls
2669 |   width="800"
2670 |   height="450"
2671 |   poster="preview.jpg"
2672 |   preload="metadata"
2673 | >
2674 |   <source src="movie.mp4" type="video/mp4" />
2675 | </video>
2676 | ```
2677 | 
2678 | </details>
2679 | 
2680 | <details>
2681 | <summary>70. Як додати субтитри або підписи до відео в HTML?</summary>
2682 | 
2683 | #### HTML
2684 | 
2685 | - Використати тег `<track>` всередині `<video>`.
2686 | 
2687 | #### Атрибути `<track>`:
2688 | 
2689 | - `src` — файл субтитрів (формат .vtt)
2690 | - `kind` — тип (subtitles, captions, descriptions, chapters, metadata)
2691 | - `srclang` — мова субтитрів (en, uk)
2692 | - `label` — назва треку в меню
2693 | - `default` — трек за замовчуванням
2694 | 
2695 | #### Приклад:
2696 | 
2697 | ```html
2698 | <video controls>
2699 |   <source src="movie.mp4" type="video/mp4" />
2700 |   <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" />
2701 |   <track
2702 |     src="subtitles_uk.vtt"
2703 |     kind="subtitles"
2704 |     srclang="uk"
2705 |     label="Українська"
2706 |     default
2707 |   />
2708 |   <track
2709 |     src="descriptions.vtt"
2710 |     kind="descriptions"
2711 |     srclang="uk"
2712 |     label="Аудіоопис"
2713 |   />
2714 | </video>
2715 | ```
2716 | 
2717 | #### Формат .vtt файлу:
2718 | 
2719 | ```
2720 | WEBVTT
2721 | 
2722 | 00:00:00.000 --> 00:00:03.000
2723 | Привіт! Це перший рядок субтитрів.
2724 | 
2725 | 00:00:03.000 --> 00:00:06.000
2726 | А це другий рядок.
2727 | ```
2728 | 
2729 | Браузер покаже вибір субтитрів, якщо формат `.vtt` коректний.
2730 | 
2731 | </details>
2732 | 
2733 | ## Інтеграція та зв'язки
2734 | 
2735 | <details>
2736 | <summary>71. Чи можете ви пояснити призначення метатегів у HTML?</summary>
2737 | 
2738 | #### HTML
2739 | 
2740 | - Метатеги у `<head>` зберігають метадані про сторінку — інформацію, яку не
2741 |   видно користувачу, але використовують браузери, пошукові системи та сервіси.
2742 | 
2743 | #### Приклади призначення:
2744 | 
2745 | - `<meta charset="UTF-8">` — задає кодування.
2746 | 
2747 | - `<meta name="viewport" content="width=device-width, initial-scale=1.0">` —
2748 |   адаптивність на мобільних.
2749 | 
2750 | - `<meta name="description" content="Опис сторінки">` — SEO.
2751 | 
2752 | - `<meta name="robots" content="index, follow">` — інструкції для пошукових
2753 |   ботів.
2754 | 
2755 | #### Додаткові приклади:
2756 | 
2757 | ```html
2758 | <head>
2759 |   <meta charset="UTF-8" />
2760 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
2761 |   <meta
2762 |     name="description"
2763 |     content="Короткий опис сторінки для пошукових систем"
2764 |   />
2765 |   <meta name="keywords" content="ключові, слова, для, seo" />
2766 |   <meta name="author" content="Ім'я автора" />
2767 |   <meta name="robots" content="index, follow" />
2768 | 
2769 |   <!-- Open Graph для соціальних мереж -->
2770 |   <meta property="og:title" content="Заголовок для Facebook" />
2771 |   <meta property="og:description" content="Опис для соціальних мереж" />
2772 |   <meta property="og:image" content="image.jpg" />
2773 | 
2774 |   <!-- Twitter Cards -->
2775 |   <meta name="twitter:card" content="summary_large_image" />
2776 |   <meta name="twitter:title" content="Заголовок для Twitter" />
2777 | </head>
2778 | ```
2779 | 
2780 | </details>
2781 | 
2782 | <details>
2783 | <summary>72. Як пов'язати CSS-файл з HTML-документом?</summary>
2784 | 
2785 | #### HTML
2786 | 
2787 | - У `<head>` додаємо тег:
2788 | 
2789 | ```html
2790 | <link rel="stylesheet" href="styles.css" />
2791 | ```
2792 | 
2793 | #### Атрибути:
2794 | 
2795 | - `rel="stylesheet"` — вказує, що це файл стилів
2796 | - `href` — шлях до CSS-файлу
2797 | 
2798 | #### Додаткові варіанти:
2799 | 
2800 | ```html
2801 | <!-- Основний CSS файл -->
2802 | <link rel="stylesheet" href="css/main.css" />
2803 | 
2804 | <!-- CSS з медіа-запитами -->
2805 | <link rel="stylesheet" href="css/print.css" media="print" />
2806 | <link rel="stylesheet" href="css/mobile.css" media="(max-width: 768px)" />
2807 | 
2808 | <!-- CSS з CDN -->
2809 | <link
2810 |   rel="stylesheet"
2811 |   href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
2812 | />
2813 | 
2814 | <!-- Внутрішні стилі -->
2815 | <style>
2816 |   body {
2817 |     margin: 0;
2818 |     padding: 20px;
2819 |   }
2820 | </style>
2821 | ```
2822 | 
2823 | </details>
2824 | 
2825 | <details>
2826 | <summary>73. Як пов'язати JavaScript-файл з HTML-документом?</summary>
2827 | 
2828 | #### HTML
2829 | 
2830 | - Через тег `<script>`:
2831 | 
2832 | ```html
2833 | <script src="script.js"></script>
2834 | ```
2835 | 
2836 | #### Розміщення та атрибути:
2837 | 
2838 | ```html
2839 | <!-- В <head> - завантажується до рендерингу сторінки -->
2840 | <head>
2841 |   <script src="script.js"></script>
2842 | </head>
2843 | 
2844 | <!-- Перед </body> - завантажується після HTML (рекомендовано) -->
2845 | <body>
2846 |   <!-- HTML контент -->
2847 |   <script src="script.js"></script>
2848 | </body>
2849 | 
2850 | <!-- Асинхронне завантаження -->
2851 | <script src="script.js" async></script>
2852 | 
2853 | <!-- Відкладене завантаження -->
2854 | <script src="script.js" defer></script>
2855 | 
2856 | <!-- Внутрішній JavaScript -->
2857 | <script>
2858 |   console.log('Привіт, світ!');
2859 | </script>
2860 | 
2861 | <!-- JavaScript з CDN -->
2862 | <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
2863 | ```
2864 | 
2865 | #### Різниця між async та defer:
2866 | 
2867 | - `async` — завантажується паралельно і виконується одразу
2868 | - `defer` — завантажується паралельно, але виконується після HTML
2869 | 
2870 | </details>
2871 | 
2872 | <details>
2873 | <summary>74. Що таке iframe і для чого його використовують?</summary>
2874 | 
2875 | #### HTML
2876 | 
2877 | `<iframe>` — це елемент для вбудовування іншої HTML-сторінки всередину поточної
2878 | сторінки.
2879 | 
2880 | #### Синтаксис:
2881 | 
2882 | ```html
2883 | <iframe src="https://example.com" width="600" height="400"></iframe>
2884 | ```
2885 | 
2886 | #### Основні атрибути:
2887 | 
2888 | ```html
2889 | <iframe
2890 |   src="https://www.youtube.com/embed/dQw4w9WgXcQ"
2891 |   width="560"
2892 |   height="315"
2893 |   frameborder="0"
2894 |   allowfullscreen
2895 |   title="YouTube відео"
2896 |   loading="lazy"
2897 | >
2898 | </iframe>
2899 | ```
2900 | 
2901 | #### Використання:
2902 | 
2903 | - **Вбудовування відео** (YouTube, Vimeo)
2904 | - **Карти** (Google Maps)
2905 | - **Соціальні віджети** (Facebook, Twitter)
2906 | - **Зовнішні форми** чи додатки
2907 | - **Пісочниці** для демонстрації коду
2908 | 
2909 | #### Атрибути безпеки:
2910 | 
2911 | ```html
2912 | <iframe
2913 |   src="untrusted-content.html"
2914 |   sandbox="allow-scripts allow-same-origin"
2915 |   referrerpolicy="no-referrer"
2916 | >
2917 | </iframe>
2918 | ```
2919 | 
2920 | **Недоліки:** може впливати на SEO, безпеку та швидкість завантаження.
2921 | 
2922 | </details>
2923 | 
2924 | <details>
2925 | <summary>75. Як додати коментар у HTML і чому його використовувати?</summary>
2926 | 
2927 | #### HTML
2928 | 
2929 | #### Синтаксис:
2930 | 
2931 | ```html
2932 | <!-- Це коментар -->
2933 | ```
2934 | 
2935 | #### Призначення:
2936 | 
2937 | - **Пояснення коду** для себе або колег
2938 | - **Тимчасове вимкнення** частини розмітки без видалення
2939 | - **Позначення секцій** коду для зручності навігації
2940 | - **Документування** складної структури
2941 | 
2942 | #### Приклади використання:
2943 | 
2944 | ```html
2945 | <!-- Заголовок сторінки -->
2946 | <header>
2947 |   <h1>Моя сторінка</h1>
2948 |   <!-- TODO: додати логотип -->
2949 | </header>
2950 | 
2951 | <!-- Основний контент -->
2952 | <main>
2953 |   <section>
2954 |     <h2>Про нас</h2>
2955 |     <p>Текст про компанію...</p>
2956 |   </section>
2957 | 
2958 |   <!-- 
2959 |     Тимчасово приховано до завершення розробки
2960 |     <section>
2961 |       <h2>Наші послуги</h2>
2962 |       <p>Список послуг...</p>
2963 |     </section>
2964 |   -->
2965 | </main>
2966 | 
2967 | <!-- 
2968 |   Кінець основного контенту
2969 |   Далі йде підвал сторінки
2970 | -->
2971 | <footer>
2972 |   <p>&copy; 2024 Моя компанія</p>
2973 | </footer>
2974 | ```
2975 | 
2976 | **Важливо:** коментарі видимі в коді сторінки, тому не додавайте конфіденційну
2977 | інформацію!
2978 | 
2979 | </details>
2980 | 
2981 | ## Навігація та UX
2982 | 
2983 | <details>
2984 | <summary>76. Різниця між кнопкою та посиланням у HTML?</summary>
2985 | 
2986 | #### HTML
2987 | 
2988 | #### `<button>` — для дій:
2989 | 
2990 | - Відправка форм
2991 | - Виклик JavaScript функцій
2992 | - Зміна стану сторінки
2993 | - Інтерактивні елементи UI
2994 | 
2995 | #### `<a>` — для навігації:
2996 | 
2997 | - Перехід на інші сторінки
2998 | - Переходи всередині сторінки (якорі)
2999 | - Завантаження файлів
3000 | - Посилання на зовнішні ресурси
3001 | 
3002 | #### Приклади правильного використання:
3003 | 
3004 | ```html
3005 | <!-- Кнопки для дій -->
3006 | <button type="submit">Відправити форму</button>
3007 | <button onclick="toggleMenu()">Відкрити меню</button>
3008 | <button type="button" id="likeBtn">❤️ Подобається</button>
3009 | 
3010 | <!-- Посилання для навігації -->
3011 | <a href="/about">Про нас</a>
3012 | <a href="#contacts">Перейти до контактів</a>
3013 | <a href="document.pdf" download>Завантажити PDF</a>
3014 | <a href="https://external-site.com" target="_blank">Зовнішнє посилання</a>
3015 | ```
3016 | 
3017 | #### Семантична важливість:
3018 | 
3019 | - **Кнопки** розуміються скрінрідерами як елементи дії
3020 | - **Посилання** розуміються як навігаційні елементи
3021 | - Це впливає на доступність та SEO
3022 | 
3023 | #### Стилізація:
3024 | 
3025 | ```html
3026 | <!-- Посилання, стилізоване як кнопка (але семантично залишається посиланням) -->
3027 | <a href="/signup" class="btn">Зареєструватися</a>
3028 | 
3029 | <!-- Кнопка для навігації (неправильно з точки зору семантики) -->
3030 | <button onclick="location.href='/signup'">Зареєструватися</button>
3031 | ```
3032 | 
3033 | **Правило:** використовуйте `<a>` для навігації, `<button>` для дій.
3034 | 
3035 | </details>
3036 | 
3037 | <details>
3038 | <summary>77. Як правильно створити семантичну панель навігації в HTML?</summary>
3039 | 
3040 | #### HTML
3041 | 
3042 | - Використовуємо семантичний тег `<nav>` з внутрішнім списком посилань
3043 |   `<ul><li><a>`. Це забезпечує доступність і правильну структуру.
3044 | 
3045 | #### Базовий приклад:
3046 | 
3047 | ```html
3048 | <nav>
3049 |   <ul>
3050 |     <li><a href="/">Головна</a></li>
3051 |     <li><a href="/about">Про нас</a></li>
3052 |     <li><a href="/services">Послуги</a></li>
3053 |     <li><a href="/contact">Контакти</a></li>
3054 |   </ul>
3055 | </nav>
3056 | ```
3057 | 
3058 | #### Розширений приклад з підменю:
3059 | 
3060 | ```html
3061 | <nav aria-label="Основна навігація">
3062 |   <ul>
3063 |     <li><a href="/" aria-current="page">Головна</a></li>
3064 |     <li>
3065 |       <a href="/services">Послуги</a>
3066 |       <ul>
3067 |         <li><a href="/services/web-design">Веб-дизайн</a></li>
3068 |         <li><a href="/services/development">Розробка</a></li>
3069 |         <li><a href="/services/seo">SEO</a></li>
3070 |       </ul>
3071 |     </li>
3072 |     <li><a href="/about">Про нас</a></li>
3073 |     <li><a href="/contact">Контакти</a></li>
3074 |   </ul>
3075 | </nav>
3076 | ```
3077 | 
3078 | #### Принципи семантичної навігації:
3079 | 
3080 | 1. **Використовуйте `<nav>`** для основних навігаційних блоків
3081 | 2. **Структуруйте списками** `<ul><li><a>`
3082 | 3. **Додавайте `aria-label`** для множинних навігацій
3083 | 4. **Позначайте поточну сторінку** `aria-current="page"`
3084 | 5. **Забезпечте доступність** клавіатурної навігації
3085 | 
3086 | </details>
3087 | 
3088 | <details>
3089 | <summary>78. Як семантично правильно згорнути навігаційне меню?</summary>
3090 | 
3091 | #### HTML
3092 | 
3093 | Для семантично правильного згортання навігаційного меню використовуйте елемент
3094 | `<nav>` всередині якого знаходяться списки з посиланнями.
3095 | 
3096 | #### Приклад з використанням `<details>` та `<summary>`:
3097 | 
3098 | ```html
3099 | <nav>
3100 |   <details>
3101 |     <summary>Меню</summary>
3102 |     <ul>
3103 |       <li><a href="/">Головна</a></li>
3104 |       <li><a href="/about">Про нас</a></li>
3105 |       <li><a href="/services">Послуги</a></li>
3106 |       <li><a href="/contact">Контакти</a></li>
3107 |     </ul>
3108 |   </details>
3109 | </nav>
3110 | ```
3111 | 
3112 | #### Приклад з кнопкою для мобільного меню:
3113 | 
3114 | ```html
3115 | <nav aria-label="Основна навігація">
3116 |   <button aria-expanded="false" aria-controls="main-menu" class="menu-toggle">
3117 |     ☰ Меню
3118 |   </button>
3119 | 
3120 |   <ul id="main-menu" class="nav-menu" hidden>
3121 |     <li><a href="/">Головна</a></li>
3122 |     <li><a href="/about">Про нас</a></li>
3123 |     <li><a href="/services">Послуги</a></li>
3124 |     <li><a href="/contact">Контакти</a></li>
3125 |   </ul>
3126 | </nav>
3127 | 
3128 | <script>
3129 |   document.querySelector('.menu-toggle').addEventListener('click', function () {
3130 |     const menu = document.getElementById('main-menu');
3131 |     const isExpanded = this.getAttribute('aria-expanded') === 'true';
3132 | 
3133 |     this.setAttribute('aria-expanded', !isExpanded);
3134 |     menu.hidden = isExpanded;
3135 |   });
3136 | </script>
3137 | ```
3138 | 
3139 | #### Важливі принципи:
3140 | 
3141 | - Використовуйте **ARIA-атрибути** для доступності
3142 | - **`aria-expanded`** показує стан меню
3143 | - **`aria-controls`** вказує на контрольований елемент
3144 | - **`hidden`** приховує меню від скрінрідерів
3145 | 
3146 | </details>
3147 | 
3148 | <details>
3149 | <summary>79. Як створити базове випадаюче меню в HTML і CSS без JavaScript?</summary>
3150 | 
3151 | #### HTML
3152 | 
3153 | - Використовуємо вкладені списки `<ul>` і керуємо показом підменю через
3154 |   `:hover`.
3155 | 
3156 | #### Приклад:
3157 | 
3158 | ```html
3159 | <nav>
3160 |   <ul class="menu">
3161 |     <li>
3162 |       <a href="/services">Послуги</a>
3163 |       <ul class="dropdown">
3164 |         <li><a href="/services/web-development">Веб-розробка</a></li>
3165 |         <li><a href="/services/ui-design">UI/UX Дизайн</a></li>
3166 |         <li><a href="/services/seo">SEO оптимізація</a></li>
3167 |       </ul>
3168 |     </li>
3169 |     <li><a href="/about">Про нас</a></li>
3170 |     <li><a href="/contact">Контакти</a></li>
3171 |   </ul>
3172 | </nav>
3173 | 
3174 | <style>
3175 |   /* Основні стилі меню */
3176 |   .menu {
3177 |     list-style: none;
3178 |     margin: 0;
3179 |     padding: 0;
3180 |     display: flex;
3181 |   }
3182 | 
3183 |   .menu li {
3184 |     position: relative;
3185 |   }
3186 | 
3187 |   .menu a {
3188 |     display: block;
3189 |     padding: 15px 20px;
3190 |     text-decoration: none;
3191 |     color: #333;
3192 |     background: #f8f9fa;
3193 |     border-right: 1px solid #ddd;
3194 |   }
3195 | 
3196 |   .menu a:hover {
3197 |     background: #e9ecef;
3198 |   }
3199 | 
3200 |   /* Стилі випадаючого меню */
3201 |   .dropdown {
3202 |     position: absolute;
3203 |     top: 100%;
3204 |     left: 0;
3205 |     min-width: 200px;
3206 |     background: white;
3207 |     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
3208 |     display: none;
3209 |     z-index: 1000;
3210 |   }
3211 | 
3212 |   .dropdown li {
3213 |     width: 100%;
3214 |   }
3215 | 
3216 |   .dropdown a {
3217 |     border-right: none;
3218 |     border-bottom: 1px solid #eee;
3219 |   }
3220 | 
3221 |   /* Показати підменю при наведенні */
3222 |   .menu li:hover .dropdown {
3223 |     display: block;
3224 |   }
3225 | 
3226 |   /* Альтернативний варіант з плавною анімацією */
3227 |   .dropdown {
3228 |     opacity: 0;
3229 |     visibility: hidden;
3230 |     transition: all 0.3s ease;
3231 |   }
3232 | 
3233 |   .menu li:hover .dropdown {
3234 |     opacity: 1;
3235 |     visibility: visible;
3236 |   }
3237 | </style>
3238 | ```
3239 | 
3240 | #### Переваги:
3241 | 
3242 | - Працює без JavaScript
3243 | - Простота реалізації
3244 | - Хороша семантика
3245 | 
3246 | #### Недоліки:
3247 | 
3248 | - Не працює на дотик (мобільні)
3249 | - Обмежені можливості анімації
3250 | - Меню зникає при випадковому відведенні курсора
3251 | 
3252 | </details>
3253 | 
3254 | <details>
3255 | <summary>80. Різниця між meter та progress?</summary>
3256 | 
3257 | #### HTML
3258 | 
3259 | #### `<meter>` — для виміряних значень:
3260 | 
3261 | - Рівень заповнення
3262 | - Температура
3263 | - Бали або рейтинги
3264 | - Показники в певному діапазоні
3265 | 
3266 | #### `<progress>` — для прогресу завдань:
3267 | 
3268 | - Завантаження файлів
3269 | - Виконання процесів
3270 | - Прогрес форм
3271 | - Часові індикатори
3272 | 
3273 | #### Приклади:
3274 | 
3275 | ```html
3276 | <!-- <meter> для виміряного значення -->
3277 | <label for="battery">Рівень заряду батареї:</label>
3278 | <meter id="battery" value="0.7" min="0" max="1">70%</meter>
3279 | 
3280 | <label for="score">Оцінка статті:</label>
3281 | <meter id="score" value="8" min="0" max="10">8 з 10</meter>
3282 | 
3283 | <label for="storage">Використання диска:</label>
3284 | <meter id="storage" value="650" min="0" max="1000" high="900" optimum="200">
3285 |   650 GB з 1000 GB
3286 | </meter>
3287 | 
3288 | <!-- <progress> для прогресу завдання -->
3289 | <label for="fileProgress">Прогрес завантаження:</label>
3290 | <progress id="fileProgress" value="30" max="100">30%</progress>
3291 | 
3292 | <label for="formProgress">Заповнення форми:</label>
3293 | <progress id="formProgress" value="2" max="5">Крок 2 з 5</progress>
3294 | 
3295 | <!-- Невизначений прогрес -->
3296 | <progress>Завантажується...</progress>
3297 | ```
3298 | 
3299 | #### Атрибути `<meter>`:
3300 | 
3301 | - `value` — поточне значення
3302 | - `min`, `max` — діапазон
3303 | - `high`, `low` — пороги
3304 | - `optimum` — оптимальне значення
3305 | 
3306 | #### Атрибути `<progress>`:
3307 | 
3308 | - `value` — поточний прогрес
3309 | - `max` — максимальне значення
3310 | - Без `value` — невизначений прогрес
3311 | 
3312 | #### Візуальні відмінності:
3313 | 
3314 | - **Meter** зазвичай показує індикатор рівня
3315 | - **Progress** показує смугу прогресу
3316 | - Браузери стилізують їх по-різному
3317 | 
3318 | </details>
3319 | 
3320 | <details>
3321 | <summary>81. Що таке область перегляду (viewport) у веб-розробці та як її налаштувати?</summary>
3322 | 
3323 | #### HTML
3324 | 
3325 | - Область перегляду — це видима частина веб-сторінки у браузері користувача.
3326 |   Вона важлива для адаптивного дизайну. Налаштовується через мета-тег у
3327 |   `<head>`:
3328 | 
3329 | ```html
3330 | <meta name="viewport" content="width=device-width, initial-scale=1" />
3331 | ```
3332 | 
3333 | - `width=device-width` — ширина `viewport` дорівнює ширині екрана пристрою.
3334 | 
3335 | - `initial-scale=1` — початковий масштаб сторінки.
3336 | 
3337 | Це забезпечує коректне відображення на мобільних пристроях.
3338 | 
3339 | </details>
3340 | 
3341 | <details>
3342 | <summary>82. Розкажіть про meta-тег із name="viewport"?</summary>
3343 | 
3344 | #### HTML
3345 | 
3346 | - Мета-тег `viewport` контролює відображення веб-сторінки на мобільних
3347 |   пристроях:
3348 | 
3349 | ```html
3350 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
3351 | ```
3352 | 
3353 | #### Основні параметри:
3354 | 
3355 | - `width=device-width` — ширина viewport дорівнює ширині екрана.
3356 | 
3357 | - `initial-scale=1.0` — початковий рівень масштабування.
3358 | 
3359 | - `maximum-scale` — максимальний масштаб.
3360 | 
3361 | - `minimum-scale` — мінімальний масштаб.
3362 | 
3363 | - `user-scalable=no` — заборона масштабування користувачем.
3364 | 
3365 | Без цього тегу мобільні браузери можуть відображати сторінку неправильно.
3366 | 
3367 | </details>
3368 | 
3369 | <details>
3370 | <summary>83. Як використовуються медіа-запити (media queries) для адаптивного дизайну в HTML/CSS?</summary>
3371 | 
3372 | #### HTML
3373 | 
3374 | - Медіа-запити дозволяють застосовувати різні стилі залежно від розміру екрану
3375 |   або типу пристрою. Використовуються у CSS, а не в HTML:
3376 | 
3377 | ```css
3378 | /* Для екранів до 768px */
3379 | @media (max-width: 768px) {
3380 |   body {
3381 |     font-size: 14px;
3382 |   }
3383 | }
3384 | 
3385 | /* Для екранів від 769px */
3386 | @media (min-width: 769px) {
3387 |   body {
3388 |     font-size: 16px;
3389 |   }
3390 | }
3391 | ```
3392 | 
3393 | Так можна робити адаптивний дизайн без зміни HTML-структури.
3394 | 
3395 | </details>
3396 | 
3397 | <details>
3398 | <summary>84. Як робити адаптивні зображення для різних пристроїв та роздільної здатності?</summary>
3399 | 
3400 | #### HTML
3401 | 
3402 | - Використовуються атрибути srcset та sizes у `<img>` або елемент `<picture>`:
3403 | 
3404 | **Приклад з `<img>`:**
3405 | 
3406 | ```html
3407 | <img
3408 |   src="image-800.jpg"
3409 |   srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
3410 |   sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
3411 |   alt="Адаптивне зображення"
3412 | />
3413 | ```
3414 | 
3415 | **Приклад з `<picture>`:**
3416 | 
3417 | ```html
3418 | <picture>
3419 |   <source media="(max-width: 600px)" srcset="image-400.jpg" />
3420 |   <source media="(max-width: 1200px)" srcset="image-800.jpg" />
3421 |   <img src="image-1200.jpg" alt="Адаптивне зображення" />
3422 | </picture>
3423 | ```
3424 | 
3425 | Це дозволяє браузеру обирати оптимальний розмір зображення під пристрій та
3426 | економити трафік.
3427 | 
3428 | </details>
3429 | 
3430 | <details>
3431 | <summary>85. Що таке адаптивний веб-дизайн (responsive web design)?</summary>
3432 | 
3433 | #### HTML
3434 | 
3435 | - Адаптивний веб-дизайн — це підхід до створення сайтів, коли макет і контент
3436 |   автоматично підлаштовуються під різні розміри екранів і пристроїв.
3437 | 
3438 | #### Основні принципи:
3439 | 
3440 | - Гнучкі сітки (`flexible grids`) — елементи у відсотках, а не в пікселях.
3441 | 
3442 | - Гнучкі зображення (`flexible images`) — використання max-width: 100%, srcset
3443 |   або `<picture>`.
3444 | 
3445 | - Медіа-запити (`media queries`) — зміна стилів залежно від ширини/типу
3446 |   пристрою.
3447 | 
3448 | Мета — однаково зручний UX на мобільних, планшетах і десктопах.
3449 | 
3450 | </details>
3451 | 
3452 | <details>
3453 | <summary>86. Як зробити HTML-таблицю адаптивною для мобільних пристроїв?</summary>
3454 | 
3455 | #### HTML
3456 | 
3457 | - Горизонтальний скрол (простий спосіб):
3458 | 
3459 | ```css
3460 | .table-wrapper {
3461 |   overflow-x: auto;
3462 | }
3463 | 
3464 | table {
3465 |   width: 100%;
3466 |   border-collapse: collapse;
3467 | }
3468 | ```
3469 | 
3470 | ```html
3471 | <div class="table-wrapper">
3472 |   <table>
3473 |     ...
3474 |   </table>
3475 | </div>
3476 | ```
3477 | 
3478 | - Перетворення в картки на малих екранах через CSS (display: block + ::before з
3479 |   назвами колонок).
3480 | 
3481 | - CSS Grid / Flexbox для кастомних адаптивних таблиць.
3482 | 
3483 | - Мінімізувати кількість колонок для мобільних.
3484 | 
3485 | </details>
3486 | 
3487 | <details>
3488 | <summary>87. Що таке srcset? Як працює srcset?</summary>
3489 | 
3490 | #### HTML
3491 | 
3492 | - `srcset` — атрибут для адаптивних зображень, який дозволяє браузеру обирати
3493 |   найкращий варіант зображення залежно від умов (роздільності екрану, ширини
3494 |   viewport).
3495 | 
3496 | #### Синтаксис:
3497 | 
3498 | ```html
3499 | <img
3500 |   src="image-800.jpg"
3501 |   srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
3502 |   sizes="(max-width: 600px) 400px, 800px"
3503 |   alt="Зображення"
3504 | />
3505 | ```
3506 | 
3507 | - `400w, 800w, 1200w` — дескриптори ширини зображень.
3508 | - `sizes` — підказка браузеру про розмір відображення.
3509 | 
3510 | Браузер автоматично вибирає найбільш підходящий файл для поточних умов.
3511 | 
3512 | </details>
3513 | 
3514 | <details>
3515 | <summary>88. Навіщо використовується елемент picture?</summary>
3516 | 
3517 | #### HTML
3518 | 
3519 | - Елемент `<picture>` надає більше контролю над адаптивними зображеннями
3520 |   порівняно з `srcset`. Дозволяє:
3521 | 
3522 | - Використовувати різні формати зображень (WebP, AVIF для сучасних браузерів).
3523 | - Показувати різні зображення на різних пристроях (art direction).
3524 | 
3525 | #### Приклад:
3526 | 
3527 | ```html
3528 | <picture>
3529 |   <source media="(max-width: 600px)" srcset="mobile.jpg" />
3530 |   <source media="(max-width: 1200px)" srcset="tablet.jpg" />
3531 |   <source srcset="desktop.webp" type="image/webp" />
3532 |   <img src="desktop.jpg" alt="Основне зображення" />
3533 | </picture>
3534 | ```
3535 | 
3536 | Це забезпечує кращу оптимізацію та UX на різних пристроях.
3537 | 
3538 | </details>
3539 | 
3540 | <details>
3541 | <summary>89. Що таке доступність (accessibility) і чому вона важлива у веб-розробці?</summary>
3542 | 
3543 | #### HTML
3544 | 
3545 | - Доступність — це практика створення веб-сайтів і застосунків, які можуть
3546 |   використовувати люди з різними обмеженнями (зір, слух, моторика, когнітивні
3547 |   особливості).
3548 | 
3549 | #### Чому важлива:
3550 | 
3551 | - Забезпечує рівний доступ до інформації для всіх користувачів.
3552 | 
3553 | - Підвищує SEO і відповідність стандартам (WCAG).
3554 | 
3555 | - Зменшує ризик юридичних проблем.
3556 | 
3557 | - Покращує загальний UX для всіх користувачів.
3558 | 
3559 | **Прості кроки:** семантичний HTML, alt-теги для зображень, достатній контраст,
3560 | клавіатурна навігація.
3561 | 
3562 | </details>
3563 | 
3564 | <details>
3565 | <summary>90. Як підвищити доступність веб-сайту (web accessibility)?</summary>
3566 | 
3567 | #### HTML
3568 | 
3569 | - Основні практики:
3570 | 
3571 |   - Семантичний HTML — використовуйте правильні теги (`<header>`, `<nav>`,
3572 |     `<main>`, `<button>`).
3573 | 
3574 |   - Alt-тексти для зображень — описують зміст для користувачів з екранними
3575 |     читачами.
3576 | 
3577 |   - Контрастність — достатній контраст тексту і фону.
3578 | 
3579 |   - Клавіатурна навігація — забезпечити доступ до всіх інтерактивних елементів
3580 |     через клавіатуру.
3581 | 
3582 |   - ARIA-атрибути — для додаткового опису ролей, станів та властивостей
3583 |     елементів.
3584 | 
3585 |   - Форми та інтерфейси — підписані поля, зрозумілі повідомлення про помилки.
3586 | 
3587 |   - Відео та аудіо — субтитри, транскрипти, аудіоописи.
3588 | 
3589 | Це підвищує UX для всіх і забезпечує відповідність стандартам WCAG.
3590 | 
3591 | </details>
3592 | 
3593 | <details>
3594 | <summary>91. Що таке ARIA-ролі і як їх використовувати у веб-розробці?</summary>
3595 | 
3596 | #### HTML
3597 | 
3598 | - ARIA (Accessible Rich Internet Applications) — це набір атрибутів, які
3599 |   допомагають екранним читачам та іншим допоміжним технологіям розуміти
3600 |   призначення та стан елементів, особливо динамічних.
3601 | 
3602 | #### Приклади використання:
3603 | 
3604 | ```html
3605 | <button aria-label="Закрити модальне вікно">×</button>
3606 | <div role="dialog" aria-modal="true" aria-labelledby="modalTitle">
3607 |   <h2 id="modalTitle">Форма зворотного зв'язку</h2>
3608 | </div>
3609 | ```
3610 | 
3611 | - `role` — визначає тип елемента (button, dialog, alert).
3612 | 
3613 | - `aria-label` — додає опис для елементів без видимого тексту.
3614 | 
3615 | - `aria-labelledby` / `aria-describedby` — пов'язує елемент з текстовим описом.
3616 | 
3617 | - `aria-hidden="true"` — ховає елемент від допоміжних технологій.
3618 | 
3619 | Використовуйте ARIA тільки коли семантичний HTML не достатній.
3620 | 
3621 | </details>
3622 | 
3623 | <details>
3624 | <summary>92. Як використовувати атрибут tabindex у веб-розробці?</summary>
3625 | 
3626 | #### HTML
3627 | 
3628 | - `tabindex` визначає порядок фокусування елементів при навігації клавішею Tab.
3629 | 
3630 |   - `tabindex="0"` — елемент доступний у природному порядку документу.
3631 | 
3632 |   - `tabindex="-1"` — елемент не доступний через Tab, але його можна сфокусувати
3633 |     програмно (.focus()).
3634 | 
3635 |   - `tabindex="1", 2, …` — визначає конкретний порядок фокусування (не
3636 |     рекомендується, бо ускладнює підтримку).
3637 | 
3638 | #### Приклад:
3639 | 
3640 | ```html
3641 | <input type="text" tabindex="1" />
3642 | <button tabindex="2">Надіслати</button>
3643 | <a href="#" tabindex="3">Детальніше</a>
3644 | ```
3645 | 
3646 | Використовується для покращення доступності і контролю порядку навігації.
3647 | 
3648 | </details>
3649 | 
3650 | <details>
3651 | <summary>93. Як зробити зображення доступними для всіх користувачів?</summary>
3652 | 
3653 | #### HTML
3654 | 
3655 | 1. **Атрибут alt** — короткий опис змісту зображення:
3656 | 
3657 | ```html
3658 | <img src="logo.png" alt="Логотип компанії" />
3659 | ```
3660 | 
3661 | 2. **Порожній alt=""** — для декоративних зображень, щоб екранні читачі їх
3662 |    ігнорували.
3663 | 
3664 | 3. **Текстова альтернатива для складних графіків або діаграм** — через
3665 |    `<figcaption>` або окремий опис.
3666 | 
3667 | 4. **Контрастність та розмір** — зображення повинні бути чіткими і читабельними.
3668 | 
3669 | 5. **Не покладатися тільки на колір** — важлива додаткова інформація для людей з
3670 |    порушеннями зору.
3671 | 
3672 | Це забезпечує доступність і кращий UX для користувачів з обмеженими
3673 | можливостями.
3674 | 
3675 | </details>
3676 | 
3677 | <details>
3678 | <summary>94. Які техніки оптимізації HTML допомагають у SEO?</summary>
3679 | 
3680 | #### HTML
3681 | 
3682 | - Використання семантичних тегів (`<header>`, `<article>`, `<nav>`, `<footer>`).
3683 | 
3684 | - Коректна структура заголовків (`<h1>–<h6>`).
3685 | 
3686 | - Мета-теги: `title`, `meta description`, `viewport`.
3687 | 
3688 | - Атрибути `alt` для зображень.
3689 | 
3690 | - Чистий і валідний `HTML` без дублікатів.
3691 | 
3692 | - Використання структурованих даних (`Schema.org`).
3693 | 
3694 | - Оптимізація швидкості завантаження (мінімізація `DOM`, `lazy-load`).
3695 | 
3696 | </details>
3697 | 
3698 | <details>
3699 | <summary>95. Що таке семантичний HTML і яку роль він відіграє у SEO?</summary>
3700 | 
3701 | #### HTML
3702 | 
3703 | - Семантичний HTML — це використання тегів за їхнім змістовим призначенням
3704 |   (`<header>`, `<main>`, `<article>`, `<section>`, `<nav>`, `<footer>`, а не
3705 |   `<div>` всюди).
3706 | 
3707 | - Це робить структуру сторінки зрозумілішою для браузерів, пошукових систем і
3708 |   `assistive`-технологій.
3709 | 
3710 | - Для `SEO` це критично: пошуковики краще розпізнають ієрархію контенту,
3711 |   визначають головні частини сторінки та підвищують релевантність у видачі.
3712 | 
3713 | Семантична розмітка = краща доступність + зрозуміла структура + підсилення SEO.
3714 | 
3715 | </details>
3716 | 
3717 | <details>
3718 | <summary>96. Яке значення мають теги заголовків h1 – h6 для SEO?</summary>
3719 | 
3720 | #### HTML
3721 | 
3722 | - `<h1>` — головний заголовок сторінки, має бути один; сигналізує пошуковикам
3723 |   про основну тему.
3724 | 
3725 | - `<h2>–<h3>` — підзаголовки, що структурують контент і допомагають пошуковим
3726 |   системам зрозуміти ієрархію.
3727 | 
3728 | - `<h4>–<h6>` — деталізація дрібніших розділів.
3729 | 
3730 | - Використання ключових слів у заголовках покращує релевантність.
3731 | 
3732 | - Правильна ієрархія покращує доступність і юзабіліті, що також враховується
3733 |   пошуковими системами.
3734 | 
3735 | Заголовки = «карта сторінки» для SEO й користувачів.
3736 | 
3737 | </details>
3738 | 
3739 | <details>
3740 | <summary>97. Як структуровані дані (Schema.org) впливають на SEO та чому їх варто використовувати?</summary>
3741 | 
3742 | #### HTML
3743 | 
3744 | - Структуровані дані — це спеціальна розмітка (JSON-LD, microdata, RDFa), яка
3745 |   пояснює пошуковим системам значення контенту (напр. продукт, стаття, подія).
3746 | 
3747 | - Завдяки схемам пошуковики можуть показувати rich snippets: рейтинг, ціну, FAQ,
3748 |   дату публікації тощо.
3749 | 
3750 | - Це покращує CTR (користувачі частіше клікають по результату).
3751 | 
3752 | - Вони не напряму підвищують рейтинг, але допомагають пошуковим системам краще
3753 |   індексувати сторінку та зробити її більш привабливою у видачі.
3754 | 
3755 | #### Приклад JSON-LD для статті:
3756 | 
3757 | ```html
3758 | <script type="application/ld+json">
3759 |   {
3760 |     "@context": "https://schema.org",
3761 |     "@type": "Article",
3762 |     "headline": "Як оптимізувати HTML для SEO",
3763 |     "author": { "@type": "Person", "name": "Іван Іванов" },
3764 |     "datePublished": "2025-08-18",
3765 |     "publisher": {
3766 |       "@type": "Organization",
3767 |       "name": "MySite"
3768 |     }
3769 |   }
3770 | </script>
3771 | ```
3772 | 
3773 | </details>
3774 | 
3775 | <details>
3776 | <summary>98. Які найкращі практики використання HTML допомагають у SEO-оптимізації сайту?</summary>
3777 | 
3778 | #### HTML
3779 | 
3780 | - Використовувати семантичну розмітку (`<header>`, `<main>`, `<article>`,
3781 |   `<section>`).
3782 | 
3783 | - Один `<h1>` на сторінку, чітка ієрархія заголовків.
3784 | 
3785 | - Заповнювати `title` і `meta description` з ключовими словами.
3786 | 
3787 | - Додавати `alt` для зображень.
3788 | 
3789 | - Оптимізувати URL-адреси (короткі, зрозумілі, з ключовими словами).
3790 | 
3791 | - Використовувати структуровані дані (`Schema.org`).
3792 | 
3793 | - Уникати дублювання контенту, застосовувати `canonical`.
3794 | 
3795 | - Забезпечувати швидке завантаження (`lazy-loading`, мінімізація `DOM`).
3796 | 
3797 | - Робити HTML доступним: `aria`-атрибути, правильні форми, семантичні елементи.
3798 | 
3799 | Правильний `HTML` = краща індексація + зручність для користувача + кращі позиції
3800 | у видачі.
3801 | 
3802 | </details>
3803 | 
3804 | <details>
3805 | <summary>99. Способи покращення продуктивності веб-сторінки під час використання HTML?</summary>
3806 | 
3807 | #### HTML
3808 | 
3809 | - Мінімізувати HTML, CSS, JS (видалити пробіли, коментарі).
3810 | 
3811 | - Використовувати gzip/brotli стиснення на сервері.
3812 | 
3813 | - Кешування (HTTP headers, Service Worker).
3814 | 
3815 | - Critical CSS inline → решта асинхронно.
3816 | 
3817 | - Ледаче завантаження (loading="lazy") для зображень/iframe.
3818 | 
3819 | - Використання CDN для статичних ресурсів.
3820 | 
3821 | - Оптимізувати DOM: мінімальна кількість елементів, уникати глибокої
3822 |   вкладеності.
3823 | 
3824 | - Використовувати атрибути async/defer для скриптів:
3825 | 
3826 | ```html
3827 | <script src="script.js" defer></script>
3828 | <script src="analytics.js" async></script>
3829 | ```
3830 | 
3831 | Кожен з цих кроків покращує швидкість завантаження та взаємодії користувача.
3832 | 
3833 | </details>
3834 | 
3835 | <details>
3836 | <summary>100. Що таке категорії контенту в HTML5?</summary>
3837 | 
3838 | #### HTML
3839 | 
3840 | - Категорії контенту в HTML5 — це класифікація елементів за їхньою роллю та
3841 |   способом використання. Основні категорії:
3842 | 
3843 | #### Головні категорії:
3844 | 
3845 | - **Flow content** — більшість елементів, які можуть з'являтися у `<body>` (p,
3846 |   div, span, h1-h6).
3847 | 
3848 | - **Sectioning content** — створюють розділи в документі (article, section, nav,
3849 |   aside).
3850 | 
3851 | - **Heading content** — заголовки (h1-h6).
3852 | 
3853 | - **Phrasing content** — текст та inline-елементи (a, span, strong, em).
3854 | 
3855 | - **Embedded content** — зовнішній контент (img, video, audio, iframe).
3856 | 
3857 | - **Interactive content** — елементи для взаємодії (button, input, textarea,
3858 |   select).
3859 | 
3860 | #### Спеціальні категорії:
3861 | 
3862 | - **Metadata content** — елементи у `<head>` (title, meta, link, script).
3863 | 
3864 | - **Form-associated content** — елементи форм (input, button, select, textarea).
3865 | 
3866 | Розуміння категорій допомагає правильно структурувати HTML та дотримуватись
3867 | стандартів валідності.
3868 | 
3869 | </details>
3870 | 
3871 | <details>
3872 | <summary>101. Що таке marquee у HTML?</summary>
3873 | 
3874 | #### HTML
3875 | 
3876 | - `<marquee>` — застарілий тег, який створював рухомий текст або зображення на
3877 |   веб-сторінці.
3878 | 
3879 | - Елемент автоматично прокручував контент горизонтально або вертикально.
3880 | 
3881 | #### Приклад:
3882 | 
3883 | ```html
3884 | <marquee direction="left" behavior="scroll"
3885 |   >Рухомий текст зліва направо</marquee
3886 | >
3887 | ```
3888 | 
3889 | #### Чому застарілий:
3890 | 
3891 | - Поганий UX — відволікає та дратує користувачів.
3892 | - Проблеми з доступністю — ускладнює читання для людей з дислексією.
3893 | - Не підтримується в HTML5 стандарті.
3894 | 
3895 | **Альтернатива:** CSS animations або JavaScript для створення контрольованих
3896 | анімацій.
3897 | 
3898 | </details>
3899 | 
3900 | <details>
3901 | <summary>102. Що таке властивість valueAsNumber?</summary>
3902 | 
3903 | #### HTML
3904 | 
3905 | Властивість `valueAsNumber` повертає значення елемента форми як число. Воно
3906 | доступне для елементів, таких як `<input>` з типами `number`, `range` та іншими,
3907 | де очікується числове введення. Якщо значення не число, властивість повертає
3908 | `NaN`.
3909 | 
3910 | #### Приклад:
3911 | 
3912 | ```html
3913 | <input type="number" id="age" value="25" />
3914 | <script>
3915 |   const input = document.getElementById('age');
3916 |   console.log(input.valueAsNumber); // 25 (як число)
3917 |   console.log(input.value); // "25" (як рядок)
3918 | </script>
3919 | ```
3920 | 
3921 | Це зручно для роботи з числовими розрахунками без додаткового перетворення
3922 | типів.
3923 | 
3924 | </details>
3925 | 
3926 | <details>
3927 | <summary>103. Навіщо використовується атрибут capture?</summary>
3928 | 
3929 | #### HTML
3930 | 
3931 | Атрибут capture використовується в елементах форми, таких як
3932 | `<input type="file">`, для запуску камери або мікрофона замість вибору файлу з
3933 | пам'яті пристрою. Це дозволяє користувачу безпосередньо зробити фото або
3934 | записати аудіо.
3935 | 
3936 | #### Приклад використання атрибута `capture`:
3937 | 
3938 | ```html
3939 | <form>
3940 |   <label for="camera">Зробити фото:</label>
3941 |   <input
3942 |     type="file"
3943 |     id="camera"
3944 |     name="camera"
3945 |     accept="image/*"
3946 |     capture="camera"
3947 |   />
3948 | 
3949 |   <label for="audio">Записати звук:</label>
3950 |   <input
3951 |     type="file"
3952 |     id="audio"
3953 |     name="audio"
3954 |     accept="audio/*"
3955 |     capture="microphone"
3956 |   />
3957 | 
3958 |   <button type="submit">Відправити</button>
3959 | </form>
3960 | ```
3961 | 
3962 | Особливо корисно для мобільних додатків, де потрібен швидкий доступ до камери чи
3963 | мікрофона.
3964 | 
3965 | </details>
3966 | 
3967 | <details>
3968 | <summary>104. Для чого використовується атрибут decoding enterkeyhint novalidate inputmode pattern?</summary>
3969 | 
3970 | #### HTML
3971 | 
3972 | - **`decoding`**: Визначає, як браузер має обробляти зображення:
3973 | 
3974 |   ```html
3975 |   <img src="photo.jpg" decoding="async" alt="Фото" />
3976 |   ```
3977 | 
3978 |   Значення: `sync`, `async`, `auto`
3979 | 
3980 | - **`enterkeyhint`**: Дає браузеру підказку, що робити при натисканні Enter на
3981 |   віртуальній клавіатурі:
3982 | 
3983 |   ```html
3984 |   <input type="text" enterkeyhint="search" placeholder="Пошук..." />
3985 |   ```
3986 | 
3987 |   Значення: `enter`, `done`, `go`, `next`, `previous`, `search`, `send`
3988 | 
3989 | - **`novalidate`**: Вимикає валідацію форми при її відправці:
3990 | 
3991 |   ```html
3992 |   <form novalidate>
3993 |     <input type="email" required />
3994 |   </form>
3995 |   ```
3996 | 
3997 | - **`inputmode`**: Вказує тип введення для віртуальної клавіатури:
3998 | 
3999 |   ```html
4000 |   <input type="text" inputmode="numeric" placeholder="Телефон" />
4001 |   ```
4002 | 
4003 | - **`pattern`**: Задає регулярний вираз для перевірки введеного значення:
4004 |   ```html
4005 |   <input
4006 |     type="text"
4007 |     pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
4008 |     placeholder="123-456-7890"
4009 |   />
4010 |   ```
4011 | 
4012 | </details>
4013 | 
4014 | <details>
4015 | <summary>105. Що таке і навіщо потрібний атрибут rel="nofollow" у HTML?</summary>
4016 | 
4017 | #### HTML
4018 | 
4019 | - Атрибут `rel="nofollow"` вказує пошуковим системам не передавати "link juice"
4020 |   (вагу посилання) на цільову сторінку.
4021 | 
4022 | #### Використання:
4023 | 
4024 | ```html
4025 | <a href="https://example.com" rel="nofollow">Зовнішнє посилання</a>
4026 | ```
4027 | 
4028 | #### Навіщо потрібен:
4029 | 
4030 | - **SEO-контроль** — не передавати рейтинг на ненадійні або рекламні сайти.
4031 | - **Спам-захист** — запобігання зловживанню коментарями для просування сайтів.
4032 | - **Реклама** — позначення оплачених посилань для відповідності вимогам
4033 |   пошуковиків.
4034 | 
4035 | #### Додаткові значення rel:
4036 | 
4037 | - `rel="noopener"` — безпека при `target="_blank"`
4038 | - `rel="noreferrer"` — не передавати referrer
4039 | - `rel="sponsored"` — для рекламних посилань
4040 | 
4041 | </details>
4042 | 
4043 | <details>
4044 | <summary>106. Навіщо потрібен атрибут autocomplete?</summary>
4045 | 
4046 | #### HTML
4047 | 
4048 | Атрибут autocomplete в HTML використовується для вказівки браузеру, чи має він
4049 | автоматично заповнювати поля форми збереженими даними (наприклад, іменем,
4050 | адресою, електронною поштою). Він може бути включений або вимкнений для окремих
4051 | полів форми або для всієї форми.
4052 | 
4053 | #### Значення:
4054 | 
4055 | - `on` — дозволяє автозаповнення
4056 | - `off` — вимикає автозаповнення
4057 | - Специфічні значення: `name`, `email`, `current-password`, `new-password`,
4058 |   `tel`, `address-line1` тощо
4059 | 
4060 | #### Приклади:
4061 | 
4062 | ```html
4063 | <form autocomplete="on">
4064 |   <input type="text" name="name" autocomplete="name" placeholder="Ім'я" />
4065 |   <input type="email" name="email" autocomplete="email" placeholder="Email" />
4066 |   <input type="password" name="password" autocomplete="current-password" />
4067 | </form>
4068 | ```
4069 | 
4070 | Покращує UX — користувачі швидше заповнюють форми завдяки автопідказкам
4071 | браузера.
4072 | 
4073 | </details>
4074 | 
4075 | <details>
4076 | <summary>107. Як можна приховати елемент розмітки без використання CSS і JS?</summary>
4077 | 
4078 | #### HTML
4079 | 
4080 | Елемент можна приховати за допомогою атрибуту `hidden`:
4081 | 
4082 | ```html
4083 | <div hidden>Цей елемент прихований</div>
4084 | ```
4085 | 
4086 | #### Особливості атрибута `hidden`:
4087 | 
4088 | - Це булевий атрибут — його наявність робить елемент невидимим.
4089 | - Елемент повністю видаляється з візуального потоку.
4090 | - Семантично означає, що контент зараз не релевантний.
4091 | - Еквівалент CSS `display: none`.
4092 | 
4093 | #### Порівняння з іншими способами:
4094 | 
4095 | ```html
4096 | <!-- Атрибут hidden -->
4097 | <p hidden>Прихований текст</p>
4098 | 
4099 | <!-- Можна змінювати через JavaScript -->
4100 | <script>
4101 |   document.querySelector('p').hidden = false; // показати
4102 | </script>
4103 | ```
4104 | 
4105 | Це найпростіший спосіб приховати контент без CSS, особливо для динамічних змін
4106 | через JavaScript.
4107 | 
4108 | </details>
4109 | 
4110 | <details>
4111 | <summary>108. Що таке Geolocation API у браузері та як його застосовують у веброзробці?</summary>
4112 | 
4113 | #### HTML
4114 | 
4115 | - Geolocation API — вбудований у браузери інтерфейс, який дозволяє отримати
4116 |   географічне положення користувача (координати широти й довготи).
4117 | 
4118 | - Використання потребує згоди користувача.
4119 | 
4120 | - Застосовується для карт, локальних сервісів, геотаргетингу.
4121 | 
4122 | #### Приклад:
4123 | 
4124 | ```javascript
4125 | if (navigator.geolocation) {
4126 |   navigator.geolocation.getCurrentPosition(
4127 |     position => {
4128 |       console.log('Lat:', position.coords.latitude);
4129 |       console.log('Lng:', position.coords.longitude);
4130 |     },
4131 |     error => {
4132 |       console.error('Помилка:', error.message);
4133 |     }
4134 |   );
4135 | }
4136 | ```
4137 | 
4138 | #### Основні методи:
4139 | 
4140 | - `getCurrentPosition()` — поточна позиція
4141 | - `watchPosition()` — відстеження змін позиції
4142 | - `clearWatch()` — зупинка відстеження
4143 | 
4144 | Підтримується більшістю сучасних браузерів, але точність залежить від пристрою
4145 | (GPS, Wi-Fi, IP).
4146 | 
4147 | </details>
4148 | 
4149 | <details>
4150 | <summary>109. Як у вебдодатках використовувати Local Storage і Session Storage?</summary>
4151 | 
4152 | #### HTML
4153 | 
4154 | - Це частина Web Storage API для зберігання даних у браузері.
4155 | 
4156 |   - `localStorage` — зберігає дані безстроково (доки користувач не очистить
4157 |     вручну або додаток не видалить).
4158 | 
4159 |   - `sessionStorage` — зберігає дані тільки в межах поточної сесії браузера
4160 |     (закрив вкладку = дані зникають).
4161 | 
4162 | #### Приклад:
4163 | 
4164 | ```javascript
4165 | // Local Storage
4166 | localStorage.setItem('username', 'Viktor');
4167 | console.log(localStorage.getItem('username')); // Viktor
4168 | localStorage.removeItem('username');
4169 | 
4170 | // Session Storage
4171 | sessionStorage.setItem('theme', 'dark');
4172 | console.log(sessionStorage.getItem('theme')); // dark
4173 | sessionStorage.clear();
4174 | ```
4175 | 
4176 | #### Використання:
4177 | 
4178 | - `Local Storage` → збереження налаштувань, токенів, кешованих даних.
4179 | 
4180 | - `Session Storage` → тимчасові дані (форма, стан сторінки).
4181 | 
4182 | Обидва працюють тільки з рядками (для об'єктів треба `JSON.stringify` /
4183 | `JSON.parse`).
4184 | 
4185 | </details>
4186 | 
4187 | <details>
4188 | <summary>110. Як працює Drag and Drop API у браузері та де його застосовують?</summary>
4189 | 
4190 | #### HTML
4191 | 
4192 | - Drag and Drop API дозволяє перетягувати елементи на сторінці та обробляти їх
4193 |   "скидання".
4194 | 
4195 | #### Ключові події:
4196 | 
4197 | - `dragstart` — початок перетягування.
4198 | 
4199 | - `dragover` — об'єкт знаходиться над зоною скидання (потрібно викликати
4200 |   event.preventDefault()).
4201 | 
4202 | - `drop` — елемент скинуто в зону.
4203 | 
4204 | - `dragend` — завершення перетягування.
4205 | 
4206 | #### Приклад:
4207 | 
4208 | ```html
4209 | <div id="drag" draggable="true">Перетягни мене</div>
4210 | <div id="drop" style="width:200px;height:200px;border:1px solid black;">
4211 |   Зона скидання
4212 | </div>
4213 | 
4214 | <script>
4215 |   const drag = document.getElementById('drag');
4216 |   const drop = document.getElementById('drop');
4217 | 
4218 |   drag.addEventListener('dragstart', e => {
4219 |     e.dataTransfer.setData('text/plain', drag.id);
4220 |   });
4221 | 
4222 |   drop.addEventListener('dragover', e => {
4223 |     e.preventDefault(); // дозволяє скидання
4224 |   });
4225 | 
4226 |   drop.addEventListener('drop', e => {
4227 |     e.preventDefault();
4228 |     const id = e.dataTransfer.getData('text');
4229 |     const el = document.getElementById(id);
4230 |     drop.appendChild(el);
4231 |   });
4232 | </script>
4233 | ```
4234 | 
4235 | #### Використання:
4236 | 
4237 | - Реалізація `drag-and-drop` інтерфейсів (сортування списків, kanban-дошки).
4238 | 
4239 | - Завантаження файлів через "перетягни й скинь".
4240 | 
4241 | - Інтерактивні UI (редактори, кастомізація блоків).
4242 | 
4243 | </details>
4244 | 
4245 | ## Просунуті питання з HTML
4246 | 
4247 | <details>
4248 | <summary>111. Що таке Fullscreen API у браузері та для чого його застосовують?</summary>
4249 | 
4250 | #### HTML
4251 | 
4252 | - Fullscreen API дозволяє елементу сторінки (відео, зображення, canvas, div)
4253 |   переходити в повноекранний режим.
4254 | 
4255 | - Використовується для медіа (відеоплеєри, презентації, ігри, карти).
4256 | 
4257 | - Підвищує зручність користувача, коли потрібна максимальна концентрація на
4258 |   контенті.
4259 | 
4260 | #### Приклад:
4261 | 
4262 | ```javascript
4263 | const elem = document.documentElement;
4264 | 
4265 | // Увійти в повноекранний режим
4266 | function openFullscreen() {
4267 |   if (elem.requestFullscreen) {
4268 |     elem.requestFullscreen();
4269 |   }
4270 | }
4271 | 
4272 | // Вийти з повноекранного режиму
4273 | function closeFullscreen() {
4274 |   if (document.exitFullscreen) {
4275 |     document.exitFullscreen();
4276 |   }
4277 | }
4278 | ```
4279 | 
4280 | Використовується разом із подіями `fullscreenchange`, щоб реагувати на зміни
4281 | стану.
4282 | 
4283 | </details>
4284 | 
4285 | <details>
4286 | <summary>112. Що таке ApplicationCache в HTML5?</summary>
4287 | 
4288 | #### HTML
4289 | 
4290 | **`ApplicationCache`** в HTML5 — це механізм для офлайн-доступу до веб-додатків.
4291 | Він дозволяє зберігати ресурси веб-сторінки (HTML, CSS, JavaScript, зображення)
4292 | в кеші браузера, що дає змогу користувачам працювати з додатком без
4293 | інтернет-з'єднання.
4294 | 
4295 | #### Особливості:
4296 | 
4297 | - Використовувався для створення офлайн-додатків
4298 | - Визначався через атрибут `manifest` в HTML
4299 | - Дозволяв кешувати статичні ресурси
4300 | 
4301 | #### Приклад застарілого використання:
4302 | 
4303 | ```html
4304 | <html manifest="cache.appcache">
4305 |   <head>
4306 |     <title>Офлайн додаток</title>
4307 |   </head>
4308 |   <body>
4309 |     ...
4310 |   </body>
4311 | </html>
4312 | ```
4313 | 
4314 | **Важливо:** Відповідно до специфікації HTML5, цей механізм був застарілий і
4315 | замінений новими API, такими як **Service Workers**, які надають більш гнучкі
4316 | можливості для офлайн-функціональності.
4317 | 
4318 | </details>
4319 | 
4320 | <details>
4321 | <summary>113. Як обробляти події, що надходять від сервера, на фронтенді?</summary>
4322 | 
4323 | #### HTML
4324 | 
4325 | - Для взаємодії з подіями сервера зазвичай використовують WebSocket або
4326 |   Server-Sent Events (SSE).
4327 | 
4328 | #### 1. Server-Sent Events (SSE) — для односпрямованих подій від сервера:
4329 | 
4330 | ```javascript
4331 | const eventSource = new EventSource('/events');
4332 | 
4333 | eventSource.onmessage = event => {
4334 |   console.log('Нові дані від сервера:', event.data);
4335 | };
4336 | 
4337 | eventSource.onerror = err => {
4338 |   console.error('Помилка SSE:', err);
4339 | };
4340 | ```
4341 | 
4342 | #### 2. WebSocket — для двосторонньої взаємодії:
4343 | 
4344 | ```javascript
4345 | const socket = new WebSocket('ws://localhost:8080');
4346 | 
4347 | socket.onopen = () => {
4348 |   console.log('З'єднання встановлено');
4349 | };
4350 | 
4351 | socket.onmessage = (event) => {
4352 |   console.log('Повідомлення від сервера:', event.data);
4353 | };
4354 | 
4355 | socket.onerror = (err) => {
4356 |   console.error('Помилка WebSocket:', err);
4357 | };
4358 | ```
4359 | 
4360 | #### Використання:
4361 | 
4362 | - Реал-time оновлення UI (чат, сповіщення, лічильники).
4363 | 
4364 | - Стримінг даних без перезавантаження сторінки.
4365 | 
4366 | - Двостороннє спілкування між клієнтом і сервером.
4367 | 
4368 | </details>
4369 | 
4370 | <details>
4371 | <summary>114. Як відобразити сторінку кількома мовами?</summary>
4372 | 
4373 | #### HTML
4374 | 
4375 | - Можна зробити кількамовність так:
4376 | 
4377 | #### 1. Окремі HTML-файли для кожної мови:
4378 | 
4379 | ```html
4380 | <!-- index-en.html -->
4381 | <html lang="en">
4382 |   <head>
4383 |     <title>Welcome</title>
4384 |   </head>
4385 |   <body>
4386 |     <h1>Welcome to our site</h1>
4387 |   </body>
4388 | </html>
4389 | 
4390 | <!-- index-uk.html -->
4391 | <html lang="uk">
4392 |   <head>
4393 |     <title>Ласкаво просимо</title>
4394 |   </head>
4395 |   <body>
4396 |     <h1>Ласкаво просимо на наш сайт</h1>
4397 |   </body>
4398 | </html>
4399 | ```
4400 | 
4401 | #### 2. Серверна локалізація:
4402 | 
4403 | - Сервер віддає потрібну мову залежно від налаштувань користувача чи URL (/en/,
4404 |   /uk/).
4405 | 
4406 | #### 3. JavaScript + JSON-файли перекладів:
4407 | 
4408 | - Підвантаження текстів без перезавантаження сторінки (часто у SPA).
4409 | 
4410 | #### 4. Фреймворки з i18n:
4411 | 
4412 | - react-i18next, vue-i18n, Angular i18n.
4413 | 
4414 | **Важливо:** Для базового HTML обов'язково вказувати `lang="..."` і
4415 | `meta charset="UTF-8"`.
4416 | 
4417 | </details>
4418 | 
4419 | <details>
4420 | <summary>115. Як правильно задавати і обробляти кодування символів у HTML?</summary>
4421 | 
4422 | #### HTML
4423 | 
4424 | - Використовують UTF-8, щоб підтримувати всі символи (латиницю, кирилицю, емодзі
4425 |   тощо).
4426 | 
4427 | - Вказують у `<head>` сторінки:
4428 | 
4429 | ```html
4430 | <meta charset="UTF-8" />
4431 | ```
4432 | 
4433 | #### Додаткові рекомендації:
4434 | 
4435 | - Сервер також має надсилати правильний заголовок:
4436 | 
4437 |   ```
4438 |   Content-Type: text/html; charset=UTF-8
4439 |   ```
4440 | 
4441 | - Використання UTF-8 запобігає появі "кракозябр" при відображенні тексту.
4442 | 
4443 | **Краща практика:** всі HTML, CSS і JS файли зберігати в UTF-8 без BOM (Byte
4444 | Order Mark).
4445 | 
4446 | #### Приклад правильного кодування:
4447 | 
4448 | ```html
4449 | <!DOCTYPE html>
4450 | <html lang="uk">
4451 |   <head>
4452 |     <meta charset="UTF-8" />
4453 |     <title>Український текст відображається правильно</title>
4454 |   </head>
4455 |   <body>
4456 |     <p>Привіт! Це українські символи: ї, є, ґ, щ</p>
4457 |   </body>
4458 | </html>
4459 | ```
4460 | 
4461 | </details>
4462 | 
4463 | <details>
4464 | <summary>116. Що робить атрибут lang у HTML і чому він важливий?</summary>
4465 | 
4466 | #### HTML
4467 | 
4468 | - Атрибут lang визначає мову контенту елемента або сторінки:
4469 | 
4470 | ```html
4471 | <html lang="uk">
4472 |   <body>
4473 |     <p>Це український текст</p>
4474 |     <p lang="en">This is English text</p>
4475 |   </body>
4476 | </html>
4477 | ```
4478 | 
4479 | #### Важливість:
4480 | 
4481 | - **SEO:** Допомагає пошуковим системам і поліпшує ранжування.
4482 | 
4483 | - **Доступність:** Читачі екрану правильно озвучують текст з правильною вимовою.
4484 | 
4485 | - **Локалізація:** Впливає на правильне відображення шрифтів і форматування дат,
4486 |   чисел.
4487 | 
4488 | - **Браузерні функції:** Автоматичні перекладачі працюють точніше.
4489 | 
4490 | #### Приклади використання:
4491 | 
4492 | ```html
4493 | <!-- Основна мова документа -->
4494 | <html lang="uk">
4495 |   <!-- Окремі фрагменти іншими мовами -->
4496 |   <blockquote lang="en">"To be or not to be, that is the question"</blockquote>
4497 | 
4498 |   <!-- Для багатомовних сайтів -->
4499 |   <div lang="fr">Bonjour le monde!</div>
4500 | </html>
4501 | ```
4502 | 
4503 | **Краща практика:** завжди вказувати lang на `<html>` і при необхідності на
4504 | внутрішніх елементах з іншою мовою.
4505 | 
4506 | </details>
4507 | 
4508 | <details>
4509 | <summary>117. Як у HTML враховувати підтримку напрямку тексту LTR (зліва направо) та RTL (справа наліво)?</summary>
4510 | 
4511 | #### HTML
4512 | 
4513 | - Використовують атрибут dir:
4514 | 
4515 |   - `dir="ltr"` — текст зліва направо (за замовчуванням для більшості мов).
4516 | 
4517 |   - `dir="rtl"` — текст справа наліво (арабська, іврит).
4518 | 
4519 | #### Приклади:
4520 | 
4521 | ```html
4522 | <p dir="ltr">Hello, world! → (зліва направо)</p>
4523 | <p dir="rtl">مرحبا بالعالم ← (справа наліво)</p>
4524 | 
4525 | <!-- Змішаний контент -->
4526 | <div dir="rtl">
4527 |   <p>نص عربي</p>
4528 |   <p dir="ltr">English text in RTL context</p>
4529 | </div>
4530 | ```
4531 | 
4532 | #### Комбінування з CSS:
4533 | 
4534 | ```css
4535 | [dir='rtl'] {
4536 |   text-align: right;
4537 | }
4538 | 
4539 | [dir='rtl'] .menu {
4540 |   float: right;
4541 | }
4542 | ```
4543 | 
4544 | #### Практичні міркування:
4545 | 
4546 | - Можна ставити на `<html>` або окремі елементи.
4547 | 
4548 | - Потрібно поєднувати з CSS, якщо є специфічне вирівнювання чи флоати
4549 |   (text-align, float, margin).
4550 | 
4551 | - Враховують при мультимовних сайтах, щоб макет і UI не ламалися.
4552 | 
4553 | **Краща практика:** для мультимовних проєктів задавати lang + dir на кореневому
4554 | елементі й контролювати локально там, де мова змінюється.
4555 | 
4556 | </details>
4557 | 
4558 | <details>
4559 | <summary>118. Яке значення та користь має використання "хлібних крихт" (breadcrumbs) у веб-навігації?</summary>
4560 | 
4561 | #### HTML
4562 | 
4563 | - **Покращує юзабіліті:** користувач бачить своє місце в ієрархії сайту.
4564 | 
4565 | - **Швидка навігація:** дозволяє швидко перейти на вищі рівні структури.
4566 | 
4567 | - **Зменшує кліки:** скорочує кількість кліків до потрібної сторінки.
4568 | 
4569 | - **SEO-переваги:** має позитивний вплив на SEO (пошуковики краще розуміють
4570 |   структуру сайту).
4571 | 
4572 | #### Приклад HTML для breadcrumbs:
4573 | 
4574 | ```html
4575 | <nav aria-label="Breadcrumb">
4576 |   <ol class="breadcrumb">
4577 |     <li><a href="/">Головна</a></li>
4578 |     <li><a href="/category">Категорія</a></li>
4579 |     <li><a href="/category/subcategory">Підкategорія</a></li>
4580 |     <li aria-current="page">Поточна сторінка</li>
4581 |   </ol>
4582 | </nav>
4583 | ```
4584 | 
4585 | #### Структуровані дані для SEO:
4586 | 
4587 | ```html
4588 | <script type="application/ld+json">
4589 |   {
4590 |     "@context": "https://schema.org",
4591 |     "@type": "BreadcrumbList",
4592 |     "itemListElement": [
4593 |       {
4594 |         "@type": "ListItem",
4595 |         "position": 1,
4596 |         "name": "Головна",
4597 |         "item": "https://example.com/"
4598 |       },
4599 |       {
4600 |         "@type": "ListItem",
4601 |         "position": 2,
4602 |         "name": "Категорія",
4603 |         "item": "https://example.com/category"
4604 |       }
4605 |     ]
4606 |   }
4607 | </script>
4608 | ```
4609 | 
4610 | Breadcrumbs особливо корисні для великих сайтів з глибокою ієрархією контенту.
4611 | 
4612 | </details>
4613 | 
4614 | <details>
4615 | <summary>119. Як створити розсувне (collapsible/accordion) меню в HTML?</summary>
4616 | 
4617 | #### HTML
4618 | 
4619 | #### Метод 1: Через теги `<details>` і `<summary>` (нативний HTML):
4620 | 
4621 | ```html
4622 | <details>
4623 |   <summary>Services</summary>
4624 |   <ul>
4625 |     <li><a href="#">Web Development</a></li>
4626 |     <li><a href="#">UI/UX Design</a></li>
4627 |     <li><a href="#">SEO</a></li>
4628 |   </ul>
4629 | </details>
4630 | 
4631 | <details>
4632 |   <summary>Products</summary>
4633 |   <ul>
4634 |     <li><a href="#">Product A</a></li>
4635 |     <li><a href="#">Product B</a></li>
4636 |   </ul>
4637 | </details>
4638 | ```
4639 | 
4640 | #### Метод 2: CSS-only accordion:
4641 | 
4642 | ```html
4643 | <div class="accordion">
4644 |   <input type="checkbox" id="section1" />
4645 |   <label for="section1">Section 1</label>
4646 |   <div class="content">
4647 |     <p>Content for section 1</p>
4648 |   </div>
4649 | 
4650 |   <input type="checkbox" id="section2" />
4651 |   <label for="section2">Section 2</label>
4652 |   <div class="content">
4653 |     <p>Content for section 2</p>
4654 |   </div>
4655 | </div>
4656 | 
4657 | <style>
4658 |   .accordion input[type='checkbox'] {
4659 |     display: none;
4660 |   }
4661 | 
4662 |   .accordion .content {
4663 |     max-height: 0;
4664 |     overflow: hidden;
4665 |     transition: max-height 0.3s ease;
4666 |   }
4667 | 
4668 |   .accordion input[type='checkbox']:checked + label + .content {
4669 |     max-height: 200px;
4670 |   }
4671 | </style>
4672 | ```
4673 | 
4674 | #### Переваги `<details>`/`<summary>`:
4675 | 
4676 | - Нативна підтримка браузерами
4677 | - Доступність "з коробки"
4678 | - Не потребує JavaScript
4679 | - Семантично правильний
4680 | 
4681 | </details>
4682 | 
4683 | <details>
4684 | <summary>120. Яка різниця між вбудовуванням медіафайлів у HTML і посиланням на них?</summary>
4685 | 
4686 | #### HTML
4687 | 
4688 | #### **Вбудовування медіа:**
4689 | 
4690 | Медіа відтворюється прямо на сторінці через теги (`<img>`, `<audio>`, `<video>`,
4691 | `<iframe>`). Користувач взаємодіє з контентом без переходу на інший ресурс.
4692 | 
4693 | ```html
4694 | <!-- Вбудовані медіафайли -->
4695 | <img src="photo.jpg" alt="Фотографія" />
4696 | <video controls>
4697 |   <source src="video.mp4" type="video/mp4" />
4698 | </video>
4699 | <audio controls>
4700 |   <source src="music.mp3" type="audio/mpeg" />
4701 | </audio>
4702 | ```
4703 | 
4704 | #### **Посилання на медіа:**
4705 | 
4706 | Файл відкривається або завантажується після кліку по `<a href="...">`. Контент
4707 | не відтворюється безпосередньо у сторінці.
4708 | 
4709 | ```html
4710 | <!-- Посилання на медіафайли -->
4711 | <a href="document.pdf">Завантажити PDF</a>
4712 | <a href="photo.jpg">Переглянути фото</a>
4713 | <a href="video.mp4" download>Завантажити відео</a>
4714 | ```
4715 | 
4716 | #### **Порівняння:**
4717 | 
4718 | | Критерій      | Вбудовування                     | Посилання                      |
4719 | | ------------- | -------------------------------- | ------------------------------ |
4720 | | **UX**        | Безшовний перегляд               | Потребує переходу/завантаження |
4721 | | **Швидкість** | Повільніше завантаження сторінки | Швидша сторінка                |
4722 | | **Трафік**    | Завантажується автоматично       | Завантажується на вимогу       |
4723 | | **Контроль**  | Повний контроль відтворення      | Залежить від браузера          |
4724 | 
4725 | **Висновок:** Вбудовування — зручно для інтерактивності, посилання — легше для
4726 | швидких завантажень або коли не потрібен попередній перегляд.
4727 | 
4728 | </details>
4729 | 
4730 | <details>
4731 | <summary>121. Що таке Web Components у фронтенд-розробці та для чого їх використовують?</summary>
4732 | 
4733 | #### HTML
4734 | 
4735 | - Web Components — це нативна технологія браузера для створення повторно
4736 |   використовуваних, інкапсульованих UI-компонентів без залежності від
4737 |   фреймворків. Складаються з трьох частин:
4738 | 
4739 | 1. **Custom Elements** — визначення власних HTML-тегів (`<my-button>`).
4740 | 
4741 | 2. **Shadow DOM** — ізоляція стилів і DOM-компонента від решти сторінки.
4742 | 
4743 | 3. **HTML Templates** — заготовки розмітки (`<template>`).
4744 | 
4745 | #### Приклад:
4746 | 
4747 | ```html
4748 | <template id="my-card">
4749 |   <style>
4750 |     .card {
4751 |       border: 1px solid #ccc;
4752 |       padding: 10px;
4753 |       border-radius: 8px;
4754 |     }
4755 |   </style>
4756 |   <div class="card"><slot></slot></div>
4757 | </template>
4758 | 
4759 | <script>
4760 |   class MyCard extends HTMLElement {
4761 |     constructor() {
4762 |       super();
4763 |       const template = document.getElementById('my-card').content;
4764 |       const shadow = this.attachShadow({ mode: 'open' });
4765 |       shadow.appendChild(template.cloneNode(true));
4766 |     }
4767 |   }
4768 |   customElements.define('my-card', MyCard);
4769 | </script>
4770 | 
4771 | <my-card>Привіт! Я веб-компонент</my-card>
4772 | ```
4773 | 
4774 | #### Використання:
4775 | 
4776 | - Створення UI-бібліотек без прив'язки до React/Angular/Vue.
4777 | 
4778 | - Інкапсуляція стилів (не конфліктують з глобальними CSS).
4779 | 
4780 | - Можна повторно використовувати між різними проєктами чи фреймворками.
4781 | 
4782 | </details>
4783 | 
4784 | <details>
4785 | <summary>122. Що таке Shadow DOM у вебкомпонентах і як його правильно застосовувати?</summary>
4786 | 
4787 | #### HTML
4788 | 
4789 | - Shadow DOM — це механізм інкапсуляції DOM і стилів усередині вебкомпонента.
4790 |   Він приховує внутрішню реалізацію від зовнішнього коду та запобігає конфліктам
4791 |   CSS/JS.
4792 | 
4793 | #### Ключові властивості:
4794 | 
4795 | - Створюється через `element.attachShadow({ mode: 'open' | 'closed' })`.
4796 | 
4797 | - Має власне дерево елементів, відокремлене від основного DOM.
4798 | 
4799 | - Стилі в Shadow DOM не впливають на глобальні стилі і навпаки.
4800 | 
4801 | #### Приклад:
4802 | 
4803 | ```html
4804 | <div id="host"></div>
4805 | 
4806 | <script>
4807 |   const host = document.getElementById('host');
4808 |   const shadow = host.attachShadow({ mode: 'open' });
4809 | 
4810 |   shadow.innerHTML = `
4811 |     <style>
4812 |       p { color: red; }
4813 |     </style>
4814 |     <p>Цей текст червоний лише в Shadow DOM</p>
4815 |   `;
4816 | </script>
4817 | ```
4818 | 
4819 | #### Режими:
4820 | 
4821 | - `mode: 'open'` — можна отримати доступ до shadow DOM через
4822 |   `element.shadowRoot`
4823 | - `mode: 'closed'` — shadow DOM повністю прихований від зовнішнього коду
4824 | 
4825 | Використовується головним чином у Web Components, щоб створювати незалежні й
4826 | повторно використовувані UI-елементи.
4827 | 
4828 | </details>
4829 | 
4830 | <details>
4831 | <summary>123. Як створити власний HTML-елемент (Custom Element) у браузері?</summary>
4832 | 
4833 | #### HTML
4834 | 
4835 | - Для створення кастомного елемента використовується API Custom Elements:
4836 | 
4837 | 1. Створюємо клас, що наслідує `HTMLElement`.
4838 | 
4839 | 2. Реєструємо його через `customElements.define()`.
4840 | 
4841 | 3. Використовуємо у розмітці як звичайний тег.
4842 | 
4843 | #### Приклад:
4844 | 
4845 | ```html
4846 | <script>
4847 |   class MyButton extends HTMLElement {
4848 |     constructor() {
4849 |       super();
4850 |       this.innerHTML = `<button>Click me!</button>`;
4851 |     }
4852 | 
4853 |     connectedCallback() {
4854 |       console.log('Element додано до DOM');
4855 |       this.addEventListener('click', this.handleClick);
4856 |     }
4857 | 
4858 |     disconnectedCallback() {
4859 |       console.log('Element видалено з DOM');
4860 |       this.removeEventListener('click', this.handleClick);
4861 |     }
4862 | 
4863 |     handleClick = () => {
4864 |       alert('Custom button clicked!');
4865 |     };
4866 |   }
4867 | 
4868 |   customElements.define('my-button', MyButton);
4869 | </script>
4870 | 
4871 | <my-button></my-button>
4872 | ```
4873 | 
4874 | #### Lifecycle методи:
4875 | 
4876 | - `connectedCallback()` — викликається при додаванні до DOM
4877 | - `disconnectedCallback()` — викликається при видаленні з DOM
4878 | - `attributeChangedCallback()` — викликається при зміні атрибутів
4879 | 
4880 | - Браузер розпізнає `<my-button>` як нативний елемент.
4881 | 
4882 | - Можна додати `Shadow DOM` для інкапсуляції стилів.
4883 | 
4884 | </details>
4885 | 
4886 | <details>
4887 | <summary>124. Що таке HTML-шаблони template і як їх використовують у веброзробці?</summary>
4888 | 
4889 | #### HTML
4890 | 
4891 | - `<template>` — це тег для визначення розмітки, яка не відображається на
4892 |   сторінці до моменту її програмного клонування. Використовується разом із
4893 |   JavaScript для динамічного створення контенту.
4894 | 
4895 | #### Особливості:
4896 | 
4897 | - Вміст шаблона не рендериться при завантаженні сторінки.
4898 | 
4899 | - Можна клонувати через `template.content.cloneNode(true)`.
4900 | 
4901 | - Часто застосовується у Web Components та при динамічному рендерингу списків.
4902 | 
4903 | #### Приклад:
4904 | 
4905 | ```html
4906 | <template id="item-template">
4907 |   <li class="item">
4908 |     <h3 class="title"></h3>
4909 |     <p class="description"></p>
4910 |   </li>
4911 | </template>
4912 | 
4913 | <ul id="list"></ul>
4914 | 
4915 | <script>
4916 |   const template = document.getElementById('item-template');
4917 |   const list = document.getElementById('list');
4918 | 
4919 |   const items = [
4920 |     { title: 'Item 1', description: 'Description 1' },
4921 |     { title: 'Item 2', description: 'Description 2' },
4922 |   ];
4923 | 
4924 |   items.forEach(item => {
4925 |     const clone = template.content.cloneNode(true);
4926 |     clone.querySelector('.title').textContent = item.title;
4927 |     clone.querySelector('.description').textContent = item.description;
4928 |     list.appendChild(clone);
4929 |   });
4930 | </script>
4931 | ```
4932 | 
4933 | #### Використання:
4934 | 
4935 | - Динамічне додавання елементів у DOM.
4936 | 
4937 | - Інкапсульована розмітка для вебкомпонентів.
4938 | 
4939 | - Повторне використання UI-блоків без дублювання коду.
4940 | 
4941 | - Шаблони для генерації контенту на основі даних.
4942 | 
4943 | </details>
4944 | 
4945 | <details>
4946 | <summary>125. Як Flexbox і Grid допомагають створювати адаптивні макети?</summary>
4947 | 
4948 | #### HTML
4949 | 
4950 | #### **Flexbox**
4951 | 
4952 | Дозволяє легко вирівнювати та розподіляти простір між елементами в одному
4953 | напрямку (рядок або колонка). Ідеально для адаптивних меню, рядків карток,
4954 | елементів навігації.
4955 | 
4956 | ```html
4957 | <div class="flex-container">
4958 |   <div class="flex-item">Item 1</div>
4959 |   <div class="flex-item">Item 2</div>
4960 |   <div class="flex-item">Item 3</div>
4961 | </div>
4962 | 
4963 | <style>
4964 |   .flex-container {
4965 |     display: flex;
4966 |     flex-wrap: wrap;
4967 |     justify-content: space-between;
4968 |   }
4969 | 
4970 |   .flex-item {
4971 |     flex: 1 1 300px; /* grow, shrink, basis */
4972 |     margin: 10px;
4973 |   }
4974 | </style>
4975 | ```
4976 | 
4977 | #### **Grid**
4978 | 
4979 | Дозволяє будувати двовимірні макети (рядки + колонки) і керувати складними
4980 | структурами сторінки. Легко змінювати кількість колонок під різні екрани через
4981 | медіа-запити.
4982 | 
4983 | ```html
4984 | <div class="grid-container">
4985 |   <div class="grid-item">Header</div>
4986 |   <div class="grid-item">Sidebar</div>
4987 |   <div class="grid-item">Main</div>
4988 |   <div class="grid-item">Footer</div>
4989 | </div>
4990 | 
4991 | <style>
4992 |   .grid-container {
4993 |     display: grid;
4994 |     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
4995 |     gap: 20px;
4996 |   }
4997 | 
4998 |   /* Адаптивність через медіа-запити */
4999 |   @media (max-width: 768px) {
5000 |     .grid-container {
5001 |       grid-template-columns: 1fr;
5002 |     }
5003 |   }
5004 | </style>
5005 | ```
5006 | 
5007 | #### **Переваги для адаптивності:**
5008 | 
5009 | - Автоматичне перенесення елементів на новий рядок
5010 | - Гнучкий розподіл простору
5011 | - Легка зміна макету через медіа-запити
5012 | - Менше коду порівняно з float-основними рішеннями
5013 | 
5014 | Обидва підходи роблять макети гнучкими і дозволяють створювати адаптивний дизайн
5015 | без складних обхідних рішень.
5016 | 
5017 | </details>
5018 | 
5019 | <details>
5020 | <summary>126. Що таке валідація? Які типи перевірок HTML-документа ви знаєте?</summary>
5021 | 
5022 | #### HTML
5023 | 
5024 | Валідація — це процес перевірки коректності коду HTML-документа відповідно до
5025 | стандартів W3C.
5026 | 
5027 | #### **Типи перевірок:**
5028 | 
5029 | 1. **Синтаксична валідація** — перевірка правильності синтаксису та структури
5030 |    тегів.
5031 | 2. **Валідація атрибутів** — перевірка правильності та відповідності
5032 |    використаних атрибутів.
5033 | 3. **Валідація доступності (Accessibility)** — перевірка на відповідність
5034 |    стандартам доступності, наприклад WCAG.
5035 | 4. **Перевірка сумісності** — оцінка роботи коду в різних браузерах.
5036 | 5. **SEO-валідація** — перевірка оптимізації документа для пошукових систем.
5037 | 6. **Перевірка швидкодії** — аналіз завантаження та продуктивності.
5038 | 
5039 | #### **Приклади помилок:**
5040 | 
5041 | ```html
5042 | <!-- Синтаксична помилка: незакритий тег -->
5043 | <div>
5044 |   <p>Text</p>
5045 | </div>
5046 | 
5047 | <!-- Помилка атрибута: неіснуючий атрибут -->
5048 | <img src="photo.jpg" invalidattr="value" />
5049 | 
5050 | <!-- Доступність: відсутній alt -->
5051 | <img src="photo.jpg" />
5052 | ```
5053 | 
5054 | #### **Інструменти валідації:**
5055 | 
5056 | - W3C Markup Validator
5057 | - HTMLHint (лінтер)
5058 | - Lighthouse (доступність і SEO)
5059 | - axe DevTools
5060 | 
5061 | **Валідний HTML** = краща сумісність, доступність і SEO.
5062 | 
5063 | </details>
5064 | 
5065 | <details>
5066 | <summary>127. Основні етапи перевірок валідності HTML-документа?</summary>
5067 | 
5068 | #### HTML
5069 | 
5070 | #### **Основні етапи перевірки валідності:**
5071 | 
5072 | 1. **Перевірка синтаксису** — аналіз тегів, вкладеності та закриття.
5073 | 2. **Перевірка атрибутів** — відповідність атрибутів специфікації.
5074 | 3. **Перевірка DocType** — відповідність документа заявленому типу.
5075 | 4. **Перевірка доступності** — наявність елементів для підтримки доступності
5076 |    (alt, aria).
5077 | 5. **Перевірка семантики** — правильне використання семантичних тегів.
5078 | 6. **Перевірка посилань** — аналіз працездатності та коректності URL.
5079 | 
5080 | #### **Детальний процес:**
5081 | 
5082 | **Етап 1: Структурна валідація**
5083 | 
5084 | ```html
5085 | <!DOCTYPE html>
5086 | <!-- Правильний DOCTYPE -->
5087 | <html lang="uk">
5088 |   <!-- Мова документа -->
5089 |   <head>
5090 |     <meta charset="UTF-8" />
5091 |     <!-- Кодування -->
5092 |     <title>Заголовок</title>
5093 |   </head>
5094 |   <body>
5095 |     <!-- Правильно вкладені елементи -->
5096 |   </body>
5097 | </html>
5098 | ```
5099 | 
5100 | **Етап 2: Семантична валідація**
5101 | 
5102 | - Використання відповідних тегів (`<header>`, `<main>`, `<article>`)
5103 | - Правильна ієрархія заголовків (h1-h6)
5104 | - Коректні форми та їх елементи
5105 | 
5106 | **Етап 3: Доступність**
5107 | 
5108 | - Alt-тексти для зображень
5109 | - ARIA-атрибути де потрібно
5110 | - Табуляційна навігація
5111 | 
5112 | **Етап 4: Продуктивність і SEO**
5113 | 
5114 | - Оптимізовані зображення
5115 | - Мета-теги для SEO
5116 | - Валідні посилання
5117 | 
5118 | </details>
5119 | 
5120 | <details>
5121 | <summary>128. Якими способами перевіряють HTML на валідність і коректність?</summary>
5122 | 
5123 | #### HTML
5124 | 
5125 | #### **Основні способи перевірки:**
5126 | 
5127 | **1. Онлайн валідатори:**
5128 | 
5129 | - **W3C Markup Validator** (validator.w3.org) — офіційний сервіс для перевірки
5130 |   синтаксису й стандартів
5131 | - **HTML5 Validator** — перевірка специфічно для HTML5
5132 | 
5133 | **2. Редакторні плагіни та лінтери:**
5134 | 
5135 | - **HTMLHint** — інтегрується в CI/CD або редактор
5136 | - **ESLint з HTML плагінами**
5137 | - **Prettier** — форматування коду
5138 | 
5139 | **3. Браузерні інструменти:**
5140 | 
5141 | - **DevTools** — виявляють помилки розмітки в консолі
5142 | - **Elements панель** — показує структуру та помилки DOM
5143 | 
5144 | **4. Автоматизоване тестування:**
5145 | 
5146 | - **Lighthouse** — комплексна перевірка (accessibility, SEO, performance)
5147 | - **axe DevTools** — спеціалізовано на доступності
5148 | - **WAVE** — онлайн інструмент для accessibility
5149 | 
5150 | **5. CI/CD інтеграція:**
5151 | 
5152 | ```json
5153 | {
5154 |   "scripts": {
5155 |     "lint:html": "htmlhint src/**/*.html",
5156 |     "validate": "html-validate src/**/*.html"
5157 |   }
5158 | }
5159 | ```
5160 | 
5161 | **6. Командні інструменти:**
5162 | 
5163 | - **html-validate** — CLI валідатор
5164 | - **htmllint** — лінтер для HTML
5165 | 
5166 | #### **Приклад перевірки:**
5167 | 
5168 | ```bash
5169 | # Перевірка через HTMLHint
5170 | npx htmlhint index.html
5171 | 
5172 | # Автоматична перевірка в pipeline
5173 | npm run lint:html
5174 | ```
5175 | 
5176 | **Валідний HTML** = краща сумісність, доступність і SEO.
5177 | 
5178 | </details>
5179 | 
5180 | <details>
5181 | <summary>129. Як перевірити, що HTML-код відповідає стандартам і найкращим практикам?</summary>
5182 | 
5183 | #### HTML
5184 | 
5185 | #### **Комплексний підхід до перевірки:**
5186 | 
5187 | **1. Валідатори:**
5188 | 
5189 | - **W3C HTML Validator** для перевірки синтаксису
5190 | - **Nu Html Checker** — сучасний валідатор HTML5
5191 | 
5192 | **2. Лінтери:**
5193 | 
5194 | - **HTMLHint** з налаштованими правилами
5195 | - **ESLint** з плагінами для HTML
5196 | 
5197 | **3. Audits і аналіз:**
5198 | 
5199 | - **Chrome Lighthouse** → accessibility, SEO, performance
5200 | - **PageSpeed Insights** — Google аналіз продуктивності
5201 | 
5202 | **4. Accessibility тестування:**
5203 | 
5204 | - **axe DevTools** — найпопулярніший інструмент
5205 | - **WAVE** — онлайн accessibility валідатор
5206 | - **Colour Contrast Analyser** — перевірка контрастності
5207 | 
5208 | **5. Code review:**
5209 | 
5210 | - Внутрішні стандарти команди
5211 | - PR-рецензії з чеклістами
5212 | - Автоматичні коментарі від ботів
5213 | 
5214 | **6. CI/CD інтеграція:**
5215 | 
5216 | ```yaml
5217 | # GitHub Actions приклад
5218 | - name: Validate HTML
5219 |   run: |
5220 |     npm install -g htmlhint
5221 |     htmlhint src/**/*.html
5222 | 
5223 | - name: Accessibility test
5224 |   run: |
5225 |     npm install -g @axe-core/cli
5226 |     axe src/**/*.html
5227 | ```
5228 | 
5229 | **7. Чекліст найкращих практик:**
5230 | 
5231 | - ✅ Семантичні теги замість `<div>`
5232 | - ✅ Один `<h1>` на сторінку
5233 | - ✅ Alt-тексти для всіх зображень
5234 | - ✅ Правильна ієрархія заголовків
5235 | - ✅ Валідні форми з labels
5236 | - ✅ HTTPS і безпечні атрибути
5237 | - ✅ Мінімізований HTML для продакшену
5238 | 
5239 | **Комбо автоматичних інструментів + ручне рев'ю = гарантія дотримання best
5240 | practices.**
5241 | 
5242 | </details>
5243 | 
5244 | <details>
5245 | <summary>130. Якщо представити HTML5 як відкриту веб-платформу, з яких блоків він складається?</summary>
5246 | 
5247 | #### HTML
5248 | 
5249 | HTML5 як відкрита веб-платформа складається з наступних ключових блоків:
5250 | 
5251 | #### **1. Семантика**
5252 | 
5253 | Семантичні теги для структурування контенту:
5254 | 
5255 | - `<header>`, `<footer>`, `<main>`, `<article>`, `<section>`, `<nav>`, `<aside>`
5256 | - Покращують доступність та SEO
5257 | 
5258 | #### **2. Мультимедіа**
5259 | 
5260 | Нативна підтримка аудіо та відео:
5261 | 
5262 | - `<audio>`, `<video>` — без сторонніх плагінів
5263 | - `<track>` — субтитри та доступність
5264 | - Media API для програмного контролю
5265 | 
5266 | #### **3. Графіка**
5267 | 
5268 | Елементи для роботи з графікою:
5269 | 
5270 | - `<canvas>` — растрова графіка через JavaScript
5271 | - `<svg>` — векторна графіка
5272 | - WebGL для 3D графіки
5273 | 
5274 | #### **4. Сховище і офлайн**
5275 | 
5276 | API для локального зберігання даних:
5277 | 
5278 | - `localStorage`, `sessionStorage`
5279 | - `IndexedDB` — потужна NoSQL база даних
5280 | - `Service Workers` — офлайн функціональність
5281 | - `Cache API`
5282 | 
5283 | #### **5. Комунікації**
5284 | 
5285 | - `WebSocket` — реал-тайм двостороння комунікація
5286 | - `Server-Sent Events` — односпрямовані події від сервера
5287 | - `WebRTC` — peer-to-peer зв'язок
5288 | - `Fetch API` — сучасні HTTP запити
5289 | 
5290 | #### **6. Форми**
5291 | 
5292 | Розширені можливості форм:
5293 | 
5294 | - Нові типи `<input>` (email, url, date, color, range)
5295 | - Вбудована валідація
5296 | - `<datalist>` — автокомпліт
5297 | 
5298 | #### **7. Продуктивність**
5299 | 
5300 | API для оптимізації роботи:
5301 | 
5302 | - `Web Workers` — фонові обчислення
5303 | - `Intersection Observer` — ефективне відстеження видимості
5304 | - `Performance API` — моніторинг швидкодії
5305 | 
5306 | #### **8. Доступність**
5307 | 
5308 | - ARIA-атрибути для покращення доступності
5309 | - Семантичні ролі та стани
5310 | - Підтримка асистивних технологій
5311 | 
5312 | #### **9. Безпека**
5313 | 
5314 | - `Content Security Policy` (CSP)
5315 | - `Sandbox` атрибути
5316 | - Захищені контексти (HTTPS)
5317 | 
5318 | #### **10. Геолокація та пристрої**
5319 | 
5320 | - `Geolocation API`
5321 | - `Device Orientation API`
5322 | - `Vibration API`
5323 | - `Battery Status API`
5324 | 
5325 | Ця платформа забезпечує повноцінну екосистему для розробки сучасних веб-додатків
5326 | без залежності від сторонніх плагінів.
5327 | 
5328 | </details>
5329 | 
5330 | <details>
5331 | <summary>131. Що таке Living Standard і як HTML підтримує цей підхід?</summary>
5332 | 
5333 | #### HTML
5334 | 
5335 | - Living Standard — модель розвитку веб-стандартів, коли специфікація постійно
5336 |   оновлюється замість випуску фіксованих версій.
5337 | 
5338 | - HTML (через WHATWG) слідує цій моделі: нові елементи, атрибути й API додаються
5339 |   без формальних великих версій, а застарілі депрекейтяться поступово.
5340 | 
5341 | #### Переваги:
5342 | 
5343 | - Завжди актуальна специфікація.
5344 | 
5345 | - Менше застарілих версій у браузерах.
5346 | 
5347 | - Швидке впровадження нових технологій (Web Components, `<dialog>`, API для
5348 |   медіа).
5349 | 
5350 | - Браузери синхронізуються з Living Standard, забезпечуючи сумісність і
5351 |   інновації одночасно.
5352 | 
5353 | HTML Living Standard гарантує, що розробники працюють із сучасним, підтримуваним
5354 | і сумісним кодом.
5355 | 
5356 | </details>
5357 | 
5358 | <details>
5359 | <summary>132. Як HTML еволюціонує у контексті веб-стандартів і нових технологій?</summary>
5360 | 
5361 | #### HTML
5362 | 
5363 | - **Семантика та структура:** додаються нові теги для сучасних інтерфейсів
5364 |   (`<main>`, `<dialog>`, `<template>`).
5365 | 
5366 | - **Інтерактивність:** тісна інтеграція з JavaScript API (Web Components,
5367 |   Canvas, WebRTC, Web Audio).
5368 | 
5369 | - **Безпека:** нові атрибути і механізми (CSP, sandbox, form validation).
5370 | 
5371 | - **Доступність:** стандарти WAI-ARIA та краща підтримка скрінрідерів.
5372 | 
5373 | - **Мобільність і PWA:** API для офлайн-доступу, push-сповіщень, service
5374 |   workers.
5375 | 
5376 | - HTML оновлюється разом із CSS і JS стандартами, забезпечуючи сумісність,
5377 |   продуктивність і безпеку.
5378 | 
5379 | Коротко: HTML розвивається як частина екосистеми веб-стандартів, зберігаючи
5380 | сумісність і додаючи сучасні функції для UI, доступності та безпеки.
5381 | 
5382 | </details>
5383 | 
5384 | <details>
5385 | <summary>133. Які ключові зміни та нововведення з'явилися в HTML5.1 та HTML5.2?</summary>
5386 | 
5387 | #### HTML
5388 | 
5389 | - **HTML5.1 (2016):**
5390 | 
5391 |   - Нові семантичні теги: `<main>`, `<picture>`.
5392 | 
5393 |   - Покращення форм: `autocomplete`, `autofocus`, `required` та нові
5394 |     `input types`.
5395 | 
5396 |   - Додано підтримку `custom elements` (Web Components).
5397 | 
5398 |   - Поліпшення атрибутів для `accessibility` (hidden, tabindex).
5399 | 
5400 |   - Невеликі уточнення в DOM API і інтеграції з JavaScript.
5401 | 
5402 | - **HTML5.2 (2017):**
5403 | 
5404 |   - Нові теги та атрибути: `<dialog>` для модальних вікон, formaction для
5405 |     `<button>` та `<input>`.
5406 | 
5407 |   - Забезпечення безпечного використання `iframe:` `sandbox`, `allow` атрибути.
5408 | 
5409 |   - Покращення `ARIA` підтримки та `accessibility`.
5410 | 
5411 |   - Деякі застарілі елементи були депрекейтовані (`<menu>`, `<keygen>`).
5412 | 
5413 |   - Інтеграція з `Content Security Policy` (CSP) та нові механізми безпеки.
5414 | 
5415 | Кожне оновлення робить HTML більш семантичним, безпечним і дружнім до
5416 | доступності.
5417 | 
5418 | </details>
5419 | 
5420 | <details>
5421 | <summary>134. Які потенційні напрямки розвитку HTML можна очікувати у найближчому майбутньому?</summary>
5422 | 
5423 | #### HTML
5424 | 
5425 | - Більш тісна інтеграція з `Web Components` → спрощена кастомізація і повторне
5426 |   використання UI.
5427 | 
5428 | - Нові семантичні елементи для сучасних інтерфейсів (напр. `<dialog>`
5429 |   покращення, `<modal>`, `<carousel>` можливі).
5430 | 
5431 | - Покращена мультимедіа-підтримка → `Web Audio`, `WebRTC`, `3D/AR` контент без
5432 |   сторонніх плагінів.
5433 | 
5434 | - Більш потужні форми → нові `input types`, краща валідація і `accessibility`.
5435 | 
5436 | - Підтримка прогресивних веб-додатків (PWA) → офлайн, `push notifications`,
5437 |   фонова синхронізація.
5438 | 
5439 | - Інтеграція зі стандартами безпеки та конфіденційності → `CSP`,
5440 |   `cookie-less auth`, `sandboxing`.
5441 | 
5442 | - Оптимізація для мобільних і `low-power` пристроїв → легші елементи та
5443 |   оптимізовані API.
5444 | 
5445 | Загальний тренд: HTML стає більш семантичним, інтерактивним і безпечним, з
5446 | меншим залученням сторонніх бібліотек.
5447 | 
5448 | </details>
5449 | 
5450 | <details>
5451 | <summary>135. Які популярні CSS-фреймворки найчастіше інтегрують із HTML для швидкої розробки UI?</summary>
5452 | 
5453 | #### HTML
5454 | 
5455 | - `Bootstrap` → найпопулярніший, готові компоненти й grid-система.
5456 | 
5457 | - `Tailwind CSS` → утилітарний підхід, висока гнучкість.
5458 | 
5459 | - `Foundation (від Zurb)` → адаптивна сітка, компоненти.
5460 | 
5461 | - `Bulma` → чистий flexbox-фреймворк, простий у використанні.
5462 | 
5463 | - `Materialize` → реалізація Google Material Design.
5464 | 
5465 | - `UIkit` → легкий, зручний для швидкого прототипування.
5466 | 
5467 | Вибір залежить від потреб: Bootstrap — швидкий старт, Tailwind — кастомні
5468 | дизайн-системи, Bulma/Materialize — простота.
5469 | 
5470 | </details>
5471 | 
5472 | <details>
5473 | <summary>136. Як CSS-фреймворки на кшталт Bootstrap полегшують створення HTML-структур і UI?</summary>
5474 | 
5475 | #### HTML
5476 | 
5477 | - `Готові компоненти:` кнопки, форми, навігація, модальні вікна.
5478 | 
5479 | - `Адаптивна сітка (Grid)` → легке створення макетів для різних екранів.
5480 | 
5481 | - `Уніфіковані стилі` → не потрібно писати CSS з нуля.
5482 | 
5483 | - `JavaScript-компоненти` → каруселі, модальні, тултіпи без власного JS.
5484 | 
5485 | - `Кросбраузерність` → вирішує проблеми сумісності HTML/CSS.
5486 | 
5487 | Результат: швидша розробка, менше помилок у верстці, легке прототипування.
5488 | 
5489 | </details>
5490 | 
5491 | <details>
5492 | <summary>137. Які JavaScript-бібліотеки часто використовують для підвищення інтерактивності HTML-сторінок?</summary>
5493 | 
5494 | #### HTML
5495 | 
5496 | - `jQuery` → прості маніпуляції DOM і анімації (старі проєкти).
5497 | 
5498 | - `GSAP` → складні та плавні анімації.
5499 | 
5500 | - `Anime.js` → легкі анімації елементів.
5501 | 
5502 | - `Swiper.js` → інтерактивні каруселі і слайдери.
5503 | 
5504 | - `Chart.js / D3.js` → інтерактивні графіки та діаграми.
5505 | 
5506 | - `Sortable.js / Dragula` → drag-and-drop елементи.
5507 | 
5508 | - `Popper.js / Tippy.js` → тултіпи та спливаючі підказки.
5509 | 
5510 | Вибір залежить від задачі: анімації, інтерактивні UI, графіки або drag-and-drop.
5511 | 
5512 | </details>
5513 | 
5514 | <details>
5515 | <summary>138. Як HTML, CSS та JavaScript працюють разом у веб-розробці?</summary>
5516 | 
5517 | #### HTML
5518 | 
5519 | - HTML → структура сторінки, семантичні елементи.
5520 | 
5521 | - CSS → оформлення: кольори, шрифти, розташування, адаптивність.
5522 | 
5523 | - JavaScript → динаміка та інтерактивність (події, анімації, API).
5524 | 
5525 | #### Взаємозв'язок:
5526 | 
5527 | 1. HTML надає «скелет».
5528 | 
5529 | 2. CSS прикрашає цей скелет.
5530 | 
5531 | 3. JS робить його живим, реагуючи на події користувача або сервер.
5532 | 
5533 | #### Приклад:
5534 | 
5535 | ```html
5536 | <button id="btn">Клікни мене</button>
5537 | <style>
5538 |   #btn {
5539 |     background: blue;
5540 |     color: white;
5541 |     padding: 10px;
5542 |   }
5543 | </style>
5544 | <script>
5545 |   document
5546 |     .getElementById('btn')
5547 |     .addEventListener('click', () => alert('Привіт!'));
5548 | </script>
5549 | ```
5550 | 
5551 | HTML + CSS + JS = базова тріада фронтенду, яка формує структуру, стиль і
5552 | поведінку сторінки.
5553 | 
5554 | </details>
5555 | 
5556 | <details>
5557 | <summary>139. Які переваги дає використання HTML-препроцесора (наприклад, Pug/Jade) у фронтенд-розробці?</summary>
5558 | 
5559 | #### HTML
5560 | 
5561 | - Скорочений синтаксис → менше коду, швидше писати.
5562 | 
5563 | - Шаблонізація → змінні, цикли, умови прямо в HTML.
5564 | 
5565 | - Міксини → повторне використання блоків розмітки.
5566 | 
5567 | - Краща структура → вкладеність зрозуміліша, ніж у звичайному HTML.
5568 | 
5569 | - Легко підтримувати динамічні сторінки в SSR (Express, NestJS).
5570 | 
5571 | Мінус: потрібна збірка, ще один шар абстракції.
5572 | 
5573 | </details>
5574 | 
5575 | <details>
5576 | <summary>140. Як працює механізм шаблонів у HTML і для чого він використовується?</summary>
5577 | 
5578 | #### HTML
5579 | 
5580 | - HTML має нативний тег `<template>` → його вміст не рендериться, доки не буде
5581 |   клонований через JS.
5582 | 
5583 | - Шаблон зберігає розмітку, стилі й навіть скрипти, але пасивно, поки не
5584 |   активований.
5585 | 
5586 | - Використовується для динамічного рендерингу контенту та у Web Components.
5587 | 
5588 | #### Приклад:
5589 | 
5590 | ```html
5591 | <template id="user-template">
5592 |   <div class="user">
5593 |     <p class="name"></p>
5594 |   </div>
5595 | </template>
5596 | 
5597 | <script>
5598 |   const tmpl = document.getElementById('user-template');
5599 |   const clone = tmpl.content.cloneNode(true);
5600 |   clone.querySelector('.name').textContent = 'Alice';
5601 |   document.body.appendChild(clone);
5602 | </script>
5603 | ```
5604 | 
5605 | Перевага — можна підготувати заготовки UI та багаторазово їх використовувати.
5606 | 
5607 | </details>
5608 | 
5609 | <details>
5610 | <summary>141. Які переваги дає мінімізація (minification) HTML-коду?</summary>
5611 | 
5612 | #### HTML
5613 | 
5614 | - Менший розмір файлу → швидше завантаження сторінки.
5615 | 
5616 | - Зменшення трафіку → особливо важливо для мобільних користувачів.
5617 | 
5618 | - Кращий SEO → швидкість сайту впливає на ранжування.
5619 | 
5620 | - Економія ресурсів сервера/CDN.
5621 | 
5622 | - Часто поєднується з мінімізацією CSS/JS і gzip/brotli компресією.
5623 | 
5624 | Мінус: складніше читати код → тому в проєктах зберігають оригінал + мініфіковану
5625 | збірку.
5626 | 
5627 | </details>
5628 | 
5629 | <details>
5630 | <summary>142. Які основні способи оптимізації часу завантаження HTML-сторінки?</summary>
5631 | 
5632 | #### HTML
5633 | 
5634 | - Мінімізувати HTML, CSS, JS (видалити пробіли, коментарі).
5635 | 
5636 | - Використовувати gzip/brotli стиснення на сервері.
5637 | 
5638 | - Кешування (HTTP headers, Service Worker).
5639 | 
5640 | - Critical CSS inline → решта асинхронно.
5641 | 
5642 | - Ледаче завантаження (loading="lazy") для зображень/iframe.
5643 | 
5644 | - Використання CDN для статичних ресурсів.
5645 | 
5646 | - Правильне підключення скриптів: defer або async.
5647 | 
5648 | - Оптимізація медіа (webp, responsive images).
5649 | 
5650 | - Зменшити кількість HTTP-запитів (об'єднання ресурсів).
5651 | 
5652 | Головна мета — швидкий First Contentful Paint (FCP) і хороший LCP для
5653 | користувачів і SEO.
5654 | 
5655 | </details>
5656 | 
5657 | <details>
5658 | <summary>143. Які переваги згортання пробілів (collapsing white space) в HTML та CSS?</summary>
5659 | 
5660 | #### HTML
5661 | 
5662 | **1. Зменшення розміру файлів:** Коли зайві пробіли, нові рядки або табуляції
5663 | автоматично згортатимуться, це допомагає зменшити розмір файлів, що може бути
5664 | корисно для оптимізації швидкості завантаження веб-сторінки. Це особливо важливо
5665 | для мобільних пристроїв або при повільному інтернет-з'єднанні.
5666 | 
5667 | **2. Спрощення структури документа:** Згортання пробілів дозволяє уникнути
5668 | зайвих пробілів між елементами, що робить код HTML та CSS більш чистим і
5669 | зрозумілим. Код стає компактнішим, і його легше підтримувати та редагувати.
5670 | 
5671 | **3. Покращення читабельності контенту:** Згортання пробілів дозволяє браузеру
5672 | правильно відображати текст, забезпечуючи, щоб зайві пробіли не порушували
5673 | структуру та відображення елементів. Це особливо важливо при відображенні тексту
5674 | в абзацах, списках або інших блочних елементах.
5675 | 
5676 | **4. Ізоляція та відокремлення елементів:** Коли працює згортання пробілів,
5677 | можна забезпечити рівномірний розподіл простору між елементами, що дозволяє
5678 | більш ефективно керувати відстанями між ними, без того щоб зайві пробіли
5679 | впливали на вигляд веб-сторінки.
5680 | 
5681 | **5. Уникнення непотрібних порушень макета:** В деяких випадках зайві пробіли
5682 | можуть спричиняти небажану поведінку макета, наприклад, додавання непотрібних
5683 | відступів між елементами. Згортання пробілів допомагає уникнути таких ситуацій і
5684 | зберегти дизайн відповідно до заданих правил стилів.
5685 | 
5686 | **Згортання пробілів** — це стандартна поведінка в HTML, що дозволяє браузеру
5687 | ігнорувати зайві пробіли, кілька переносів рядка або табуляцій між текстовими
5688 | елементами. Таким чином, візуальне відображення не залежить від кількості
5689 | пробілів у коді.
5690 | 
5691 | [MDN link](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space-collapse)
5692 | 
5693 | </details>
5694 | 
5695 | <details>
5696 | <summary>144. Як у HTML реалізується підхід прогресивного вдосконалення (Progressive Enhancement)?</summary>
5697 | 
5698 | #### HTML
5699 | 
5700 | - **Progressive Enhancement** → спочатку базова функціональність працює на
5701 |   будь-якому браузері, а додаткові можливості додаються через сучасні HTML, CSS
5702 |   і JS.
5703 | 
5704 | #### Принципи:
5705 | 
5706 | 1. Базова розмітка — семантичний HTML для всіх користувачів.
5707 | 
5708 | 2. Стілі CSS — покращують дизайн, але не ламають функціонал без них.
5709 | 
5710 | 3. JavaScript — додає інтерактивність та анімації, але сайт працює і без нього.
5711 | 
5712 | #### Приклад:
5713 | 
5714 | ```html
5715 | <form action="/submit" method="POST">
5716 |   <input type="text" name="email" required placeholder="Email" />
5717 |   <button type="submit">Відправити</button>
5718 | </form>
5719 | <script>
5720 |   // JS: покращення UX — валідація на клієнті
5721 |   document.querySelector('form').addEventListener('submit', e => {
5722 |     const email = e.target.email.value;
5723 |     if (!email.includes('@')) e.preventDefault();
5724 |   });
5725 | </script>
5726 | ```
5727 | 
5728 | Базовий функціонал завжди доступний, а сучасні фічі підвищують зручність і
5729 | інтерктивність.
5730 | 
5731 | </details>
5732 | 
5733 | <details>
5734 | <summary>145. Які є поширені антипатерни (погані практики) при написанні HTML?</summary>
5735 | 
5736 | #### HTML
5737 | 
5738 | - Використання `<div>` і `<span>` замість семантичних тегів.
5739 | 
5740 | - Кілька `<h1>` на сторінці без потреби.
5741 | 
5742 | - Інлайнові стилі та події (`style=""`, `onclick=""`) → важче підтримувати.
5743 | 
5744 | - Відсутність атрибута `alt` у зображень.
5745 | 
5746 | - Дублікат `id` на сторінці.
5747 | 
5748 | - Використання застарілих тегів (`<font>`, `<center>`, `<marquee>`).
5749 | 
5750 | - Зловживання табличною розміткою для `layout` замість `CSS Grid/Flexbox`.
5751 | 
5752 | - Відсутність `lang` та `meta charset="UTF-8"`.
5753 | 
5754 | - Використання пустих елементів для відступів (наприклад, `<br><br>` замість
5755 |   `CSS`).
5756 | 
5757 | Такі практики шкодять SEO, доступності й ускладнюють підтримку коду.
5758 | 
5759 | </details>
5760 | 
5761 | <details>
5762 | <summary>146. Чому важлива документація при роботі з HTML і як її правильно вести?</summary>
5763 | 
5764 | #### HTML
5765 | 
5766 | - Підтримуваність коду → інші розробники швидко розуміють структуру та
5767 |   призначення елементів.
5768 | 
5769 | - Командна робота → зменшує помилки при масштабуванні проєкту.
5770 | 
5771 | - SEO і доступність → коментарі про призначення блоків, використання семантики.
5772 | 
5773 | - Стандарти та best practices → легше дотримуватись внутрішніх правил або
5774 |   HTML5-стандартів.
5775 | 
5776 | #### Практики:
5777 | 
5778 | - Використовувати коментарі <!-- пояснення -->.
5779 | 
5780 | - Документувати складні структури, шаблони та інтерактивні блоки.
5781 | 
5782 | - Ведення зовнішньої документації (Wiki, Storybook для UI-компонентів).
5783 | 
5784 | Добра документація економить час на підтримку, знижує помилки і покращує
5785 | командну роботу.
5786 | 
5787 | </details>
5788 | 
5789 | <details>
5790 | <summary>147. Що таке інструменти розробника браузера (DevTools) і як вони допомагають працювати з HTML?</summary>
5791 | 
5792 | #### HTML
5793 | 
5794 | - DevTools — вбудовані інструменти у браузерах (Chrome, Firefox, Edge) для
5795 |   налагодження вебсторінок.
5796 | 
5797 | - З HTML їх використовують для:
5798 | 
5799 |   - Перегляду та редагування DOM у реальному часі.
5800 | 
5801 |   - Аналізу атрибутів, структури й доступності елементів.
5802 | 
5803 |   - Відстеження завантаження ресурсів і продуктивності.
5804 | 
5805 |   - Перевірки SEO-тегів, метаінформації, семантики.
5806 | 
5807 | - Дає можливість швидко експериментувати з розміткою без зміни вихідного коду.
5808 | 
5809 | Краща практика: перевіряти валідність HTML, доступність і performance прямо
5810 | через DevTools.
5811 | 
5812 | </details>
5813 | 
5814 | <details>
5815 | <summary>148. Як забезпечити сумісність HTML-коду між різними браузерами?</summary>
5816 | 
5817 | #### HTML
5818 | 
5819 | - `Семантичний HTML` → базові елементи (`<header>`, `<main>`, `<form>`) працюють
5820 |   у всіх сучасних браузерах.
5821 | 
5822 | - `Поліфіли та шими` → підключення JS/CSS для старих або непідтримуваних функцій
5823 |   (e.g., fetch, Promise, `<dialog>`).
5824 | 
5825 | - `Тестування у кількох браузерах` → Chrome, Firefox, Edge, Safari, мобільні.
5826 | 
5827 | - `Can I Use` → перевірка підтримки тегів, атрибутів і API.
5828 | 
5829 | - `Progressive Enhancement / Graceful Degradation` → базовий функціонал
5830 |   доступний усюди, додаткові можливості — де підтримується.
5831 | 
5832 | - `DevTools і автоматичне тестування` → перевірка рендерингу, accessibility і
5833 |   JavaScript API.
5834 | 
5835 | 👉 Комбінація стандартного HTML, поліфілів, progressive enhancement і ретельного
5836 | тестування забезпечує максимальну сумісність.
5837 | 
5838 | </details>
5839 | 
5840 | <details>
5841 | <summary>149. Що таке візуалізація даних у HTML і як її реалізувати на вебсторінці?</summary>
5842 | 
5843 | #### HTML
5844 | 
5845 | - Візуалізація даних — графічне відображення інформації (діаграми, графіки,
5846 |   карти) прямо в браузері.
5847 | 
5848 | - Реалізація в HTML:
5849 | 
5850 | 1. Canvas API → малювання графіки через JavaScript.
5851 | 
5852 | 2. SVG → векторна графіка, інтерактивна та масштабована.
5853 | 
5854 | 3. Бібліотеки JS → полегшують роботу і додають інтерактивність:
5855 | 
5856 |    - Chart.js — швидке створення графіків.
5857 | 
5858 |    - D3.js — гнучкі й кастомні візуалізації.
5859 | 
5860 |    - Plotly.js — інтерактивні графіки з zoom і tooltip.
5861 | 
5862 | #### Приклад із Chart.js:
5863 | 
5864 | ```html
5865 | <canvas id="myChart"></canvas>
5866 | 
5867 | <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
5868 | <script>
5869 |   const ctx = document.getElementById('myChart').getContext('2d');
5870 |   new Chart(ctx, {
5871 |     type: 'bar',
5872 |     data: {
5873 |       labels: ['Red', 'Blue', 'Green'],
5874 |       datasets: [{ label: 'Votes', data: [12, 19, 7] }],
5875 |     },
5876 |   });
5877 | </script>
5878 | ```
5879 | 
5880 | Візуалізації роблять дані більш зрозумілими і інтерактивними для користувача.
5881 | 
5882 | </details>
5883 | 
5884 | <details>
5885 | <summary>150. Які теги з найсвіжіших оновлень ви знаєте?</summary>
5886 | 
5887 | #### HTML
5888 | 
5889 | - `<mark>`: Для виділення тексту (позначення важливих фрагментів).
5890 | - `<progress>`: Для відображення прогресу виконання задачі.
5891 | - `<meter>`: Для вимірювання значення в певному діапазоні (наприклад, рівень
5892 |   батареї).
5893 | 
5894 | </details>
5895 | 
5896 | <details>
5897 | <summary>151. Які атрибути можна використовувати зі списками для зміни їхнього зовнішнього вигляду або поведінки?</summary>
5898 | 
5899 | #### HTML
5900 | 
5901 | - Для списків в HTML основні атрибути та способи зміни вигляду/поведінки:
5902 | 
5903 | 1. type (для `<ol>` та `<ul>` в старому HTML, частково застаріло):
5904 | 
5905 | - `<ol type="1">` — цифри (за замовчуванням)
5906 | 
5907 | - `<ol type="A">` — великі літери
5908 | 
5909 | - `<ol type="a">` — малі літери
5910 | 
5911 | - `<ol type="I">` — римські великі
5912 | 
5913 | - `<ol type="i">` — римські малі
5914 | 
5915 | 2. start (для <ol>) — початковий номер:
5916 | 
5917 | ```html
5918 | <ol start="5">
5919 |   <li>Пункт</li>
5920 | </ol>
5921 | ```
5922 | 
5923 | 3. reversed (для <ol>) — зворотний порядок нумерації.
5924 | 
5925 | 4. compact (застарілий) — менш відстані між пунктами.
5926 | 
5927 | 5. CSS (сучасний спосіб):
5928 | 
5929 | - `list-style-type` — тип маркера (disc, circle, square, none).
5930 | 
5931 | - `list-style-image` — використовувати зображення замість маркера.
5932 | 
5933 | - `list-style-position` — розташування маркера (inside, outside).
5934 | 
5935 | Сучасні проєкти майже завжди стилізують списки через CSS, а не HTML-атрибути.
5936 | 
5937 | </details>
5938 | 
5939 | <details>
5940 | <summary>152. Як створити посилання на різні розділи на одній веб-сторінці HTML?</summary>
5941 | 
5942 | #### HTML
5943 | 
5944 | Відповідь: Для створення гіперпосилання використовується тег `<a>`. Атрибут href
5945 | вказує URL або шлях.
5946 | 
5947 | Приклад:
5948 | 
5949 | ```
5950 | <a href="https://example.com">Перейти на Example</a>
5951 | ```
5952 | 
5953 | </details>
5954 | 
5955 | <details>
5956 | <summary>153. Опишіть основну структуру HTML-документа.</summary>
5957 | 
5958 | #### HTML
5959 | 
5960 | - Основна структура HTML-документа:
5961 | 
5962 | ```html
5963 | <!DOCTYPE html>
5964 | <!-- Оголошення типу документа -->
5965 | <html lang="en">
5966 |   <head>
5967 |     <meta charset="UTF-8" />
5968 |     <title>Назва сторінки</title>
5969 |   </head>
5970 |   <body>
5971 |     <!-- Вміст сторінки -->
5972 |   </body>
5973 | </html>
5974 | ```
5975 | 
5976 | - Складові:
5977 | 
5978 | 1. `<!DOCTYPE html>` — вказує, що документ у HTML5.
5979 | 
5980 | 2. `<html>` — кореневий елемент.
5981 | 
5982 | 3. `<head>` — метадані (кодова сторінка, заголовок, стилі, скрипти).
5983 | 
5984 | 4. `<body>` — видимий вміст сторінки.
5985 | 
5986 | </details>
5987 | 
5988 | <details>
5989 | <summary>154. Різниця між кнопкою та посиланням у HTML?</summary>
5990 | 
5991 | #### HTML
5992 | 
5993 | - `<button>` використовується для виконання дій (відправити форму, викликати
5994 |   JavaScript функції).
5995 | 
5996 | - `<a>` використовується для навігації (перехід на іншу сторінку, розділ).
5997 | 
5998 | #### Приклади:
5999 | 
6000 | ```html
6001 | <button type="submit">Відправити</button> <a href="/about">Про нас</a>
6002 | ```
6003 | 
6004 | #### Семантика:
6005 | 
6006 | - Кнопка — дія.
6007 | 
6008 | - Посилання — навігація.
6009 | 
6010 | Використання правильних елементів покращує доступність і SEO.
6011 | 
6012 | </details>
6013 | 
6014 | <details>
6015 | <summary>155. Чим відрізняється article від section?</summary>
6016 | 
6017 | #### HTML
6018 | 
6019 | - `<article>` — самостійний блок контенту, який може існувати окремо від
6020 |   сторінки і бути зрозумілий поза контекстом.
6021 | 
6022 | - `<section>` — логічний розділ сторінки.
6023 | 
6024 | #### Приклади використання:
6025 | 
6026 | **Article:**
6027 | 
6028 | - Новини, блоги, публікації.
6029 | 
6030 | - Коментарі користувачів.
6031 | 
6032 | - Форумні повідомлення.
6033 | 
6034 | **Section:**
6035 | 
6036 | - Розділи сторінки (Про нас, Контакти).
6037 | 
6038 | - Тематичні групи контенту.
6039 | 
6040 | #### Переваги:
6041 | 
6042 | - Покращує SEO і доступність.
6043 | 
6044 | - Легко стилізується та структуровано організовує контент.
6045 | 
6046 | </details>
6047 | 
6048 | <details>
6049 | <summary>156. Що таке категорії контенту в HTML5?</summary>
6050 | 
6051 | #### HTML
6052 | 
6053 | **Семантика** — семантичні теги для структурування контенту (header, footer,
6054 | article). **Мультимедіа** — підтримка аудіо та відео (audio, video). **Графіка**
6055 | — елементи для роботи з графікою (canvas, SVG). **Сховище і офлайн** — API для
6056 | локального зберігання даних (localStorage, IndexedDB). **Комунікації** —
6057 | WebSocket, Server-Sent Events. **Форми** — розширені можливості форм (нові типи
6058 | input, валідація). **Продуктивність** — API для оптимізації роботи (Web
6059 | Workers). **Доступність** — ARIA-атрибути для покращення доступності.
6060 | 
6061 | </details>
6062 | 
6063 | <details>
6064 | <summary>157. Що таке data-атрибути, в яких випадках їх використовуєте?</summary>
6065 | 
6066 | #### HTML
6067 | 
6068 | Атрибут autocomplete в HTML використовується для вказівки браузеру, чи має він
6069 | автоматично заповнювати поля форми збереженими даними (наприклад, іменем,
6070 | адресою, електронною поштою). Він може бути включений або вимкнений для окремих
6071 | полів форми або для всієї форми.
6072 | 
6073 | Значення:
6074 | 
6075 | `on` — дозволяє автозаповнення. `off` — вимикає автозаповнення.
6076 | 
6077 | </details>
6078 | 
6079 | <details>
6080 | <summary>158. Як створити форму в HTML і забезпечити її валідацію?</summary>
6081 | 
6082 | #### HTML
6083 | 
6084 | - HTML-форма — це елемент, який збирає дані від користувача та відправляє їх на
6085 |   сервер або обробляє на клієнті.
6086 | 
6087 | #### Приклад створення:
6088 | 
6089 | ```html
6090 | <form action="/submit" method="post">
6091 |   <label for="name">Ім'я:</label>
6092 |   <input type="text" id="name" name="name" />
6093 | 
6094 |   <label for="email">Email:</label>
6095 |   <input type="email" id="email" name="email" />
6096 | 
6097 |   <button type="submit">Відправити</button>
6098 | </form>
6099 | ```
6100 | 
6101 | - `<form>` — контейнер форми.
6102 | - `action` — URL, куди відправляються дані.
6103 | - `method` — спосіб відправки (get або post).
6104 | 
6105 | **Поля вводу** (`<input>`, `<textarea>`, `<select>`) + кнопки (`<button>` або
6106 | `<input type="submit">`).
6107 | 
6108 | </details>
6109 | 
6110 | <details>
6111 | <summary>159. Які методи відправки даних форми ви знаєте?</summary>
6112 | 
6113 | #### HTML
6114 | 
6115 | **`ApplicationCache`** в HTML5 — це механізм для офлайн-доступу до веб-додатків.
6116 | Він дозволяє зберігати ресурси веб-сторінки (HTML, CSS, JavaScript, зображення)
6117 | в кеші браузера, що дає змогу користувачам працювати з додатком без
6118 | інтернет-з'єднання.
6119 | 
6120 | Відповідно до специфікації HTML5, цей механізм був застарілий і замінений новими
6121 | API, такими як **Service Workers**.
6122 | 
6123 | </details>
6124 | 
6125 | <details>
6126 | <summary>160. ???</summary>
6127 | 
6128 | #### HTML
6129 | 
6130 | - Coming Soon... 😎
6131 | 
6132 | </details>
6133 | 


--------------------------------------------------------------------------------