1. Що таке HTML?
HTML (HyperText Markup Language) — це інструкція для браузера, яка визначає стандарт розмітки HTML, що використовується в документі.
2. Опишіть базову структуру HTML-сторінки?
Базова структура HTML-сторінки:
Основні елементи:
<!DOCTYPE html> — оголошення типу документа.
<html> — корінь HTML-документа.
<head> — метаінформація (включає кодування, viewport, заголовок).
<body> — основний вміст сторінки.
<header>, <main>, <footer> — структурні елементи для організації контенту.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Назва сторінки</title>
</head>
<body>
<h1>Заголовок</h1>
<p>Контент сторінки.</p>
</body>
</html>
3. Що таке HTML теги?
HTML-теги — це основні елементи мови HTML, які використовуються для створення структури та форматування веб-сторінок.
Формат: Теги зазвичай мають відкриваючу та закриваючу частини:
<назва_тега>Вміст</назва_тега>
<p>Це абзац</p>
- Парні: Мають відкриваючий і закриваючий тег (наприклад,
<div></div>). - Одинарні: Самозакриваються (наприклад,
<img />).
Теги визначають елементи, такі як заголовки, списки, зображення, таблиці тощо.
4. Що таке HTML елементи?
HTML-елемент — це одиниця структури веб-сторінки, що складається з тегу та його вмісту. Елемент включає відкриваючий тег, закриваючий тег (якщо він потрібен), а також будь-який вміст між ними.
<p>Це абзац.</p>
HTML-елементи можуть мати атрибути, що додають додаткову інформацію, наприклад:
<a href="https://example.com">Посилання</a>
Тут href — це атрибут елемента <a>.
5. Що таке HTML атрибути?
Атрибути HTML — це спеціальні властивості, які додаються до тегів HTML для надання додаткової інформації про елементи або зміни їх поведінки. Вони складаються з пар "ім'я-значення", які записуються в відкриваючому тегу елемента.
Атрибути зазвичай мають таку структуру:
<element attribute="значення">Текст</element>
- element: тип HTML елемента (наприклад,
<a>,<img>,<input>). - attribute: ім'я атрибута (наприклад,
href,src,alt). - значення: значення атрибута, яке може бути обгорнуте в подвійні або одинарні лапки.
Типи атрибутів Існує кілька категорій атрибутів:
- Необхідні атрибути: необхідні для коректної роботи елемента (наприклад,
srcдля зображень). - Необов'язкові атрибути: використовуються для зміни стандартної поведінки (наприклад,
titleдля підказок). - Стандартні атрибути: підтримуються багатьма елементами (наприклад,
class,id). - Атрибути подій: запускають скрипти при певних діях користувача (наприклад,
onclick).
Ось кілька прикладів атрибутів у HTML:
1. Посилання:
<a href="https://www.example.com">Приклад посилання</a>
Атрибут href вказує URL-адресу, на яку веде посилання. 2. Зображення:
2. Зображення:
<img src="image.jpg" alt="Опис зображення">
Атрибут src визначає шлях до зображення, а alt надає альтернативний текст.
3. Форма:
<input type="text" id="name" name="name" required>
Тут type, id, name і required є атрибутами, що визначають тип поля вводу та його властивості.
Важливість атрибутів
Атрибути дозволяють розширити функціональність HTML елементів, налаштовуючи їх стиль, поведінку та взаємодію з користувачем. Вони є ключовими для створення інтерактивних веб-сторінок і забезпечують можливість валідації форм та інших дій на сайті
6. Які типи заголовків існують у HTML?
HTML має шість рівнів заголовків: <h1> до <h6>. <h1> — найбільший і найважливіший, <h6> — найменший і найменш важливий.
7. Які типи списків є в HTML?
-
В HTML існують три основні типи списків:
-
Нумерований список (Ordered list
<ol>): Список, елементи якого пронумеровані. -
Маркірований список (Unordered list
<ul>): Список, елементи якого позначені маркерами. -
Описовий список (Definition list
<dl>): Cписок відображається у вигляді тексту, де терміни (<dt>) виділяються окремо, а їхні описи (<dd>) розташовані під ними із відступом.
-
8. Як відокремити частину тексту в HTML?
Щоб відокремити частину тексту в HTML, ви можете використати різні елементи для форматування чи структурування контенту. Ось кілька способів:
a) Тег <span>
Якщо вам потрібно виділити частину тексту без зміни його семантики (формату), ви можете використовувати тег <span>. Він не впливає на структуру документа і дає змогу застосовувати стилі через CSS.
<p>Це звичайний текст, а ось <span style="color: red;">ця частина тексту</span> виділена червоним кольором.</p>
b) Тег <strong> або <b>
Якщо ви хочете підкреслити важливість частини тексту, використовуйте <strong>. Це також має семантичне значення для пошукових систем і доступності. Тег <b> лише додає жирний шрифт без семантики.
<p>Цей текст <strong>важливий</strong> для розуміння.</p>
c) Тег <em> або <i>
Для виділення тексту курсивом можна використовувати <em> (емфаза, має семантичне значення) або просто <i>, який не несе семантичного навантаження.
<p>Цей текст <em>потрібно прочитати уважно</em>.</p>
Якщо вам потрібно виділити більшу частину тексту або зробити її окремим блоком, використовуйте блочні елементи:
a) Тег <div> Цей елемент використовується для групування інших елементів або текстів. Ви можете додати до нього стилі або клас.
<div style="background-color: lightgray; padding: 10px;">
Це відокремлений блок тексту.
</div>
b) Тег <section>
Якщо частина тексту має певну тематику, можна використати тег <section>, який позначає логічно відокремлену частину документа.
<section>
<h2>Розділ 1</h2>
<p>Цей текст належить до першого розділу.</p>
</section>
a) Тег <ul> для ненумерованих списків Використовується для створення списків без нумерації.
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
b) Тег <ol> для нумерованих списків Використовується для створення списків з нумерацією.
<ol>
<li>Перше завдання</li>
<li>Друге завдання</li>
<li>Третє завдання</li>
</ol>
Вибір способу для відокремлення частини тексту залежить від того, що ви хочете досягти: чи це просто форматування, чи логічна структура контенту. Для простих стилів — використовуйте <span> чи інші інлайнові елементи, для структуризації — блочні елементи, такі як <div>, <section>, <article>.
9. Що таке пробільний простір в HTML?
У контексті HTML, white space (пробільний простір) — це будь-який невидимий символ, який використовується для розділення елементів або тексту на сторінці. Це може бути:
- Пробіли (space): Використовуються для розділення слів або елементів.
- Переноси рядка (newlines): Вони відокремлюють рядки тексту або елементів.
- Табуляції (tab): Використовуються для відступів або для організації коду, але не впливають на відображення на сторінці.
- Різні інші символи пробілу, наприклад, неформатований пробіл (
), який можна використовувати для створення постійного пробілу, що не згортатиметься.
- У HTML браузери зазвичай ігнорують зайві пробіли, нові рядки або табуляції. Тобто кілька пробілів або нових рядків між елементами в коді не змінюють відображення на сторінці. Наприклад:
<p>Це приклад тексту.</p>
Відобразиться як:
Це приклад тексту.
Тобто кілька пробілів між словами буде проігноровано.
- HTML дозволяє використовувати спеціальні символи для створення пробільного простору, коли це потрібно, наприклад:
— нерозривний пробіл (не буде згорнутий при згортанні пробілів). — також нерозривний пробіл.
Пробільний простір в HTML також важливий для організації структури коду, що допомагає зробити його більш читабельним для розробників. Однак пробіли та відступи не впливають на відображення в браузері (якщо тільки не використовуються спеціальні символи, як ).
Пробільний простір може бути важливим для відображення в текстових елементах, таких як параграфи (<p>), заголовки (<h1>, <h2>, і т.д.), або списки (<ul>, <ol>, <li>). Вони допомагають організувати текст і зробити його більш зрозумілим для користувача.
У HTML пробільний простір — це будь-який символ, що не відображається на сторінці, але використовується для розділення елементів чи тексту. Важливо розуміти, як браузери обробляють пробіли, щоб правильно структурувати контент.
10. Що таке DOCTYPE і навіщо його використовують?
DOCTYPE — це інструкція для браузера, яка визначає стандарт розмітки HTML, що використовується в документі.
1. **Режим сумісності:** Вказує браузеру використовувати стандартний режим (standards mode), а не режим сумісності (quirks mode).
2. **Правильний рендеринг:** Забезпечує коректне відображення сторінки відповідно до специфікації обраної версії HTML.
У HTML5 використовується коротка декларація:
<!DOCTYPE html>
Це мінімізує плутанину і є стандартом для сучасних веб-додатків.
11. Яка поточна версія HTML?
Поточна версія HTML — це HTML5.2. Вона була офіційно рекомендована W3C у грудні 2017 року.
HTML продовжує еволюціонувати, але HTML5.2 залишається основою сучасної розробки.
12. У чому різниця між елементами <div> і <span>?
Елементи <div> і <span> в HTML використовуються для структуризації та стилізації веб-контенту, але мають різні характеристики і призначення.
<div>— є блочним елементом. Це означає, що він завжди починається з нового рядка і займає всю ширину доступного простору. Його зазвичай використовують для групування великих частин контенту, таких як кілька абзаців або зображення з підписами<span>— є рядковим (інлайн) елементом. Він не починає новий рядок і займає лише ту ширину, яку потребує його вміст. Використовується для стилізації менших фрагментів тексту або елементів, таких як слова в реченні
13. Що таке порожні елементи в HTML?
Порожні елементи в HTML, також відомі як елементи без вмісту або самозакриваючі елементи, — це елементи, які не мають внутрішнього вмісту і не потребують закриваючого тегу. Вони використовуються для вставки специфічних функцій або вмісту на веб-сторінці без необхідності оточувати їх текстом чи іншими елементами.
- Відсутність вмісту: Порожні елементи не містять тексту чи інших тегів між відкриваючим і закриваючим тегами. Наприклад, тег
використовується для вставки розриву рядка, а— для вставки зображення.
- Закриваючий тег: У HTML5 порожні елементи можуть бути представлені без закриваючого тегу, але їх можна також закривати за допомогою слешу (/>). Наприклад:
- Приклади порожніх елементів: Основні приклади включають:
<img>— для зображень.<br>— для розриву рядка.<input>— для елементів форми.<hr>— для горизонтальної лінії. Ці елементи не містять тексту чи інших елементів всередині.
- Семантичне значення: Хоча порожні елементи не містять контенту, вони виконують важливі функції у структурі HTML-документа, забезпечуючи правильну семантику та функціональність сторінки
Порожні елементи є важливими для створення структурованих і функціональних веб-сторінок, оскільки вони дозволяють інтегрувати різноманітний вміст без зайвих тегів або контенту.
14. Яке призначення атрибута alt в HTML?
- Атрибут
altвикористовується для надання текстового опису зображення, якщо зображення не може бути відображене. Це також важливо для доступності, адже екранні читалки можуть озвучувати цей текст для людей з порушеннями зору.
15. Навіщо використовується тег <label>?
Тег <label> використовується для асоціації тексту з елементом форми, щоб зробити його доступним для користувачів. Це полегшує взаємодію з формами, особливо для користувачів з обмеженими можливостями.
<form>
<label for="username">Ім'я користувача:</label>
<input type="text" id="username" name="username">
<label for="password">Пароль:</label>
<input type="password" id="password" name="password">
<button type="submit">Відправити</button>
</form>
16. Що таке <marquee> у HTML?
Тег <marquee> в HTML використовується для створення прокручуваного тексту або елементів на веб-сторінці, відомого як "біжуча строка". Цей елемент дозволяє переміщати текст або зображення в горизонтальному або вертикальному напрямку.
- Напрямок прокрутки: За замовчуванням текст рухається зліва направо, але можна змінити напрямок на праворуч, вгору чи вниз за допомогою атрибута
direction. - Тип поведінки: Атрибут
behaviorвизначає, як буде відбуватися прокрутка:scroll: текст постійно рухається в заданому напрямку.slide: текст рухається до краю і зупиняється.alternate: текст змінює напрямок при досягненні краю12.
Тег <marquee> має кілька атрибутів, які дозволяють налаштувати його вигляд і поведінку:
bgcolor: задає колір фону.height: висота області прокрутки.width: ширина області прокрутки.loop: кількість повторів прокрутки (за замовчуванням — безкінечно).scrollamount: швидкість руху контенту (значення в пікселях).scrolldelay: затримка між рухами в мілісекундах13.
Ось простий приклад використання тегу <marquee>:
<marquee behavior="scroll" direction="left" bgcolor="#ffcc00" scrollamount="10">
Це біжучий текст!
</marquee>
Варто зазначити, що тег <marquee> вважається застарілим і не рекомендований для використання у сучасних веб-дизайнах. Багато розробників віддають перевагу CSS-анімаціям для досягнення подібного ефекту, оскільки це забезпечує кращу контрольованість і сумісність з новими стандартами HTML
17. Як відобразити таблицю на веб-сторінці HTML?
Щоб відобразити таблицю на веб-сторінці HTML, потрібно використовувати спеціальні теги для таблиць. Ось основні кроки та елементи для створення таблиці в HTML:
<table>: Створює саму таблицю.<tr>: Означає рядок таблиці (table row).<th>: Означає заголовок таблиці (table header), використовується для створення заголовків стовпців.<td>: Означає клітинку таблиці (table data), використовується для введення даних у таблицю.<thead>,<tbody>,<tfoot>: Означають частини таблиці для заголовків, основного вмісту та підсумкових рядків відповідно.
<table>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
<tr>
<td>Дані 1</td>
<td>Дані 2</td>
</tr>
<tr>
<td>Дані 3</td>
<td>Дані 4</td>
</tr>
</table>
18. Для чого використовуються теги <sub> та <sup>?
Теги <sub> і <sup> використовуються для відображення тексту у вигляді підрядкового (наприклад, для хімічних формул) або верхньорядкового (наприклад, для степенів) тексту.
<p>H<sub>2</sub>O - вода</p> <!-- підрядковий текст -->
<p>x<sup>2</sup> - квадрат числа</p> <!-- верхньорядковий текст -->
19. Як можна згрупувати опції всередині тегу <select>?
Опції всередині тегу <select> можна групувати за допомогою тегу <optgroup>.
Приклад:
<select>
<optgroup label="Фрукти">
<option value="apple">Яблуко</option>
<option value="orange">Апельсин</option>
</optgroup>
<optgroup label="Овочі">
<option value="carrot">Морква</option>
<option value="potato">Картопля</option>
</optgroup>
</select>
20. Що таке семантичний HTML?
Семантичний HTML — це використання тега в HTML, який чітко визначає свою роль і значення в контексті документа. Це покращує доступність, SEO і підтримку коду.
Наприклад, замість простого використання <div> для створення заголовків або списків, використовуються спеціалізовані семантичні теги:
<header>— для заголовку сторінки або розділу.<footer>— для футера.<article>— для самостійної одиниці контенту.<section>— для розділу, що містить тематичний вміст.<nav>— для навігаційних посилань.<main>— для основного вмісту сторінки.
Це допомагає пошуковим системам і екранним читалям правильно інтерпретувати вміст сторінки.
21. Які глобальні атрибути є в HTML?
Глобальні атрибути — це атрибути, які можна використовувати з будь-яким HTML-елементом, незалежно від його типу. Вони задають загальні властивості, такі як ідентифікатори, стилі, мова, напрямок тексту та інші.
Глобальні атрибути: id, class, style, title, data-*, lang, dir, hidden, tabindex, accesskey, draggable, spellcheck, translate.
22. Як використовують атрибути class та id? Яка різниця між класами та ідентифікаторами?
Атрибути class та id в HTML використовуються для ідентифікації та стилізації елементів, але мають різні функції та обмеження.
- Унікальність: Атрибут id призначений для унікальної ідентифікації елемента на сторінці. Це означає, що в одному HTML-документі не може бути більше одного елемента з однаковим значенням
id. - Використання: Зазвичай використовується для прив'язки стилів у CSS або для доступу до елемента в JavaScript за допомогою методу
getElementById().
<div id="header">Заголовок</div>
#header {
background-color: #f4f4f4;
}- Множинність: Атрибут
classдозволяє кільком елементам мати однакове значення класу. Це означає, що один і той же клас може бути застосований до багатьох елементів на сторінці. - Використання: Використовується для групування стилів у CSS або для доступу до елементів у JavaScript через метод
getElementsByClassName().
<div class="city">Київ</div>
<div class="city">Львів</div>
const cities = document.getElementsByClassName("city");| Характеристика | Атрибут id |
Атрибут class |
|---|---|---|
| Унікальність | Унікальний на сторінці | Може бути спільним для кількох елементів |
| Використання | Для конкретного елемента | Для групи елементів |
| Доступ у JS | getElementById() |
getElementsByClassName() |
| Чутливість до регістру | Так | Так |
Різниця:
classможе бути присвоєний кільком елементам, в той час як id має бути унікальним на сторінці (один елемент з таким ідентифікатором).idмає вищий пріоритет у CSS, якщо використовувати селектори з однаковою специфічністю.
Підсумок:
class: для групування елементів з однаковими стилями або функціональністю.id: для унікальної ідентифікації елемента на сторінці.
23. Що таке внутрішні та зовнішні гіперпосилання і які вони мають атрибути?
Внутрішні та зовнішні гіперпосилання в HTML є важливими елементами для навігації веб-сторінок. Ось їх визначення та основні атрибути.
Внутрішні гіперпосилання — це посилання, яке веде на іншу частину тієї ж веб-сторінки або на іншу сторінку того ж сайту.
Зовнішні гіперпосилання — це посилання, яке веде на інший сайт або домен.
href: Основний атрибут, який вказує на адресу ресурсу (URL).
- Для внутрішнього посилання:
<a href="#section1">Перейти до розділу 1</a> - Для зовнішнього посилання:
<a href="https://example.com">Перейти на зовнішній сайт</a>
target: Визначає, де буде відкриватися посилання.
_self— відкривається в тому ж вікні або вкладці (за замовчуванням)._blank— відкривається в новій вкладці або вікні.- Приклад для відкриття в новій вкладці:
<a href="https://example.com" target="_blank">Відкрити в новій вкладці</a>
- rel: Визначає відносини між поточною сторінкою та сторінкою, на яку веде посилання. Для зовнішніх посилань часто використовують:
rel="noopener": запобігає передаванню інформації про джерело.rel="noreferrer": запобігає передаванню реферера.- Наприклад:
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Зовнішнє посилання</a>
24. Як створити посилання на різні розділи на одній веб-сторінці HTML?
Щоб створити посилання на різні секції в межах однієї HTML-сторінки, використовуються ідентифікатори (id) елементів і посилання з символом #.
Приклад:
- Додайте ідентифікатори до секцій:
<h1 id="section1">Секція 1</h1>
<p>Тут текст секції 1.</p>
<h1 id="section2">Секція 2</h1>
<p>Тут текст секції 2.</p>
- Створіть посилання, які вказують на ці секції:
<a href="#section1">Перейти до Секції 1</a>
<a href="#section2">Перейти до Секції 2</a>
Клік на посилання прокрутить сторінку до відповідного елемента з вказаним id.
25. Чи мають елементи HTML власні дефолтні специфічні стилі?
Так, кожен HTML-елемент має дефолтні стилі, які задаються браузером (user agent styles). Наприклад:
<h1> — великий жирний текст.
<ul> і <ol> — відступи та маркери/нумерація.
<a> — синій текст з підкресленням.
<button> — стандартне оформлення кнопки.
<input> — базова рамка та відступи.
26. Як семантично правильно зверстати зображення з підписом?
Використовуйте тег <figure> для обгортки зображення і <figcaption> для підпису.
<figure>
<img src="example.jpg" alt="Опис зображення">
<figcaption>Підпис до зображення</figcaption>
</figure>
Пояснення:
-
<figure>— елемент, який містить зображення та його підпис. Це семантичний контейнер, який допомагає групі вмісту (наприклад, зображення, діаграми, таблиці) бути структурованим та зрозумілим. -
<img>- сам елемент зображення. Важливо завжди використовувати атрибут alt, який описує зображення. Це необхідно для доступності, щоб люди з вадами зору могли зрозуміти, що зображено. -
<figcaption>— елемент підпису, який пояснює зображення. Він може бути розташований як до, так і після тега<img>, але найчастіше ставлять його після зображення для кращої читальності.
Додатково:
Якщо картинка має декоративний характер (наприклад, фонова або декоративна іконка), атрибут alt можна залишити порожнім: <img src="image.jpg" alt="">.
Використання семантичних елементів покращує доступність та полегшує індексацію сторінки пошуковими системами.
27. Різниця між кнопкою та посиланням у HTML?
- Кнопка (
<button>) використовується для виконання дії на сторінці, наприклад, для відправки форми або запуску скрипта. - Посилання (
<a>) використовується для навігації до іншої сторінки або ресурсу.
28. Чим відрізняється <article> від <section>?
-
<article>використовується для незалежних, самодостатніх блоків контенту, які можуть бути повторно використані чи розповсюджені, наприклад, статті, блог-пости, новини. -
<section>— це частина документа, яка організовує контент за темами чи розділами, але не має значення без контексту всього документа.
29. Що таке категорії контенту в HTML5?
Категорії контенту в HTML5 визначають типи елементів і їх роль у документі. Основні категорії:
- Metadata content (метадані)
- Flow content (потоковий контент)
- Sectioning content (секційний контент)
- Heading content (заголовки)
- Phrasing content (фразовий контент)
- Embedded content (вбудований контент)
- Interactive content (інтерактивний контент).
30. Що таке data-атрибути, в яких випадках їх використовуєте?
Data-атрибути — це спеціальні атрибути в HTML, які дозволяють зберігати додаткову інформацію про елементи без необхідності використовувати нестандартні атрибути. Вони починаються з префікса data-, після якого може слідувати будь-яке слово, що описує дані.
1. Синтаксис:
Data-атрибут повинен починатися з data-, після чого йде назва атрибута, яка може містити літери, цифри та дефіси. Наприклад:
<div data-user-id="12345"></div>
2. Зберігання даних: Data-атрибути використовуються для зберігання інформації, яка не відображається на екрані, але може бути корисною для скриптів або стилів. Це дозволяє розширити функціональність HTML-елементів без порушення стандартів.
3. Доступ через JavaScript:
Для доступу до значень data-атрибутів у JavaScript можна використовувати об'єкт dataset. Наприклад:
const userId = document.querySelector('div').dataset.userId; // "12345"
Data-атрибути також можуть бути використані в CSS для стилізації елементів на основі їх значень. Наприклад:
div[data-user-id="12345"] {
background-color: yellow;
}- Зберігання метаданих: Коли потрібно зберігати інформацію про елемент, яка не є частиною видимого контенту (наприклад, ідентифікатори, статуси).
- Взаємодія з JavaScript: Коли дані потрібні для обробки подій або маніпуляцій на сторінці.
- Стилізація: Коли потрібно змінювати стиль елемента в залежності від його атрибутів. Data-атрибути є потужним інструментом для веб-розробників, оскільки вони дозволяють зберігати додаткову інформацію без шкоди для структури документа і забезпечують легкий доступ до цих даних через JavaScript та CSS.
31. Як створити форму в HTML і забезпечити її валідацію?
Створення форм в HTML є важливим аспектом веб-розробки, що дозволяє користувачам вводити та надсилати дані. Для забезпечення коректності введених даних існують різні методи валідації форм. Розглянемо, як створити базову форму та реалізувати її валідацію.
Форма в HTML визначається за допомогою тегу <form>, який містить інші елементи, такі як поля введення, кнопки тощо. Основні атрибути тега <form>:
- action: URL-адреса, куди будуть надсилатися дані форми.
- method: метод надсилання даних (зазвичай GET або POST).
<form action="/submit" method="post">
<label for="username">Ім'я користувача:</label>
<input type="text" id="username" name="username" required>
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Відправити">
</form>
У цьому прикладі форма містить два поля: для введення імені користувача та пароля. Атрибут required забезпечує, що ці поля повинні бути заповнені перед відправкою.
Валідація форм може бути реалізована як на стороні клієнта (в браузері), так і на стороні сервера.
1. Валідація на стороні клієнта
HTML5 пропонує вбудовану валідацію через атрибути, такі як required, minlength, maxlength, pattern тощо.
Наприклад:
<input type="email" id="email" name="email" required>
Цей код забезпечує перевірку, що введене значення є дійсною електронною адресою.
2. Валідація за допомогою JavaScript
Для більш складних перевірок можна використовувати JavaScript.
Наприклад:
<form id="myForm">
<label for="age">Вік:</label>
<input type="number" id="age" name="age">
<input type="submit" value="Відправити">
</form>
<script>
document.getElementById("myForm").onsubmit = function() {
var age = document.getElementById("age").value;
if (age < 18) {
alert("Вам повинно бути не менше 18 років.");
return false; // Зупиняє відправку форми
}
};
</script>У цьому прикладі при спробі відправити форму перевіряється, чи вік користувача не менше 18 років.
3. Валідація на стороні сервера
Незалежно від того, чи проводиться валідація на клієнтській стороні, важливо також перевіряти дані на сервері для запобігання зловживанням та помилкам.
Створення форм у HTML є простим процесом, який можна доповнити різними методами валідації для забезпечення коректності введених даних. Використовуючи атрибути HTML5 та JavaScript, ви можете створити зручні та безпечні форми для збору інформації від користувачів.
32. Які методи відправки даних форми ви знаєте?
Існує кілька основних методів відправки даних форми в HTML, які визначають, як дані будуть передані на сервер. Основні з них — це GET та POST.
1. Метод GET
Метод GET передає дані через URL-адресу. Усі параметри запиту додаються до URL, що робить їх видимими в адресному рядку браузера. Це підходить для запитів, які не потребують конфіденційності, наприклад, для форм пошуку.
Приклад:
<form action="http://example.com/search" method="get">
<input type="text" name="query" placeholder="Пошук...">
<input type="submit" value="Знайти">
</form>
Переваги:
- Простота використання.
- Легкість у кешуванні запитів.
Недоліки:
- Обмеження на кількість переданих даних (залежить від браузера).
- Дані видимі в адресному рядку, що небажано для конфіденційної інформації.
2. Метод POST
Метод POST передає дані в тілі HTTP-запиту, що робить їх невидимими для користувача. Цей метод підходить для форм, які містять конфіденційну інформацію (наприклад, паролі) або великі обсяги даних.
Приклад:
<form action="http://example.com/submit" method="post">
<input type="text" name="username" placeholder="Ім'я користувача" required>
<input type="password" name="password" placeholder="Пароль" required>
<input type="submit" value="Увійти">
</form>
Переваги:
- Більше обмежень на обсяг переданих даних.
- Дані не відображаються в адресному рядку.
Недоліки:
- Менш зручний для кешування.
3. Використання FormData
Об'єкт FormData дозволяє збирати дані з форми та надсилати їх за допомогою JavaScript (наприклад, через fetch). Це особливо корисно для асинхронних запитів.
Приклад:
<form id="myForm">
<input type="text" name="name" value="John">
<input type="submit">
</form>
<script>
document.getElementById('myForm').onsubmit = async (e) => {
e.preventDefault();
let formData = new FormData(e.target);
let response = await fetch('/submit', {
method: 'POST',
body: formData
});
let result = await response.json();
alert(result.message);
};
</script>
Переваги:
- Можливість надсилати файли разом з іншими даними.
- Гнучкість у роботі з формами без перезавантаження сторінки.
Основними методами відправки даних форм є GET і POST, кожен з яких має свої переваги і недоліки. Для більш складних сценаріїв можна використовувати об'єкт FormData, що забезпечує гнучкість і можливість асинхронного надсилання даних.
33. Основні атрибути HTML-форм? Як вони впливають на надсилання даних з веб-сторінки?
- action: Визначає URL, куди відправляються дані форми.
- method: Визначає метод HTTP для відправки даних (GET або POST).
- enctype: Вказує тип кодування при відправці форми (наприклад, multipart/form-data для завантаження файлів).
- target: Визначає, де відкриється результат після відправки форми (наприклад,
_blankдля нового вікна). - name: Дає ім'я формі для ідентифікації в JavaScript або під час відправки даних.
Ці атрибути визначають, як дані форми будуть оброблені, куди відправлені та як їх передавати (наприклад, безпечно через POST чи через URL з GET).
Приклад HTML-форм з основними атрибутами:
<form action="/submit" method="POST" enctype="multipart/form-data" target="_blank">
<label for="username">Ім'я користувача:</label>
<input type="text" id="username" name="username" required>
<label for="file">Файл:</label>
<input type="file" id="file" name="file">
<button type="submit">Відправити</button>
</form>
34. Що таке iframe і для чого його використовують?
iFrame (inline frame) — це HTML-елемент, який дозволяє вбудовувати один HTML-документ у межах іншого. Це створює прямокутну область на веб-сторінці, в якій може відображатися вміст з іншого джерела, включаючи веб-сторінки, відео, карти та інші інтерактивні елементи.
- Вбудовування зовнішнього контенту: За допомогою iFrame можна вставляти контент з інших веб-сайтів, наприклад, новинні стрічки, соціальні мережі або інтерактивні елементи. Це дозволяє збагачувати хост-сайт динамічним контентом без складної інтеграції.
- Інтеграція мультимедіа: iFrame часто використовується для вбудовування відео з платформ, таких як YouTube або Vimeo. Це дозволяє користувачам переглядати відео безпосередньо на сторінці без необхідності переходити на інший сайт.
- Відображення карт: Наприклад, Google Maps можна вбудувати на сайт за допомогою iFrame, що дозволяє відвідувачам бачити місцезнаходження компанії безпосередньо на сторінці.
- Створення "сайту всередині сайту": iFrame може використовуватися для вбудовування інших веб-сайтів або мікросайтів, дозволяючи користувачам переміщатися по них без виходу з основної сторінки.
- Ізоляція контенту: Розробники можуть використовувати iFrame для ізоляції контенту, який може поводитися по-різному в різних браузерах. Це може бути корисно для тимчасових рішень під час розробки постійних.
35. Що таке елемент <canvas>? І для чого він використовується?
Елемент <canvas> — це контейнер для малювання графіки за допомогою JavaScript.
Призначення:
- Створення 2D-графіки (малювання ліній, фігур).
- Анімація.
- Візуалізація даних (графіки, діаграми).
- Обробка зображень.
- Рендеринг ігор або інтерактивних ефектів.
36. Різниця між <canvas> та <svg>? У яких випадках краще використовувати <canvas>, а в яких <svg>?
Різниця:
1. <canvas>:
- Растрова графіка.
- Малюнок оновлюється пікселями.
- Підходить для анімацій, ігор, візуалізацій із високою частотою оновлення.
2. <svg>:
- Векторна графіка.
- Заснована на XML, дозволяє працювати з окремими елементами.
- Підходить для статичних зображень, діаграм, ікон.
Вибір:
Використовуйте <canvas>, якщо потрібна швидкодіюча динамічна графіка (графіки, ігри).
Використовуйте <svg>, якщо важливі чіткість при масштабуванні та інтерактивність окремих елементів.
Плюси:
- Гнучкість: можна малювати будь-які графічні елементи.
- Висока швидкість при великій кількості елементів.
- Підходить для анімацій та ігор.
Мінуси:
- Векторне масштабування неможливе.
- Важче маніпулювати окремими елементами після їх малювання.
- Потрібен JavaScript для малювання.
Плюси:
- Векторна графіка: масштабування без втрати якості.
- Легко редагувати елементи після малювання.
- Підтримка анімацій через CSS та SMIL.
Мінуси:
- Менша продуктивність при великій кількості елементів.
- Не так гнучко, як canvas для складних анімацій або ігор.
37. Що ви знаєте про SVG? Які є варіанти додавання SVG на сторінки сайту? Чим вони відрізняються?
SVG (Scalable Vector Graphics) — це формат векторної графіки, який дозволяє створювати двомірні зображення за допомогою XML. Існує кілька способів додавання SVG на веб-сторінки, кожен з яких має свої особливості.
1. Використання тегу <img>
Цей метод є найпростішим способом вставлення SVG. Просто вкажіть шлях до файлу SVG у атрибуті src:
<img src="my-image.svg" alt="Опис зображення">
Переваги:
- Легкість використання.
- Підтримка всіх браузерів.
Недоліки:
- Обмежена можливість стилізації через CSS.
2. Вбудовування SVG через тег <svg>
Ви можете вставити код SVG безпосередньо в HTML-документ:
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" fill="green" />
</svg>
Переваги:
- Можливість стилізації через CSS.
- Легкий доступ до елементів SVG для маніпуляцій за допомогою JavaScript.
Недоліки:
- Збільшення розміру HTML-документа, якщо SVG великий.
3. Використання тегу <object>
Цей метод дозволяє вставити SVG як об'єкт:
<object data="my-image.svg" type="image/svg+xml" width="300" height="300"></object>
Переваги:
- Підтримує інтерактивність SVG.
- Можливість завантаження SVG з інших доменів. Недоліки:
- Може не підтримуватися в деяких старих браузерах
4. Використання тегу <iframe>
SVG можна також вставити через iframe:
<iframe src="my-image.svg" width="300" height="300"></iframe>
Переваги:
- Ізоляція контенту, що може бути корисним для безпеки.
Недоліки:
- Обмежена можливість взаємодії з CSS і JavaScript на сторінці.
5. Використання псевдоелементів ::before або ::after
SVG можна вставити в CSS через властивість content:
.element::before {
content: url("my-image.svg");
}Переваги:
- Додає графіку без зміни HTML-коду. Недоліки:
- Обмежена можливість взаємодії та стилізації
Висновок
Кожен метод додавання SVG має свої переваги та недоліки. Вибір підходящого способу залежить від конкретних потреб проекту. Вбудовування SVG через тег <svg> забезпечує найбільшу гнучкість у стилізації та інтерактивності, тоді як використання <img> є найпростішим способом для статичних зображень.
38. Що таке елемент <output> у HTML5?
Елемент <output> в HTML5 використовується для відображення результату обчислень або взаємодії з формами. Зазвичай використовується для відображення значень, отриманих після введення даних у форму або виконання JavaScript.
39. Для чого використовується елемент <datalist>?
Елемент використовується для створення списку варіантів, які можна вибрати в полі введення .
<input list="options" name="example">
<datalist id="options">
<option value="Варіант 1">
<option value="Варіант 2">
<option value="Варіант 3">
</datalist>
40. Розкажіть про meta-тег із name="viewport"?
Мета-тег <meta name="viewport"> використовується для управління масштабуванням і відображенням сторінки на мобільних пристроях.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
41. Що таке ApplicationCache в HTML5?
ApplicationCache в HTML5 — це механізм для офлайн-доступу до веб-додатків. Він дозволяє зберігати ресурси веб-сторінки (HTML, CSS, JavaScript, зображення) в кеші браузера, що дає змогу користувачам працювати з додатком без інтернет-з’єднання.
Відповідно до специфікації HTML5, цей механізм був застарілий і замінений новими API, такими як Service Workers.
42. Що таке srcset? Як працює srcset?
srcset — це атрибут, який дозволяє браузеру вибирати найбільш підходящий варіант зображення в залежності від роздільної здатності екрана або ширини вікна.
Як працює: Вказує кілька варіантів зображень з різною роздільною здатністю або розмірами, і браузер вибирає найкращий залежно від умов. Наприклад:
<img src="image.jpg" srcset="image-480w.jpg 480w, image-800w.jpg 800w" alt="example">
43. Навіщо використовується елемент <picture>?
Елемент <picture> використовується для визначення різних варіантів зображень в залежності від умов, таких як розмір екрану або роздільна здатність. Це дозволяє вибирати найкраще зображення для конкретного пристрою.
44. Що таке властивість valueAsNumber?
Властивість valueAsNumber повертає значення елемента форми як число. Воно доступне для елементів, таких як <input> з типами number, range та іншими, де очікується числове введення. Якщо значення не число, властивість повертає NaN.
45. Навіщо використовується атрибут capture?
Атрибут capture використовується в елементах форми, таких як <input type="file">, для запуску камери або мікрофона замість вибору файлу з пам'яті пристрою. Це дозволяє користувачу безпосередньо зробити фото або записати аудіо.
Приклад використання атрибута capture:
<form>
<label for="camera">Зробити фото:</label>
<input type="file" id="camera" name="camera" accept="image/*" capture="camera">
<label for="audio">Записати звук:</label>
<input type="file" id="audio" name="audio" accept="audio/*" capture="microphone">
<button type="submit">Відправити</button>
</form>
46. Для чого використовується атрибут decoding enterkeyhint novalidate inputmode pattern?
decoding: Визначає, як браузер має обробляти зображення (необов'язкове).enterkeyhint: Дає браузеру підказку, що робити при натисканні Enter.novalidate: Вимикає валідацію форми при її відправці.inputmode: Вказує тип введення (наприклад, текст, телефон).pattern: Задає регулярний вираз для перевірки введеного значення.
<form novalidate>
<label for="email">Email:</label>
<input type="email" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" inputmode="tel" required>
<label for="comments">Comments:</label>
<textarea id="comments" name="comments" decoding="async"></textarea>
<button type="submit" enterkeyhint="send">Submit</button>
</form>
47. Що таке і навіщо потрібний атрибут rel="nofollow" у HTML?
Атрибут rel="nofollow" вказує пошуковим системам, що не потрібно враховувати дане посилання для оцінки рангу сторінки. Зазвичай використовується для запобігання передачі ваги SEO або для посилань, яким не можна довіряти, наприклад, в коментарях чи рекламних матеріалах.
Приклад використання атрибута rel="nofollow":
<a href="https://example.com" rel="nofollow">Не довіряти цьому посиланню</a>
У цьому випадку, пошукові системи не будуть враховувати це посилання при оцінці сторінки.
48. Як семантично правильно згорнути навігаційне меню?
Для семантично правильного верстання навігаційного меню використовується елемент <nav>, всередині якого знаходяться списки з посиланнями.
Приклад:
<nav>
<ul>
<li><a href="#home">Головна</a></li>
<li><a href="#about">Про нас</a></li>
<li><a href="#services">Послуги</a></li>
<li><a href="#contact">Контакти</a></li>
</ul>
</nav>
49. Способи покращення продуктивності веб-сторінки під час використання HTML?
<script src="script.js" async></script>
- Використовуйте інструменти на кшталт UglifyJS для JavaScript та CSS Minifier для CSS, щоб зменшити об'єм файлів.
- У файлі .htaccess можна додати правила кешування:
<filesMatch "\.(html|css|js|jpg|jpeg|png|gif|svg)$">
ExpiresActive On
ExpiresDefault "access plus 1 year"
</filesMatch>
<img src="image.webp" alt="Image" width="600" height="400">
<link rel="stylesheet" href="https://cdn.example.com/styles.css">
<picture>
<source srcset="image-800w.jpg" media="(min-width: 800px)">
<img src="image-400w.jpg" alt="Responsive image">
</picture>
- Об'єднати CSS та JavaScript файли: Замість декількох файлів CSS або JS об'єднайте їх в один, щоб зменшити кількість запитів.
<link rel="stylesheet" href="styles.min.css">
<script src="scripts.min.js"></script>
- Використовувати спрайти для зображень: Об'єднайте кілька малих зображень (наприклад, іконки) в один файл-спрайт, зменшуючи кількість запитів на зображення.
.icon {
background-image: url("sprite.png");
background-position: 0 0;
width: 20px;
height: 20px;
}- Інлайн-ресурси: Інлайнити невеликі CSS або JavaScript файли прямо в HTML, щоб уникнути окремих запитів.
<style>
body { background-color: #fff; }
</style>
<script>
alert('Page Loaded');
</script>
-
Використовувати кешування: Налаштуйте заголовки для кешування статичних файлів (CSS, JS, зображень), щоб браузер повторно використовував ці ресурси, замість того щоб запитувати їх знову.
-
Шрифти: Об’єднуйте шрифти в один файл замість використання кількох запитів на різні формати (woff, woff2, ttf).
<img src="image.jpg" alt="Image" loading="lazy">
50. Які теги з найсвіжіших оновлень ви знаєте?
<mark>: Для виділення тексту (позначення важливих фрагментів).<progress>: Для відображення прогресу виконання задачі.<meter>: Для вимірювання значення в певному діапазоні (наприклад, рівень батареї).
51. Які переваги згортання пробілів (collapsing white space) в HTML та CSS?
1. Зменшення розміру файлів: Коли зайві пробіли, нові рядки або табуляції автоматично згортатимуться, це допомагає зменшити розмір файлів, що може бути корисно для оптимізації швидкості завантаження веб-сторінки. Це особливо важливо для мобільних пристроїв або при повільному інтернет-з'єднанні.
2. Спрощення структури документа: Згортання пробілів дозволяє уникнути зайвих пробілів між елементами, що робить код HTML та CSS більш чистим і зрозумілим. Код стає компактнішим, і його легше підтримувати та редагувати.
3. Покращення читабельності контенту: Згортання пробілів дозволяє браузеру правильно відображати текст, забезпечуючи, щоб зайві пробіли не порушували структуру та відображення елементів. Це особливо важливо при відображенні тексту в абзацах, списках або інших блочних елементах.
4. Ізоляція та відокремлення елементів: Коли працює згортання пробілів, можна забезпечити рівномірний розподіл простору між елементами, що дозволяє більш ефективно керувати відстанями між ними, без того щоб зайві пробіли впливали на вигляд веб-сторінки.
5. Уникнення непотрібних порушень макета: В деяких випадках зайві пробіли можуть спричиняти небажану поведінку макета, наприклад, додавання непотрібних відступів між елементами. Згортання пробілів допомагає уникнути таких ситуацій і зберегти дизайн відповідно до заданих правил стилів.
Згортання пробілів — це стандартна поведінка в HTML, що дозволяє браузеру ігнорувати зайві пробіли, кілька переносів рядка або табуляцій між текстовими елементами. Таким чином, візуальне відображення не залежить від кількості пробілів у коді.
52. Як створити посилання на різні розділи на одній веб-сторінці HTML?
Відповідь:
Для створення гіперпосилання використовується тег <a>. Атрибут href вказує URL або шлях.
Приклад:
<a href="https://example.com">Перейти на Example</a>
53. Що таке валідація? Які типи перевірок HTML-документа ви знаєте?
Валідація — це процес перевірки коректності коду HTML-документа відповідно до стандартів W3C.
Типи перевірок:
- Синтаксична валідація — перевірка правильності синтаксису та структури тегів.
- Валідація атрибутів — перевірка правильності та відповідності використаних атрибутів.
- Валідація доступності (Accessibility) — перевірка на відповідність стандартам доступності, наприклад WCAG.
- Перевірка сумісності — оцінка роботи коду в різних браузерах.
- SEO-валидация — перевірка оптимізації документа для пошукових систем.
- Перевірка швидкодії — аналіз завантаження та продуктивності.
54. Основні етапи перевірок валідності HTML-документа?
- Перевірка синтаксису — аналіз тегів, вкладеності та закриття.
- Перевірка атрибутів — відповідність атрибутів специфікації.
- Перевірка DocType — відповідність документа заявленому типу.
- Перевірка доступності — наявність елементів для підтримки доступності (alt, aria).
- Перевірка семантики — правильне використання семантичних тегів.
- Перевірка посилань — аналіз працездатності та коректності URL.
55. Якщо представити HTML5 як відкриту веб-платформу, з яких блоків він складається?
- Семантика — семантичні теги для структурування контенту (header, footer, article).
- Мультимедіа — підтримка аудіо та відео (audio, video).
- Графіка — елементи для роботи з графікою (canvas, SVG).
- Сховище і офлайн — API для локального зберігання даних (localStorage, IndexedDB).
- Комунікації — WebSocket, Server-Sent Events.
- Форми — розширені можливості форм (нові типи input, валідація).
- Продуктивність — API для оптимізації роботи (Web Workers).
- Доступність — ARIA-атрибути для покращення доступності.
56. Що описується в тегі <head>?
Тег <head> містить метаінформацію про документ:
- Назва сторінки —
<title>. - Мета-теги —
<meta>(характеристики документа, ключові слова, опис). - Підключення стилів —
<link>(CSS-файли). - Скрипти —
<script>(підключення JavaScript). - Фавікон —
<link>для іконки сайту. - Інші налаштування — наприклад,
<base>для базового URL.
57. Навіщо потрібен атрибут `autocomplete`?
Атрибут autocomplete в HTML використовується для вказівки браузеру, чи має він автоматично заповнювати поля форми збереженими даними (наприклад, іменем, адресою, електронною поштою). Він може бути включений або вимкнений для окремих полів форми або для всієї форми.
Значення:
on — дозволяє автозаповнення.
off — вимикає автозаповнення.
58. Як можна приховати елемент розмітки без використання CSS і JS?
Елемент можна приховати за допомогою атрибуту hidden:
<div hidden>Цей елемент прихований</div>
59. Різниця між <meter> та <progress>?
<meter>використовується для відображення виміряних значень, таких як рівень заповнення або температура.<progress>— для відображення прогресу виконання завдання (наприклад, завантаження файлу).
<!-- <meter> для виміряного значення -->
<label for="battery">Рівень заряду батареї:</label>
<meter id="battery" value="0.7" min="0" max="1"></meter>
<!-- <progress> для прогресу завдання -->
<label for="fileProgress">Прогрес завантаження:</label>
<progress id="fileProgress" value="30" max="100"></progress>
60. Розкажіть про тег <samp> ?
Тег <samp> використовується для позначення тексту, який є результатом виконання комп'ютерної програми, наприклад, повідомлень про помилки або вихідних даних. Він відображається звичайним шрифтом, але зазвичай використовується для стилістичних цілей.
Приклад використання тегу <samp>:
<p>Результат виконання програми: <samp>Помилка: Невірний ввід</samp></p>