{"id":28311454,"url":"https://github.com/devloversteam/html-interview-questions","last_synced_at":"2026-01-30T08:35:17.173Z","repository":{"id":269219469,"uuid":"906715845","full_name":"DevLoversTeam/html-interview-questions","owner":"DevLoversTeam","description":"Найпопулярніші запитання та відповіді на співбесіді з HTML","archived":false,"fork":false,"pushed_at":"2025-12-20T13:49:28.000Z","size":715,"stargazers_count":48,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-22T17:15:24.087Z","etag":null,"topics":["html-interview-questions","html-interview-questions-and-answers","html5","interview-questions"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DevLoversTeam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"ViktorSvertoka","buy_me_a_coffee":"viktor.svertoka"}},"created_at":"2024-12-21T17:35:45.000Z","updated_at":"2025-12-20T13:49:31.000Z","dependencies_parsed_at":"2025-04-26T12:23:28.432Z","dependency_job_id":"b672f74c-64fa-4f48-ab88-508a28d726b7","html_url":"https://github.com/DevLoversTeam/html-interview-questions","commit_stats":null,"previous_names":["frontendlovers/html-interview-questions","devloversteam/html-interview-questions"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DevLoversTeam/html-interview-questions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevLoversTeam%2Fhtml-interview-questions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevLoversTeam%2Fhtml-interview-questions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevLoversTeam%2Fhtml-interview-questions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevLoversTeam%2Fhtml-interview-questions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DevLoversTeam","download_url":"https://codeload.github.com/DevLoversTeam/html-interview-questions/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevLoversTeam%2Fhtml-interview-questions/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28730323,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-24T10:24:43.181Z","status":"ssl_error","status_checked_at":"2026-01-24T10:24:36.112Z","response_time":89,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html-interview-questions","html-interview-questions-and-answers","html5","interview-questions"],"created_at":"2025-05-24T12:12:27.623Z","updated_at":"2026-01-30T08:35:17.160Z","avatar_url":"https://github.com/DevLoversTeam.png","language":null,"funding_links":["https://github.com/sponsors/ViktorSvertoka","https://buymeacoffee.com/viktor.svertoka"],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003e\r\n  HTML \u003cimg src=\"./assets/html.svg\" width=\"40\" height=\"40\" alt=\"HTML logo\"/\u003e\r\n\u003c/h1\u003e\r\n\r\n\u003ch2\u003eНайпопулярніші запитання та відповіді на співбесіді з HTML\u003c/h2\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e1. Що означає абревіатура HTML і яке її призначення?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- HTML — HyperText Markup Language, мова розмітки для структурування вмісту\r\n  вебсторінок (текст, зображення, посилання тощо).\r\n\r\n- Призначення — описувати структуру та семантику контенту, який браузер\r\n  відображає користувачу.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e2. Чим HTML відрізняється від CSS та JavaScript?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- **HTML** — описує структуру веб-сторінки (що є: заголовки, абзаци, зображення,\r\n  посилання).\r\n\r\n- **CSS** — відповідає за оформлення і стиль (як виглядає: кольори, шрифти,\r\n  розташування).\r\n\r\n- **JavaScript** — додає динаміку та інтерактивність (що робить: обробка подій,\r\n  зміна DOM, анімації, логіка).\r\n\r\nРазом вони формують основу фронтенд-розробки: HTML — кістяк, CSS — одяг,\r\nJavaScript — поведінка.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e3. Що таке HTML теги?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- HTML теги — це інструкції (команди), які визначають структуру та зміст\r\n  веб-сторінки.\r\n\r\n- Теги пишуться у кутових дужках `\u003c \u003e`.\r\n\r\n- Більшість тегів мають відкриваючу та закриваючу частини:\r\n\r\n  ```html\r\n  \u003cp\u003eТекст абзацу\u003c/p\u003e\r\n  ```\r\n\r\n- Деякі теги самозакриваючі:\r\n\r\n  ```html\r\n  \u003cbr /\u003e\r\n  \u003cimg src=\"image.jpg\" alt=\"Зображення\" /\u003e\r\n  ```\r\n\r\n- Теги можуть мати атрибути для додаткової інформації:\r\n  ```html\r\n  \u003ca href=\"https://example.com\"\u003eПосилання\u003c/a\u003e\r\n  ```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e4. Що таке HTML елементи?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nHTML елемент — це повна конструкція, що складається з відкриваючого тега,\r\nконтенту та закриваючого тега.\r\n\r\n#### Структура елемента:\r\n\r\n```html\r\n\u003ctagname attribute=\"value\"\u003eконтент\u003c/tagname\u003e\r\n```\r\n\r\n#### Приклади:\r\n\r\n- `\u003ch1\u003eЗаголовок\u003c/h1\u003e` — елемент заголовка\r\n- `\u003cp\u003eАбзац тексту\u003c/p\u003e` — елемент абзацу\r\n- `\u003cimg src=\"photo.jpg\" alt=\"Фото\"\u003e` — елемент зображення (самозакриваючий)\r\n\r\nЕлементи можуть містити інші елементи (вкладеність) і мати атрибути для\r\nдодаткових налаштувань.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e5. Опишіть базову структуру HTML-сторінки?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n**Основна структура HTML-документа:**\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003c!-- Оголошення типу документа --\u003e\r\n\u003chtml lang=\"en\"\u003e\r\n  \u003chead\u003e\r\n    \u003cmeta charset=\"UTF-8\" /\u003e\r\n    \u003ctitle\u003eНазва сторінки\u003c/title\u003e\r\n  \u003c/head\u003e\r\n  \u003cbody\u003e\r\n    \u003c!-- Вміст сторінки --\u003e\r\n  \u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n**Складові:**\r\n\r\n1. `\u003c!DOCTYPE html\u003e` — вказує, що документ у HTML5.\r\n\r\n2. `\u003chtml\u003e` — кореневий елемент.\r\n\r\n3. `\u003chead\u003e` — метадані (кодова сторінка, заголовок, стилі, скрипти).\r\n\r\n4. `\u003cbody\u003e` — видимий вміст сторінки.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e6. Що таке DOCTYPE і навіщо його використовують?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n`DOCTYPE` (Document Type Declaration) — це декларація типу документа, яка\r\nповідомляє браузеру, яку версію HTML використовує сторінка.\r\n\r\n#### Синтаксис для HTML5:\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n```\r\n\r\n#### Призначення:\r\n\r\n- Запобігає режиму сумісності (quirks mode) браузера\r\n- Забезпечує коректне відображення сторінки згідно зі стандартами\r\n- Допомагає валідаторам перевіряти правильність коду\r\n- Має стояти першим рядком HTML-документа\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e7. Яка поточна версія HTML?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- Поточна версія — **HTML5**.\r\n\r\n- HTML5 є `Living Standard` (живий стандарт), що означає постійне оновлення без\r\n  формальних нових версій.\r\n\r\n- Підтримується всіма сучасними браузерами.\r\n\r\n- Включає нові семантичні елементи, API, покращену підтримку мультимедіа та\r\n  багато інших функцій.\r\n\r\n- Розробляється консорціумом WHATWG (Web Hypertext Application Technology\r\n  Working Group).\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e8. Що роблять атрибути DOCTYPE та html lang?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- `\u003c!DOCTYPE html\u003e` — повідомляє браузеру, що документ написаний у стандарті\r\n  HTML5, щоб уникнути режиму сумісності.\r\n\r\n- `lang` у `\u003chtml\u003e` — вказує мову вмісту сторінки для пошукових систем, читачів\r\n  екрану та інших сервісів (наприклад, lang=\"uk\").\r\n\r\n#### Приклад:\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml lang=\"uk\"\u003e\r\n  \u003c!-- Решта документа --\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\nЦі атрибути покращують доступність, SEO та коректність відображення сторінки.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e9. Що описується в тегі head?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nТег `\u003chead\u003e` містить метаінформацію про документ:\r\n\r\n1. **Назва сторінки** — `\u003ctitle\u003e`.\r\n2. **Мета-теги** — `\u003cmeta\u003e` (характеристики документа, ключові слова, опис).\r\n3. **Підключення стилів** — `\u003clink\u003e` (CSS-файли).\r\n4. **Скрипти** — `\u003cscript\u003e` (підключення JavaScript).\r\n5. **Фавікон** — `\u003clink\u003e` для іконки сайту.\r\n6. **Інші налаштування** — наприклад, `\u003cbase\u003e` для базового URL.\r\n\r\n#### Приклад:\r\n\r\n```html\r\n\u003chead\u003e\r\n  \u003cmeta charset=\"UTF-8\" /\u003e\r\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\r\n  \u003ctitle\u003eНазва сторінки\u003c/title\u003e\r\n  \u003clink rel=\"stylesheet\" href=\"styles.css\" /\u003e\r\n  \u003cscript src=\"script.js\"\u003e\u003c/script\u003e\r\n\u003c/head\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e10. Яка різниця між тегами head та body?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- `\u003chead\u003e` — містить метадані про документ (назва, кодування, стилі, скрипти,\r\n  SEO-теги), не відображається безпосередньо на сторінці.\r\n\r\n- `\u003cbody\u003e` — містить видимий контент для користувача (текст, зображення, кнопки,\r\n  відео тощо).\r\n\r\n#### Ключові відмінності:\r\n\r\n**`\u003chead\u003e`:**\r\n\r\n- Невидимий для користувача\r\n- Містить службову інформацію\r\n- Налаштування сторінки\r\n- SEO-дані\r\n\r\n**`\u003cbody\u003e`:**\r\n\r\n- Видимий контент\r\n- Те, що бачить користувач\r\n- Інтерактивні елементи\r\n- Основний вміст сторінки\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e11. Що таке пробільний простір в HTML?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nПробільний простір в HTML — це пробіли, табуляції та переноси рядків між\r\nелементами.\r\n\r\n#### Поведінка браузера:\r\n\r\n- Браузер автоматично **згортає** (схлопує) декілька пробілів в один\r\n- Кілька переносів рядків замінюються одним пробілом\r\n- Провідні та кінцеві пробіли ігноруються\r\n\r\n#### Приклад:\r\n\r\n```html\r\n\u003cp\u003eЦей текст має багато пробілів\u003c/p\u003e\r\n```\r\n\r\nВідображається як: `Цей текст має багато пробілів`\r\n\r\nДля збереження пробілів використовуйте CSS `white-space: pre` або тег `\u003cpre\u003e`\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e12. Що таке порожні елементи в HTML?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nПорожні елементи (void elements) — це HTML теги, які не мають контенту і\r\nзакриваючого тега.\r\n\r\n#### Основні порожні елементи:\r\n\r\n- `\u003cbr\u003e` — розрив рядка\r\n- `\u003chr\u003e` — горизонтальна лінія\r\n- `\u003cimg\u003e` — зображення\r\n- `\u003cinput\u003e` — поле вводу\r\n- `\u003cmeta\u003e` — метадані\r\n- `\u003clink\u003e` — посилання на ресурс\r\n\r\n#### Синтаксис:\r\n\r\n```html\r\n\u003c!-- Правильно --\u003e\r\n\u003cimg src=\"photo.jpg\" alt=\"Фото\" /\u003e\r\n\u003cbr /\u003e\r\n\u003cinput type=\"text\" name=\"name\" /\u003e\r\n\r\n\u003c!-- В XHTML/XML стилі (необов'язково в HTML5) --\u003e\r\n\u003cimg src=\"photo.jpg\" alt=\"Фото\" /\u003e\r\n\u003cbr /\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e13. У чому різниця між елементами div і span?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n#### `\u003cdiv\u003e` (блоковий елемент):\r\n\r\n- Займає всю доступну ширину\r\n- Починається з нового рядка\r\n- Має верхні та нижні відступи\r\n- Використовується для великих блоків контенту\r\n\r\n#### `\u003cspan\u003e` (вбудований елемент):\r\n\r\n- Займає тільки необхідну ширину\r\n- Не переносить на новий рядок\r\n- Не має вертикальних відступів\r\n- Використовується для маленьких фрагментів тексту\r\n\r\n#### Приклад:\r\n\r\n```html\r\n\u003cdiv\u003eЦе блоковий елемент\u003c/div\u003e\r\n\u003cdiv\u003eВін займає всю ширину\u003c/div\u003e\r\n\r\n\u003cp\u003eЦе \u003cspan\u003eвбудований елемент\u003c/span\u003e всередині абзацу.\u003c/p\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e14. Яка різниця між тегами b та strong?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- `\u003cb\u003e` — просто робить текст візуально жирним, без додаткового смислового\r\n  значення.\r\n\r\n- `\u003cstrong\u003e` — робить текст жирним і додає семантичний акцент (важливість), що\r\n  враховується пошуковими системами та скрінрідерами.\r\n\r\n#### Приклади:\r\n\r\n```html\r\n\u003cp\u003eЦей текст \u003cb\u003eжирний\u003c/b\u003e тільки візуально.\u003c/p\u003e\r\n\u003cp\u003eЦей текст \u003cstrong\u003eважливий\u003c/strong\u003e за змістом.\u003c/p\u003e\r\n```\r\n\r\n**Рекомендація:** Використовуйте `\u003cstrong\u003e` для смислово важливого тексту, `\u003cb\u003e`\r\n— тільки для стилізації без семантичного значення.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e15. Коли слід використовувати em замість i, і навпаки?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- `\u003cem\u003e` — виділяє текст курсивом з семантичним наголосом (інтонаційне чи\r\n  логічне підкреслення важливості).\r\n\r\n- `\u003ci\u003e` — відображає текст курсивом без зміни смислу (наприклад, іноземні слова,\r\n  технічні терміни, назви).\r\n\r\n#### Приклади:\r\n\r\n```html\r\n\u003c!-- Семантичний наголос --\u003e\r\n\u003cp\u003eЯ \u003cem\u003eдуже\u003c/em\u003e хочу це зробити!\u003c/p\u003e\r\n\r\n\u003c!-- Стилістичне виділення --\u003e\r\n\u003cp\u003eФільм \u003ci\u003eТитанік\u003c/i\u003e вийшов в 1997 році.\u003c/p\u003e\r\n\u003cp\u003eСлово \u003ci\u003ebonjour\u003c/i\u003e означає \"привіт\" французькою.\u003c/p\u003e\r\n```\r\n\r\nЯкщо потрібно передати смисловий акцент — використовуємо `\u003cem\u003e`. Якщо тільки\r\nстиль відображення — `\u003ci\u003e`.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e16. Яке призначення тегів small, s та mark?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- `\u003csmall\u003e` — робить текст меншим і семантично позначає додаткову або другорядну\r\n  інформацію (примітки, дисклеймери).\r\n\r\n- `\u003cs\u003e` — відображає текст закресленим, коли він втратив актуальність, але його\r\n  варто залишити для перегляду.\r\n\r\n- `\u003cmark\u003e` — виділяє текст жовтим фоном для підсвічування важливого або\r\n  знайденого фрагмента.\r\n\r\n#### Приклади:\r\n\r\n```html\r\n\u003cp\u003eЦіна: \u003cs\u003e100 грн\u003c/s\u003e 80 грн\u003c/p\u003e\r\n\u003cp\u003e\u003cmark\u003eВажливо:\u003c/mark\u003e Термін дії до 31 грудня.\u003c/p\u003e\r\n\u003cp\u003eОсновний текст. \u003csmall\u003e© 2023 Всі права захищені.\u003c/small\u003e\u003c/p\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e17. Як створити абзац або розрив рядка в HTML?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n**Абзац:**\r\n\r\n```html\r\n\u003cp\u003eТекст абзацу\u003c/p\u003e\r\n```\r\n\r\nстворює блок з відступами зверху і знизу.\r\n\r\n**Розрив рядка:**\r\n\r\n```html\r\nТекст першого рядка\u003cbr /\u003eТекст другого рядка\r\n```\r\n\r\nпереносить текст без створення нового абзацу.\r\n\r\n#### Коли використовувати:\r\n\r\n- `\u003cp\u003e` — для окремих абзаців тексту\r\n- `\u003cbr\u003e` — для примусового переносу в межах одного блоку (адреси, вірші)\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e18. Для чого використовуються теги sub та sup?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- `\u003csub\u003e` — підрядковий текст (нижче базової лінії)\r\n- `\u003csup\u003e` — надрядковий текст (вище базової лінії)\r\n\r\n#### Використання:\r\n\r\n**Математичні формули:**\r\n\r\n```html\r\n\u003cp\u003eH\u003csub\u003e2\u003c/sub\u003eO - формула води\u003c/p\u003e\r\n\u003cp\u003eE = mc\u003csup\u003e2\u003c/sup\u003e - формула Ейнштейна\u003c/p\u003e\r\n```\r\n\r\n**Хімічні формули:**\r\n\r\n```html\r\n\u003cp\u003eCO\u003csub\u003e2\u003c/sub\u003e - вуглекислий газ\u003c/p\u003e\r\n```\r\n\r\n**Сноски:**\r\n\r\n```html\r\n\u003cp\u003eЦей факт\u003csup\u003e1\u003c/sup\u003e потребує підтвердження.\u003c/p\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e19. Розкажіть про тег samp?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nТег `\u003csamp\u003e` використовується для позначення тексту, який є результатом\r\nвиконання комп'ютерної програми, наприклад, повідомлень про помилки або вихідних\r\nданих. Він відображається звичайним шрифтом, але зазвичай використовується для\r\nстилістичних цілей.\r\n\r\nПриклад використання тегу `\u003csamp\u003e`:\r\n\r\n```html\r\n\u003cp\u003eРезультат виконання програми: \u003csamp\u003eПомилка: Невірний ввід\u003c/samp\u003e\u003c/p\u003e\r\n\u003cp\u003eКомандний рядок повернув: \u003csamp\u003eHello World!\u003c/samp\u003e\u003c/p\u003e\r\n```\r\n\r\n**Пов'язані теги:**\r\n\r\n- `\u003ccode\u003e` — для фрагментів коду\r\n- `\u003ckbd\u003e` — для клавіш клавіатури\r\n- `\u003cvar\u003e` — для змінних\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e20. Які глобальні атрибути є в HTML?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nГлобальні атрибути можна використовувати з будь-яким HTML елементом:\r\n\r\n#### Основні глобальні атрибути:\r\n\r\n- `id` — унікальний ідентифікатор елемента\r\n- `class` — CSS класи для стилізації\r\n- `style` — вбудовані стилі CSS\r\n- `title` — підказка при наведенні\r\n- `lang` — мова контенту\r\n- `dir` — напрям тексту (ltr/rtl)\r\n- `tabindex` — порядок фокусування\r\n- `hidden` — приховує елемент\r\n- `data-*` — користувацькі атрибути\r\n\r\n#### Атрибути подій:\r\n\r\n- `onclick`, `onmouseover`, `onload` тощо\r\n\r\n#### Приклад:\r\n\r\n```html\r\n\u003cdiv\r\n  id=\"main-content\"\r\n  class=\"container highlight\"\r\n  title=\"Основний контент сторінки\"\r\n  lang=\"uk\"\r\n  data-section=\"hero\"\r\n\u003e\r\n  Контент...\r\n\u003c/div\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e21. Як використовують атрибути class та id? Яка різниця між класами та ідентифікаторами?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n#### Атрибут `id`:\r\n\r\n- Унікальний ідентифікатор елемента на сторінці\r\n- Може бути тільки один елемент з конкретним id\r\n- Використовується для JavaScript, якірних посилань, CSS стилізації\r\n\r\n#### Атрибут `class`:\r\n\r\n- Групує елементи за спільними характеристиками\r\n- Один клас можна застосувати до багатьох елементів\r\n- Один елемент може мати кілька класів\r\n\r\n#### Приклади:\r\n\r\n```html\r\n\u003c!-- ID - унікальний --\u003e\r\n\u003cdiv id=\"header\"\u003eЗаголовок сайту\u003c/div\u003e\r\n\u003cdiv id=\"navigation\"\u003eНавігація\u003c/div\u003e\r\n\r\n\u003c!-- Class - може повторюватися --\u003e\r\n\u003cp class=\"highlight\"\u003eВажливий текст\u003c/p\u003e\r\n\u003cp class=\"highlight large\"\u003eВеликий важливий текст\u003c/p\u003e\r\n\u003cspan class=\"highlight\"\u003eЩе важливий текст\u003c/span\u003e\r\n```\r\n\r\n#### CSS селектори:\r\n\r\n```css\r\n#header {\r\n  color: blue;\r\n} /* ID селектор */\r\n.highlight {\r\n  color: red;\r\n} /* Class селектор */\r\n```\r\n\r\n**Рекомендація:** Використовуйте `id` для унікальних елементів і якірних\r\nпосилань, `class` — для стилізації та групування.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e22. Яке призначення атрибута alt в HTML?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- `alt` — альтернативний текст для зображення.\r\n\r\n#### Призначення:\r\n\r\n- Показується, якщо зображення не завантажилось.\r\n\r\n- Допомагає скрінрідерам робити сайт доступним.\r\n\r\n- Використовується для SEO.\r\n\r\n#### Приклади:\r\n\r\n```html\r\n\u003c!-- Інформативне зображення --\u003e\r\n\u003cimg src=\"chart.png\" alt=\"Графік продажів за 2023 рік\" /\u003e\r\n\r\n\u003c!-- Декоративне зображення --\u003e\r\n\u003cimg src=\"decoration.png\" alt=\"\" /\u003e\r\n\r\n\u003c!-- Зображення-посилання --\u003e\r\n\u003ca href=\"/home\"\u003e\r\n  \u003cimg src=\"logo.png\" alt=\"Повернутися на головну сторінку\" /\u003e\r\n\u003c/a\u003e\r\n```\r\n\r\n**Важливо:** Для декоративних зображень використовуйте порожній `alt=\"\"`, щоб\r\nскрін-рідери їх ігнорували.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e23. Навіщо використовується тег label?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n`\u003clabel\u003e` пов'язує текстову підказку з елементом форми, щоб користувачу було\r\nзрозуміло, що вводити.\r\n\r\n#### Переваги:\r\n\r\n- Покращує доступність (скрінрідери читають підказку разом із полем).\r\n\r\n- Клік по \u003clabel\u003e автоматично фокусує пов'язане поле.\r\n\r\n#### Приклади:\r\n\r\n**Зовнішній label (через атрибути for та id):**\r\n\r\n```html\r\n\u003clabel for=\"email\"\u003eEmail:\u003c/label\u003e \u003cinput type=\"email\" id=\"email\" name=\"email\" /\u003e\r\n```\r\n\r\n**Внутрішній label (обгортає елемент):**\r\n\r\n```html\r\n\u003clabel\u003e\r\n  \u003cinput type=\"checkbox\" name=\"agree\" /\u003e\r\n  Погоджуюсь з умовами\r\n\u003c/label\u003e\r\n```\r\n\r\n**Для групи radio buttons:**\r\n\r\n```html\r\n\u003clabel for=\"size-small\"\u003e\r\n  \u003cinput type=\"radio\" id=\"size-small\" name=\"size\" value=\"small\" /\u003e\r\n  Малий\r\n\u003c/label\u003e\r\n\u003clabel for=\"size-large\"\u003e\r\n  \u003cinput type=\"radio\" id=\"size-large\" name=\"size\" value=\"large\" /\u003e\r\n  Великий\r\n\u003c/label\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e24. Що таке атрибути data-* і коли їх слід використовувати?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- `data-*` — це користувацькі атрибути для зберігання будь-яких додаткових даних\r\n  у елементі HTML.\r\n\r\n#### Синтаксис:\r\n\r\n```html\r\n\u003cdiv data-user-id=\"123\" data-role=\"admin\" data-last-login=\"2023-12-01\"\u003e\u003c/div\u003e\r\n```\r\n\r\n#### Коли використовувати:\r\n\r\n- Зберігати інформацію для JavaScript без впливу на відображення.\r\n\r\n- Легко отримувати через element.dataset.userId або element.dataset.role.\r\n\r\n- Наприклад, для інтерактивних елементів, налаштувань чи передачі даних у JS.\r\n\r\n#### Приклад використання з JavaScript:\r\n\r\n```html\r\n\u003cbutton data-action=\"delete\" data-id=\"42\"\u003eВидалити\u003c/button\u003e\r\n\r\n\u003cscript\u003e\r\n  const button = document.querySelector('button');\r\n  console.log(button.dataset.action); // \"delete\"\r\n  console.log(button.dataset.id); // \"42\"\r\n\u003c/script\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e25. Що таке data-атрибути, в яких випадках їх використовуєте?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n`data-*` атрибути дозволяють зберігати користувацькі дані прямо в HTML\r\nелементах.\r\n\r\n#### Випадки використання:\r\n\r\n1. **Конфігурація компонентів:**\r\n\r\n```html\r\n\u003cdiv class=\"slider\" data-speed=\"500\" data-autoplay=\"true\"\u003e\r\n  \u003c!-- Контент слайдера --\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n2. **Ідентифікація для JavaScript:**\r\n\r\n```html\r\n\u003ctr data-user-id=\"123\" data-status=\"active\"\u003e\r\n  \u003ctd\u003eJohn Doe\u003c/td\u003e\r\n  \u003ctd\u003e\u003cbutton data-action=\"edit\"\u003eРедагувати\u003c/button\u003e\u003c/td\u003e\r\n\u003c/tr\u003e\r\n```\r\n\r\n3. **Стан елементів:**\r\n\r\n```html\r\n\u003cdiv class=\"modal\" data-visible=\"false\"\u003e\r\n  \u003c!-- Модальне вікно --\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n4. **CSS стилізація за станом:**\r\n\r\n```css\r\n[data-status='active'] {\r\n  color: green;\r\n}\r\n[data-status='inactive'] {\r\n  color: gray;\r\n}\r\n```\r\n\r\n**Переваги:** Валідний HTML, легкий доступ через JavaScript, не впливає на\r\nстилізацію.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e26. Як створити гіперпосилання в HTML?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nВикористовуємо тег `\u003ca\u003e`:\r\n\r\n```html\r\n\u003ca href=\"https://example.com\"\u003eТекст посилання\u003c/a\u003e\r\n```\r\n\r\n- `href` — адреса, куди веде посилання.\r\n\r\n- Можна додати `target=\"_blank\"` для відкриття в новій вкладці.\r\n\r\n#### Різні типи посилань:\r\n\r\n```html\r\n\u003c!-- Зовнішнє посилання --\u003e\r\n\u003ca href=\"https://google.com\"\u003eGoogle\u003c/a\u003e\r\n\r\n\u003c!-- Внутрішнє посилання --\u003e\r\n\u003ca href=\"/about\"\u003eПро нас\u003c/a\u003e\r\n\r\n\u003c!-- Email посилання --\u003e\r\n\u003ca href=\"mailto:contact@example.com\"\u003eНаписати листа\u003c/a\u003e\r\n\r\n\u003c!-- Телефонне посилання --\u003e\r\n\u003ca href=\"tel:+380123456789\"\u003eЗателефонувати\u003c/a\u003e\r\n\r\n\u003c!-- Посилання на файл --\u003e\r\n\u003ca href=\"document.pdf\"\u003eЗавантажити PDF\u003c/a\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e27. Що таке внутрішні та зовнішні гіперпосилання і які вони мають атрибути?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n#### Зовнішні посилання:\r\n\r\n- Ведуть на інші веб-сайти\r\n- Починаються з `http://` або `https://`\r\n\r\n#### Внутрішні посилання:\r\n\r\n- Ведуть на сторінки того самого сайту\r\n- Використовують відносні або абсолютні шляхи\r\n\r\n#### Основні атрибути:\r\n\r\n```html\r\n\u003c!-- Зовнішнє посилання --\u003e\r\n\u003ca\r\n  href=\"https://example.com\"\r\n  target=\"_blank\"\r\n  rel=\"noopener noreferrer\"\r\n  title=\"Перейти на example.com\"\r\n\u003e\r\n  Зовнішній сайт\r\n\u003c/a\u003e\r\n\r\n\u003c!-- Внутрішнє посилання --\u003e\r\n\u003ca href=\"/contact\" title=\"Сторінка контактів\"\u003e Контакти \u003c/a\u003e\r\n\r\n\u003c!-- Якірне посилання --\u003e\r\n\u003ca href=\"#section1\" title=\"Перейти до розділу 1\"\u003e Розділ 1 \u003c/a\u003e\r\n```\r\n\r\n**Атрибути:**\r\n\r\n- `href` — URL адреса\r\n- `target` — де відкрити (\\_blank, \\_self, \\_parent, \\_top)\r\n- `rel` — відношення до цільової сторінки\r\n- `title` — підказка при наведенні\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e28. Яка різниця між відносними та абсолютними URL-адресами?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n**Абсолютний URL** — містить повний шлях із протоколом і доменом.\r\n\r\n```html\r\n\u003ca href=\"https://example.com/page.html\"\u003eПосилання\u003c/a\u003e\r\n```\r\n\r\nВикористовується для переходів на зовнішні ресурси або між доменами.\r\n\r\n**Відносний URL** — вказує шлях відносно поточного документа.\r\n\r\n```html\r\n\u003ca href=\"/page.html\"\u003eПосилання\u003c/a\u003e\r\n\u003ca href=\"page.html\"\u003eПосилання\u003c/a\u003e\r\n\u003ca href=\"../page.html\"\u003eПосилання\u003c/a\u003e\r\n```\r\n\r\n#### Типи відносних URL:\r\n\r\n```html\r\n\u003c!-- Відносно кореня сайту --\u003e\r\n\u003ca href=\"/about/team.html\"\u003eКоманда\u003c/a\u003e\r\n\r\n\u003c!-- Відносно поточної папки --\u003e\r\n\u003ca href=\"contact.html\"\u003eКонтакти\u003c/a\u003e\r\n\r\n\u003c!-- На рівень вище --\u003e\r\n\u003ca href=\"../index.html\"\u003eГоловна\u003c/a\u003e\r\n\r\n\u003c!-- На кілька рівнів вище --\u003e\r\n\u003ca href=\"../../docs/manual.pdf\"\u003eІнструкція\u003c/a\u003e\r\n```\r\n\r\nЗручно для внутрішніх сторінок сайту, особливо при розробці й тестуванні.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e29. Як відкрити посилання в новій вкладці?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- Додати атрибут `target=\"_blank\"` до тега `\u003ca\u003e`:\r\n\r\n```html\r\n\u003ca href=\"https://example.com\" target=\"_blank\"\u003eВідкрити в новій вкладці\u003c/a\u003e\r\n```\r\n\r\n- Рекомендовано також додати `rel=\"noopener noreferrer\"` для безпеки:\r\n\r\n```html\r\n\u003ca href=\"https://example.com\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\r\n  Відкрити в новій вкладці\r\n\u003c/a\u003e\r\n```\r\n\r\n#### Інші значення target:\r\n\r\n```html\r\n\u003c!-- Поточна вкладка (за замовчуванням) --\u003e\r\n\u003ca href=\"page.html\" target=\"_self\"\u003eПоточна вкладка\u003c/a\u003e\r\n\r\n\u003c!-- Батьківський фрейм --\u003e\r\n\u003ca href=\"page.html\" target=\"_parent\"\u003eБатьківський фрейм\u003c/a\u003e\r\n\r\n\u003c!-- Верхній рівень вікна --\u003e\r\n\u003ca href=\"page.html\" target=\"_top\"\u003eВерхній рівень\u003c/a\u003e\r\n\r\n\u003c!-- Конкретне вікно/фрейм --\u003e\r\n\u003ca href=\"page.html\" target=\"myWindow\"\u003eКонкретне вікно\u003c/a\u003e\r\n```\r\n\r\n**Безпека:** `rel=\"noopener noreferrer\"` запобігає доступу нової сторінки до\r\nпоточної через `window.opener`.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e30. Як створити якір для переходу до певної частини сторінки?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- Додаємо ідентифікатор елементу:\r\n\r\n```html\r\n\u003ch2 id=\"contacts\"\u003eКонтакти\u003c/h2\u003e\r\n```\r\n\r\n- Створюємо посилання на цей id:\r\n\r\n```html\r\n\u003ca href=\"#contacts\"\u003eПерейти до контактів\u003c/a\u003e\r\n```\r\n\r\nПри кліку сторінка прокрутиться до елемента з таким id.\r\n\r\n#### Повний приклад:\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n  \u003chead\u003e\r\n    \u003ctitle\u003eЯкірні посилання\u003c/title\u003e\r\n  \u003c/head\u003e\r\n  \u003cbody\u003e\r\n    \u003c!-- Навігація --\u003e\r\n    \u003cnav\u003e\r\n      \u003ca href=\"#about\"\u003eПро нас\u003c/a\u003e\r\n      \u003ca href=\"#services\"\u003eПослуги\u003c/a\u003e\r\n      \u003ca href=\"#contacts\"\u003eКонтакти\u003c/a\u003e\r\n    \u003c/nav\u003e\r\n\r\n    \u003c!-- Контент --\u003e\r\n    \u003csection id=\"about\"\u003e\r\n      \u003ch2\u003eПро нас\u003c/h2\u003e\r\n      \u003cp\u003eІнформація про компанію...\u003c/p\u003e\r\n    \u003c/section\u003e\r\n\r\n    \u003csection id=\"services\"\u003e\r\n      \u003ch2\u003eПослуги\u003c/h2\u003e\r\n      \u003cp\u003eОпис наших послуг...\u003c/p\u003e\r\n    \u003c/section\u003e\r\n\r\n    \u003csection id=\"contacts\"\u003e\r\n      \u003ch2\u003eКонтакти\u003c/h2\u003e\r\n      \u003cp\u003eКонтактна інформація...\u003c/p\u003e\r\n    \u003c/section\u003e\r\n\r\n    \u003c!-- Повернутися на верх --\u003e\r\n    \u003ca href=\"#top\"\u003e↑ На верх\u003c/a\u003e\r\n  \u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n**CSS для плавної прокрутки:**\r\n\r\n```css\r\nhtml {\r\n  scroll-behavior: smooth;\r\n}\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e31. Як створити посилання на різні розділи на одній веб-сторінці HTML?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nВідповідь: Для створення гіперпосилання використовується тег `\u003ca\u003e`. Атрибут href\r\nвказує URL або шлях.\r\n\r\n#### Повний приклад:\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n  \u003chead\u003e\r\n    \u003ctitle\u003eЯкірні посилання\u003c/title\u003e\r\n  \u003c/head\u003e\r\n  \u003cbody\u003e\r\n    \u003c!-- Навігація --\u003e\r\n    \u003cnav\u003e\r\n      \u003ca href=\"#about\"\u003eПро нас\u003c/a\u003e\r\n      \u003ca href=\"#services\"\u003eПослуги\u003c/a\u003e\r\n      \u003ca href=\"#contacts\"\u003eКонтакти\u003c/a\u003e\r\n    \u003c/nav\u003e\r\n\r\n    \u003c!-- Контент --\u003e\r\n    \u003csection id=\"about\"\u003e\r\n      \u003ch2\u003eПро нас\u003c/h2\u003e\r\n      \u003cp\u003eІнформація про компанію...\u003c/p\u003e\r\n    \u003c/section\u003e\r\n\r\n    \u003csection id=\"services\"\u003e\r\n      \u003ch2\u003eПослуги\u003c/h2\u003e\r\n      \u003cp\u003eОпис наших послуг...\u003c/p\u003e\r\n    \u003c/section\u003e\r\n\r\n    \u003csection id=\"contacts\"\u003e\r\n      \u003ch2\u003eКонтакти\u003c/h2\u003e\r\n      \u003cp\u003eКонтактна інформація...\u003c/p\u003e\r\n    \u003c/section\u003e\r\n\r\n    \u003c!-- Повернутися на верх --\u003e\r\n    \u003ca href=\"#top\"\u003e↑ На верх\u003c/a\u003e\r\n  \u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n**CSS для плавної прокрутки:**\r\n\r\n```css\r\nhtml {\r\n  scroll-behavior: smooth;\r\n}\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e32. Як створити посилання на файл для завантаження в HTML?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nВикористати `\u003ca\u003e` з атрибутом `download`:\r\n\r\n```html\r\n\u003ca href=\"files/manual.pdf\" download\u003eЗавантажити інструкцію\u003c/a\u003e\r\n```\r\n\r\n- href — шлях до файлу.\r\n\r\n- download — каже браузеру зберегти файл замість відкриття.\r\n\r\nМожна вказати ім'я:\r\n\r\n```html\r\n\u003ca href=\"files/manual.pdf\" download=\"Instrukciya.pdf\"\u003eЗавантажити\u003c/a\u003e\r\n```\r\n\r\n#### Додаткові приклади:\r\n\r\n```html\r\n\u003c!-- Завантажити з оригінальним ім'ям --\u003e\r\n\u003ca href=\"document.pdf\" download\u003eЗавантажити PDF\u003c/a\u003e\r\n\r\n\u003c!-- Завантажити з новим ім'ям --\u003e\r\n\u003ca href=\"report.xlsx\" download=\"financial-report-2023.xlsx\"\u003e\r\n  Завантажити звіт\r\n\u003c/a\u003e\r\n\r\n\u003c!-- Завантажити зображення --\u003e\r\n\u003ca href=\"photo.jpg\" download=\"my-photo.jpg\"\u003e Зберегти фото \u003c/a\u003e\r\n```\r\n\r\n**Примітка:** Атрибут `download` працює тільки для файлів з того самого домену\r\n(same-origin).\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e33. Яке призначення атрибута target у тегу a в HTML?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nАтрибут target визначає, де відкриється посилання:\r\n\r\n- `_self` (за замовчуванням) — відкриває в тій самій вкладці.\r\n\r\n- `_blank` — відкриває у новій вкладці/вікні.\r\n\r\n- `_parent` — відкриває в батьківському фреймі (якщо є фрейми).\r\n\r\n- `_top` — відкриває у всьому вікні, виходячи з фреймів.\r\n\r\n- `customName` — відкриває в конкретному вікні/фреймі з цим ім'ям.\r\n\r\n#### Приклади:\r\n\r\n```html\r\n\u003c!-- За замовчуванням - поточна вкладка --\u003e\r\n\u003ca href=\"page.html\"\u003eВнутрішня сторінка\u003c/a\u003e\r\n\r\n\u003c!-- Нова вкладка --\u003e\r\n\u003ca href=\"https://example.com\" target=\"_blank\"\u003eЗовнішній сайт\u003c/a\u003e\r\n\r\n\u003c!-- Нова вкладка з безпекою --\u003e\r\n\u003ca href=\"https://example.com\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\r\n  Безпечне зовнішнє посилання\r\n\u003c/a\u003e\r\n\r\n\u003c!-- Конкретне вікно --\u003e\r\n\u003ca href=\"help.html\" target=\"helpWindow\"\u003eДовідка\u003c/a\u003e\r\n```\r\n\r\n**Безпека:** Для `target=\"_blank\"` рекомендується додавати\r\n`rel=\"noopener noreferrer\"`.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e34. Як вставляти зображення на HTML-сторінку?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nВикористовуємо тег `\u003cimg\u003e`:\r\n\r\n```html\r\n\u003cimg src=\"image.jpg\" alt=\"Опис зображення\" /\u003e\r\n```\r\n\r\n- `src` — шлях до зображення.\r\n\r\n- `alt` — текстовий опис для доступності та коли зображення не завантажилось.\r\n\r\nОпційно: `width`, `height`, `title`.\r\n\r\n#### Детальніші приклади:\r\n\r\n```html\r\n\u003c!-- Основне використання --\u003e\r\n\u003cimg src=\"photo.jpg\" alt=\"Фотографія заходу сонця\" /\u003e\r\n\r\n\u003c!-- З розмірами --\u003e\r\n\u003cimg src=\"logo.png\" alt=\"Логотип компанії\" width=\"200\" height=\"100\" /\u003e\r\n\r\n\u003c!-- З підказкою --\u003e\r\n\u003cimg src=\"chart.png\" alt=\"Графік продажів\" title=\"Натисніть для збільшення\" /\u003e\r\n\r\n\u003c!-- Відносний шлях --\u003e\r\n\u003cimg src=\"../images/banner.jpg\" alt=\"Банер акції\" /\u003e\r\n\r\n\u003c!-- Абсолютний URL --\u003e\r\n\u003cimg src=\"https://example.com/image.jpg\" alt=\"Зовнішнє зображення\" /\u003e\r\n```\r\n\r\n**Краща практика:** Завжди включайте атрибут `alt` для доступності.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e35. Яке значення має атрибут alt для зображень?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n`alt` — альтернативний текст для зображення.\r\n\r\n#### Призначення:\r\n\r\n- Показується, якщо зображення не завантажилось.\r\n\r\n- Допомагає скрінрідерам робити сайт доступним.\r\n\r\n- Використовується для SEO.\r\n\r\n#### Приклади правильного використання:\r\n\r\n```html\r\n\u003c!-- Інформативне зображення --\u003e\r\n\u003cimg\r\n  src=\"chart.png\"\r\n  alt=\"Графік продажів за 2023 рік показує зростання на 25%\"\r\n/\u003e\r\n\r\n\u003c!-- Декоративне зображення --\u003e\r\n\u003cimg src=\"decoration.png\" alt=\"\" /\u003e\r\n\r\n\u003c!-- Зображення-посилання --\u003e\r\n\u003ca href=\"/home\"\u003e\r\n  \u003cimg src=\"logo.png\" alt=\"Повернутися на головну сторінку\" /\u003e\r\n\u003c/a\u003e\r\n\r\n\u003c!-- Складне зображення --\u003e\r\n\u003cimg src=\"infographic.jpg\" alt=\"Інфографіка: кроки створення веб-сайту\" /\u003e\r\n```\r\n\r\n**Правила:**\r\n\r\n- Для декоративних зображень використовуйте `alt=\"\"`\r\n- Для інформативних - описуйте зміст\r\n- Для посилань - описуйте призначення посилання\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e36. Які формати зображень підтримуються веббраузерами?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n**Основні формати, які підтримують сучасні браузери:**\r\n\r\n- `JPEG` / `JPG` — фотографії з високою деталізацією, стиснення з втратою\r\n  якості.\r\n\r\n- `PNG` — графіка з прозорістю, без втрати якості.\r\n\r\n- `GIF` — анімація та прості картинки з обмеженою палітрою.\r\n\r\n- `WebP` — сучасний формат з високим стисненням і прозорістю.\r\n\r\n- `SVG` — векторна графіка, масштабована без втрати якості.\r\n\r\nМенш поширені: BMP, ICO (для іконок).\r\n\r\n#### Коли використовувати:\r\n\r\n```html\r\n\u003c!-- JPEG для фотографій --\u003e\r\n\u003cimg src=\"photo.jpg\" alt=\"Пейзаж\" /\u003e\r\n\r\n\u003c!-- PNG для графіки з прозорістю --\u003e\r\n\u003cimg src=\"logo.png\" alt=\"Логотип\" /\u003e\r\n\r\n\u003c!-- GIF для анімації --\u003e\r\n\u003cimg src=\"loading.gif\" alt=\"Завантаження\" /\u003e\r\n\r\n\u003c!-- WebP для оптимізації --\u003e\r\n\u003cimg src=\"optimized.webp\" alt=\"Оптимізоване зображення\" /\u003e\r\n\r\n\u003c!-- SVG для векторної графіки --\u003e\r\n\u003cimg src=\"icon.svg\" alt=\"Іконка\" /\u003e\r\n```\r\n\r\n**Сучасні тенденції:** WebP та AVIF для кращого стиснення, SVG для іконок та\r\nпростої графіки.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e37. Які різні типи списків доступні в HTML?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nВ HTML є три основні типи списків:\r\n\r\n1. **Нумерований список (`\u003col\u003e`)** — елементи пронумеровані:\r\n\r\n2. **Маркований список (`\u003cul\u003e`)** — елементи з маркерами (кульки, квадрати):\r\n\r\n3. **Список визначень (`\u003cdl\u003e`)** — термін + опис:\r\n\r\n#### Приклади:\r\n\r\n```html\r\n\u003c!-- Нумерований список --\u003e\r\n\u003col\u003e\r\n  \u003cli\u003eПерший крок\u003c/li\u003e\r\n  \u003cli\u003eДругий крок\u003c/li\u003e\r\n  \u003cli\u003eТретій крок\u003c/li\u003e\r\n\u003c/ol\u003e\r\n\r\n\u003c!-- Маркований список --\u003e\r\n\u003cul\u003e\r\n  \u003cli\u003eМолоко\u003c/li\u003e\r\n  \u003cli\u003eХліб\u003c/li\u003e\r\n  \u003cli\u003eЯйця\u003c/li\u003e\r\n\u003c/ul\u003e\r\n\r\n\u003c!-- Список визначень --\u003e\r\n\u003cdl\u003e\r\n  \u003cdt\u003eHTML\u003c/dt\u003e\r\n  \u003cdd\u003eHyperText Markup Language\u003c/dd\u003e\r\n  \u003cdt\u003eCSS\u003c/dt\u003e\r\n  \u003cdd\u003eCascading Style Sheets\u003c/dd\u003e\r\n\u003c/dl\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e38. Як створювати впорядковані, невпорядковані списки та списки з описом у HTML?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n1. **Впорядкований список (`\u003col\u003e`):**\r\n\r\n```html\r\n\u003col\u003e\r\n  \u003cli\u003eПерший\u003c/li\u003e\r\n  \u003cli\u003eДругий\u003c/li\u003e\r\n\u003c/ol\u003e\r\n```\r\n\r\n2. **Невпорядкований список (`\u003cul\u003e`):**\r\n\r\n```html\r\n\u003cul\u003e\r\n  \u003cli\u003eПункт 1\u003c/li\u003e\r\n  \u003cli\u003eПункт 2\u003c/li\u003e\r\n\u003c/ul\u003e\r\n```\r\n\r\n3. **Список з описом (`\u003cdl\u003e`):**\r\n\r\n```html\r\n\u003cdl\u003e\r\n  \u003cdt\u003eHTML\u003c/dt\u003e\r\n  \u003cdd\u003eМова розмітки\u003c/dd\u003e\r\n  \u003cdt\u003eJavaScript\u003c/dt\u003e\r\n  \u003cdd\u003eМова програмування\u003c/dd\u003e\r\n\u003c/dl\u003e\r\n```\r\n\r\n#### Розширені приклади:\r\n\r\n```html\r\n\u003c!-- Нумерований список з атрибутами --\u003e\r\n\u003col type=\"A\" start=\"3\"\u003e\r\n  \u003cli\u003eТретій пункт (C)\u003c/li\u003e\r\n  \u003cli\u003eЧетвертий пункт (D)\u003c/li\u003e\r\n\u003c/ol\u003e\r\n\r\n\u003c!-- Список з різними маркерами (CSS) --\u003e\r\n\u003cul style=\"list-style-type: square;\"\u003e\r\n  \u003cli\u003eКвадратний маркер\u003c/li\u003e\r\n  \u003cli\u003eЩе один квадратний маркер\u003c/li\u003e\r\n\u003c/ul\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e39. Чи можна вкладати списки в HTML? Якщо так, то як?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nТак, можна. Вкладені списки створюють всередині `\u003cli\u003e` елемента:\r\n\r\n```html\r\n\u003cul\u003e\r\n  \u003cli\u003e\r\n    Пункт 1\r\n    \u003cul\u003e\r\n      \u003cli\u003eВкладений пункт 1\u003c/li\u003e\r\n      \u003cli\u003eВкладений пункт 2\u003c/li\u003e\r\n    \u003c/ul\u003e\r\n  \u003c/li\u003e\r\n  \u003cli\u003eПункт 2\u003c/li\u003e\r\n\u003c/ul\u003e\r\n```\r\n\r\nМожна вкладати будь-які типи списків (`\u003cul\u003e` всередині `\u003col\u003e` і навпаки).\r\n\r\n#### Більш складний приклад:\r\n\r\n```html\r\n\u003col\u003e\r\n  \u003cli\u003e\r\n    Веб-технології\r\n    \u003cul\u003e\r\n      \u003cli\u003e\r\n        Frontend\r\n        \u003cul\u003e\r\n          \u003cli\u003eHTML\u003c/li\u003e\r\n          \u003cli\u003eCSS\u003c/li\u003e\r\n          \u003cli\u003eJavaScript\u003c/li\u003e\r\n        \u003c/ul\u003e\r\n      \u003c/li\u003e\r\n      \u003cli\u003e\r\n        Backend\r\n        \u003cul\u003e\r\n          \u003cli\u003eNode.js\u003c/li\u003e\r\n          \u003cli\u003ePython\u003c/li\u003e\r\n          \u003cli\u003ePHP\u003c/li\u003e\r\n        \u003c/ul\u003e\r\n      \u003c/li\u003e\r\n    \u003c/ul\u003e\r\n  \u003c/li\u003e\r\n  \u003cli\u003eМобільна розробка\u003c/li\u003e\r\n\u003c/ol\u003e\r\n```\r\n\r\n**Правило:** Вкладений список завжди має бути всередині `\u003cli\u003e`, а не між `\u003cli\u003e`\r\nелементами.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e40. Як можна згрупувати опції всередині тегу select?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nДля групування опцій у випадаючому списку використовуйте тег `\u003coptgroup\u003e`:\r\n\r\n```html\r\n\u003cselect name=\"course\"\u003e\r\n  \u003coptgroup label=\"Фронтенд\"\u003e\r\n    \u003coption value=\"html\"\u003eHTML\u003c/option\u003e\r\n    \u003coption value=\"css\"\u003eCSS\u003c/option\u003e\r\n    \u003coption value=\"js\"\u003eJavaScript\u003c/option\u003e\r\n  \u003c/optgroup\u003e\r\n\r\n  \u003coptgroup label=\"Бекенд\"\u003e\r\n    \u003coption value=\"php\"\u003ePHP\u003c/option\u003e\r\n    \u003coption value=\"python\"\u003ePython\u003c/option\u003e\r\n    \u003coption value=\"nodejs\"\u003eNode.js\u003c/option\u003e\r\n  \u003c/optgroup\u003e\r\n\r\n  \u003coptgroup label=\"Дизайн\"\u003e\r\n    \u003coption value=\"photoshop\"\u003ePhotoshop\u003c/option\u003e\r\n    \u003coption value=\"figma\"\u003eFigma\u003c/option\u003e\r\n  \u003c/optgroup\u003e\r\n\u003c/select\u003e\r\n```\r\n\r\n#### Переваги `\u003coptgroup\u003e`:\r\n\r\n- Візуально групує пов'язані опції\r\n- Покращує юзабіліті для довгих списків\r\n- Підтримує атрибут `label` для назви групи\r\n- Можна вимкнути групу через `disabled`\r\n\r\n#### Приклад з вимкненою групою:\r\n\r\n```html\r\n\u003cselect name=\"country\"\u003e\r\n  \u003coptgroup label=\"Європа\"\u003e\r\n    \u003coption value=\"ua\"\u003eУкраїна\u003c/option\u003e\r\n    \u003coption value=\"pl\"\u003eПольща\u003c/option\u003e\r\n  \u003c/optgroup\u003e\r\n\r\n  \u003coptgroup label=\"Азія\" disabled\u003e\r\n    \u003coption value=\"jp\"\u003eЯпонія\u003c/option\u003e\r\n    \u003coption value=\"cn\"\u003eКитай\u003c/option\u003e\r\n  \u003c/optgroup\u003e\r\n\u003c/select\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e41. Що таке HTML-форми та як їх створити?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nHTML-форма — це елемент, який збирає дані від користувача та відправляє їх на\r\nсервер або обробляє на клієнті.\r\n\r\n#### Приклад створення:\r\n\r\n```html\r\n\u003cform action=\"/submit\" method=\"post\"\u003e\r\n  \u003clabel for=\"name\"\u003eІм'я:\u003c/label\u003e\r\n  \u003cinput type=\"text\" id=\"name\" name=\"name\" /\u003e\r\n\r\n  \u003clabel for=\"email\"\u003eEmail:\u003c/label\u003e\r\n  \u003cinput type=\"email\" id=\"email\" name=\"email\" /\u003e\r\n\r\n  \u003cbutton type=\"submit\"\u003eВідправити\u003c/button\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n- `\u003cform\u003e` — контейнер форми.\r\n- `action` — URL, куди відправляються дані.\r\n- `method` — спосіб відправки (get або post).\r\n\r\n**Поля вводу** (`\u003cinput\u003e`, `\u003ctextarea\u003e`, `\u003cselect\u003e`) + кнопки (`\u003cbutton\u003e` або\r\n`\u003cinput type=\"submit\"\u003e`).\r\n\r\n#### Розширений приклад:\r\n\r\n```html\r\n\u003cform action=\"/register\" method=\"post\" enctype=\"multipart/form-data\"\u003e\r\n  \u003cfieldset\u003e\r\n    \u003clegend\u003eРеєстрація користувача\u003c/legend\u003e\r\n\r\n    \u003clabel for=\"username\"\u003eЛогін:\u003c/label\u003e\r\n    \u003cinput type=\"text\" id=\"username\" name=\"username\" required /\u003e\r\n\r\n    \u003clabel for=\"password\"\u003eПароль:\u003c/label\u003e\r\n    \u003cinput type=\"password\" id=\"password\" name=\"password\" required /\u003e\r\n\r\n    \u003clabel for=\"avatar\"\u003eАватар:\u003c/label\u003e\r\n    \u003cinput type=\"file\" id=\"avatar\" name=\"avatar\" accept=\"image/*\" /\u003e\r\n\r\n    \u003cbutton type=\"submit\"\u003eЗареєструватися\u003c/button\u003e\r\n    \u003cbutton type=\"reset\"\u003eОчистити\u003c/button\u003e\r\n  \u003c/fieldset\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e42. Опишіть різні типи вхідних даних форм у HTML5.\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nВ HTML5 у `\u003cinput\u003e` з'явилося багато типів для збору різних даних:\r\n\r\n#### Текстові типи:\r\n\r\n- `text` — звичайне текстове поле.\r\n- `password` — поле з прихованим введенням.\r\n- `email` — перевірка формату email.\r\n- `url` — перевірка формату URL.\r\n- `tel` — для телефонів (без валідації формату в HTML).\r\n- `search` — поле пошуку.\r\n\r\n#### Числові типи:\r\n\r\n- `number` — числове поле зі стрілками.\r\n- `range` — повзунок для вибору значення.\r\n\r\n#### Дата і час:\r\n\r\n- `date` — вибір дати.\r\n- `month` — вибір місяця та року.\r\n- `week` — вибір тижня.\r\n- `time` — вибір часу.\r\n- `datetime-local` — дата і час без часової зони.\r\n\r\n#### Інші типи:\r\n\r\n- `color` — вибір кольору.\r\n- `checkbox` — прапорець.\r\n- `radio` — перемикач (один із групи).\r\n- `file` — вибір файлу для завантаження.\r\n- `hidden` — приховане поле для передачі даних.\r\n\r\n#### Кнопки:\r\n\r\n- `submit`, `reset`, `button` — кнопки.\r\n\r\n#### Приклади:\r\n\r\n```html\r\n\u003cinput type=\"email\" placeholder=\"user@example.com\" /\u003e\r\n\u003cinput type=\"number\" min=\"1\" max=\"100\" step=\"1\" /\u003e\r\n\u003cinput type=\"range\" min=\"0\" max=\"100\" value=\"50\" /\u003e\r\n\u003cinput type=\"date\" value=\"2023-12-31\" /\u003e\r\n\u003cinput type=\"color\" value=\"#ff0000\" /\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e43. Як зробити вхідні дані форм обов'язковими?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nЩоб зробити поле форми обов'язковим, додаємо атрибут `required`:\r\n\r\n```html\r\n\u003cinput type=\"email\" name=\"userEmail\" required /\u003e\r\n```\r\n\r\n- Браузер не дасть відправити форму, поки поле не заповнене.\r\n\r\n- Для спеціалізованих типів (email, number, url) додатково перевіряється формат\r\n  введення.\r\n\r\n#### Розширені приклади:\r\n\r\n```html\r\n\u003c!-- Обов'язкове текстове поле --\u003e\r\n\u003cinput type=\"text\" name=\"name\" required placeholder=\"Введіть ваше ім'я\" /\u003e\r\n\r\n\u003c!-- Обов'язковий вибір з випадаючого списку --\u003e\r\n\u003cselect name=\"country\" required\u003e\r\n  \u003coption value=\"\"\u003eОберіть країну\u003c/option\u003e\r\n  \u003coption value=\"ua\"\u003eУкраїна\u003c/option\u003e\r\n  \u003coption value=\"pl\"\u003eПольща\u003c/option\u003e\r\n\u003c/select\u003e\r\n\r\n\u003c!-- Обов'язкове прийняття умов --\u003e\r\n\u003cinput type=\"checkbox\" name=\"terms\" required /\u003e\r\n\u003clabel for=\"terms\"\u003eЯ погоджуюсь з умовами використання\u003c/label\u003e\r\n\r\n\u003c!-- Обов'язкове заповнення textarea --\u003e\r\n\u003ctextarea name=\"message\" required placeholder=\"Ваше повідомлення\"\u003e\u003c/textarea\u003e\r\n```\r\n\r\n**Стилізація через CSS:**\r\n\r\n```css\r\ninput:required {\r\n  border-left: 3px solid red;\r\n}\r\n\r\ninput:valid {\r\n  border-left: 3px solid green;\r\n}\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e44. Яке призначення елемента label у формах?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n`\u003clabel\u003e` пов'язує текстову підказку з елементом форми, щоб користувачу було\r\nзрозуміло, що вводити.\r\n\r\n#### Переваги:\r\n\r\n- Покращує доступність (скрінрідери читають підказку разом із полем).\r\n\r\n- Клік по \u003clabel\u003e автоматично фокусує пов'язане поле.\r\n\r\n#### Приклади:\r\n\r\n**Зовнішній label (через for та id):**\r\n\r\n```html\r\n\u003clabel for=\"email\"\u003eEmail:\u003c/label\u003e \u003cinput type=\"email\" id=\"email\" name=\"email\" /\u003e\r\n```\r\n\r\n**Внутрішній label (обгортає елемент):**\r\n\r\n```html\r\n\u003clabel\u003e\r\n  \u003cinput type=\"checkbox\" name=\"agree\" /\u003e\r\n  Погоджуюсь з умовами\r\n\u003c/label\u003e\r\n```\r\n\r\n**Для radio buttons:**\r\n\r\n```html\r\n\u003cfieldset\u003e\r\n  \u003clegend\u003eОберіть розмір:\u003c/legend\u003e\r\n  \u003clabel\u003e\r\n    \u003cinput type=\"radio\" name=\"size\" value=\"small\" /\u003e\r\n    Малий\r\n  \u003c/label\u003e\r\n  \u003clabel\u003e\r\n    \u003cinput type=\"radio\" name=\"size\" value=\"large\" /\u003e\r\n    Великий\r\n  \u003c/label\u003e\r\n\u003c/fieldset\u003e\r\n```\r\n\r\n**Складніший приклад:**\r\n\r\n```html\r\n\u003cdiv class=\"form-group\"\u003e\r\n  \u003clabel for=\"password\"\u003e Пароль \u003cspan class=\"required\"\u003e*\u003c/span\u003e \u003c/label\u003e\r\n  \u003cinput type=\"password\" id=\"password\" name=\"password\" required /\u003e\r\n  \u003csmall\u003eМінімум 8 символів\u003c/small\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e45. Як групувати вхідні дані форм і чому це потрібно робити?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- Для групування даних у формах використовують `\u003cfieldset\u003e` і `\u003clegend\u003e`:\r\n\r\n```html\r\n\u003cfieldset\u003e\r\n  \u003clegend\u003eОсобисті дані\u003c/legend\u003e\r\n  \u003clabel for=\"name\"\u003eІм'я:\u003c/label\u003e\r\n  \u003cinput type=\"text\" id=\"name\" name=\"name\" /\u003e\r\n\r\n  \u003clabel for=\"email\"\u003eEmail:\u003c/label\u003e\r\n  \u003cinput type=\"email\" id=\"email\" name=\"email\" /\u003e\r\n\u003c/fieldset\u003e\r\n```\r\n\r\n#### Навіщо:\r\n\r\n- Візуально та логічно об'єднує пов'язані поля.\r\n\r\n- Покращує доступність (скрінрідери читають легенду).\r\n\r\n- Допомагає структурувати великі форми і робить їх зручнішими для користувача.\r\n\r\n#### Розширений приклад:\r\n\r\n```html\r\n\u003cform\u003e\r\n  \u003cfieldset\u003e\r\n    \u003clegend\u003eКонтактна інформація\u003c/legend\u003e\r\n    \u003clabel for=\"phone\"\u003eТелефон:\u003c/label\u003e\r\n    \u003cinput type=\"tel\" id=\"phone\" name=\"phone\" /\u003e\r\n\r\n    \u003clabel for=\"address\"\u003eАдреса:\u003c/label\u003e\r\n    \u003ctextarea id=\"address\" name=\"address\"\u003e\u003c/textarea\u003e\r\n  \u003c/fieldset\u003e\r\n\r\n  \u003cfieldset\u003e\r\n    \u003clegend\u003eНалаштування акаунту\u003c/legend\u003e\r\n    \u003clabel for=\"notifications\"\u003e\r\n      \u003cinput type=\"checkbox\" id=\"notifications\" name=\"notifications\" /\u003e\r\n      Отримувати сповіщення\r\n    \u003c/label\u003e\r\n\r\n    \u003clabel for=\"privacy\"\u003e\r\n      \u003cinput type=\"radio\" id=\"privacy\" name=\"privacy\" value=\"public\" /\u003e\r\n      Публічний профіль\r\n    \u003c/label\u003e\r\n  \u003c/fieldset\u003e\r\n\r\n  \u003cfieldset disabled\u003e\r\n    \u003clegend\u003eПреміум функції\u003c/legend\u003e\r\n    \u003cinput type=\"checkbox\" name=\"premium\" disabled /\u003e\r\n    \u003clabel\u003eДоступно тільки для преміум користувачів\u003c/label\u003e\r\n  \u003c/fieldset\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e46. Як створити форму в HTML і забезпечити її валідацію?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nСтворення форми з валідацією включає використання HTML5 атрибутів та JavaScript\r\nдля розширеної перевірки.\r\n\r\n#### HTML5 валідація:\r\n\r\n```html\r\n\u003cform action=\"/submit\" method=\"post\" novalidate\u003e\r\n  \u003clabel for=\"username\"\u003eЛогін:\u003c/label\u003e\r\n  \u003cinput\r\n    type=\"text\"\r\n    id=\"username\"\r\n    name=\"username\"\r\n    required\r\n    minlength=\"3\"\r\n    maxlength=\"20\"\r\n    pattern=\"[a-zA-Z0-9_]+\"\r\n    title=\"Тільки літери, цифри та підкреслення\"\r\n  /\u003e\r\n\r\n  \u003clabel for=\"email\"\u003eEmail:\u003c/label\u003e\r\n  \u003cinput type=\"email\" id=\"email\" name=\"email\" required /\u003e\r\n\r\n  \u003clabel for=\"age\"\u003eВік:\u003c/label\u003e\r\n  \u003cinput type=\"number\" id=\"age\" name=\"age\" min=\"18\" max=\"120\" required /\u003e\r\n\r\n  \u003clabel for=\"website\"\u003eВеб-сайт:\u003c/label\u003e\r\n  \u003cinput type=\"url\" id=\"website\" name=\"website\" /\u003e\r\n\r\n  \u003cbutton type=\"submit\"\u003eВідправити\u003c/button\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### Атрибути валідації:\r\n\r\n- `required` — обов'язкове поле\r\n- `minlength/maxlength` — мінімальна/максимальна довжина\r\n- `min/max` — мінімальне/максимальне значення для чисел\r\n- `pattern` — регулярний вираз\r\n- `step` — крок для числових полів\r\n\r\n#### CSS для стилізації:\r\n\r\n```css\r\ninput:valid {\r\n  border: 2px solid green;\r\n}\r\n\r\ninput:invalid {\r\n  border: 2px solid red;\r\n}\r\n\r\ninput:required {\r\n  background-color: #fff8dc;\r\n}\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e47. Які методи відправки даних форми ви знаєте?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nОсновні методи HTTP для відправки форм:\r\n\r\n#### GET метод:\r\n\r\n```html\r\n\u003cform action=\"/search\" method=\"get\"\u003e\r\n  \u003cinput type=\"text\" name=\"query\" placeholder=\"Пошук...\" /\u003e\r\n  \u003cbutton type=\"submit\"\u003eШукати\u003c/button\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n**Характеристики GET:**\r\n\r\n- Дані додаються до URL як параметри запиту\r\n- Видимі в адресному рядку\r\n- Можна додати в закладки\r\n- Обмеження по розміру даних\r\n- Використовується для пошуку, фільтрів\r\n\r\n#### POST метод:\r\n\r\n```html\r\n\u003cform action=\"/submit\" method=\"post\"\u003e\r\n  \u003cinput type=\"text\" name=\"username\" required /\u003e\r\n  \u003cinput type=\"password\" name=\"password\" required /\u003e\r\n  \u003cbutton type=\"submit\"\u003eУвійти\u003c/button\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n**Характеристики POST:**\r\n\r\n- Дані відправляються в тілі запиту\r\n- Не видимі в URL\r\n- Немає обмежень по розміру\r\n- Використовується для створення, оновлення даних\r\n\r\n#### Додаткові атрибути:\r\n\r\n```html\r\n\u003c!-- Для завантаження файлів --\u003e\r\n\u003cform action=\"/upload\" method=\"post\" enctype=\"multipart/form-data\"\u003e\r\n  \u003cinput type=\"file\" name=\"document\" required /\u003e\r\n  \u003cbutton type=\"submit\"\u003eЗавантажити\u003c/button\u003e\r\n\u003c/form\u003e\r\n\r\n\u003c!-- Перевизначення методу --\u003e\r\n\u003cform action=\"/update\" method=\"post\"\u003e\r\n  \u003cinput type=\"hidden\" name=\"_method\" value=\"PUT\" /\u003e\r\n  \u003cbutton type=\"submit\"\u003eОновити\u003c/button\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e48. Основні атрибути HTML-форм? Як вони впливають на надсилання даних з веб-сторінки?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n#### Атрибути елемента `\u003cform\u003e`:\r\n\r\n**action** — URL для відправки даних:\r\n\r\n```html\r\n\u003cform action=\"/process-form\" method=\"post\"\u003e\u003c/form\u003e\r\n```\r\n\r\n**method** — HTTP метод (GET, POST):\r\n\r\n```html\r\n\u003cform method=\"post\"\u003e\r\n  \u003c!-- Безпечно для конфіденційних даних --\u003e\r\n  \u003cform method=\"get\"\u003e\u003c!-- Для пошуку та фільтрів --\u003e\u003c/form\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n**enctype** — кодування даних:\r\n\r\n```html\r\n\u003c!-- За замовчуванням --\u003e\r\n\u003cform enctype=\"application/x-www-form-urlencoded\"\u003e\r\n  \u003c!-- Для файлів --\u003e\r\n  \u003cform enctype=\"multipart/form-data\"\u003e\r\n    \u003c!-- Простий текст --\u003e\r\n    \u003cform enctype=\"text/plain\"\u003e\u003c/form\u003e\r\n  \u003c/form\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n**target** — де відкрити результат:\r\n\r\n```html\r\n\u003cform target=\"_blank\"\u003e\r\n  \u003c!-- В новому вікні --\u003e\r\n  \u003cform target=\"_self\"\u003e\r\n    \u003c!-- В поточному вікні --\u003e\r\n    \u003cform target=\"frame1\"\u003e\u003c!-- В конкретному фреймі --\u003e\u003c/form\u003e\r\n  \u003c/form\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n**novalidate** — вимкнути HTML5 валідацію:\r\n\r\n```html\r\n\u003cform novalidate\u003e\r\n  \u003c!-- Валідація тільки через JavaScript --\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n**autocomplete** — автозаповнення:\r\n\r\n```html\r\n\u003cform autocomplete=\"on\"\u003e\r\n  \u003c!-- Увімкнути --\u003e\r\n  \u003cform autocomplete=\"off\"\u003e\u003c!-- Вимкнути --\u003e\u003c/form\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### Приклад повної форми:\r\n\r\n```html\r\n\u003cform\r\n  action=\"/contact\"\r\n  method=\"post\"\r\n  enctype=\"multipart/form-data\"\r\n  autocomplete=\"on\"\r\n  target=\"_self\"\r\n\u003e\r\n  \u003cinput type=\"text\" name=\"name\" autocomplete=\"name\" /\u003e\r\n  \u003cinput type=\"email\" name=\"email\" autocomplete=\"email\" /\u003e\r\n  \u003cinput type=\"file\" name=\"attachment\" /\u003e\r\n\r\n  \u003cbutton type=\"submit\"\u003eВідправити\u003c/button\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e49. Для чого використовується елемент datalist?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n`\u003cdatalist\u003e` надає список готових варіантів для поля вводу, створюючи\r\nавтодоповнення (autocomplete dropdown).\r\n\r\n#### Основне використання:\r\n\r\n```html\r\n\u003clabel for=\"browser\"\u003eОберіть браузер:\u003c/label\u003e\r\n\u003cinput list=\"browsers\" id=\"browser\" name=\"browser\" /\u003e\r\n\r\n\u003cdatalist id=\"browsers\"\u003e\r\n  \u003coption value=\"Chrome\"\u003e\u003c/option\u003e\r\n  \u003coption value=\"Firefox\"\u003e\u003c/option\u003e\r\n  \u003coption value=\"Safari\"\u003e\u003c/option\u003e\r\n  \u003coption value=\"Edge\"\u003e\u003c/option\u003e\r\n  \u003coption value=\"Opera\"\u003e\u003c/option\u003e\r\n\u003c/datalist\u003e\r\n```\r\n\r\n#### Переваги:\r\n\r\n- Користувач може обрати зі списку або ввести власний варіант\r\n- Покращує UX через швидкий вибір\r\n- Працює з різними типами input\r\n\r\n#### Розширені приклади:\r\n\r\n```html\r\n\u003c!-- З описом опцій --\u003e\r\n\u003cinput list=\"languages\" name=\"language\" placeholder=\"Мова програмування\" /\u003e\r\n\u003cdatalist id=\"languages\"\u003e\r\n  \u003coption value=\"JavaScript\" label=\"JS - Веб-розробка\"\u003e\u003c/option\u003e\r\n  \u003coption value=\"Python\" label=\"Python - Дані та ШІ\"\u003e\u003c/option\u003e\r\n  \u003coption value=\"Java\" label=\"Java - Корпоративна розробка\"\u003e\u003c/option\u003e\r\n\u003c/datalist\u003e\r\n\r\n\u003c!-- Для емейлів --\u003e\r\n\u003cinput type=\"email\" list=\"email-domains\" name=\"email\" /\u003e\r\n\u003cdatalist id=\"email-domains\"\u003e\r\n  \u003coption value=\"@gmail.com\"\u003e\u003c/option\u003e\r\n  \u003coption value=\"@yahoo.com\"\u003e\u003c/option\u003e\r\n  \u003coption value=\"@outlook.com\"\u003e\u003c/option\u003e\r\n\u003c/datalist\u003e\r\n\r\n\u003c!-- Для URL --\u003e\r\n\u003cinput type=\"url\" list=\"sites\" name=\"website\" /\u003e\r\n\u003cdatalist id=\"sites\"\u003e\r\n  \u003coption value=\"https://github.com/\"\u003e\u003c/option\u003e\r\n  \u003coption value=\"https://stackoverflow.com/\"\u003e\u003c/option\u003e\r\n  \u003coption value=\"https://developer.mozilla.org/\"\u003e\u003c/option\u003e\r\n\u003c/datalist\u003e\r\n```\r\n\r\n**Підтримка браузерів:** Всі сучасні браузери. У старих браузерах працює як\r\nзвичайний input.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e50. Що таке елемент output у HTML5?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n`\u003coutput\u003e` представляє результат обчислення або дії користувача. Зазвичай\r\nвикористовується для відображення результатів форм або динамічних розрахунків.\r\n\r\n#### Основні атрибути:\r\n\r\n- `for` — вказує на елементи, які впливають на результат\r\n- `form` — пов'язує з конкретною формою\r\n- `name` — ім'я для надсилання з формою\r\n\r\n#### Приклад з обчисленням:\r\n\r\n```html\r\n\u003cform\u003e\r\n  \u003clabel for=\"quantity\"\u003eКількість:\u003c/label\u003e\r\n  \u003cinput type=\"number\" id=\"quantity\" name=\"quantity\" value=\"1\" min=\"1\" /\u003e\r\n\r\n  \u003clabel for=\"price\"\u003eЦіна:\u003c/label\u003e\r\n  \u003cinput type=\"number\" id=\"price\" name=\"price\" value=\"100\" step=\"0.01\" /\u003e\r\n\r\n  \u003clabel for=\"total\"\u003eЗагальна сума:\u003c/label\u003e\r\n  \u003coutput id=\"total\" name=\"total\" for=\"quantity price\"\u003e100\u003c/output\u003e\r\n\u003c/form\u003e\r\n\r\n\u003cscript\u003e\r\n  function updateTotal() {\r\n    const quantity = document.getElementById('quantity').value;\r\n    const price = document.getElementById('price').value;\r\n    const total = quantity * price;\r\n    document.getElementById('total').textContent = total.toFixed(2);\r\n  }\r\n\r\n  document.getElementById('quantity').addEventListener('input', updateTotal);\r\n  document.getElementById('price').addEventListener('input', updateTotal);\r\n\u003c/script\u003e\r\n```\r\n\r\n#### Приклад з прогрес-баром:\r\n\r\n```html\r\n\u003cform\u003e\r\n  \u003clabel for=\"progress-slider\"\u003eПрогрес:\u003c/label\u003e\r\n  \u003cinput type=\"range\" id=\"progress-slider\" min=\"0\" max=\"100\" value=\"50\" /\u003e\r\n\r\n  \u003coutput id=\"progress-value\" for=\"progress-slider\"\u003e50%\u003c/output\u003e\r\n\u003c/form\u003e\r\n\r\n\u003cscript\u003e\r\n  document\r\n    .getElementById('progress-slider')\r\n    .addEventListener('input', function () {\r\n      document.getElementById('progress-value').textContent = this.value + '%';\r\n    });\r\n\u003c/script\u003e\r\n```\r\n\r\n**Семантика:** `\u003coutput\u003e` є семантично правильним способом показати результати,\r\nна відміну від `\u003cspan\u003e` або `\u003cdiv\u003e`.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e51. Що таке семантичний HTML?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- Семантичний HTML — це використання тегів за їхнім змістовим призначенням\r\n  (`\u003cheader\u003e`, `\u003cmain\u003e`, `\u003carticle\u003e`, `\u003csection\u003e`, `\u003cnav\u003e`, `\u003cfooter\u003e`, а не\r\n  `\u003cdiv\u003e` всюди).\r\n\r\n- Це робить структуру сторінки зрозумілішою для браузерів, пошукових систем і\r\n  `assistive`-технологій.\r\n\r\n- Для `SEO` це критично: пошуковики краще розпізнають ієрархію контенту,\r\n  визначають головні частини сторінки та підвищують релевантність у видачі.\r\n\r\nСемантична розмітка = краща доступність + зрозуміла структура + підсилення SEO.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e52. Що таке семантичні теги HTML і чому вони важливі?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nСемантичні теги HTML — це теги, які описують зміст і роль свого вмісту\r\n(наприклад, `\u003cheader\u003e`, `\u003cmain\u003e`, `\u003carticle\u003e`, `\u003cfooter\u003e`).\r\n\r\n#### Чому важливі:\r\n\r\n- Поліпшують SEO — пошукові системи краще розуміють структуру.\r\n\r\n- Доступність — скрінрідери можуть правильно інтерпретувати вміст.\r\n\r\n- Легше підтримувати та читати код.\r\n\r\n- Стандартизують структуру сторінки.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e53. Чим відрізняється article від section?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- `\u003carticle\u003e` — самостійний контент, який може існувати окремо (новини,\r\n  блог-пости, коментарі). Має зміст, зрозумілий поза контекстом сторінки.\r\n\r\n- `\u003csection\u003e` — тематичний розділ контенту, частина більшої структури. Зазвичай\r\n  має заголовок і логічно пов'язаний із рештою сторінки.\r\n\r\n#### Приклад:\r\n\r\n```html\r\n\u003carticle\u003e\r\n  \u003ch2\u003eСтаття про HTML5\u003c/h2\u003e\r\n  \u003csection\u003e\r\n    \u003ch3\u003eСемантичні теги\u003c/h3\u003e\r\n    \u003cp\u003eОпис семантичних тегів...\u003c/p\u003e\r\n  \u003c/section\u003e\r\n  \u003csection\u003e\r\n    \u003ch3\u003eДоступність\u003c/h3\u003e\r\n    \u003cp\u003eЯк семантика покращує доступність...\u003c/p\u003e\r\n  \u003c/section\u003e\r\n\u003c/article\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e54. Що нового в HTML5 порівняно з попередніми версіями?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nОсновні нововведення HTML5:\r\n\r\n- Семантичні теги: `\u003cheader\u003e`, `\u003cfooter\u003e`, `\u003cmain\u003e`, `\u003carticle\u003e`, `\u003csection\u003e`,\r\n  `\u003cnav\u003e`.\r\n\r\n- Розширені форми: нові типи `\u003cinput\u003e` (email, url, number, date, color тощо) та\r\n  атрибути (required, placeholder, pattern).\r\n\r\n- Мультимедіа: `\u003caudio\u003e` і `\u003cvideo\u003e` без сторонніх плагінів.\r\n\r\n- Графіка: `\u003ccanvas\u003e` для растрової графіки, `\u003csvg\u003e` для векторної.\r\n\r\n- API для JS: локальне сховище (localStorage, sessionStorage), геолокація,\r\n  drag-and-drop, Web Workers.\r\n\r\n- Подкастинг та інтеграція: `\u003cfigure\u003e`, `\u003cfigcaption\u003e` для зображень і підписів.\r\n\r\n- Покращена підтримка мобільних: `\u003cmeta name=\"viewport\"\u003e` та адаптивність.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e55. Як створити розділ на веб-сторінці за допомогою семантичних елементів HTML5?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nУ HTML5 для створення розділів використовують семантичні теги:\r\n\r\n```html\r\n\u003csection\u003e\r\n  \u003ch2\u003eПро нас\u003c/h2\u003e\r\n  \u003cp\u003eТекст про компанію...\u003c/p\u003e\r\n\u003c/section\u003e\r\n\r\n\u003carticle\u003e\r\n  \u003ch2\u003eНовина дня\u003c/h2\u003e\r\n  \u003cp\u003eТекст новини...\u003c/p\u003e\r\n\u003c/article\u003e\r\n\r\n\u003caside\u003e\r\n  \u003ch3\u003eПідказка\u003c/h3\u003e\r\n  \u003cp\u003eДодаткова інформація\u003c/p\u003e\r\n\u003c/aside\u003e\r\n```\r\n\r\n- `\u003csection\u003e` — логічний розділ сторінки.\r\n\r\n- `\u003carticle\u003e` — самостійний блок контенту, який може існувати окремо.\r\n\r\n- `\u003caside\u003e` — побічна інформація, наприклад, сайдбар.\r\n\r\n- `\u003cheader\u003e` і `\u003cfooter\u003e` — заголовки та підвал розділів або сторінки.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e56. Яка роль елемента article у HTML5?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n`\u003carticle\u003e` — семантичний елемент для самостійного контенту, який може існувати\r\nокремо від сторінки і бути зрозумілий поза контекстом.\r\n\r\n#### Приклади використання:\r\n\r\n- Новини, блоги, публікації.\r\n\r\n- Коментарі користувачів.\r\n\r\n- Форумні повідомлення.\r\n\r\n#### Переваги:\r\n\r\n- Покращує SEO і доступність.\r\n\r\n- Легко стилізується та структуровано організовує контент.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e57. Чи можете ви пояснити використання елементів nav та aside у HTML5?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- `\u003cnav\u003e` — семантичний контейнер для основної навігації по сайту: меню,\r\n  посилання на розділи чи сторінки.\r\n\r\n```html\r\n\u003cnav\u003e\r\n  \u003ca href=\"/\"\u003eГоловна\u003c/a\u003e\r\n  \u003ca href=\"/about\"\u003eПро нас\u003c/a\u003e\r\n\u003c/nav\u003e\r\n```\r\n\r\n- `\u003caside\u003e` — для додаткового або побічного контенту, який не є головним,\r\n  наприклад, сайдбари, підказки, реклами:\r\n\r\n```html\r\n\u003caside\u003e\r\n  \u003ch3\u003eПоради\u003c/h3\u003e\r\n  \u003cp\u003eКорисна інформація для користувача\u003c/p\u003e\r\n\u003c/aside\u003e\r\n```\r\n\r\nКоротко: \u003cnav\u003e = навігація, \u003caside\u003e = допоміжний або боковий контент.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e58. Як використовувати елементи figure та figcaption?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- `\u003cfigure\u003e` — контейнер для медіа (зображення, графіка, відео) із підписом.\r\n\r\n- `\u003cfigcaption\u003e` — підпис до медіа всередині `\u003cfigure\u003e`.\r\n\r\n#### Приклад:\r\n\r\n```html\r\n\u003cfigure\u003e\r\n  \u003cimg src=\"image.jpg\" alt=\"Опис зображення\" /\u003e\r\n  \u003cfigcaption\u003eПідпис до зображення\u003c/figcaption\u003e\r\n\u003c/figure\u003e\r\n```\r\n\r\n- Покращує семантику та доступність.\r\n\r\n- Легко стилізується CSS.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e59. Як створити таблицю в HTML і які основні теги для цього використовуються?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nВ HTML таблиця створюється тегом `\u003ctable\u003e`. Рядки — `\u003ctr\u003e`, заголовки стовпців —\r\n`\u003cth\u003e`, комірки — `\u003ctd\u003e`.\r\n\r\n#### Приклад:\r\n\r\n```html\r\n\u003ctable\u003e\r\n  \u003ctr\u003e\r\n    \u003cth\u003eІм'я\u003c/th\u003e\r\n    \u003cth\u003eВік\u003c/th\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003eІван\u003c/td\u003e\r\n    \u003ctd\u003e25\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n\u003c/table\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e60. Що таке thead, tbody та tfoot у HTML-таблиці і для чого вони потрібні?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- `\u003cthead\u003e` — групує рядки заголовків таблиці.\r\n\r\n- `\u003ctbody\u003e` — основна частина таблиці з даними.\r\n\r\n- `\u003ctfoot\u003e` — групує рядки підсумків (footer таблиці), відображається після\r\n  tbody, але може рендеритися браузером перед ним для оптимізації.\r\n\r\n#### Приклад:\r\n\r\n```html\r\n\u003ctable\u003e\r\n  \u003cthead\u003e\r\n    \u003ctr\u003e\r\n      \u003cth\u003eНазва\u003c/th\u003e\r\n      \u003cth\u003eЦіна\u003c/th\u003e\r\n    \u003c/tr\u003e\r\n  \u003c/thead\u003e\r\n  \u003ctbody\u003e\r\n    \u003ctr\u003e\r\n      \u003ctd\u003eТовар 1\u003c/td\u003e\r\n      \u003ctd\u003e100 грн\u003c/td\u003e\r\n    \u003c/tr\u003e\r\n    \u003ctr\u003e\r\n      \u003ctd\u003eТовар 2\u003c/td\u003e\r\n      \u003ctd\u003e200 грн\u003c/td\u003e\r\n    \u003c/tr\u003e\r\n  \u003c/tbody\u003e\r\n  \u003ctfoot\u003e\r\n    \u003ctr\u003e\r\n      \u003ctd\u003eЗагалом\u003c/td\u003e\r\n      \u003ctd\u003e300 грн\u003c/td\u003e\r\n    \u003c/tr\u003e\r\n  \u003c/tfoot\u003e\r\n\u003c/table\u003e\r\n```\r\n\r\n#### Переваги:\r\n\r\n- Покращує семантику та доступність\r\n- Дозволяє стилізувати різні частини таблиці окремо\r\n- Браузери можуть фіксувати заголовки при прокрутці\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e61. Що таке атрибути colspan і rowspan у HTML-таблицях?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- `colspan` — об'єднує комірку по кількох стовпцях.\r\n\r\n- `rowspan` — об'єднує комірку по кількох рядках.\r\n\r\n```html\r\n\u003ctd colspan=\"2\"\u003eОб'єднано 2 стовпці\u003c/td\u003e\r\n\u003ctd rowspan=\"3\"\u003eОб'єднано 3 рядки\u003c/td\u003e\r\n```\r\n\r\n#### Приклад:\r\n\r\n```html\r\n\u003ctable border=\"1\"\u003e\r\n  \u003ctr\u003e\r\n    \u003cth colspan=\"2\"\u003eЗаголовок на 2 колонки\u003c/th\u003e\r\n    \u003cth rowspan=\"2\"\u003eВертикальний заголовок\u003c/th\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003eКомірка 1\u003c/td\u003e\r\n    \u003ctd\u003eКомірка 2\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003eКомірка 3\u003c/td\u003e\r\n    \u003ctd\u003eКомірка 4\u003c/td\u003e\r\n    \u003ctd\u003eКомірка 5\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n\u003c/table\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e62. Як зробити HTML-таблицю доступною для користувачів з екранними рідерами?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- Використовувати семантичні теги: `\u003ctable\u003e`, `\u003cthead\u003e`, `\u003ctbody\u003e`, `\u003ctfoot\u003e`,\r\n  `\u003cth\u003e`.\r\n\r\n- Додавати атрибут scope у `\u003cth\u003e` (scope=\"col\" або scope=\"row\") для зв'язку\r\n  заголовків і комірок.\r\n\r\n- Додавати `\u003ccaption\u003e` для опису таблиці.\r\n\r\n- Уникати зайвого `rowspan/colspan`, якщо вони ускладнюють навігацію.\r\n\r\n- Забезпечити достатній контраст та видимі фокуси при навігації з клавіатури.\r\n\r\n#### Приклад доступної таблиці:\r\n\r\n```html\r\n\u003ctable\u003e\r\n  \u003ccaption\u003e\r\n    Продажі за 2024 рік\r\n  \u003c/caption\u003e\r\n  \u003cthead\u003e\r\n    \u003ctr\u003e\r\n      \u003cth scope=\"col\"\u003eМісяць\u003c/th\u003e\r\n      \u003cth scope=\"col\"\u003eПродажі\u003c/th\u003e\r\n      \u003cth scope=\"col\"\u003eПрибуток\u003c/th\u003e\r\n    \u003c/tr\u003e\r\n  \u003c/thead\u003e\r\n  \u003ctbody\u003e\r\n    \u003ctr\u003e\r\n      \u003cth scope=\"row\"\u003eСічень\u003c/th\u003e\r\n      \u003ctd\u003e1000\u003c/td\u003e\r\n      \u003ctd\u003e200\u003c/td\u003e\r\n    \u003c/tr\u003e\r\n  \u003c/tbody\u003e\r\n\u003c/table\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e63. Що таке елемент canvas? І для чого він використовується?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n`\u003ccanvas\u003e` — растровий холст для малювання графіки через JavaScript API.\r\n\r\n#### Використання:\r\n\r\n- Ігри та інтерактивна графіка\r\n- Складні візуалізації даних\r\n- Обробка зображень\r\n- Анімації та ефекти\r\n\r\n#### Приклад:\r\n\r\n```html\r\n\u003ccanvas id=\"myCanvas\" width=\"400\" height=\"200\"\u003e\u003c/canvas\u003e\r\n\r\n\u003cscript\u003e\r\n  const canvas = document.getElementById('myCanvas');\r\n  const ctx = canvas.getContext('2d');\r\n\r\n  // Малюємо прямокутник\r\n  ctx.fillStyle = 'blue';\r\n  ctx.fillRect(50, 50, 100, 75);\r\n\r\n  // Малюємо коло\r\n  ctx.beginPath();\r\n  ctx.arc(200, 100, 50, 0, 2 * Math.PI);\r\n  ctx.fillStyle = 'red';\r\n  ctx.fill();\r\n\u003c/script\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e64. Різниця між canvas та svg? У яких випадках краще використовувати canvas, а в яких svg?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n#### `\u003ccanvas\u003e`:\r\n\r\n- Растрова графіка (пікселі)\r\n- Малювання через JavaScript API\r\n- Підходить для ігор, складної анімації, обробки зображень\r\n- Масштабування може погіршити якість\r\n- Неможливо стилізувати окремі елементи CSS\r\n\r\n#### `\u003csvg\u003e`:\r\n\r\n- Векторна графіка (математичні об'єкти)\r\n- Описується XML-розміткою\r\n- Підходить для іконок, логотипів, простих діаграм\r\n- Безкінечне масштабування без втрати якості\r\n- Можна стилізувати CSS та анімувати\r\n\r\n#### Коли використовувати:\r\n\r\n**Canvas** → ігри, складна графіка, обробка фото, реал-тайм анімації\r\n\r\n**SVG** → іконки, логотипи, прості діаграми, масштабована графіка\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e65. Яка різниця між елементами svg та canvas?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- `\u003csvg\u003e` — векторна графіка, кожен елемент DOM-структурований, масштабований\r\n  без втрати якості, легкий для анімації та стилізації через CSS/JS.\r\n\r\n- `\u003ccanvas\u003e` — растровий холст, малювання відбувається через JS API, не має\r\n  внутрішньої семантики елементів, масштабування може знизити якість, підходить\r\n  для ігор і складної графіки.\r\n\r\n#### Порівняння:\r\n\r\n| Характеристика | SVG                               | Canvas                      |\r\n| -------------- | --------------------------------- | --------------------------- |\r\n| Тип графіки    | Векторна                          | Растрова                    |\r\n| DOM-структура  | Так                               | Ні                          |\r\n| Масштабування  | Без втрат                         | З втратами                  |\r\n| Стилізація CSS | Так                               | Обмежено                    |\r\n| Продуктивність | Повільніше при багатьох елементах | Швидше для складної графіки |\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e66. Що ви знаєте про SVG? Які є варіанти додавання SVG на сторінки сайту? Чим вони відрізняються?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n**SVG (Scalable Vector Graphics)** — векторний формат для графіки, що\r\nмасштабується без втрати якості.\r\n\r\n#### Способи додавання SVG:\r\n\r\n1. **Inline SVG** — безпосередньо в HTML:\r\n\r\n```html\r\n\u003csvg width=\"100\" height=\"100\"\u003e\r\n  \u003ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" /\u003e\r\n\u003c/svg\u003e\r\n```\r\n\r\n- **Переваги:** повний контроль CSS/JS, доступність\r\n- **Недоліки:** збільшує розмір HTML\r\n\r\n2. **Як зображення** — через `\u003cimg\u003e`:\r\n\r\n```html\r\n\u003cimg src=\"icon.svg\" alt=\"Іконка\" /\u003e\r\n```\r\n\r\n- **Переваги:** кешується, компактний HTML\r\n- **Недоліки:** не можна стилізувати CSS\r\n\r\n3. **CSS background**:\r\n\r\n```css\r\n.icon {\r\n  background-image: url('icon.svg');\r\n}\r\n```\r\n\r\n4. **Через `\u003cobject\u003e` або `\u003cembed\u003e`**:\r\n\r\n```html\r\n\u003cobject data=\"graphic.svg\" type=\"image/svg+xml\"\u003e\u003c/object\u003e\r\n```\r\n\r\n**Найкращий вибір:** inline для іконок, що потребують стилізації; `\u003cimg\u003e` для\r\nстатичної графіки.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e67. Як створювати карти зображень у HTML?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nHTML-карта зображень (image map) дозволяє зробити частини зображення\r\nклікабельними.\r\n\r\n#### Приклад:\r\n\r\n```html\r\n\u003cimg src=\"plan.jpg\" usemap=\"#map1\" alt=\"План будівлі\" /\u003e\r\n\r\n\u003cmap name=\"map1\"\u003e\r\n  \u003carea shape=\"rect\" coords=\"34,44,270,350\" href=\"room1.html\" alt=\"Кімната 1\" /\u003e\r\n  \u003carea shape=\"circle\" coords=\"337,300,44\" href=\"room2.html\" alt=\"Кімната 2\" /\u003e\r\n  \u003carea\r\n    shape=\"poly\"\r\n    coords=\"400,50,500,50,450,150\"\r\n    href=\"room3.html\"\r\n    alt=\"Кімната 3\"\r\n  /\u003e\r\n\u003c/map\u003e\r\n```\r\n\r\n#### Пояснення:\r\n\r\n- `usemap=\"#map1\"` — прив'язка картинки до карти\r\n- `\u003carea\u003e` — задає клікабельну область:\r\n  - `shape=\"rect\"` — прямокутник (coords: x1,y1,x2,y2)\r\n  - `shape=\"circle\"` — коло (coords: x,y,radius)\r\n  - `shape=\"poly\"` — багатокутник (coords: x1,y1,x2,y2,x3,y3...)\r\n- `href` — посилання при кліку\r\n- `alt` — альтернативний текст для доступності\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e68. Як додати аудіо та відео в HTML-документ за допомогою вбудованих тегів?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- **Аудіо** — тег `\u003caudio\u003e` з атрибутом controls:\r\n\r\n```html\r\n\u003caudio controls\u003e\r\n  \u003csource src=\"sound.mp3\" type=\"audio/mpeg\" /\u003e\r\n  \u003csource src=\"sound.ogg\" type=\"audio/ogg\" /\u003e\r\n  Ваш браузер не підтримує аудіо.\r\n\u003c/audio\u003e\r\n```\r\n\r\n- **Відео** — тег `\u003cvideo\u003e` з атрибутом controls:\r\n\r\n```html\r\n\u003cvideo controls width=\"640\" height=\"360\"\u003e\r\n  \u003csource src=\"video.mp4\" type=\"video/mp4\" /\u003e\r\n  \u003csource src=\"video.webm\" type=\"video/webm\" /\u003e\r\n  Ваш браузер не підтримує відео.\r\n\u003c/video\u003e\r\n```\r\n\r\n#### Важливо:\r\n\r\n- `\u003csource\u003e` — дозволяє вказати кілька форматів для кращої сумісності\r\n- Текст між тегами — fallback для старих браузерів\r\n- `controls` — показує елементи керування (play/pause/volume)\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e69. Які основні атрибути підтримують теги video та audio у HTML?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n#### Спільні атрибути для `\u003cvideo\u003e` та `\u003caudio\u003e`:\r\n\r\n- `src` — шлях до файлу (можна замість `\u003csource\u003e`)\r\n- `controls` — відображає елементи керування\r\n- `autoplay` — автоматичне відтворення (часто вимагає muted)\r\n- `loop` — повторне відтворення після завершення\r\n- `muted` — без звуку\r\n- `preload` — підвантаження:\r\n  - `none` — не завантажувати наперед\r\n  - `metadata` — тільки метадані\r\n  - `auto` — браузер сам вирішує\r\n\r\n#### Додатково для `\u003cvideo\u003e`:\r\n\r\n- `width`, `height` — розміри відеоплеєра\r\n- `poster` — зображення-заставка до початку відтворення\r\n\r\n#### Приклад:\r\n\r\n```html\r\n\u003cvideo\r\n  controls\r\n  width=\"800\"\r\n  height=\"450\"\r\n  poster=\"preview.jpg\"\r\n  preload=\"metadata\"\r\n\u003e\r\n  \u003csource src=\"movie.mp4\" type=\"video/mp4\" /\u003e\r\n\u003c/video\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e70. Як додати субтитри або підписи до відео в HTML?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nВикористати тег `\u003ctrack\u003e` всередині `\u003cvideo\u003e`.\r\n\r\n#### Атрибути `\u003ctrack\u003e`:\r\n\r\n- `src` — файл субтитрів (формат .vtt)\r\n- `kind` — тип (subtitles, captions, descriptions, chapters, metadata)\r\n- `srclang` — мова субтитрів (en, uk)\r\n- `label` — назва треку в меню\r\n- `default` — трек за замовчуванням\r\n\r\n#### Приклад:\r\n\r\n```html\r\n\u003cvideo controls\u003e\r\n  \u003csource src=\"movie.mp4\" type=\"video/mp4\" /\u003e\r\n  \u003ctrack src=\"subtitles_en.vtt\" kind=\"subtitles\" srclang=\"en\" label=\"English\" /\u003e\r\n  \u003ctrack\r\n    src=\"subtitles_uk.vtt\"\r\n    kind=\"subtitles\"\r\n    srclang=\"uk\"\r\n    label=\"Українська\"\r\n    default\r\n  /\u003e\r\n  \u003ctrack\r\n    src=\"descriptions.vtt\"\r\n    kind=\"descriptions\"\r\n    srclang=\"uk\"\r\n    label=\"Аудіоопис\"\r\n  /\u003e\r\n\u003c/video\u003e\r\n```\r\n\r\n#### Формат .vtt файлу:\r\n\r\n```\r\nWEBVTT\r\n\r\n00:00:00.000 --\u003e 00:00:03.000\r\nПривіт! Це перший рядок субтитрів.\r\n\r\n00:00:03.000 --\u003e 00:00:06.000\r\nА це другий рядок.\r\n```\r\n\r\nБраузер покаже вибір субтитрів, якщо формат `.vtt` коректний.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e71. Чи можете ви пояснити призначення метатегів у HTML?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nМетатеги у `\u003chead\u003e` зберігають метадані про сторінку — інформацію, яку не видно\r\nкористувачу, але використовують браузери, пошукові системи та сервіси.\r\n\r\n#### Приклади призначення:\r\n\r\n- `\u003cmeta charset=\"UTF-8\"\u003e` — задає кодування.\r\n\r\n- `\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e` —\r\n  адаптивність на мобільних.\r\n\r\n- `\u003cmeta name=\"description\" content=\"Опис сторінки\"\u003e` — SEO.\r\n\r\n- `\u003cmeta name=\"robots\" content=\"index, follow\"\u003e` — інструкції для пошукових\r\n  ботів.\r\n\r\n#### Додаткові приклади:\r\n\r\n```html\r\n\u003chead\u003e\r\n  \u003cmeta charset=\"UTF-8\" /\u003e\r\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\r\n  \u003cmeta\r\n    name=\"description\"\r\n    content=\"Короткий опис сторінки для пошукових систем\"\r\n  /\u003e\r\n  \u003cmeta name=\"keywords\" content=\"ключові, слова, для, seo\" /\u003e\r\n  \u003cmeta name=\"author\" content=\"Ім'я автора\" /\u003e\r\n  \u003cmeta name=\"robots\" content=\"index, follow\" /\u003e\r\n\r\n  \u003c!-- Open Graph для соціальних мереж --\u003e\r\n  \u003cmeta property=\"og:title\" content=\"Заголовок для Facebook\" /\u003e\r\n  \u003cmeta property=\"og:description\" content=\"Опис для соціальних мереж\" /\u003e\r\n  \u003cmeta property=\"og:image\" content=\"image.jpg\" /\u003e\r\n\r\n  \u003c!-- Twitter Cards --\u003e\r\n  \u003cmeta name=\"twitter:card\" content=\"summary_large_image\" /\u003e\r\n  \u003cmeta name=\"twitter:title\" content=\"Заголовок для Twitter\" /\u003e\r\n\u003c/head\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e72. Як пов'язати CSS-файл з HTML-документом?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- У `\u003chead\u003e` додаємо тег:\r\n\r\n```html\r\n\u003clink rel=\"stylesheet\" href=\"styles.css\" /\u003e\r\n```\r\n\r\n#### Атрибути:\r\n\r\n- `rel=\"stylesheet\"` — вказує, що це файл стилів\r\n- `href` — шлях до CSS-файлу\r\n\r\n#### Додаткові варіанти:\r\n\r\n```html\r\n\u003c!-- Основний CSS файл --\u003e\r\n\u003clink rel=\"stylesheet\" href=\"css/main.css\" /\u003e\r\n\r\n\u003c!-- CSS з медіа-запитами --\u003e\r\n\u003clink rel=\"stylesheet\" href=\"css/print.css\" media=\"print\" /\u003e\r\n\u003clink rel=\"stylesheet\" href=\"css/mobile.css\" media=\"(max-width: 768px)\" /\u003e\r\n\r\n\u003c!-- CSS з CDN --\u003e\r\n\u003clink\r\n  rel=\"stylesheet\"\r\n  href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css\"\r\n/\u003e\r\n\r\n\u003c!-- Внутрішні стилі --\u003e\r\n\u003cstyle\u003e\r\n  body {\r\n    margin: 0;\r\n    padding: 20px;\r\n  }\r\n\u003c/style\u003e\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e73. Як пов'язати JavaScript-файл з HTML-документом?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- Через тег `\u003cscript\u003e`:\r\n\r\n```html\r\n\u003cscript src=\"script.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n#### Розміщення та атрибути:\r\n\r\n```html\r\n\u003c!-- В \u003chead\u003e - завантажується до рендерингу сторінки --\u003e\r\n\u003chead\u003e\r\n  \u003cscript src=\"script.js\"\u003e\u003c/script\u003e\r\n\u003c/head\u003e\r\n\r\n\u003c!-- Перед \u003c/body\u003e - завантажується після HTML (рекомендовано) --\u003e\r\n\u003cbody\u003e\r\n  \u003c!-- HTML контент --\u003e\r\n  \u003cscript src=\"script.js\"\u003e\u003c/script\u003e\r\n\u003c/body\u003e\r\n\r\n\u003c!-- Асинхронне завантаження --\u003e\r\n\u003cscript src=\"script.js\" async\u003e\u003c/script\u003e\r\n\r\n\u003c!-- Відкладене завантаження --\u003e\r\n\u003cscript src=\"script.js\" defer\u003e\u003c/script\u003e\r\n\r\n\u003c!-- Внутрішній JavaScript --\u003e\r\n\u003cscript\u003e\r\n  console.log('Привіт, світ!');\r\n\u003c/script\u003e\r\n\r\n\u003c!-- JavaScript з CDN --\u003e\r\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n#### Різниця між async та defer:\r\n\r\n- `async` — завантажується паралельно і виконується одразу\r\n- `defer` — завантажується паралельно, але виконується після HTML\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e74. Що таке iframe і для чого його використовують?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n`\u003ciframe\u003e` — це елемент для вбудовування іншої HTML-сторінки всередину поточної\r\nсторінки.\r\n\r\n#### Синтаксис:\r\n\r\n```html\r\n\u003ciframe src=\"https://example.com\" width=\"600\" height=\"400\"\u003e\u003c/iframe\u003e\r\n```\r\n\r\n#### Основні атрибути:\r\n\r\n```html\r\n\u003ciframe\r\n  src=\"https://www.youtube.com/embed/dQw4w9WgXcQ\"\r\n  width=\"560\"\r\n  height=\"315\"\r\n  frameborder=\"0\"\r\n  allowfullscreen\r\n  title=\"YouTube відео\"\r\n  loading=\"lazy\"\r\n\u003e\r\n\u003c/iframe\u003e\r\n```\r\n\r\n#### Використання:\r\n\r\n- **Вбудовування відео** (YouTube, Vimeo)\r\n- **Карти** (Google Maps)\r\n- **Соціальні віджети** (Facebook, Twitter)\r\n- **Зовнішні форми** чи додатки\r\n- **Пісочниці** для демонстрації коду\r\n\r\n#### Атрибути безпеки:\r\n\r\n```html\r\n\u003ciframe\r\n  src=\"untrusted-content.html\"\r\n  sandbox=\"allow-scripts allow-same-origin\"\r\n  referrerpolicy=\"no-referrer\"\r\n\u003e\r\n\u003c/iframe\u003e\r\n```\r\n\r\n**Недоліки:** може впливати на SEO, безпеку та швидкість завантаження.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e75. Як додати коментар у HTML і чому його використовувати?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n#### Синтаксис:\r\n\r\n```html\r\n\u003c!-- Це коментар --\u003e\r\n```\r\n\r\n#### Призначення:\r\n\r\n- **Пояснення коду** для себе або колег\r\n- **Тимчасове вимкнення** частини розмітки без видалення\r\n- **Позначення секцій** коду для зручності навігації\r\n- **Документування** складної структури\r\n\r\n#### Приклади використання:\r\n\r\n```html\r\n\u003c!-- Заголовок сторінки --\u003e\r\n\u003cheader\u003e\r\n  \u003ch1\u003eМоя сторінка\u003c/h1\u003e\r\n  \u003c!-- TODO: додати логотип --\u003e\r\n\u003c/header\u003e\r\n\r\n\u003c!-- Основний контент --\u003e\r\n\u003cmain\u003e\r\n  \u003csection\u003e\r\n    \u003ch2\u003eПро нас\u003c/h2\u003e\r\n    \u003cp\u003eТекст про компанію...\u003c/p\u003e\r\n  \u003c/section\u003e\r\n\r\n  \u003c!-- \r\n    Тимчасово приховано до завершення розробки\r\n    \u003csection\u003e\r\n      \u003ch2\u003eНаші послуги\u003c/h2\u003e\r\n      \u003cp\u003eСписок послуг...\u003c/p\u003e\r\n    \u003c/section\u003e\r\n  --\u003e\r\n\u003c/main\u003e\r\n\r\n\u003c!-- \r\n  Кінець основного контенту\r\n  Далі йде підвал сторінки\r\n--\u003e\r\n\u003cfooter\u003e\r\n  \u003cp\u003e\u0026copy; 2024 Моя компанія\u003c/p\u003e\r\n\u003c/footer\u003e\r\n```\r\n\r\n**Важливо:** коментарі видимі в коді сторінки, тому не додавайте конфіденційну\r\nінформацію!\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e76. Різниця між кнопкою та посиланням у HTML?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n#### `\u003cbutton\u003e` — для дій:\r\n\r\n- Відправка форм\r\n- Виклик JavaScript функцій\r\n- Зміна стану сторінки\r\n- Інтерактивні елементи UI\r\n\r\n#### `\u003ca\u003e` — для навігації:\r\n\r\n- Перехід на інші сторінки\r\n- Переходи всередині сторінки (якорі)\r\n- Завантаження файлів\r\n- Посилання на зовнішні ресурси\r\n\r\n#### Приклади правильного використання:\r\n\r\n```html\r\n\u003c!-- Кнопки для дій --\u003e\r\n\u003cbutton type=\"submit\"\u003eВідправити форму\u003c/button\u003e\r\n\u003cbutton onclick=\"toggleMenu()\"\u003eВідкрити меню\u003c/button\u003e\r\n\u003cbutton type=\"button\" id=\"likeBtn\"\u003eПодобається\u003c/button\u003e\r\n\r\n\u003c!-- Посилання для навігації --\u003e\r\n\u003ca href=\"/about\"\u003eПро нас\u003c/a\u003e\r\n\u003ca href=\"#contacts\"\u003eПерейти до контактів\u003c/a\u003e\r\n\u003ca href=\"document.pdf\" download\u003eЗавантажити PDF\u003c/a\u003e\r\n\u003ca href=\"https://external-site.com\" target=\"_blank\"\u003eЗовнішнє посилання\u003c/a\u003e\r\n```\r\n\r\n#### Семантична важливість:\r\n\r\n- **Кнопки** розуміються скрінрідерами як елементи дії\r\n- **Посилання** розуміються як навігаційні елементи\r\n- Це впливає на доступність та SEO\r\n\r\n#### Стилізація:\r\n\r\n```html\r\n\u003c!-- Посилання, стилізоване як кнопка (але семантично залишається посиланням) --\u003e\r\n\u003ca href=\"/signup\" class=\"btn\"\u003eЗареєструватися\u003c/a\u003e\r\n\r\n\u003c!-- Кнопка для навігації (неправильно з точки зору семантики) --\u003e\r\n\u003cbutton onclick=\"location.href='/signup'\"\u003eЗареєструватися\u003c/button\u003e\r\n```\r\n\r\n**Правило:** використовуйте `\u003ca\u003e` для навігації, `\u003cbutton\u003e` для дій.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e77. Як правильно створити семантичну панель навігації в HTML?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- Використовуємо семантичний тег `\u003cnav\u003e` з внутрішнім списком посилань\r\n  `\u003cul\u003e\u003cli\u003e\u003ca\u003e`. Це забезпечує доступність і правильну структуру.\r\n\r\n#### Базовий приклад:\r\n\r\n```html\r\n\u003cnav\u003e\r\n  \u003cul\u003e\r\n    \u003cli\u003e\u003ca href=\"/\"\u003eГоловна\u003c/a\u003e\u003c/li\u003e\r\n    \u003cli\u003e\u003ca href=\"/about\"\u003eПро нас\u003c/a\u003e\u003c/li\u003e\r\n    \u003cli\u003e\u003ca href=\"/services\"\u003eПослуги\u003c/a\u003e\u003c/li\u003e\r\n    \u003cli\u003e\u003ca href=\"/contact\"\u003eКонтакти\u003c/a\u003e\u003c/li\u003e\r\n  \u003c/ul\u003e\r\n\u003c/nav\u003e\r\n```\r\n\r\n#### Розширений приклад з підменю:\r\n\r\n```html\r\n\u003cnav aria-label=\"Основна навігація\"\u003e\r\n  \u003cul\u003e\r\n    \u003cli\u003e\u003ca href=\"/\" aria-current=\"page\"\u003eГоловна\u003c/a\u003e\u003c/li\u003e\r\n    \u003cli\u003e\r\n      \u003ca href=\"/services\"\u003eПослуги\u003c/a\u003e\r\n      \u003cul\u003e\r\n        \u003cli\u003e\u003ca href=\"/services/web-design\"\u003eВеб-дизайн\u003c/a\u003e\u003c/li\u003e\r\n        \u003cli\u003e\u003ca href=\"/services/development\"\u003eРозробка\u003c/a\u003e\u003c/li\u003e\r\n        \u003cli\u003e\u003ca href=\"/services/seo\"\u003eSEO\u003c/a\u003e\u003c/li\u003e\r\n      \u003c/ul\u003e\r\n    \u003c/li\u003e\r\n    \u003cli\u003e\u003ca href=\"/about\"\u003eПро нас\u003c/a\u003e\u003c/li\u003e\r\n    \u003cli\u003e\u003ca href=\"/contact\"\u003eКонтакти\u003c/a\u003e\u003c/li\u003e\r\n  \u003c/ul\u003e\r\n\u003c/nav\u003e\r\n```\r\n\r\n#### Принципи семантичної навігації:\r\n\r\n1. **Використовуйте `\u003cnav\u003e`** для основних навігаційних блоків\r\n2. **Структуруйте списками** `\u003cul\u003e\u003cli\u003e\u003ca\u003e`\r\n3. **Додавайте `aria-label`** для множинних навігацій\r\n4. **Позначайте поточну сторінку** `aria-current=\"page\"`\r\n5. **Забезпечте доступність** клавіатурної навігації\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e78. Як семантично правильно згорнути навігаційне меню?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\nДля семантично правильного згортання навігаційного меню використовуйте елемент\r\n`\u003cnav\u003e` всередині якого знаходяться списки з посиланнями.\r\n\r\n#### Приклад з використанням `\u003cdetails\u003e` та `\u003csummary\u003e`:\r\n\r\n```html\r\n\u003cnav\u003e\r\n  \u003cdetails\u003e\r\n    \u003csummary\u003eМеню\u003c/summary\u003e\r\n    \u003cul\u003e\r\n      \u003cli\u003e\u003ca href=\"/\"\u003eГоловна\u003c/a\u003e\u003c/li\u003e\r\n      \u003cli\u003e\u003ca href=\"/about\"\u003eПро нас\u003c/a\u003e\u003c/li\u003e\r\n      \u003cli\u003e\u003ca href=\"/services\"\u003eПослуги\u003c/a\u003e\u003c/li\u003e\r\n      \u003cli\u003e\u003ca href=\"/contact\"\u003eКонтакти\u003c/a\u003e\u003c/li\u003e\r\n    \u003c/ul\u003e\r\n  \u003c/details\u003e\r\n\u003c/nav\u003e\r\n```\r\n\r\n#### Приклад з кнопкою для мобільного меню:\r\n\r\n```html\r\n\u003cnav aria-label=\"Основна навігація\"\u003e\r\n  \u003cbutton aria-expanded=\"false\" aria-controls=\"main-menu\" class=\"menu-toggle\"\u003e\r\n    ☰ Меню\r\n  \u003c/button\u003e\r\n\r\n  \u003cul id=\"main-menu\" class=\"nav-menu\" hidden\u003e\r\n    \u003cli\u003e\u003ca href=\"/\"\u003eГоловна\u003c/a\u003e\u003c/li\u003e\r\n    \u003cli\u003e\u003ca href=\"/about\"\u003eПро нас\u003c/a\u003e\u003c/li\u003e\r\n    \u003cli\u003e\u003ca href=\"/services\"\u003eПослуги\u003c/a\u003e\u003c/li\u003e\r\n    \u003cli\u003e\u003ca href=\"/contact\"\u003eКонтакти\u003c/a\u003e\u003c/li\u003e\r\n  \u003c/ul\u003e\r\n\u003c/nav\u003e\r\n\r\n\u003cscript\u003e\r\n  document.querySelector('.menu-toggle').addEventListener('click', function () {\r\n    const menu = document.getElementById('main-menu');\r\n    const isExpanded = this.getAttribute('aria-expanded') === 'true';\r\n\r\n    this.setAttribute('aria-expanded', !isExpanded);\r\n    menu.hidden = isExpanded;\r\n  });\r\n\u003c/script\u003e\r\n```\r\n\r\n#### Важливі принципи:\r\n\r\n- Використовуйте **ARIA-атрибути** для доступності\r\n- **`aria-expanded`** показує стан меню\r\n- **`aria-controls`** вказує на контрольований елемент\r\n- **`hidden`** приховує меню від скрінрідерів\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e79. Як створити базове випадаюче меню в HTML і CSS без JavaScript?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n- Використовуємо вкладені списки `\u003cul\u003e` і керуємо показом підменю через\r\n  `:hover`.\r\n\r\n#### Приклад:\r\n\r\n```html\r\n\u003cnav\u003e\r\n  \u003cul class=\"menu\"\u003e\r\n    \u003cli\u003e\r\n      \u003ca href=\"/services\"\u003eПослуги\u003c/a\u003e\r\n      \u003cul class=\"dropdown\"\u003e\r\n        \u003cli\u003e\u003ca href=\"/services/web-development\"\u003eВеб-розробка\u003c/a\u003e\u003c/li\u003e\r\n        \u003cli\u003e\u003ca href=\"/services/ui-design\"\u003eUI/UX Дизайн\u003c/a\u003e\u003c/li\u003e\r\n        \u003cli\u003e\u003ca href=\"/services/seo\"\u003eSEO оптимізація\u003c/a\u003e\u003c/li\u003e\r\n      \u003c/ul\u003e\r\n    \u003c/li\u003e\r\n    \u003cli\u003e\u003ca href=\"/about\"\u003eПро нас\u003c/a\u003e\u003c/li\u003e\r\n    \u003cli\u003e\u003ca href=\"/contact\"\u003eКонтакти\u003c/a\u003e\u003c/li\u003e\r\n  \u003c/ul\u003e\r\n\u003c/nav\u003e\r\n\r\n\u003cstyle\u003e\r\n  /* Основні стилі меню */\r\n  .menu {\r\n    list-style: none;\r\n    margin: 0;\r\n    padding: 0;\r\n    display: flex;\r\n  }\r\n\r\n  .menu li {\r\n    position: relative;\r\n  }\r\n\r\n  .menu a {\r\n    display: block;\r\n    padding: 15px 20px;\r\n    text-decoration: none;\r\n    color: #333;\r\n    background: #f8f9fa;\r\n    border-right: 1px solid #ddd;\r\n  }\r\n\r\n  .menu a:hover {\r\n    background: #e9ecef;\r\n  }\r\n\r\n  /* Стилі випадаючого меню */\r\n  .dropdown {\r\n    position: absolute;\r\n    top: 100%;\r\n    left: 0;\r\n    min-width: 200px;\r\n    background: white;\r\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\r\n    display: none;\r\n    z-index: 1000;\r\n  }\r\n\r\n  .dropdown li {\r\n    width: 100%;\r\n  }\r\n\r\n  .dropdown a {\r\n    border-right: none;\r\n    border-bottom: 1px solid #eee;\r\n  }\r\n\r\n  /* Показати підменю при наведенні */\r\n  .menu li:hover .dropdown {\r\n    display: block;\r\n  }\r\n\r\n  /* Альтернативний варіант з плавною анімацією */\r\n  .dropdown {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition: all 0.3s ease;\r\n  }\r\n\r\n  .menu li:hover .dropdown {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n\u003c/style\u003e\r\n```\r\n\r\n#### Переваги:\r\n\r\n- Працює без JavaScript\r\n- Простота реалізації\r\n- Хороша семантика\r\n\r\n#### Недоліки:\r\n\r\n- Не працює на дотик (мобільні)\r\n- Обмежені можливості анімації\r\n- Меню зникає при випадковому відведенні курсора\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e80. Різниця між meter та progress?\u003c/summary\u003e\r\n\r\n#### HTML\r\n\r\n#### `\u003cmeter\u003e` — для виміряних значень:\r\n\r\n- Рівень заповнення\r\n- Температура\r\n- Бали або рейтинги\r\n- Показники в певному діапазоні\r\n\r\n#### `\u003cprogress\u003e` — для прогресу завдань:\r\n\r\n- Завантаження файлів\r\n- Виконання процесів\r\n- Прогрес форм\r\n- Часові індикатори\r\n\r\n#### Приклади:\r\n\r\n```html\r\n\u003c!-- \u003cmeter\u003e для виміряного значення --\u003e\r\n\u003clabel for=\"battery\"\u003eРівень заряду батареї:\u003c/label\u003e\r\n\u003cmeter id=\"battery\" value=\"0.7\" min=\"0\" max=\"1\"\u003e70%\u003c/meter\u003e\r\n\r\n\u003clabel for=\"score\"\u003eОцінка статті:\u003c/label\u003e\r\n\u003cmeter id=\"score\" value=\"8\" min=\"0\" max=\"10\"\u003e8 з 10\u003c/meter\u003e\r\n\r\n\u003clabel for=\"storage\"\u003eВикористання диска:\u003c/label\u003e\r\n\u003cmeter id=\"storage\" value=\"650\" min=\"0\" max=\"1000\" high=\"900\" optimum=\"200\"\u003e\r\n  650 GB з 1000 GB\r\n\u003c/meter\u003e\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevloversteam%2Fhtml-interview-questions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevloversteam%2Fhtml-interview-questions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevloversteam%2Fhtml-interview-questions/lists"}