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


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


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


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


--------------------------------------------------------------------------------
/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
 10 | and 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
 26 |   overall community
 27 | 
 28 | Examples of unacceptable behavior include:
 29 | 
 30 | - The use of sexualized language or imagery, and sexual attention or
 31 |   advances of 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
 35 |   address, 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 | [frontendlovers@gmail.com](mailto:frontendlovers@gmail.com).
 64 | All complaints will 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
 86 | of 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
 93 | permanent 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
113 | the 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 [Mozilla's code of conduct
122 | 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 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
   1 | <h1>
   2 |   HTML <img src="./assets/html.svg" width="40" height="40" />
   3 | </h1>
   4 | 
   5 | <h2>Найпопулярніші запитання та відповіді на співбесіді з HTML</h2>
   6 | 
   7 | <details>
   8 | <summary> <span style="color:#368bed">1. Що таке HTML?</span></summary>
   9 | 
  10 | `HTML` (HyperText Markup Language) — це інструкція для браузера, яка визначає стандарт розмітки HTML, що використовується в документі.
  11 | 
  12 | [MDN link](https://developer.mozilla.org/en-US/docs/Web/HTML)
  13 | 
  14 | </details>
  15 | <!-- ========================================== -->
  16 | <details>
  17 | <summary><span style="color:#368bed">2. Опишіть базову структуру HTML-сторінки?</span></summary>
  18 | 
  19 | **Базова структура HTML-сторінки:**
  20 | 
  21 | Основні елементи:
  22 | 
  23 | `<!DOCTYPE html>` — оголошення типу документа.
  24 | `<html>` — корінь HTML-документа.
  25 | `<head>` — метаінформація (включає кодування, viewport, заголовок).
  26 | `<body>` — основний вміст сторінки.
  27 | `<header>`, `<main>`, `<footer>` — структурні елементи для організації контенту.
  28 | 
  29 | ```
  30 | <!DOCTYPE html>
  31 | <html lang="en">
  32 | <head>
  33 |     <meta charset="UTF-8">
  34 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  35 |     <title>Назва сторінки</title>
  36 | </head>
  37 | <body>
  38 |     <h1>Заголовок</h1>
  39 |     <p>Контент сторінки.</p>
  40 | </body>
  41 | </html>
  42 | ```
  43 | 
  44 | [MDN link](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents)
  45 | 
  46 | </details>
  47 | <!-- ========================================== -->
  48 | <details>
  49 | <summary><span style="color:#368bed">3. Що таке HTML теги?</span></summary>
  50 | 
  51 | **HTML-теги** — це основні елементи мови HTML, які використовуються для створення структури та форматування веб-сторінок.<br>
  52 | **Формат:** Теги зазвичай мають відкриваючу та закриваючу частини:
  53 | 
  54 | ```
  55 | <назва_тега>Вміст</назва_тега>
  56 | ```
  57 | 
  58 | ### Наприклад:
  59 | 
  60 | ```
  61 | <p>Це абзац</p>
  62 | ```
  63 | 
  64 | ### Типи тегів:
  65 | 
  66 | 1.  **Парні:** Мають відкриваючий і закриваючий тег (наприклад, `<div></div>`).
  67 | 2.  **Одинарні:** Самозакриваються (наприклад, `<img />`).<br>
  68 |     Теги визначають елементи, такі як заголовки, списки, зображення, таблиці тощо.
  69 | 
  70 | [MDN link](https://developer.mozilla.org/en-US/docs/Glossary/Tag)
  71 | 
  72 | </details>
  73 | <!-- ========================================== -->
  74 | <details>
  75 | <summary><span style="color:#368bed">4. Що таке HTML елементи?</span></summary>
  76 | 
  77 | **HTML-елемент** — це одиниця структури веб-сторінки, що складається з тегу та його вмісту. Елемент включає відкриваючий тег, закриваючий тег (якщо він потрібен), а також будь-який вміст між ними.<br>
  78 | 
  79 | ### Наприклад:
  80 | 
  81 | ```
  82 | <p>Це абзац.</p>
  83 | ```
  84 | 
  85 | HTML-елементи можуть мати атрибути, що додають додаткову інформацію, наприклад:
  86 | 
  87 | ```
  88 | <a href="https://example.com">Посилання</a>
  89 | ```
  90 | 
  91 | Тут `href` — це атрибут елемента `<a>`.
  92 | 
  93 | [MDN link](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
  94 | 
  95 | </details>
  96 | <!-- ========================================== -->
  97 | <details>
  98 | <summary><span style="color:#368bed">5. Що таке HTML атрибути?</span></summary>
  99 | 
 100 | **Атрибути HTML** — це спеціальні властивості, які додаються до тегів HTML для надання додаткової інформації про елементи або зміни їх поведінки. Вони складаються з пар "ім'я-значення", які записуються в відкриваючому тегу елемента.
 101 | 
 102 | ## Основи атрибутів HTML
 103 | 
 104 | ### Структура атрибутів
 105 | 
 106 | Атрибути зазвичай мають таку структуру:
 107 | 
 108 | ```
 109 | <element attribute="значення">Текст</element>
 110 | ```
 111 | 
 112 | - **element:** тип HTML елемента (наприклад, `<a>`, `<img>`, `<input>`).
 113 | - **attribute:** ім'я атрибута (наприклад, `href`, `src`, `alt`).
 114 | - **значення:** значення атрибута, яке може бути обгорнуте в подвійні або одинарні лапки.
 115 | 
 116 | **Типи атрибутів**
 117 | Існує кілька категорій атрибутів:
 118 | 
 119 | - **Необхідні атрибути**: необхідні для коректної роботи елемента (наприклад, `src` для зображень).
 120 | - **Необов'язкові атрибути**: використовуються для зміни стандартної поведінки (наприклад, `title` для підказок).
 121 | - **Стандартні атрибути**: підтримуються багатьма елементами (наприклад, `class`, `id`).
 122 | - **Атрибути подій**: запускають скрипти при певних діях користувача (наприклад, `onclick`).
 123 | 
 124 | ### Приклади використання
 125 | 
 126 | Ось кілька прикладів атрибутів у HTML:
 127 | 
 128 | **1. Посилання:**
 129 | 
 130 | ```
 131 | <a href="https://www.example.com">Приклад посилання</a>
 132 | ```
 133 | 
 134 | Атрибут `href` вказує URL-адресу, на яку веде посилання. 2. Зображення:
 135 | 
 136 | **2. Зображення:**
 137 | 
 138 | ```
 139 | <img src="image.jpg" alt="Опис зображення">
 140 | ```
 141 | 
 142 | Атрибут `src` визначає шлях до зображення, а `alt` надає альтернативний текст.
 143 | 
 144 | **3. Форма:**
 145 | 
 146 | ```
 147 | <input type="text" id="name" name="name" required>
 148 | ```
 149 | 
 150 | Тут `type`, `id`, `name` і `required` є атрибутами, що визначають тип поля вводу та його властивості.
 151 | 
 152 | **Важливість атрибутів**
 153 | 
 154 | Атрибути дозволяють розширити функціональність HTML елементів, налаштовуючи їх стиль, поведінку та взаємодію з користувачем. Вони є ключовими для створення інтерактивних веб-сторінок і забезпечують можливість валідації форм та інших дій на сайті
 155 | 
 156 | [MDN link](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes)
 157 | 
 158 | </details>
 159 | <!-- ========================================== -->
 160 | <details>
 161 | <summary><span style="color:#368bed">6. Які типи заголовків існують у HTML?</span></summary>
 162 | 
 163 | HTML має шість рівнів заголовків: `<h1>` до `<h6>`. `<h1>` — найбільший і найважливіший, `<h6>` — найменший і найменш важливий.
 164 | 
 165 | </details>
 166 | <!-- ========================================== -->
 167 | <details>
 168 | <summary> <span style="color:#368bed">7. Які типи списків є в HTML?</span></summary>
 169 | 
 170 | - В HTML існують три основні типи списків:
 171 | 
 172 |   - **Нумерований список** (Ordered list `<ol>`): Список, елементи якого пронумеровані.
 173 | 
 174 |   - **Маркірований список** (Unordered list `<ul>`): Список, елементи якого позначені маркерами.
 175 | 
 176 |   - **Описовий список** (Definition list `<dl>`): Cписок відображається у вигляді тексту, де терміни (`<dt>`) виділяються окремо, а їхні описи (`<dd>`) розташовані під ними із відступом.
 177 | 
 178 | [W3schoolsua link](https://w3schoolsua.github.io/html/html_lists.html#gsc.tab=0)
 179 | 
 180 | </details>
 181 | <!-- ========================================== -->
 182 | <details>
 183 | <summary><span style="color:#368bed">8. Як відокремити частину тексту в HTML?</span></summary>
 184 | 
 185 | Щоб відокремити частину тексту в HTML, ви можете використати різні елементи для форматування чи структурування контенту. Ось кілька способів:
 186 | 
 187 | ### 1. Використання тегів для виділення частини тексту\*\*
 188 | 
 189 | **a) Тег &lt;span&gt;**
 190 | 
 191 | Якщо вам потрібно виділити частину тексту без зміни його семантики (формату), ви можете використовувати тег `<span>`. Він не впливає на структуру документа і дає змогу застосовувати стилі через CSS.
 192 | 
 193 | ```
 194 | <p>Це звичайний текст, а ось <span style="color: red;">ця частина тексту</span> виділена червоним кольором.</p>
 195 | ```
 196 | 
 197 | **b) Тег &lt;strong&gt; або &lt;b&gt;**
 198 | 
 199 | Якщо ви хочете підкреслити важливість частини тексту, використовуйте `<strong>`. Це також має семантичне значення для пошукових систем і доступності. Тег `<b>` лише додає жирний шрифт без семантики.
 200 | 
 201 | ```
 202 | <p>Цей текст <strong>важливий</strong> для розуміння.</p>
 203 | ```
 204 | 
 205 | **c) Тег &lt;em&gt; або &lt;i&gt;**
 206 | 
 207 | Для виділення тексту курсивом можна використовувати `<em>` (емфаза, має семантичне значення) або просто `<i>`, який не несе семантичного навантаження.
 208 | 
 209 | ```
 210 | <p>Цей текст <em>потрібно прочитати уважно</em>.</p>
 211 | ```
 212 | 
 213 | ### 2. Використання блочних елементів для відокремлення тексту
 214 | 
 215 | Якщо вам потрібно виділити більшу частину тексту або зробити її окремим блоком, використовуйте блочні елементи:
 216 | 
 217 | **a) Тег &lt;div&gt;**
 218 | Цей елемент використовується для групування інших елементів або текстів. Ви можете додати до нього стилі або клас.
 219 | 
 220 | ```
 221 | <div style="background-color: lightgray; padding: 10px;">
 222 |   Це відокремлений блок тексту.
 223 | </div>
 224 | ```
 225 | 
 226 | **b) Тег &lt;section&gt;**
 227 | 
 228 | Якщо частина тексту має певну тематику, можна використати тег `<section>`, який позначає логічно відокремлену частину документа.
 229 | 
 230 | ```
 231 | <section>
 232 |   <h2>Розділ 1</h2>
 233 |   <p>Цей текст належить до першого розділу.</p>
 234 | </section>
 235 | ```
 236 | 
 237 | ### 3. Використання списків для відокремлення пунктів
 238 | 
 239 | **a) Тег &lt;ul&gt; для ненумерованих списків**
 240 | Використовується для створення списків без нумерації.
 241 | 
 242 | ```
 243 | <ul>
 244 |   <li>Пункт 1</li>
 245 |   <li>Пункт 2</li>
 246 |   <li>Пункт 3</li>
 247 | </ul>
 248 | ```
 249 | 
 250 | **b) Тег &lt;ol&gt; для нумерованих списків**
 251 | Використовується для створення списків з нумерацією.
 252 | 
 253 | ```
 254 | <ol>
 255 |   <li>Перше завдання</li>
 256 |   <li>Друге завдання</li>
 257 |   <li>Третє завдання</li>
 258 | </ol>
 259 | ```
 260 | 
 261 | ### Підсумок:
 262 | 
 263 | Вибір способу для відокремлення частини тексту залежить від того, що ви хочете досягти: чи це просто форматування, чи логічна структура контенту. Для простих стилів — використовуйте `<span>` чи інші інлайнові елементи, для структуризації — блочні елементи, такі як `<div>`, `<section>`, `<article>`.
 264 | 
 265 | </details>
 266 | <!-- ========================================== -->
 267 | <details>
 268 | <summary><span style="color:#368bed">9. Що таке пробільний простір в HTML?</span></summary>
 269 | 
 270 | У контексті HTML, **white space** (пробільний простір) — це будь-який невидимий символ, який використовується для розділення елементів або тексту на сторінці. Це може бути:
 271 | 
 272 | 1. **Пробіли (space)**: Використовуються для розділення слів або елементів.
 273 | 2. **Переноси рядка (newlines)**: Вони відокремлюють рядки тексту або елементів.
 274 | 3. **Табуляції (tab)**: Використовуються для відступів або для організації коду, але не впливають на відображення на сторінці.
 275 | 4. Різні інші символи пробілу, наприклад, неформатований пробіл (`&nbsp;`), який можна використовувати для створення постійного пробілу, що не згортатиметься.
 276 | 
 277 | ### Як працює пробільний простір у HTML:
 278 | 
 279 | 1. У HTML браузери зазвичай ігнорують зайві пробіли, нові рядки або табуляції. Тобто кілька пробілів або нових рядків між елементами в коді не змінюють відображення на сторінці. Наприклад:
 280 | 
 281 | ```
 282 | <p>Це    приклад    тексту.</p>
 283 | ```
 284 | 
 285 | Відобразиться як:
 286 | 
 287 | ```
 288 | Це приклад тексту.
 289 | ```
 290 | 
 291 | Тобто кілька пробілів між словами буде проігноровано.
 292 | 
 293 | 2. HTML дозволяє використовувати спеціальні символи для створення пробільного простору, коли це потрібно, наприклад:
 294 | 
 295 | - **`&nbsp;`** — нерозривний пробіл (не буде згорнутий при згортанні пробілів).
 296 | - **`&#160;`** — також нерозривний пробіл.
 297 | 
 298 | ### Використання пробілу для форматування:
 299 | 
 300 | Пробільний простір в HTML також важливий для організації структури коду, що допомагає зробити його більш читабельним для розробників. Однак пробіли та відступи не впливають на відображення в браузері (якщо тільки не використовуються спеціальні символи, як `&nbsp;`).
 301 | 
 302 | ### Пробіли в текстовому контенті:
 303 | 
 304 | Пробільний простір може бути важливим для відображення в текстових елементах, таких як параграфи (`<p>`), заголовки (`<h1>`, `<h2>`, і т.д.), або списки (`<ul>`, `<ol>`, `<li>`). Вони допомагають організувати текст і зробити його більш зрозумілим для користувача.
 305 | 
 306 | ### Підсумок:
 307 | 
 308 | У HTML пробільний простір — це будь-який символ, що не відображається на сторінці, але використовується для розділення елементів чи тексту. Важливо розуміти, як браузери обробляють пробіли, щоб правильно структурувати контент.
 309 | 
 310 | [MDN link](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace)
 311 | 
 312 | </details>
 313 | <!-- ========================================== -->
 314 | <details>
 315 | <summary><span style="color:#368bed">10. Що таке DOCTYPE і навіщо його використовують?</span></summary>
 316 | 
 317 | `DOCTYPE` — це інструкція для браузера, яка визначає стандарт розмітки HTML, що використовується в документі.
 318 | 
 319 | ### Призначення
 320 | 
 321 |     1. **Режим сумісності:** Вказує браузеру використовувати стандартний режим (standards mode), а не режим сумісності (quirks mode).
 322 |     2. **Правильний рендеринг:** Забезпечує коректне відображення сторінки відповідно до специфікації обраної версії HTML.
 323 | 
 324 | У HTML5 використовується коротка декларація:
 325 | 
 326 | ```
 327 | <!DOCTYPE html>
 328 | ```
 329 | 
 330 | Це мінімізує плутанину і є стандартом для сучасних веб-додатків.
 331 | 
 332 | [MDN link](https://developer.mozilla.org/en-US/docs/Glossary/Doctype)
 333 | 
 334 | </details>
 335 | <!-- ========================================== -->
 336 | <details>
 337 | <summary> <span style="color:#368bed">11. Яка поточна версія HTML?</span></summary>
 338 | 
 339 | Поточна версія `HTML` — це `HTML5.2`. Вона була офіційно рекомендована W3C у грудні 2017 року.
 340 | HTML продовжує еволюціонувати, але HTML5.2 залишається основою сучасної розробки.
 341 | 
 342 | [Wiki link](https://uk.wikipedia.org/wiki/HTML5)
 343 | 
 344 | </details>
 345 | <!-- ========================================== -->
 346 | <details>
 347 | <summary> <span style="color:#368bed">12. У чому різниця між елементами &lt;div&gt; і &lt;span&gt;?</span></summary>
 348 | 
 349 | Елементи `<div>` і `<span>` в HTML використовуються для структуризації та стилізації веб-контенту, але мають різні характеристики і призначення.
 350 | 
 351 | - `<div>` — є блочним елементом. Це означає, що він завжди починається з нового рядка і займає всю ширину доступного простору. Його зазвичай використовують для групування великих частин контенту, таких як кілька абзаців або зображення з підписами
 352 | - `<span>` — є рядковим (інлайн) елементом. Він не починає новий рядок і займає лише ту ширину, яку потребує його вміст. Використовується для стилізації менших фрагментів тексту або елементів, таких як слова в реченні
 353 | 
 354 | [Wiki link](https://uk.wikipedia.org/wiki/Div_and_span)<br>
 355 | 
 356 | </details>
 357 | <!-- ========================================== -->
 358 | <details>
 359 | <summary> <span style="color:#368bed">13. Що таке порожні елементи в HTML?</span></summary>
 360 | 
 361 | Порожні елементи в HTML, також відомі як елементи без вмісту або самозакриваючі елементи, — це елементи, які не мають внутрішнього вмісту і не потребують закриваючого тегу. Вони використовуються для вставки специфічних функцій або вмісту на веб-сторінці без необхідності оточувати їх текстом чи іншими елементами.
 362 | 
 363 | ### Основні характеристики порожніх елементів
 364 | 
 365 | 1. Відсутність вмісту: Порожні елементи не містять тексту чи інших тегів між відкриваючим і закриваючим тегами. Наприклад, тег <br> використовується для вставки розриву рядка, а <img> — для вставки зображення.
 366 | 2. Закриваючий тег: У HTML5 порожні елементи можуть бути представлені без закриваючого тегу, але їх можна також закривати за допомогою слешу (/>). Наприклад:
 367 | 3. Приклади порожніх елементів: Основні приклади включають:
 368 | 
 369 | - `<img>` — для зображень.
 370 | - `<br>` — для розриву рядка.
 371 | - `<input>` — для елементів форми.
 372 | - `<hr>` — для горизонтальної лінії.
 373 |   Ці елементи не містять тексту чи інших елементів всередині.
 374 | 
 375 | 4. Семантичне значення: Хоча порожні елементи не містять контенту, вони виконують важливі функції у структурі HTML-документа, забезпечуючи правильну семантику та функціональність сторінки
 376 | 
 377 | Порожні елементи є важливими для створення структурованих і функціональних веб-сторінок, оскільки вони дозволяють інтегрувати різноманітний вміст без зайвих тегів або контенту.
 378 | 
 379 | </details>
 380 | <!-- ========================================== -->
 381 | <details>
 382 | <summary> <span style="color:#368bed">14. Яке призначення атрибута alt в HTML?</span></summary>
 383 | 
 384 | - Атрибут `alt` використовується для надання текстового опису зображення, якщо зображення не може бути відображене. Це також важливо для доступності, адже екранні читалки можуть озвучувати цей текст для людей з порушеннями зору.
 385 | 
 386 | [css.in.ua link](https://css.in.ua/html/tag/img/alt)<br>
 387 | [Attributes list on MDN link](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes)
 388 | 
 389 | </details>
 390 | <!-- ========================================== -->
 391 | <details>
 392 | <summary><span style="color:#368bed">15. Навіщо використовується тег &lt;label&gt;?</span></summary>
 393 | 
 394 | Тег `<label>` використовується для асоціації тексту з елементом форми, щоб зробити його доступним для користувачів. Це полегшує взаємодію з формами, особливо для користувачів з обмеженими можливостями.
 395 | 
 396 | ```
 397 | <form>
 398 |   <label for="username">Ім'я користувача:</label>
 399 |   <input type="text" id="username" name="username">
 400 | 
 401 |   <label for="password">Пароль:</label>
 402 |   <input type="password" id="password" name="password">
 403 | 
 404 |   <button type="submit">Відправити</button>
 405 | </form>
 406 | ```
 407 | 
 408 | </details>
 409 | <!-- ========================================== -->
 410 | <details>
 411 | <summary><span style="color:#368bed">16. Що таке &lt;marquee&gt; у HTML?</span></summary>
 412 | 
 413 | Тег `<marquee>` в HTML використовується для створення прокручуваного тексту або елементів на веб-сторінці, відомого як "біжуча строка". Цей елемент дозволяє переміщати текст або зображення в горизонтальному або вертикальному напрямку.
 414 | 
 415 | ### Основні характеристики
 416 | 
 417 | - **Напрямок прокрутки:** За замовчуванням текст рухається зліва направо, але можна змінити напрямок на праворуч, вгору чи вниз за допомогою атрибута `direction`.
 418 | - **Тип поведінки:** Атрибут `behavior` визначає, як буде відбуватися прокрутка:
 419 |   - **`scroll`**: текст постійно рухається в заданому напрямку.
 420 |   - **`slide`**: текст рухається до краю і зупиняється.
 421 |   - **`alternate`**: текст змінює напрямок при досягненні краю12.
 422 | 
 423 | ### Атрибути
 424 | 
 425 | Тег `<marquee>` має кілька атрибутів, які дозволяють налаштувати його вигляд і поведінку:
 426 | 
 427 | - **`bgcolor`**: задає колір фону.
 428 | - **`height`**: висота області прокрутки.
 429 | - **`width`**: ширина області прокрутки.
 430 | - **`loop`**: кількість повторів прокрутки (за замовчуванням — безкінечно).
 431 | - **`scrollamount`**: швидкість руху контенту (значення в пікселях).
 432 | - **`scrolldelay`**: затримка між рухами в мілісекундах13.
 433 | 
 434 | ### Приклад використання
 435 | 
 436 | Ось простий приклад використання тегу `<marquee>`:
 437 | 
 438 | ```
 439 | <marquee behavior="scroll" direction="left" bgcolor="#ffcc00" scrollamount="10">
 440 |     Це біжучий текст!
 441 | </marquee>
 442 | ```
 443 | 
 444 | ### Застарілість
 445 | 
 446 | Варто зазначити, що тег `<marquee>` вважається застарілим і не рекомендований для використання у сучасних веб-дизайнах. Багато розробників віддають перевагу CSS-анімаціям для досягнення подібного ефекту, оскільки це забезпечує кращу контрольованість і сумісність з новими стандартами HTML
 447 | 
 448 | [MDN link](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee)
 449 | 
 450 | </details>
 451 | <!-- ========================================== -->
 452 | <details>
 453 | <summary><span style="color:#368bed">17. Як відобразити таблицю на веб-сторінці HTML?</span></summary>
 454 | 
 455 | Щоб відобразити таблицю на веб-сторінці HTML, потрібно використовувати спеціальні теги для таблиць. Ось основні кроки та елементи для створення таблиці в HTML:
 456 | 
 457 | ### 1. Основні теги для таблиці
 458 | 
 459 | - **`<table>`**: Створює саму таблицю.
 460 | - **`<tr>`**: Означає рядок таблиці (table row).
 461 | - **`<th>`**: Означає заголовок таблиці (table header), використовується для створення заголовків стовпців.
 462 | - **`<td>`**: Означає клітинку таблиці (table data), використовується для введення даних у таблицю.
 463 | - **`<thead>`**, **`<tbody>`**, **`<tfoot>`**: Означають частини таблиці для заголовків, основного вмісту та підсумкових рядків відповідно.
 464 | 
 465 | ### 2. Приклад базової таблиці в HTML
 466 | 
 467 | ```
 468 | <table>
 469 |   <tr>
 470 |     <th>Заголовок 1</th>
 471 |     <th>Заголовок 2</th>
 472 |   </tr>
 473 |   <tr>
 474 |     <td>Дані 1</td>
 475 |     <td>Дані 2</td>
 476 |   </tr>
 477 |   <tr>
 478 |     <td>Дані 3</td>
 479 |     <td>Дані 4</td>
 480 |   </tr>
 481 | </table>
 482 | ```
 483 | 
 484 | [MDN link](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics)
 485 | 
 486 | </details>
 487 | <!-- ========================================== -->
 488 | <details>
 489 | <summary><span style="color:#368bed">18. Для чого використовуються теги &lt;sub&gt; та &lt;sup&gt;?</span></summary>
 490 | 
 491 | Теги `<sub>` і `<sup>` використовуються для відображення тексту у вигляді підрядкового (наприклад, для хімічних формул) або верхньорядкового (наприклад, для степенів) тексту.
 492 | 
 493 | ```
 494 | <p>H<sub>2</sub>O - вода</p> <!-- підрядковий текст -->
 495 | <p>x<sup>2</sup> - квадрат числа</p> <!-- верхньорядковий текст -->
 496 | ```
 497 | 
 498 | </details>
 499 | <!-- ========================================== -->
 500 | <details>
 501 | <summary><span style="color:#368bed">19. Як можна згрупувати опції всередині тегу &lt;select&gt;?</span></summary>
 502 | 
 503 | Опції всередині тегу `<select>` можна групувати за допомогою тегу `<optgroup>`.
 504 | 
 505 | **Приклад:**
 506 | 
 507 | ```
 508 | <select>
 509 |   <optgroup label="Фрукти">
 510 |     <option value="apple">Яблуко</option>
 511 |     <option value="orange">Апельсин</option>
 512 |   </optgroup>
 513 |   <optgroup label="Овочі">
 514 |     <option value="carrot">Морква</option>
 515 |     <option value="potato">Картопля</option>
 516 |   </optgroup>
 517 | </select>
 518 | ```
 519 | 
 520 | </details>
 521 | <!-- ========================================== -->
 522 | <details>
 523 | <summary> <span style="color:#368bed">20. Що таке семантичний HTML?</span></summary>
 524 | 
 525 | **Семантичний HTML** — це використання тега в HTML, який чітко визначає свою роль і значення в контексті документа. Це покращує доступність, SEO і підтримку коду.
 526 | 
 527 | Наприклад, замість простого використання `<div>` для створення заголовків або списків, використовуються спеціалізовані семантичні теги:
 528 | 
 529 | - `<header>` — для заголовку сторінки або розділу.
 530 | - `<footer>` — для футера.
 531 | - `<article>` — для самостійної одиниці контенту.
 532 | - `<section>` — для розділу, що містить тематичний вміст.
 533 | - `<nav>` — для навігаційних посилань.
 534 | - `<main>` — для основного вмісту сторінки.
 535 | 
 536 | Це допомагає пошуковим системам і екранним читалям правильно інтерпретувати вміст сторінки.
 537 | 
 538 | [MDN link](https://developer.mozilla.org/en-US/docs/Glossary/Semantics)
 539 | 
 540 | </details>
 541 | <!-- ========================================== -->
 542 | <details>
 543 | <summary><span style="color:#368bed">21. Які глобальні атрибути є в HTML?</span></summary>
 544 | 
 545 | **Глобальні атрибути** — це атрибути, які можна використовувати з будь-яким HTML-елементом, незалежно від його типу. Вони задають загальні властивості, такі як ідентифікатори, стилі, мова, напрямок тексту та інші.
 546 | 
 547 | Глобальні атрибути: `id`, `class`, `style`, `title`, `data-*`, `lang`, `dir`, `hidden`, `tabindex`, `accesskey`, `draggable`, `spellcheck`, `translate`.
 548 | 
 549 | </details>
 550 | <!-- ========================================== -->
 551 | <details>
 552 | <summary> <span style="color:#368bed">22. Як використовують атрибути class та id? Яка різниця між класами та ідентифікаторами?</span></summary>
 553 | 
 554 | Атрибути `class` та `id` в HTML використовуються для ідентифікації та стилізації елементів, але мають різні функції та обмеження.
 555 | 
 556 | ### Атрибут `id`
 557 | 
 558 | - Унікальність: Атрибут id призначений для унікальної ідентифікації елемента на сторінці. Це означає, що в одному HTML-документі не може бути більше одного елемента з однаковим значенням `id`.
 559 | - Використання: Зазвичай використовується для прив'язки стилів у CSS або для доступу до елемента в JavaScript за допомогою методу `getElementById()`.
 560 | 
 561 | ### Наприклад:
 562 | 
 563 | ```
 564 | <div id="header">Заголовок</div>
 565 | ```
 566 | 
 567 | ```css
 568 | #header {
 569 |   background-color: #f4f4f4;
 570 | }
 571 | ```
 572 | 
 573 | ### Атрибут `class`
 574 | 
 575 | - Множинність: Атрибут `class` дозволяє кільком елементам мати однакове значення класу. Це означає, що один і той же клас може бути застосований до багатьох елементів на сторінці.
 576 | - Використання: Використовується для групування стилів у CSS або для доступу до елементів у JavaScript через метод `getElementsByClassName()`.
 577 | 
 578 | ### Наприклад:
 579 | 
 580 | ```
 581 | <div class="city">Київ</div>
 582 | <div class="city">Львів</div>
 583 | ```
 584 | 
 585 | ```js
 586 | const cities = document.getElementsByClassName("city");
 587 | ```
 588 | 
 589 | ### Основні відмінності між `class` та `id`
 590 | 
 591 | | Характеристика         | Атрибут `id`             | Атрибут `class`                          |
 592 | | ---------------------- | ------------------------ | ---------------------------------------- |
 593 | | Унікальність           | Унікальний на сторінці   | Може бути спільним для кількох елементів |
 594 | | Використання           | Для конкретного елемента | Для групи елементів                      |
 595 | | Доступ у JS            | `getElementById()`       | `getElementsByClassName()`               |
 596 | | Чутливість до регістру | Так                      | Так                                      |
 597 | 
 598 | Різниця:
 599 | 
 600 | - `class` може бути присвоєний кільком елементам, в той час як id має бути унікальним на сторінці (один елемент з таким ідентифікатором).
 601 | - `id` має вищий пріоритет у CSS, якщо використовувати селектори з однаковою специфічністю.
 602 | 
 603 | Підсумок:
 604 | 
 605 | - `class`: для групування елементів з однаковими стилями або функціональністю.
 606 | - `id`: для унікальної ідентифікації елемента на сторінці.
 607 | 
 608 | [w3schoolsua link](https://w3schoolsua.github.io/html/html_id.html#gsc.tab=0)
 609 | 
 610 | </details>
 611 | <!-- ========================================== -->
 612 | <details>
 613 | <summary> <span style="color:#368bed">23. Що таке внутрішні та зовнішні гіперпосилання і які вони мають атрибути?</span></summary>
 614 | 
 615 | Внутрішні та зовнішні гіперпосилання в HTML є важливими елементами для навігації веб-сторінок. Ось їх визначення та основні атрибути.
 616 | 
 617 | **Внутрішні гіперпосилання** — це посилання, яке веде на іншу частину тієї ж веб-сторінки або на іншу сторінку того ж сайту.
 618 | 
 619 | **Зовнішні гіперпосилання** — це посилання, яке веде на інший сайт або домен.
 620 | 
 621 | ### Атрибути для обох типів посилань:
 622 | 
 623 | 1.  `href`: Основний атрибут, який вказує на адресу ресурсу (URL).
 624 | 
 625 | - Для внутрішнього посилання: `<a href="#section1">Перейти до розділу 1</a>`
 626 | - Для зовнішнього посилання: `<a href="https://example.com">Перейти на зовнішній сайт</a>`
 627 | 
 628 | 2.  `target`: Визначає, де буде відкриватися посилання.
 629 | 
 630 | - `_self` — відкривається в тому ж вікні або вкладці (за замовчуванням).
 631 | - `_blank` — відкривається в новій вкладці або вікні.
 632 | - Приклад для відкриття в новій вкладці: `<a href="https://example.com" target="_blank">Відкрити в новій вкладці</a>`
 633 | 
 634 | 3. rel: Визначає відносини між поточною сторінкою та сторінкою, на яку веде посилання. Для зовнішніх посилань часто використовують:
 635 | 
 636 | - `rel="noopener"`: запобігає передаванню інформації про джерело.
 637 | - `rel="noreferrer"`: запобігає передаванню реферера.
 638 | - Наприклад: `<a href="https://example.com" target="_blank" rel="noopener noreferrer">Зовнішнє посилання</a>`
 639 | 
 640 | [Wiki link](https://uk.wikipedia.org/wiki/Гіперпосилання)
 641 | 
 642 | </details>
 643 | <!-- ========================================== -->
 644 | <details>
 645 | <summary><span style="color:#368bed">24. Як створити посилання на різні розділи на одній веб-сторінці HTML?</span></summary>
 646 | 
 647 | Щоб створити посилання на різні секції в межах однієї HTML-сторінки, використовуються ідентифікатори (id) елементів і посилання з символом #.
 648 | 
 649 | Приклад:
 650 | 
 651 | 1. Додайте ідентифікатори до секцій:
 652 | 
 653 | ```
 654 | <h1 id="section1">Секція 1</h1>
 655 | <p>Тут текст секції 1.</p>
 656 | 
 657 | <h1 id="section2">Секція 2</h1>
 658 | <p>Тут текст секції 2.</p>
 659 | ```
 660 | 
 661 | 2. Створіть посилання, які вказують на ці секції:
 662 | 
 663 | ```
 664 | <a href="#section1">Перейти до Секції 1</a>
 665 | <a href="#section2">Перейти до Секції 2</a>
 666 | ```
 667 | 
 668 | Клік на посилання прокрутить сторінку до відповідного елемента з вказаним `id`.
 669 | 
 670 | </details>
 671 | <!-- ========================================== -->
 672 | <details>
 673 | <summary><span style="color:#368bed">25. Чи мають елементи HTML власні дефолтні специфічні стилі?</span></summary>
 674 | 
 675 | Так, кожен HTML-елемент має дефолтні стилі, які задаються браузером (user agent styles). Наприклад:
 676 | 
 677 | `<h1>` — великий жирний текст.
 678 | `<ul>` і `<ol>` — відступи та маркери/нумерація.
 679 | `<a>` — синій текст з підкресленням.
 680 | `<button>` — стандартне оформлення кнопки.
 681 | `<input>` — базова рамка та відступи.
 682 | 
 683 | </details>
 684 | <!-- ========================================== -->
 685 | <details>
 686 | <summary><span style="color:#368bed">26. Як семантично правильно зверстати зображення з підписом?</span></summary>
 687 | 
 688 | Використовуйте тег `<figure>` для обгортки зображення і `<figcaption>` для підпису.
 689 | 
 690 | ```
 691 | <figure>
 692 |   <img src="example.jpg" alt="Опис зображення">
 693 |   <figcaption>Підпис до зображення</figcaption>
 694 | </figure>
 695 | ```
 696 | 
 697 | **Пояснення:**
 698 | 
 699 | - `<figure>` — елемент, який містить зображення та його підпис. Це семантичний контейнер, який допомагає групі вмісту (наприклад, зображення, діаграми, таблиці) бути структурованим та зрозумілим.
 700 | 
 701 | - `<img>` - сам елемент зображення. Важливо завжди використовувати атрибут alt, який описує зображення. Це необхідно для доступності, щоб люди з вадами зору могли зрозуміти, що зображено.
 702 | 
 703 | - `<figcaption>` — елемент підпису, який пояснює зображення. Він може бути розташований як до, так і після тега `<img>`, але найчастіше ставлять його після зображення для кращої читальності.
 704 | 
 705 | Додатково:
 706 | Якщо картинка має декоративний характер (наприклад, фонова або декоративна іконка), атрибут alt можна залишити порожнім: `<img src="image.jpg" alt="">`.
 707 | Використання семантичних елементів покращує доступність та полегшує індексацію сторінки пошуковими системами.
 708 | 
 709 | </details>
 710 | <!-- ========================================== -->
 711 | <details>
 712 | <summary><span style="color:#368bed">27. Різниця між кнопкою та посиланням у HTML?</span></summary>
 713 | 
 714 | - **Кнопка** (`<button>`) використовується для виконання дії на сторінці, наприклад, для відправки форми або запуску скрипта.
 715 | - **Посилання** (`<a>`) використовується для навігації до іншої сторінки або ресурсу.
 716 | </details>
 717 | <!-- ========================================== -->
 718 | <details>
 719 | <summary><span style="color:#368bed">28. Чим відрізняється &lt;article&gt; від &lt;section&gt;?</span></summary>
 720 | 
 721 | - **`<article>`** використовується для незалежних, самодостатніх блоків контенту, які можуть бути повторно використані чи розповсюджені, наприклад, статті, блог-пости, новини.
 722 | 
 723 | - **`<section>`** — це частина документа, яка організовує контент за темами чи розділами, але не має значення без контексту всього документа.
 724 | </details>
 725 | <!-- ========================================== -->
 726 | <details>
 727 | <summary><span style="color:#368bed">29. Що таке категорії контенту в HTML5?</span></summary>
 728 | 
 729 | Категорії контенту в HTML5 визначають типи елементів і їх роль у документі. Основні категорії:
 730 | 
 731 | - **Metadata content** (метадані)
 732 | - **Flow content** (потоковий контент)
 733 | - **Sectioning content** (секційний контент)
 734 | - **Heading content** (заголовки)
 735 | - **Phrasing content** (фразовий контент)
 736 | - **Embedded content** (вбудований контент)
 737 | - **Interactive content** (інтерактивний контент).
 738 | </details>
 739 | <!-- ========================================== -->
 740 | <details>
 741 | 
 742 | <summary> <span style="color:#368bed">30. Що таке data-атрибути, в яких випадках їх використовуєте?</span></summary>
 743 | 
 744 | **Data-атрибути** — це спеціальні атрибути в HTML, які дозволяють зберігати додаткову інформацію про елементи без необхідності використовувати нестандартні атрибути. Вони починаються з префікса data-, після якого може слідувати будь-яке слово, що описує дані.
 745 | 
 746 | ### Основні характеристики data-атрибутів
 747 | 
 748 | **1. Синтаксис:**
 749 | Data-атрибут повинен починатися з `data-`, після чого йде назва атрибута, яка може містити літери, цифри та дефіси. Наприклад:
 750 | 
 751 | ```
 752 | <div data-user-id="12345"></div>
 753 | ```
 754 | 
 755 | **2. Зберігання даних:**
 756 | Data-атрибути використовуються для зберігання інформації, яка не відображається на екрані, але може бути корисною для скриптів або стилів. Це дозволяє розширити функціональність HTML-елементів без порушення стандартів.
 757 | 
 758 | **3. Доступ через JavaScript:**
 759 | Для доступу до значень data-атрибутів у JavaScript можна використовувати об'єкт `dataset`. Наприклад:
 760 | 
 761 | ```
 762 | const userId = document.querySelector('div').dataset.userId; // "12345"
 763 | ```
 764 | 
 765 | ### Використання в CSS:
 766 | 
 767 | Data-атрибути також можуть бути використані в CSS для стилізації елементів на основі їх значень. Наприклад:
 768 | 
 769 | ```css
 770 | div[data-user-id="12345"] {
 771 |   background-color: yellow;
 772 | }
 773 | ```
 774 | 
 775 | ### Коли використовувати data-атрибути
 776 | 
 777 | - Зберігання метаданих: Коли потрібно зберігати інформацію про елемент, яка не є частиною видимого контенту (наприклад, ідентифікатори, статуси).
 778 | - Взаємодія з JavaScript: Коли дані потрібні для обробки подій або маніпуляцій на сторінці.
 779 | - Стилізація: Коли потрібно змінювати стиль елемента в залежності від його атрибутів.
 780 |   Data-атрибути є потужним інструментом для веб-розробників, оскільки вони дозволяють зберігати додаткову інформацію без шкоди для структури документа і забезпечують легкий доступ до цих даних через JavaScript та CSS.
 781 | 
 782 | [MDN link](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_HTML_problems/Use_data_attributes)
 783 | [MDN link](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*)
 784 | 
 785 | </details>
 786 | <!-- ========================================== -->
 787 | <details>
 788 | <summary> <span style="color:#368bed">31. Як створити форму в HTML і забезпечити її валідацію?</span></summary>
 789 | 
 790 | Створення форм в HTML є важливим аспектом веб-розробки, що дозволяє користувачам вводити та надсилати дані. Для забезпечення коректності введених даних існують різні методи валідації форм. Розглянемо, як створити базову форму та реалізувати її валідацію.
 791 | 
 792 | ## Створення форми в HTML
 793 | 
 794 | ### Основна структура
 795 | 
 796 | Форма в HTML визначається за допомогою тегу `<form>`, який містить інші елементи, такі як поля введення, кнопки тощо. Основні атрибути тега `<form>`:
 797 | 
 798 | - **action**: URL-адреса, куди будуть надсилатися дані форми.
 799 | - **method**: метод надсилання даних (зазвичай GET або POST).
 800 | 
 801 | ### Приклад базової форми
 802 | 
 803 | ```
 804 | <form action="/submit" method="post">
 805 |     <label for="username">Ім'я користувача:</label>
 806 |     <input type="text" id="username" name="username" required>
 807 | 
 808 |     <label for="password">Пароль:</label>
 809 |     <input type="password" id="password" name="password" required>
 810 | 
 811 |     <input type="submit" value="Відправити">
 812 | </form>
 813 | ```
 814 | 
 815 | У цьому прикладі форма містить два поля: для введення імені користувача та пароля. Атрибут required забезпечує, що ці поля повинні бути заповнені перед відправкою.
 816 | 
 817 | ### Валідація форм
 818 | 
 819 | Валідація форм може бути реалізована як на стороні клієнта (в браузері), так і на стороні сервера.
 820 | 
 821 | **1. Валідація на стороні клієнта**
 822 | 
 823 | HTML5 пропонує вбудовану валідацію через атрибути, такі як `required`, `minlength`, `maxlength`, `pattern` тощо.
 824 | 
 825 | Наприклад:
 826 | 
 827 | ```
 828 | <input type="email" id="email" name="email" required>
 829 | ```
 830 | 
 831 | Цей код забезпечує перевірку, що введене значення є дійсною електронною адресою.
 832 | 
 833 | **2. Валідація за допомогою JavaScript**
 834 | 
 835 | Для більш складних перевірок можна використовувати JavaScript.
 836 | 
 837 | Наприклад:
 838 | 
 839 | ```js
 840 | <form id="myForm">
 841 |     <label for="age">Вік:</label>
 842 |     <input type="number" id="age" name="age">
 843 |     <input type="submit" value="Відправити">
 844 | </form>
 845 | 
 846 | <script>
 847 | document.getElementById("myForm").onsubmit = function() {
 848 |     var age = document.getElementById("age").value;
 849 |     if (age < 18) {
 850 |         alert("Вам повинно бути не менше 18 років.");
 851 |         return false; // Зупиняє відправку форми
 852 |     }
 853 | };
 854 | </script>
 855 | 
 856 | ```
 857 | 
 858 | У цьому прикладі при спробі відправити форму перевіряється, чи вік користувача не менше 18 років.
 859 | 
 860 | **3. Валідація на стороні сервера**
 861 | 
 862 | Незалежно від того, чи проводиться валідація на клієнтській стороні, важливо також перевіряти дані на сервері для запобігання зловживанням та помилкам.
 863 | 
 864 | ### Висновок
 865 | 
 866 | Створення форм у HTML є простим процесом, який можна доповнити різними методами валідації для забезпечення коректності введених даних. Використовуючи атрибути HTML5 та JavaScript, ви можете створити зручні та безпечні форми для збору інформації від користувачів.
 867 | 
 868 | [freecodecamp link](https://www.freecodecamp.org/ukrainian/news/formy-v-html-yak-stvoryty-bazovi-formy-za-dopomohoyu-html/)
 869 | 
 870 | </details>
 871 | <!-- ========================================== -->
 872 | <details>
 873 | <summary> <span style="color:#368bed">32. Які методи відправки даних форми ви знаєте?</span></summary>
 874 | 
 875 | Існує кілька основних методів відправки даних форми в HTML, які визначають, як дані будуть передані на сервер. Основні з них — це GET та POST.
 876 | 
 877 | **1. Метод `GET`**
 878 | 
 879 | Метод `GET` передає дані через URL-адресу. Усі параметри запиту додаються до URL, що робить їх видимими в адресному рядку браузера. Це підходить для запитів, які не потребують конфіденційності, наприклад, для форм пошуку.
 880 | 
 881 | Приклад:
 882 | 
 883 | ```
 884 | <form action="http://example.com/search" method="get">
 885 |     <input type="text" name="query" placeholder="Пошук...">
 886 |     <input type="submit" value="Знайти">
 887 | </form>
 888 | 
 889 | ```
 890 | 
 891 | _Переваги:_
 892 | 
 893 | - Простота використання.
 894 | - Легкість у кешуванні запитів.
 895 | 
 896 | _Недоліки:_
 897 | 
 898 | - Обмеження на кількість переданих даних (залежить від браузера).
 899 | - Дані видимі в адресному рядку, що небажано для конфіденційної інформації.
 900 | 
 901 | **2. Метод `POST`**
 902 | 
 903 | Метод `POST` передає дані в тілі HTTP-запиту, що робить їх невидимими для користувача. Цей метод підходить для форм, які містять конфіденційну інформацію (наприклад, паролі) або великі обсяги даних.
 904 | 
 905 | Приклад:
 906 | 
 907 | ```
 908 | <form action="http://example.com/submit" method="post">
 909 |     <input type="text" name="username" placeholder="Ім'я користувача" required>
 910 |     <input type="password" name="password" placeholder="Пароль" required>
 911 |     <input type="submit" value="Увійти">
 912 | </form>
 913 | 
 914 | ```
 915 | 
 916 | _Переваги:_
 917 | 
 918 | - Більше обмежень на обсяг переданих даних.
 919 | - Дані не відображаються в адресному рядку.
 920 | 
 921 | _Недоліки:_
 922 | 
 923 | - Менш зручний для кешування.
 924 | 
 925 | **3. Використання `FormData`**
 926 | 
 927 | Об'єкт `FormData` дозволяє збирати дані з форми та надсилати їх за допомогою JavaScript (наприклад, через `fetch`). Це особливо корисно для асинхронних запитів.
 928 | 
 929 | _Приклад:_
 930 | 
 931 | ```
 932 | <form id="myForm">
 933 |     <input type="text" name="name" value="John">
 934 |     <input type="submit">
 935 | </form>
 936 | 
 937 | <script>
 938 | document.getElementById('myForm').onsubmit = async (e) => {
 939 |     e.preventDefault();
 940 |     let formData = new FormData(e.target);
 941 |     let response = await fetch('/submit', {
 942 |         method: 'POST',
 943 |         body: formData
 944 |     });
 945 |     let result = await response.json();
 946 |     alert(result.message);
 947 | };
 948 | </script>
 949 | ```
 950 | 
 951 | _Переваги:_
 952 | 
 953 | - Можливість надсилати файли разом з іншими даними.
 954 | - Гнучкість у роботі з формами без перезавантаження сторінки.
 955 | 
 956 | ### Висновок
 957 | 
 958 | Основними методами відправки даних форм є GET і POST, кожен з яких має свої переваги і недоліки. Для більш складних сценаріїв можна використовувати об'єкт FormData, що забезпечує гнучкість і можливість асинхронного надсилання даних.
 959 | 
 960 | [MDN link](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data)
 961 | 
 962 | </details>
 963 | <!-- ========================================== -->
 964 | <details>
 965 | <summary><span style="color:#368bed">33. Основні атрибути HTML-форм? Як вони впливають на надсилання даних з веб-сторінки?</span></summary>
 966 | 
 967 | ### Основні атрибути HTML-форм:
 968 | 
 969 | - **action:** Визначає URL, куди відправляються дані форми.
 970 | - **method:** Визначає метод HTTP для відправки даних (GET або POST).
 971 | - **enctype:** Вказує тип кодування при відправці форми (наприклад, multipart/form-data для завантаження файлів).
 972 | - **target:** Визначає, де відкриється результат після відправки форми (наприклад, `_blank` для нового вікна).
 973 | - **name:** Дає ім'я формі для ідентифікації в JavaScript або під час відправки даних.
 974 | 
 975 | Ці атрибути визначають, як дані форми будуть оброблені, куди відправлені та як їх передавати (наприклад, безпечно через POST чи через URL з GET).
 976 | 
 977 | Приклад HTML-форм з основними атрибутами:
 978 | 
 979 | ```
 980 | <form action="/submit" method="POST" enctype="multipart/form-data" target="_blank">
 981 |   <label for="username">Ім'я користувача:</label>
 982 |   <input type="text" id="username" name="username" required>
 983 | 
 984 |   <label for="file">Файл:</label>
 985 |   <input type="file" id="file" name="file">
 986 | 
 987 |   <button type="submit">Відправити</button>
 988 | </form>
 989 | ```
 990 | 
 991 | </details>
 992 | <!-- ========================================== -->
 993 | <details>
 994 | <summary> <span style="color:#368bed">34. Що таке iframe і для чого його використовують?</span></summary>
 995 | 
 996 | **iFrame (inline frame)** — це HTML-елемент, який дозволяє вбудовувати один HTML-документ у межах іншого. Це створює прямокутну область на веб-сторінці, в якій може відображатися вміст з іншого джерела, включаючи веб-сторінки, відео, карти та інші інтерактивні елементи.
 997 | 
 998 | ## Використання iFrame
 999 | 
1000 | ### iFrame має кілька основних застосувань:
1001 | 
1002 | - **Вбудовування зовнішнього контенту:** За допомогою iFrame можна вставляти контент з інших веб-сайтів, наприклад, новинні стрічки, соціальні мережі або інтерактивні елементи. Це дозволяє збагачувати хост-сайт динамічним контентом без складної інтеграції.
1003 | - **Інтеграція мультимедіа:** iFrame часто використовується для вбудовування відео з платформ, таких як YouTube або Vimeo. Це дозволяє користувачам переглядати відео безпосередньо на сторінці без необхідності переходити на інший сайт.
1004 | - **Відображення карт:** Наприклад, Google Maps можна вбудувати на сайт за допомогою iFrame, що дозволяє відвідувачам бачити місцезнаходження компанії безпосередньо на сторінці.
1005 | - **Створення "сайту всередині сайту":** iFrame може використовуватися для вбудовування інших веб-сайтів або мікросайтів, дозволяючи користувачам переміщатися по них без виходу з основної сторінки.
1006 | - **Ізоляція контенту:** Розробники можуть використовувати iFrame для ізоляції контенту, який може поводитися по-різному в різних браузерах. Це може бути корисно для тимчасових рішень під час розробки постійних.
1007 | 
1008 | [MDN link](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)
1009 | [MDN Embedding link](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/General_embedding_technologies)
1010 | 
1011 | </details>
1012 | <!-- ========================================== -->
1013 | <details>
1014 | <summary><span style="color:#368bed">35. Що таке елемент &lt;canvas&gt;? І для чого він використовується?</span></summary>
1015 | 
1016 | Елемент `<canvas>` — це контейнер для малювання графіки за допомогою JavaScript.
1017 | 
1018 | **Призначення:**
1019 | 
1020 | - Створення 2D-графіки (малювання ліній, фігур).
1021 | - Анімація.
1022 | - Візуалізація даних (графіки, діаграми).
1023 | - Обробка зображень.
1024 | - Рендеринг ігор або інтерактивних ефектів.
1025 | </details>
1026 | <!-- ========================================== -->
1027 | <details>
1028 | <summary><span style="color:#368bed">36. Різниця між &lt;canvas&gt; та &lt;svg&gt;? У яких випадках краще використовувати &lt;canvas&gt;, а в яких &lt;svg&gt;?</span></summary>
1029 | 
1030 | **Різниця:**
1031 | 
1032 | **1. `<canvas>`:**
1033 | 
1034 | - Растрова графіка.
1035 | - Малюнок оновлюється пікселями.
1036 | - Підходить для анімацій, ігор, візуалізацій із високою частотою оновлення.
1037 | 
1038 | **2. `<svg>`:**
1039 | 
1040 | - Векторна графіка.
1041 | - Заснована на XML, дозволяє працювати з окремими елементами.
1042 | - Підходить для статичних зображень, діаграм, ікон.
1043 | 
1044 | **Вибір:**
1045 | 
1046 | Використовуйте `<canvas>`, якщо потрібна швидкодіюча динамічна графіка (графіки, ігри).
1047 | Використовуйте `<svg>`, якщо важливі чіткість при масштабуванні та інтерактивність окремих елементів.
1048 | 
1049 | ### `<canvas>`
1050 | 
1051 | **Плюси:**
1052 | 
1053 | - Гнучкість: можна малювати будь-які графічні елементи.
1054 | - Висока швидкість при великій кількості елементів.
1055 | - Підходить для анімацій та ігор.
1056 | 
1057 | **Мінуси:**
1058 | 
1059 | - Векторне масштабування неможливе.
1060 | - Важче маніпулювати окремими елементами після їх малювання.
1061 | - Потрібен JavaScript для малювання.
1062 | 
1063 | ### `<svg>`
1064 | 
1065 | **Плюси:**
1066 | 
1067 | - Векторна графіка: масштабування без втрати якості.
1068 | - Легко редагувати елементи після малювання.
1069 | - Підтримка анімацій через CSS та SMIL.
1070 | 
1071 | **Мінуси:**
1072 | 
1073 | - Менша продуктивність при великій кількості елементів.
1074 | - Не так гнучко, як canvas для складних анімацій або ігор.
1075 | </details>
1076 | <!-- ========================================== -->
1077 | <details>
1078 | <summary> <span style="color:#368bed">37. Що ви знаєте про SVG? Які є варіанти додавання SVG на сторінки сайту? Чим вони відрізняються?</span></summary>
1079 | 
1080 | **SVG (Scalable Vector Graphics)** — це формат векторної графіки, який дозволяє створювати двомірні зображення за допомогою XML. Існує кілька способів додавання SVG на веб-сторінки, кожен з яких має свої особливості.
1081 | 
1082 | ### Варіанти додавання SVG на веб-сторінки
1083 | 
1084 | **1. Використання тегу `<img>`**
1085 | 
1086 | Цей метод є найпростішим способом вставлення SVG. Просто вкажіть шлях до файлу SVG у атрибуті src:
1087 | 
1088 | ```
1089 | <img src="my-image.svg" alt="Опис зображення">
1090 | ```
1091 | 
1092 | _Переваги:_
1093 | 
1094 | - Легкість використання.
1095 | - Підтримка всіх браузерів.
1096 | 
1097 | _Недоліки:_
1098 | 
1099 | - Обмежена можливість стилізації через CSS.
1100 | 
1101 | **2. Вбудовування SVG через тег `<svg>`**
1102 | 
1103 | Ви можете вставити код SVG безпосередньо в HTML-документ:
1104 | 
1105 | ```
1106 | <svg width="200" height="200">
1107 |     <circle cx="100" cy="100" r="80" fill="green" />
1108 | </svg>
1109 | 
1110 | ```
1111 | 
1112 | _Переваги:_
1113 | 
1114 | - Можливість стилізації через CSS.
1115 | - Легкий доступ до елементів SVG для маніпуляцій за допомогою JavaScript.
1116 | 
1117 | _Недоліки:_
1118 | 
1119 | - Збільшення розміру HTML-документа, якщо SVG великий.
1120 | 
1121 | **3. Використання тегу `<object>`**
1122 | 
1123 | Цей метод дозволяє вставити SVG як об'єкт:
1124 | 
1125 | ```
1126 | <object data="my-image.svg" type="image/svg+xml" width="300" height="300"></object>
1127 | ```
1128 | 
1129 | _Переваги:_
1130 | 
1131 | - Підтримує інтерактивність SVG.
1132 | - Можливість завантаження SVG з інших доменів.
1133 |   Недоліки:
1134 | - Може не підтримуватися в деяких старих браузерах
1135 | 
1136 | **4. Використання тегу `<iframe>`**
1137 | 
1138 | SVG можна також вставити через iframe:
1139 | 
1140 | ```
1141 | <iframe src="my-image.svg" width="300" height="300"></iframe>
1142 | ```
1143 | 
1144 | _Переваги:_
1145 | 
1146 | - Ізоляція контенту, що може бути корисним для безпеки.
1147 | 
1148 | _Недоліки:_
1149 | 
1150 | - Обмежена можливість взаємодії з CSS і JavaScript на сторінці.
1151 | 
1152 | **5. Використання псевдоелементів `::before` або `::after`**
1153 | 
1154 | SVG можна вставити в CSS через властивість `content`:
1155 | 
1156 | ```css
1157 | .element::before {
1158 |   content: url("my-image.svg");
1159 | }
1160 | ```
1161 | 
1162 | _Переваги:_
1163 | 
1164 | - Додає графіку без зміни HTML-коду.
1165 |   Недоліки:
1166 | - Обмежена можливість взаємодії та стилізації
1167 | 
1168 | _Висновок_
1169 | 
1170 | Кожен метод додавання SVG має свої переваги та недоліки. Вибір підходящого способу залежить від конкретних потреб проекту. Вбудовування SVG через тег `<svg>` забезпечує найбільшу гнучкість у стилізації та інтерактивності, тоді як використання `<img>` є найпростішим способом для статичних зображень.
1171 | 
1172 | [freecodecamp link](https://www.freecodecamp.org/ukrainian/news/yak-vykorystovuvaty-zobrazhennya-svg-u-css-ta-html-tutorial-dlya-pochatkivtsiv/)<br>
1173 | [MDN link](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial)
1174 | 
1175 | </details>
1176 | <!-- ========================================== -->
1177 | <details>
1178 | <summary><span style="color:#368bed">38. Що таке елемент &lt;output&gt; у HTML5?</span></summary>
1179 | 
1180 | Елемент `<output>` в HTML5 використовується для відображення результату обчислень або взаємодії з формами. Зазвичай використовується для відображення значень, отриманих після введення даних у форму або виконання JavaScript.
1181 | 
1182 | </details>
1183 | <!-- ========================================== -->
1184 | <details>
1185 | <summary><span style="color:#368bed">39. Для чого використовується елемент  &lt;datalist&gt;?</span></summary>
1186 | 
1187 | Елемент <datalist> використовується для створення списку варіантів, які можна вибрати в полі введення <input>.
1188 | 
1189 | ```
1190 | <input list="options" name="example">
1191 | <datalist id="options">
1192 |   <option value="Варіант 1">
1193 |   <option value="Варіант 2">
1194 |   <option value="Варіант 3">
1195 | </datalist>
1196 | ```
1197 | 
1198 | </details>
1199 | <!-- ========================================== -->
1200 | <details>
1201 | <summary><span style="color:#368bed">40. Розкажіть про meta-тег із name="viewport"?</span></summary>
1202 | 
1203 | Мета-тег `<meta name="viewport">` використовується для управління масштабуванням і відображенням сторінки на мобільних пристроях.
1204 | 
1205 | ```
1206 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
1207 | ```
1208 | 
1209 | </details>
1210 | <!-- ========================================== -->
1211 | <details>
1212 | <summary><span style="color:#368bed">41. Що таке ApplicationCache в HTML5?</span></summary>
1213 | 
1214 | **`ApplicationCache`** в HTML5 — це механізм для офлайн-доступу до веб-додатків. Він дозволяє зберігати ресурси веб-сторінки (HTML, CSS, JavaScript, зображення) в кеші браузера, що дає змогу користувачам працювати з додатком без інтернет-з’єднання.
1215 | 
1216 | Відповідно до специфікації HTML5, цей механізм був застарілий і замінений новими API, такими як **Service Workers**.
1217 | 
1218 | </details>
1219 | <!-- ========================================== -->
1220 | <details>
1221 | <summary><span style="color:#368bed">42. Що таке srcset? Як працює srcset?</span></summary>
1222 | 
1223 | **`srcset`** — це атрибут, який дозволяє браузеру вибирати найбільш підходящий варіант зображення в залежності від роздільної здатності екрана або ширини вікна.
1224 | 
1225 | Як працює: Вказує кілька варіантів зображень з різною роздільною здатністю або розмірами, і браузер вибирає найкращий залежно від умов. Наприклад:
1226 | 
1227 | ```
1228 | <img src="image.jpg" srcset="image-480w.jpg 480w, image-800w.jpg 800w" alt="example">
1229 | ```
1230 | 
1231 | </details>
1232 | <!-- ========================================== -->
1233 | <details>
1234 | <summary><span style="color:#368bed">43. Навіщо використовується елемент &lt;picture&gt;?</span></summary>
1235 | 
1236 | Елемент **`<picture>`** використовується для визначення різних варіантів зображень в залежності від умов, таких як розмір екрану або роздільна здатність. Це дозволяє вибирати найкраще зображення для конкретного пристрою.
1237 | 
1238 | </details>
1239 | <!-- ========================================== -->
1240 | <details>
1241 | <summary><span style="color:#368bed">44. Що таке властивість valueAsNumber?</span></summary>
1242 | 
1243 | Властивість `valueAsNumber` повертає значення елемента форми як число. Воно доступне для елементів, таких як `<input>` з типами `number`, `range` та іншими, де очікується числове введення. Якщо значення не число, властивість повертає `NaN`.
1244 | 
1245 | </details>
1246 | <!-- ========================================== -->
1247 | <details>
1248 | <summary><span style="color:#368bed">45. Навіщо використовується атрибут capture?</span></summary>
1249 | 
1250 | Атрибут capture використовується в елементах форми, таких як `<input type="file">`, для запуску камери або мікрофона замість вибору файлу з пам'яті пристрою. Це дозволяє користувачу безпосередньо зробити фото або записати аудіо.
1251 | 
1252 | Приклад використання атрибута `capture`:
1253 | 
1254 | ```
1255 | <form>
1256 |   <label for="camera">Зробити фото:</label>
1257 |   <input type="file" id="camera" name="camera" accept="image/*" capture="camera">
1258 | 
1259 |   <label for="audio">Записати звук:</label>
1260 |   <input type="file" id="audio" name="audio" accept="audio/*" capture="microphone">
1261 | 
1262 |   <button type="submit">Відправити</button>
1263 | </form>
1264 | ```
1265 | 
1266 | </details>
1267 | <!-- ========================================== -->
1268 | <details>
1269 | <summary><span style="color:#368bed">46. Для чого використовується атрибут decoding enterkeyhint novalidate inputmode pattern?</span></summary>
1270 | 
1271 | - `decoding`: Визначає, як браузер має обробляти зображення (необов'язкове).
1272 | - `enterkeyhint`: Дає браузеру підказку, що робити при натисканні Enter.
1273 | - `novalidate`: Вимикає валідацію форми при її відправці.
1274 | - `inputmode`: Вказує тип введення (наприклад, текст, телефон).
1275 | - `pattern`: Задає регулярний вираз для перевірки введеного значення.
1276 | 
1277 | ```
1278 | <form novalidate>
1279 |   <label for="email">Email:</label>
1280 |   <input type="email" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>
1281 | 
1282 |   <label for="phone">Phone:</label>
1283 |   <input type="tel" id="phone" name="phone" inputmode="tel" required>
1284 | 
1285 |   <label for="comments">Comments:</label>
1286 |   <textarea id="comments" name="comments" decoding="async"></textarea>
1287 | 
1288 |   <button type="submit" enterkeyhint="send">Submit</button>
1289 | </form>
1290 | ```
1291 | 
1292 | </details>
1293 | <!-- ========================================== -->
1294 | <details>
1295 | <summary><span style="color:#368bed">47. Що таке і навіщо потрібний атрибут rel="nofollow" у HTML?</span></summary>
1296 | 
1297 | Атрибут `rel="nofollow"` вказує пошуковим системам, що не потрібно враховувати дане посилання для оцінки рангу сторінки. Зазвичай використовується для запобігання передачі ваги SEO або для посилань, яким не можна довіряти, наприклад, в коментарях чи рекламних матеріалах.
1298 | 
1299 | Приклад використання атрибута rel="nofollow":
1300 | 
1301 | ```
1302 | <a href="https://example.com" rel="nofollow">Не довіряти цьому посиланню</a>
1303 | ```
1304 | 
1305 | У цьому випадку, пошукові системи не будуть враховувати це посилання при оцінці сторінки.
1306 | 
1307 | </details>
1308 | <!-- ========================================== -->
1309 | <details>
1310 | <summary><span style="color:#368bed">48. Як семантично правильно згорнути навігаційне меню?</span></summary>
1311 | 
1312 | Для семантично правильного верстання навігаційного меню використовується елемент `<nav>`, всередині якого знаходяться списки з посиланнями.
1313 | 
1314 | Приклад:
1315 | 
1316 | ```
1317 | <nav>
1318 |   <ul>
1319 |     <li><a href="#home">Головна</a></li>
1320 |     <li><a href="#about">Про нас</a></li>
1321 |     <li><a href="#services">Послуги</a></li>
1322 |     <li><a href="#contact">Контакти</a></li>
1323 |   </ul>
1324 | </nav>
1325 | ```
1326 | 
1327 | </details>
1328 | <!-- ========================================== -->
1329 | <details>
1330 | <summary><span style="color:#368bed">49. Способи покращення продуктивності веб-сторінки під час використання HTML?</span></summary>
1331 | 
1332 | ### 1. Використовувати атрибути `async` або `defer` для завантаження скриптів.
1333 | 
1334 | ```
1335 | <script src="script.js" async></script>
1336 | ```
1337 | 
1338 | ### 2. Мінімізувати HTML, CSS і JavaScript.
1339 | 
1340 | - Використовуйте інструменти на кшталт UglifyJS для JavaScript та CSS Minifier для CSS, щоб зменшити об'єм файлів.
1341 | 
1342 | ### 3. Використовувати кешування браузера.
1343 | 
1344 | - У файлі .htaccess можна додати правила кешування:
1345 | 
1346 | ```
1347 | <filesMatch "\.(html|css|js|jpg|jpeg|png|gif|svg)$">
1348 |   ExpiresActive On
1349 |   ExpiresDefault "access plus 1 year"
1350 | </filesMatch>
1351 | ```
1352 | 
1353 | ### 4. Зменшувати розмір зображень (наприклад, за допомогою формату WebP).
1354 | 
1355 | ```
1356 | <img src="image.webp" alt="Image" width="600" height="400">
1357 | ```
1358 | 
1359 | ### 5. Використовувати CDN для статичних файлів.
1360 | 
1361 | ```
1362 | <link rel="stylesheet" href="https://cdn.example.com/styles.css">
1363 | ```
1364 | 
1365 | ### 6. Використовувати сучасні елементи, як <picture> для адаптивних зображень.
1366 | 
1367 | ```
1368 | <picture>
1369 |   <source srcset="image-800w.jpg" media="(min-width: 800px)">
1370 |   <img src="image-400w.jpg" alt="Responsive image">
1371 | </picture>
1372 | ```
1373 | 
1374 | ### 7. Обмежити кількість HTTP-запитів.
1375 | 
1376 | - Об'єднати CSS та JavaScript файли: Замість декількох файлів CSS або JS об'єднайте їх в один, щоб зменшити кількість запитів.
1377 | 
1378 | ```
1379 | <link rel="stylesheet" href="styles.min.css">
1380 | <script src="scripts.min.js"></script>
1381 | ```
1382 | 
1383 | - Використовувати спрайти для зображень: Об'єднайте кілька малих зображень (наприклад, іконки) в один файл-спрайт, зменшуючи кількість запитів на зображення.
1384 | 
1385 | ```css
1386 | .icon {
1387 |   background-image: url("sprite.png");
1388 |   background-position: 0 0;
1389 |   width: 20px;
1390 |   height: 20px;
1391 | }
1392 | ```
1393 | 
1394 | - Інлайн-ресурси: Інлайнити невеликі CSS або JavaScript файли прямо в HTML, щоб уникнути окремих запитів.
1395 | 
1396 | ```
1397 | <style>
1398 |   body { background-color: #fff; }
1399 | </style>
1400 | <script>
1401 |   alert('Page Loaded');
1402 | </script>
1403 | ```
1404 | 
1405 | - Використовувати кешування: Налаштуйте заголовки для кешування статичних файлів (CSS, JS, зображень), щоб браузер повторно використовував ці ресурси, замість того щоб запитувати їх знову.
1406 | 
1407 | - Шрифти: Об’єднуйте шрифти в один файл замість використання кількох запитів на різні формати (woff, woff2, ttf).
1408 | 
1409 | ### 8. Використовувати Lazy Loading для зображень.
1410 | 
1411 | ```
1412 | <img src="image.jpg" alt="Image" loading="lazy">
1413 | ```
1414 | 
1415 | </details>
1416 | <!-- ========================================== -->
1417 | <details>
1418 | <summary> <span style="color:#368bed">50. Які теги з найсвіжіших оновлень ви знаєте?</span></summary>
1419 | 
1420 | - `<mark>`: Для виділення тексту (позначення важливих фрагментів).
1421 | - `<progress>`: Для відображення прогресу виконання задачі.
1422 | - `<meter>`: Для вимірювання значення в певному діапазоні (наприклад, рівень батареї).
1423 | 
1424 | </details>
1425 | 
1426 | <details>
1427 | <summary><span style="color:#368bed">51. Які переваги згортання пробілів (collapsing white space) в HTML та CSS?</span></summary>
1428 | 
1429 | **1. Зменшення розміру файлів:** Коли зайві пробіли, нові рядки або табуляції автоматично згортатимуться, це допомагає зменшити розмір файлів, що може бути корисно для оптимізації швидкості завантаження веб-сторінки. Це особливо важливо для мобільних пристроїв або при повільному інтернет-з'єднанні.
1430 | 
1431 | **2. Спрощення структури документа:** Згортання пробілів дозволяє уникнути зайвих пробілів між елементами, що робить код HTML та CSS більш чистим і зрозумілим. Код стає компактнішим, і його легше підтримувати та редагувати.
1432 | 
1433 | **3. Покращення читабельності контенту:** Згортання пробілів дозволяє браузеру правильно відображати текст, забезпечуючи, щоб зайві пробіли не порушували структуру та відображення елементів. Це особливо важливо при відображенні тексту в абзацах, списках або інших блочних елементах.
1434 | 
1435 | **4. Ізоляція та відокремлення елементів:** Коли працює згортання пробілів, можна забезпечити рівномірний розподіл простору між елементами, що дозволяє більш ефективно керувати відстанями між ними, без того щоб зайві пробіли впливали на вигляд веб-сторінки.
1436 | 
1437 | **5. Уникнення непотрібних порушень макета:** В деяких випадках зайві пробіли можуть спричиняти небажану поведінку макета, наприклад, додавання непотрібних відступів між елементами. Згортання пробілів допомагає уникнути таких ситуацій і зберегти дизайн відповідно до заданих правил стилів.
1438 | 
1439 | **Згортання пробілів** — це стандартна поведінка в HTML, що дозволяє браузеру ігнорувати зайві пробіли, кілька переносів рядка або табуляцій між текстовими елементами. Таким чином, візуальне відображення не залежить від кількості пробілів у коді.
1440 | 
1441 | [MDN link](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space-collapse)
1442 | 
1443 | </details>
1444 | <!-- ========================================== -->
1445 | <details>
1446 | <summary><span style="color:#368bed">52. Як створити посилання на різні розділи на одній веб-сторінці HTML?</span></summary>
1447 | 
1448 | Відповідь:
1449 | Для створення гіперпосилання використовується тег `<a>`. Атрибут href вказує URL або шлях.
1450 | 
1451 | Приклад:
1452 | 
1453 | ```
1454 | <a href="https://example.com">Перейти на Example</a>
1455 | ```
1456 | 
1457 | </details>
1458 | <!-- ========================================== -->
1459 | <details>
1460 | <summary><span style="color:#368bed">53. Що таке валідація? Які типи перевірок HTML-документа ви знаєте?</span></summary>
1461 | 
1462 | Валідація — це процес перевірки коректності коду HTML-документа відповідно до стандартів W3C.
1463 | 
1464 | **Типи перевірок:**
1465 | 
1466 | 1. **Синтаксична валідація** — перевірка правильності синтаксису та структури тегів.
1467 | 2. **Валідація атрибутів** — перевірка правильності та відповідності використаних атрибутів.
1468 | 3. **Валідація доступності (Accessibility)** — перевірка на відповідність стандартам доступності, наприклад WCAG.
1469 | 4. **Перевірка сумісності** — оцінка роботи коду в різних браузерах.
1470 | 5. **SEO-валидация** — перевірка оптимізації документа для пошукових систем.
1471 | 6. **Перевірка швидкодії** — аналіз завантаження та продуктивності.
1472 | </details>
1473 | <!-- ========================================== -->
1474 | <details>
1475 | <summary><span style="color:#368bed">54. Основні етапи перевірок валідності HTML-документа?</span></summary>
1476 | 
1477 | 7. **Перевірка синтаксису** — аналіз тегів, вкладеності та закриття.
1478 | 8. **Перевірка атрибутів** — відповідність атрибутів специфікації.
1479 | 9. **Перевірка DocType** — відповідність документа заявленому типу.
1480 | 10. **Перевірка доступності** — наявність елементів для підтримки доступності (alt, aria).
1481 | 11. **Перевірка семантики** — правильне використання семантичних тегів.
1482 | 12. **Перевірка посилань** — аналіз працездатності та коректності URL.
1483 | </details>
1484 | <!-- ========================================== -->
1485 | <details>
1486 | <summary><span style="color:#368bed">55. Якщо представити HTML5 як відкриту веб-платформу, з яких блоків він складається?</span></summary>
1487 | 
1488 | 13. **Семантика** — семантичні теги для структурування контенту (header, footer, article).
1489 | 14. **Мультимедіа** — підтримка аудіо та відео (audio, video).
1490 | 15. **Графіка** — елементи для роботи з графікою (canvas, SVG).
1491 | 16. **Сховище і офлайн** — API для локального зберігання даних (localStorage, IndexedDB).
1492 | 17. **Комунікації** — WebSocket, Server-Sent Events.
1493 | 18. **Форми** — розширені можливості форм (нові типи input, валідація).
1494 | 19. **Продуктивність** — API для оптимізації роботи (Web Workers).
1495 | 20. **Доступність** — ARIA-атрибути для покращення доступності.
1496 | </details>
1497 | <!-- ========================================== -->
1498 | <details>
1499 | <summary><span style="color:#368bed">56. Що описується в тегі &lt;head&gt;?</span></summary>
1500 | 
1501 | Тег `<head>` містить метаінформацію про документ:
1502 | 
1503 | 1. **Назва сторінки** — `<title>`.
1504 | 2. **Мета-теги** — `<meta>` (характеристики документа, ключові слова, опис).
1505 | 3. **Підключення стилів** — `<link>` (CSS-файли).
1506 | 4. **Скрипти** — `<script>` (підключення JavaScript).
1507 | 5. **Фавікон** — `<link>` для іконки сайту.
1508 | 6. **Інші налаштування** — наприклад, `<base>` для базового URL.
1509 | </details>
1510 | <!-- ========================================== -->
1511 | <details>
1512 | <summary><span style="color:#368bed">57. Навіщо потрібен атрибут `autocomplete`? </span></summary>
1513 | 
1514 | Атрибут autocomplete в HTML використовується для вказівки браузеру, чи має він автоматично заповнювати поля форми збереженими даними (наприклад, іменем, адресою, електронною поштою). Він може бути включений або вимкнений для окремих полів форми або для всієї форми.
1515 | 
1516 | Значення:
1517 | 
1518 | `on` — дозволяє автозаповнення.
1519 | `off` — вимикає автозаповнення.
1520 | 
1521 | </details>
1522 | <!-- ========================================== -->
1523 | <details>
1524 | <summary><span style="color:#368bed">58. Як можна приховати елемент розмітки без використання CSS і JS?</span></summary>
1525 | 
1526 | Елемент можна приховати за допомогою атрибуту `hidden`:
1527 | 
1528 | ```
1529 | <div hidden>Цей елемент прихований</div>
1530 | ```
1531 | 
1532 | </details>
1533 | <!-- ========================================== -->
1534 | <details>
1535 | <summary><span style="color:#368bed">59. Різниця між &lt;meter&gt; та &lt;progress&gt;?</span></summary>
1536 | 
1537 | - `<meter>` використовується для відображення виміряних значень, таких як рівень заповнення або температура.
1538 | - `<progress>` — для відображення прогресу виконання завдання (наприклад, завантаження файлу).
1539 | 
1540 | ```
1541 | <!-- <meter> для виміряного значення -->
1542 | <label for="battery">Рівень заряду батареї:</label>
1543 | <meter id="battery" value="0.7" min="0" max="1"></meter>
1544 | 
1545 | <!-- <progress> для прогресу завдання -->
1546 | <label for="fileProgress">Прогрес завантаження:</label>
1547 | <progress id="fileProgress" value="30" max="100"></progress>
1548 | 
1549 | ```
1550 | 
1551 | </details>
1552 | <!-- ========================================== -->
1553 | <details>
1554 | <summary><span style="color:#368bed">60. Розкажіть про тег &lt;samp&gt; ?</span></summary>
1555 | 
1556 | Тег `<samp>` використовується для позначення тексту, який є результатом виконання комп'ютерної програми, наприклад, повідомлень про помилки або вихідних даних. Він відображається звичайним шрифтом, але зазвичай використовується для стилістичних цілей.
1557 | 
1558 | Приклад використання тегу `<samp>`:
1559 | 
1560 | ```
1561 | <p>Результат виконання програми: <samp>Помилка: Невірний ввід</samp></p>
1562 | ```
1563 | 
1564 | </details>
1565 | 


--------------------------------------------------------------------------------
/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 **[frontendlovers@gmail.com](mailto:frontendlovers@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 | 


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


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


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