50 найкращих запитань і відповідей на інтерв’ю HTML (2026)
Емма Девіс
Готуєтеся до співбесіди з HTML? Ретельно подумайте про питання, з якими ви можете зіткнутися. Ці співбесіди важливі, оскільки вони розкривають технічну глибину, підходи до вирішення проблем та практичне застосування основних концепцій веб-розробки.
Можливості на посадах у сфері HTML охоплюють різні галузі, від новачків до старших фахівців з 5 або 10 роками досвіду роботи в цій галузі. Роботодавці оцінюють технічну експертизу, знання предметної області та навички аналізу за допомогою запитань та відповідей. Міцний професійний досвід, базовий досвід та універсальний набір навичок допомагають кандидатам вирішувати базові, просунуті та технічні завдання.
Наш аналіз базується на відгуках понад 60 технічних лідерів, думках понад 45 менеджерів та обговореннях з понад 100 фахівцями. Разом ці перспективи висвітлюють різноманітні очікування та потреби галузі, що змінюються.
Найпопулярніші запитання та відповіді на співбесіді з HTML
1) Що таке HTML і чому його вважають основою веб-розробки?
Мова гіпертекстової розмітки (HTML) – це фундаментальна мова Інтернету, розроблена для структурування документів та надання сенсу веб-контенту. Вона визначає такі елементи, як заголовки, абзаци, посилання, зображення та мультимедіа, дозволяючи браузерам інтерпретувати та відображати їх. Причина, чому її називають основою веб-розробки, полягає в тому, що кожна веб-сторінка, незалежно від складності, використовує HTML для визначення свого макета та вмісту. Без HTML такі технології, як CSS та JavaСценарій не мав би основи для стилізації чи маніпулювання.
👉 Безкоштовне завантаження PDF: Запитання для співбесіди в форматі HTML
2) Поясніть різницю між HTML та HTML5 на прикладах.
HTML – це стандартна мова розмітки, тоді як HTML5 – її сучасна, потужніша версія, представлена у 2014 році. HTML5 приніс семантичні елементи, підтримку мультимедіа та API, що усунуло потребу в сторонніх плагінах, таких як Flash.
| особливість | HTML | HTML5 |
|---|---|---|
| Doctype | Довгий та складний | Просто: |
| мультимедіа | Потрібні плагіни | , |
| Графіка | Не підтримується вбудовано | , |
| Форми | Обмежені ресурси | Нові входи, такі як email, date |
| Семантичні теги | Покладався на | , , |
приклад:
<video controls> <source src="sample.mp4" type="video/mp4"> </video>
3) Як організована базова структура HTML-документа?
Кожен HTML-документ має певну структуру, щоб браузери правильно інтерпретували вміст. Угорі знаходиться оголошення, яке визначає використання HTML5. елемент охоплює весь вміст, розділений на і . The містить метадані, заголовок, посилання на CSS та скрипти, тоді як відтворює видимий контент. Наприклад:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sample Page</title> </head> <body> <h1>Hello World</h1> </body> </html>
4) Що таке теги та елементи в HTML? Наведіть приклади.
Теги – це ключові слова, укладені в кутові дужки, які вказують браузеру, як відображати контент. Елемент, однак, стосується повної структури, що складається з початкового тегу, контенту та закриваючого тегу. Наприклад:
- мітка: і
- Товар: Це абзац
Деякі елементи самозакриваються, наприклад і , тобто вони не потребують закриваючих тегів.
5) Які типи списків підтримуються в HTML і де вони використовуються?
Підтримка HTML три основні типи списків:
- Упорядкований список ( ) – елементи відображаються цифрами або літерами.
- Невпорядкований список ( ) – елементи відображаються з маркованими списками.
- DescriptСписок іонів ( ) – використовується для термінів та їх визначень.
приклад:
<dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> </dl>
Списки часто використовуються для меню навігації, організації контенту та термінів глосарію.
6) Як використовуються атрибути в HTML, і які поширені приклади?
Атрибути надають додаткову інформацію елементам HTML. Вони завжди вказані всередині початкового тегу та слідують за парою «ім'я-значення». Типові приклади включають:
srcв для розташування зображення.hrefдля призначення гіперпосилання.idтаclassдля стилізації та JavaТаргетинг скриптів.altна зображеннях для зручності.
Наприклад:
<img src="logo.png" alt="Company Logo">
7) Що таке семантичні елементи HTML та які переваги вони пропонують?
Семантичні елементи чітко описують своє значення як розробникам, так і браузерам. Приклади включають , , , , та .
Переваги:
- Покращення доступності для програм зчитування з екрана.
- Надайте пошуковим системам чіткіше розуміння контенту (SEO).
- Покращення читабельності та зручності обслуговування коду.
приклад:
<article> <h2>News Update</h2> <p>Latest update about web development trends.</p> </article>
8) Поясніть різницю між блочними та рядковими елементами на прикладах.
Елементи блокового рівня, такі як , , та , займають всю ширину свого контейнера та починаються з нового рядка. Вбудовані елементи, такі як , та , займають лише стільки ширини, скільки вимагає їх вміст.
| тип | прикладів | характеристика |
|---|---|---|
| Блоковий рівень | , | Початок з нового рядка, повна ширина |
| В лінію | , | Плавність у тексті, ширина залежить від вмісту |
9) Як створюються гіперпосилання та яка різниця між абсолютними та відносними URL-адресами?
Гіперпосилання створюються за допомогою тегу з href атрибут.
- Абсолютна URL-адреса: Містить повний шлях, включаючи протокол та домен.
приклад:<a href="https://example.com/page.html">Visit</a> - Відносна URL-адреса: Посилається на файл відносно поточної сторінки.
приклад:<a href="/uk/about.html">About Us</a>
Абсолютні URL-адреси є кращими при посиланнях на зовнішні ресурси, тоді як відносні URL-адреси ефективніші в межах одного веб-сайту.
10) Яка роль тег та його атрибути?
The Тег використовується для збору введених користувачем даних та їх надсилання на сервер. Його два найважливіші атрибути:
- дію – визначає, куди будуть надсилатися дані.
- метод – визначає метод HTTP (
GETorPOST).
приклад:
<form action="/uk/submit" method="post"> <input type="text" name="username"> <input type="submit"> </form>
11) Які різні типи полів введення доступні у формах HTML5?
HTML5 запровадив нові типи вводу для покращення зручності використання та зменшення залежності від JavaПеревірка скриптів. Поширені типи включають:
- Текстовий: текст, пароль, електронна пошта, URL-адреса, пошук, тел.
- На основі дати та часу: дата, місцева дата/час, місяць, тиждень, час.
- Числовий: число, діапазон.
- Логічне значення: прапорець, радіо.
- Файл і колір: файл, колір.
приклад:
<input type="email" placeholder="Enter your email"> <input type="date"> <input type="range" min="1" max="10">
Ці типи вводу дозволяють браузерам відображати оптимізовані елементи керування інтерфейсом користувача, такі як календарі для дат або засоби вибору кольорів, покращуючи взаємодію з користувачем та зменшуючи кількість помилок форм.
12) Як працюють семантичні теги HTML5, такі як , , , та відрізняються за використанням?
Семантичні теги були введені для заміни загальних елементи та надають сенсу структурі сторінки.
| Тег | Мета | Приклад |
|---|---|---|
| Верхній розділ, часто з логотипами/навігацією | навігація по сайту | |
| Нижній розділ, авторські права або посилання | Нижній колонтитул сторінки | |
| Логічне групування пов'язаного контенту | Розділ блогу | |
| Незалежний контент, який може існувати самостійно | Стаття новин |
приклад:
<article> <header><h2>Breaking News</h2></header> <p>Details of the story...</p> <footer>Author: John Doe</footer> </article>
Використання цих елементів покращує SEO та доступність.
13) Поясніть різницю між вбудованим CSS, внутрішнім CSS та зовнішнім CSS.
Існує три основні способи застосування CSS до HTML:
- Вбудований CSS: Застосовується безпосередньо до елементів за допомогою
styleатрибут.
приклад:<p style="color:red;">Text</p> - Внутрішній CSS: Заявлено протягом tags in the .
- Зовнішній CSS: Пов’язано через
.cssфайл за допомогою .
| Метод | Переваги | Недоліки |
|---|---|---|
| В лінію | Швидко, конкретно | Важко обслуговувати, не можна використовувати повторно |
| Внутрішній | Добре для однієї сторінки | Не можна повторно використовувати на кількох сторінках |
| Зовнішній | Багаторазовий, чистий | Потрібне додаткове завантаження файлів |
Найкраща практика — використовувати зовнішній CSS для ремонтопридатності.
14) Що таке HTML-сутності та для чого вони використовуються?
HTML-сутності – це спеціальні коди, що використовуються для представлення зарезервованих символів, символів або невидимих символів у HTML-документах. Вони забезпечують правильне відображення таких символів, як <, > та &, а не інтерпретацію їх як код.
Приклади поширених сутностей:
- < →
- > → >
- & → &
- © → ©
- → нерозривний пробіл
Наприклад:
<p>Use <strong> instead of <b>.</p>
Сутності мають вирішальне значення для збереження читабельності коду та запобігання проблемам з рендерингом.
15) Як це зробити елементи працюють, і які їхні переваги та недоліки?
The Тег дозволяє вбудовувати одну HTML-сторінку в іншу. Його часто використовують для вбудовування відео, карт або зовнішніх віджетів.
переваги:
- Легка інтеграція зовнішнього контенту, такого як YouTube або Google Maps.
- Відокремлення контенту від головної сторінки.
Недоліки:
- Повільніше завантаження через додаткові запити.
- Ризики безпеки (клікджекінг, міжсайтовий скриптинг).
- Не завжди SEO-дружній.
приклад:
<iframe src="https://www.example.com" width="600" height="400"></iframe>
Сучасні альтернативи часто рекомендують API або методи вбудовування з кращим контролем та безпекою.
16) Що таке метатеги в HTML і як вони впливають на SEO?
Метатеги – це фрагменти інформації, розміщені всередині розділ HTML-документа. Вони надають метадані про сторінку, але не відображаються користувачам.
Основні типи метатегів:
- Descriptіон:
- Ключові слова (застарілі):
- Вьюпорт (адаптивний дизайн):
- Кодування:
Пошукові системи використовують метаописи для створення фрагментів у результатах пошуку, що безпосередньо впливає рейтинг кліків (CTR).
17) Яка різниця між абсолютними, відносними та коренево-відносними шляхами в HTML-посиланнях?
Посилання можна записувати трьома різними способами залежно від посилань на шляхи.
| тип | Приклад | Використовуйте Case |
|---|---|---|
| абсолют | https://example.com/images/pic.jpg | Зовнішні ресурси |
| Відносний | зображення/рис.jpg | Той самий каталог або підкаталог |
| Корінь-родич | /активи/зображення/рис.jpg | З кореня домену |
Абсолютні шляхи гарантують пошук ресурсів, але зменшують переносимість. Відносні шляхи полегшують переміщення контенту, тоді як коренево-відносні забезпечують узгодженість у межах великих сайтів.
18) Як працюють такі HTML5 API, як геолокація, веб-сховище та Canvaпокращити функціональність?
HTML5 запровадив API, які розширюють можливості вебзастосунків без необхідності встановлення плагінів.
- API геолокації: Отримує місцезнаходження користувача (з дозволом).
- API веб-сховища: Забезпечує
localStorageтаsessionStorageдля зберігання даних ключ-значення розміром до 10 МБ. - CanvaAPI: Дозволяє малювати фігури, зображення та анімацію безпосередньо на веб-сторінці.
Приклад: Локальне сховище
localStorage.setItem("user", "John");
alert(localStorage.getItem("user"));
Ці API покращують інтерактивність та продуктивність у сучасних додатках.
19) Поясніть переваги та недоліки використання елемент для дизайну макета.
Колись таблиці використовувалися для макетів сторінок, але зараз їх використання не рекомендується.
переваги:
- Забезпечує структуру для табличних даних.
- Підтримується у всіх браузерах.
Недоліки:
- Погана доступність для програм зчитування з екрана при неправильному використанні.
- Уповільнює рендеринг сторінки.
- Складніше підтримувати порівняно з системами макетування CSS, такими як Flexbox та Grid.
Найкраща практика: Використання виключно для табличних даних (наприклад, розкладів, порівнянь продуктів) та CSS для верстки.
20) Чи можна застосувати кілька CSS-класів до одного HTML-елементу? Як це досягається?
Так, HTML дозволяє застосовувати кілька CSS-класів до одного елемента, розділяючи їх пробілами в class атрибут. Цей метод дозволяє використовувати модульні, повторно використовувані стилі та уникати дублювання.
приклад:
<p class="text-bold text-red highlight">Important Notice</p>
Тут, елемент успадковує стилі від усіх трьох класів. Цей підхід підтримує комбінованість, що робить дизайн масштабованішим та простішим в обслуговуванні.
21) Яка різниця між а в HTML?
Обидва і є універсальними контейнерами, але вони служать різним цілям.
- — це елемент блочного рівня, який використовується для групування більших розділів контенту або структур макета.
- — це вбудований елемент, який використовується для стилізації або групування невеликих фрагментів тексту.
| особливість | ||
|---|---|---|
| дисплей | Блоковий рівень | В лінію |
| Використання | Макет, контейнери | Виділення тексту |
| Приклад | Обгортання секцій | Стилізація слів |
приклад:
<div class="container"> <p>This is a <span class="highlight">highlighted</span> word.</p> </div>
22) Як це працює елементарна робота, і де вона використовується?
The Елемент у HTML5 забезпечує залежну від роздільної здатності поверхню для малювання на основі растрового зображення. Він використовується для рендерингу графіки, анімації, діаграм і навіть простих ігор безпосередньо у браузері. JavaAPI скриптів, такі як getContext("2d") дозволяють розробникам малювати фігури, контури, зображення та текст.
приклад:
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 50);
</script>
Випадки використання включають інформаційні панелі, візуалізації в реальному часі та інтерактивну анімацію.
23) Поясніть різницю між id та class атрибути в HTML.
обидві id та class атрибути, що використовуються для стилізації та JavaСкриптове таргетування, але вони відрізняються унікальністю та застосуванням.
| атрибут | характеристика | Приклад |
|---|---|---|
| id | Має бути унікальним у документі; використовується для одного елемента. | |
| клас | Можна застосовувати до кількох елементів; дозволяє групування. |
Приклад використання:
<div id="main-header">Welcome</div> <p class="text-highlight">Hello</p>
Найкраща практика: Використовуйте id для унікальних ідентифікаторів та class для груп стилізації повторного використання.
24) Що таке атрибути data-* у HTML5 та які їхні переваги?
Команда data-* Атрибути дозволяють розробникам зберігати власні дані безпосередньо в елементах HTML. Ці атрибути мають префікс data- а потім ім'я, що робить їх доступними через JavaСценарій.
Переваги:
- Увімкнути спрощене зберігання метаданих без впливу на DOM.
- Корисно для динамічних застосунків, підказок або обробки на стороні клієнта.
приклад:
<button data-user="123" data-role="admin">Edit User</button>
<script>
let btn = document.querySelector("button");
console.log(btn.dataset.user); // 123
</script>
Ця функція сприяє гнучкості в управлінні станом та динамічною поведінкою.
25) Як забезпечується доступність у HTML за допомогою ролей та атрибутів ARIA?
Доступність у HTML гарантує, що веб-застосунки можуть використовувати люди з інвалідністю. Ролі та атрибути ARIA (доступні багатофункціональні інтернет-застосунки) надають додатковий контекст для допоміжних технологій.
Приклади атрибутів ARIA:
- role=”навігація” – визначає меню навігації.
- aria-label=”Закрити” – надає описові мітки.
- aria-hidden=”true” – приховує елементи від програм зчитування з екрана.
приклад:
<button aria-label="Close window">X</button>
Поєднуючи семантичний HTML з атрибутами ARIA, розробники покращують інклюзивність та дотримуються стандартів доступності, таких як WCAG.
26) Яка різниця між рядковими, блоковими та рядково-блоковими елементами?
HTML-елементи класифікуються на основі їхньої поведінки при відображенні.
| тип | характеристика | прикладів |
|---|---|---|
| В лінію | Не починайте з нового рядка; лише за шириною вмісту. | , |
| Блокувати | Займайте всю ширину, починаючи з нового рядка. | , |
| Вбудований блок | Поводиться як рядковий, але дозволяє використовувати властивості блоків (висота, ширина). | , стилізований |
приклад:
<span>Inline</span> <div>Block</div> <span style="display:inline-block; width:100px;">Inline-block</span>
27) Як оптимізувати зображення в HTML для кращої продуктивності?
Оптимізація зображень зменшує час завантаження сторінки та покращує SEO. Стратегії включають:
- Використання сучасних форматів, таких як WebP or AVIF.
- Застосування адаптивних зображень за допомогою і
srcset. - Встановлення атрибутів ширини та висоти для уникнення зміщень макета.
- Стиснення зображень перед завантаженням.
- Відкладене завантаження за допомогою
loading="lazy".
приклад:
<img src="image.webp" alt="Optimized Image" loading="lazy">
Добре оптимізовані зображення покращують взаємодію з користувачем та підвищують показники Core Web Vitals.
28) Який життєвий цикл HTML-сторінки у браузері?
Життєвий цикл HTML-сторінки складається з кількох етапів:
- Розбір: Браузер зчитує HTML та створює модель об'єктів документа (DOM).
- Завантаження ресурсів: Завантажуються пов'язані CSS, JS та зображення.
- Візуалізація: Браузер застосовує стилі та елементи макета.
- Сценарій: JavaСкрипт виконується та маніпулює DOM, якщо це необхідно.
- Взаємодія: Обробляються такі події, як кліки та прокручування.
Розуміння цього життєвого циклу допомагає розробникам оптимізувати швидкість рендерингу, мінімізувати блокувальні скрипти та забезпечити ефективне завантаження сторінки.
29) Які переваги та недоліки використання семантичного HTML?
Семантичний HTML покращує змістовність та доступність веб-сторінок, але також має свої особливості.
| Переваги | Недоліки |
|---|---|
| Покращує доступність для програм зчитування з екрана. | Потрібне вивчення нових тегів. |
| Покращує SEO, уточнюючи структуру. | Може збільшити початковий час розробки. |
| Легша читабельність коду та зручність його обслуговування. | Старіші браузери можуть мати обмежену підтримку. |
Загалом, переваги переважують недоліки, що робить семантичний HTML найкращою практикою в сучасній розробці.
30) Як це елемент, який використовується для адаптивних зображень?
The дозволяє розробникам надавати кілька джерел зображень для різних пристроїв або роздільної здатності екрана. Він використовує вкладені елементи з такими атрибутами, як media та type.
приклад:
<picture> <source srcset="image-large.webp" media="(min-width: 800px)"> <source srcset="image-small.webp" media="(max-width: 799px)"> <img src="fallback.jpg" alt="Responsive Image"> </picture>
Це гарантує, що мобільні пристрої завантажуватимуть менші зображення, тоді як настільні комп’ютери отримуватимуть зображення з високою роздільною здатністю, покращуючи продуктивність та швидкість реагування.
31) Які існують різні способи вбудовування аудіо в HTML5?
HTML5 забезпечує елемент, що усуває потребу в зовнішніх плагінах. Він підтримує кілька форматів, таких як MP3, OGG та WAV, для забезпечення кросбраузерної сумісності. Розробники можуть вказувати кілька джерел всередині елемент, що дозволяє браузеру вибрати перший підтримуваний формат.
приклад:
<audio controls> <source src="sound.mp3" type="audio/mpeg"> <source src="sound.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio>
Переваги включають вбудоване керування, автовідтворення, циклічне відтворення та доступність із субтитрами через .
32) Як це працює робота з тегами, і які її переваги?
The Елемент дозволяє вставляти відео без сторонніх програвачів. Підтримувані формати включають MP4 (H.264), WebM та Ogg. Розробники можуть додавати різні джерела та атрибути, такі як controls, autoplay, loop та poster.
приклад:
<video controls width="600" poster="thumbnail.jpg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> Your browser does not support the video tag. </video>
переваги:
- Усуває залежність від Flash.
- Забезпечує вбудовані засоби доступності з субтитрами.
- Забезпечує кращу продуктивність та безпеку.
33) Які переваги та недоліки використання HTML-форм?
Форми важливі для введення даних користувачем, але мають свої сильні та слабкі сторони.
| Переваги | Недоліки |
|---|---|
| Стандартизований, підтримується в усіх браузерах. | Вразливий до ризиків безпеки (наприклад, XSS, CSRF). |
| Проста інтеграція з бекенд-серверами. | Погано розроблені форми знижують зручність використання. |
| Підтримує перевірку та кілька типів вводу. | Потрібен HTTPS для безпечної обробки даних. |
Найкраща практика: Використовуйте семантичні теги форм, перевірку на стороні клієнта та сервера, а також безпечні методи передачі.
34) Чим відрізняється перевірка форми на стороні клієнта від перевірки на стороні сервера?
Перевірка на стороні клієнта виконується у браузері за допомогою атрибутів HTML5 ( required, pattern ) Або JavaСкрипт. Він забезпечує негайний зворотний зв'язок, але його можна обійти.
Перевірка на стороні сервера відбувається після надсилання даних на сервер, що забезпечує безпеку та правильність.
| Аспект | Клієнтська сторона | На стороні сервера |
|---|---|---|
| швидкість | Негайний зворотній зв'язок | Повільніше, після подання |
| Безпека | Можна обійти | Більш безпечний |
| Приклад | PHP, валідація Node.js |
Найкраща практика — поєднувати обидва методи для оптимальної зручності використання та безпеки.
35) Яка мета цього viewport метатег в адаптивному дизайні?
Команда viewport Метатег забезпечує правильне відображення веб-сторінок на мобільних пристроях. За замовчуванням багато мобільних браузерів зменшують масштаб сторінок для робочого столу. Тег viewport дозволяє контролювати масштабування та ширину.
приклад:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Переваги:
- Забезпечує адаптивні макети.
- Запобігає проблемам із масштабуванням.
- Покращує основні показники веб-сайту та зручність використання на малих екранах.
Без нього вебсайти можуть виглядати крихітними та непридатними для використання на мобільних пристроях.
36) Як це зробити і елементи покращують HTML5-додатки?
: Надає вбудований спосіб створення модальних спливаючих вікон. Його можна відкривати або закривати через JavaСценарій ( show() та close() ).
: Визначає фрагменти HTML, які можна використовувати повторно, і які не відображаються, доки їх не активує JavaСценарій.
приклад:
<dialog id="myDialog">Hello!</dialog> <template id="card"> <div class="card">Reusable content</div> </template>
Переваги:
- усуває залежність від зовнішніх модальних бібліотек.
- дозволяє динамічний рендеринг без захаращення DOM.
37) Поясніть відмінності між , , and .
Скрипти можуть блокувати рендеринг сторінок, якщо ними не керувати належним чином.
| атрибут | Поведінка | Використовуйте Case |
|---|---|---|
| Блокує розбір HTML до завершення виконання. | Невеликі вбудовані скрипти | |
| Завантажується асинхронно, виконується негайно після готовності. | Аналітика, реклама | |
| Завантажується асинхронно, виконується після розбору HTML. | DOM-залежні скрипти |
приклад:
<script src="main.js" defer></script>
використання async та defer покращує продуктивність та запобігає проблемам блокування рендерингу.
38) Як можна забезпечити безпечну обробку форм у HTML?
Безпека форм вимагає як практик HTML, так і захисту серверної частини.
Основні практики включають:
- Завжди використовуйте HTTPS для передачі даних.
- Перевіряйте вхідні дані як на стороні клієнта, так і на стороні сервера.
- Використовувати
autocomplete="off"атрибут для конфіденційних полів, таких як паролі. - Застосовувати
rel="noopener noreferrer"на зовнішніх діях форми. - Запобігання підробці міжсайтових запитів (CSRF) за допомогою токенів.
приклад:
<form method="post" action="/uk/secure" autocomplete="off"> <input type="password" name="pwd" required> </form>
Безпечні форми захищають від витоків даних та поширених вразливостей.
39) Яка різниця між файлами cookie, localStorage та sessionStorage у HTML5?
HTML5 представив веб-сховище як альтернативу файлам cookie.
| Тип зберігання | Швидкість профілювання | Тривалість Життя | Надіслано через HTTP? |
|---|---|---|---|
| Файли cookie | ~4 КБ | До закінчення терміну придатності | Так |
| localStorage | ~5–10 МБ | Постійно до очищення | Немає |
| sessionStorage | ~5 МБ | Доки браузер/вкладка не закрита | Немає |
приклад:
localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme"));
Веб-сховище покращує продуктивність, оскільки дані не надсилаються з кожним HTTP-запитом.
40) Як HTML обробляє доступність зображень, форм та мультимедіа?
Доступність забезпечує інклюзивність для користувачів з інвалідністю.
- Зображення: Скористайтеся кнопкою
altатрибути для програм зчитування з екрана. - Форми: Додати пов’язане з
forатрибути для опису вхідних даних. - Мультимедіа: Додайте субтитри ( для відео) та стенограми.
приклад:
<img src="logo.png" alt="Company Logo"> <label for="email">Email</label> <input type="email" id="email">
Дотримання стандартів доступності (WCAG, ARIA) робить веб-застосунки зручнішими для використання та відповідають вимогам законодавства.
41) Які переваги використання елемент з мультимедіа?
The елемент використовується всередині або надавати текстові доріжки, такі як субтитри, підписи або описи. Це покращує доступність та зручність використання.
Переваги:
- Допомагає користувачам з вадами слуху.
- Покращує SEO, оскільки текст можна сканувати.
- Покращує взаємодію з користувачем у галасливих середовищах.
приклад:
<video controls> <source src="movie.mp4" type="video/mp4"> <track src="captions.vtt" kind="subtitles" srclang="en" label="English"> </video>
Це забезпечує доступність мультимедійного контенту для ширшої аудиторії.
42) Яким чином contenteditable Як працюють атрибути в HTML?
Команда contenteditable Атрибут дозволяє користувачам редагувати вміст елемента безпосередньо в браузері без зовнішніх інструментів.
приклад:
<p contenteditable="true">This paragraph is editable.</p>
Користувачі:
- Вбудовані редактори браузера.
- Програми для ведення нотаток або подібні до CMS-подібних програм.
- Прототипування інтерактивних функцій.
Хоча це корисно, з ним слід поводитися обережно, оскільки неконтрольоване редагування може створювати ризики для безпеки під час надсилання даних на сервери.
43) Яка різниця між прогресивним покращенням та витонченою деградацією в HTML-дизайні?
Це два підходи до обробки різних можливостей браузера.
| Підхід | Концепція | Приклад |
|---|---|---|
| Прогресивне вдосконалення | Почніть з базового HTML та додайте розширені функції для сумісних браузерів. | Форма працює з базовим HTML, але використовує JavaПеревірка скрипта, якщо доступна. |
| Витончена деградація | Спочатку створіть розширені функції та забезпечте резервний варіант для старіших браузерів. | Діаграма на основі полотна повертається до статичного зображення. |
Поступове вдосконалення є кращою стратегією сьогодні, оскільки вона забезпечує універсальний доступ.
44) Що таке мікродані в HTML5 і як вони корисні для SEO?
Мікродані — це спосіб вбудовування структурованих даних в елементи HTML за допомогою таких атрибутів, як itemscope, itemtype та itempropПошукові системи використовують це для відображення розширених фрагментів у результатах пошуку.
приклад:
<div itemscope itemtype="https://schema.org/Book"> <span itemprop="name">HTML Mastery</span> by <span itemprop="author">Jane Doe</span> </div>
Переваги:
- Покращує видимість за допомогою розширених фрагментів.
- Надає контекст пошуковим системам.
- Покращує CTR у результатах пошуку.
45) Які переваги та недоліки використання вбудованих фреймів ( )?
Ми торкнулися раніше, але давайте підсумуємо переваги та недоліки.
| Переваги | Недоліки |
|---|---|
| Легка інтеграція стороннього контенту. | Уповільнює продуктивність сторінки. |
| Ізолює зовнішні ресурси. | Вразливий до клікджекінгу. |
| Корисно для вбудовування карт, відео. | Не SEO-оптимізовано, контент часто ігнорується. |
Найкраща практика — використовувати економно та надають перевагу API або вбудованим інтерфейсам, які дозволяють налаштування та безпечну інтеграцію.
46) Як ви використовуєте і елементи в HTML5?
Ці елементи створюють розділи контенту, що згортаються, без JavaСценарій.
приклад:
<details> <summary>Click for more details</summary> <p>This text is revealed when expanded.</p> </details>
Переваги:
- Покращує взаємодію з користувачем.
- Покращує доступність (зручність для клавіатури та програми зчитування з екрана).
- Уникає залежності від звичаїв JavaРішення на основі сценаріїв.
Це особливо корисно для поширених запитань або інтерфейсів прогресивного розкриття інформації.
47) Які ключові відмінності між HTML та XHTML?
HTML та XHTML (розширюваний HTML) – це мови розмітки, але XHTML дотримується суворіших правил XML.
| особливість | HTML | XHTML |
|---|---|---|
| синтаксис | гнучкий | Суворий, сумісний з XML |
| Закриття тегу | опціональний | обов'язкове |
| Чутливість до справи | Не враховує регістр | Має бути з нижньої літери |
| Помилка обробки | Браузери прощають помилки | Помилки розбору порушують рендеринг |
Приклад: є дійсним у HTML, але має бути у XHTML. Сьогодні HTML5 значною мірою замінив XHTML завдяки своїй гнучкості.
48) Які існують різні типи doctype-ів у HTML і чому вони важливі?
Doctype повідомляє браузеру, яку версію HTML використовувати.
типи:
- HTML5: (простий, сучасний).
- HTML 4.01 Строгий/Перехідний/Набір фреймів.
- XHTML 1.0 Строгий/Перехідний/Фреймсет.
Використання правильного типу документа (doctype) забезпечує однакову рендерингову обробку в різних браузерах. HTML5 doctype зараз є стандартом.
49) Як покращити SEO за допомогою HTML-тегів, таких як , <meta> та <h1>?
SEO залежить від правильного семантичного структурування.
- : Визначає заголовок сторінки, що є вирішальним для ранжування.
- : Надає фрагмент коду для пошукових систем.
- Заголовки ( – ): Упорядкуйте ієрархію контенту.
- Атрибути alt для зображень: Покращення видимості пошуку зображень.
- Розмітка схеми: Надає структуровані дані.
приклад:
<title>HTML Interview Questions</title> <meta name="description" content="Comprehensive HTML interview guide with answers."> <h1>Top HTML Questions</h1>
50) Які відмінності між а в HTML?
Хоча обидва використовують href атрибут, їх призначення відрізняється.
| Тег | Мета | Приклад |
|---|---|---|
| <a> | Створює гіперпосилання для навігації між сторінками. | Натисніть тут |
| Визначає зв'язки із зовнішніми ресурсами, такими як CSS або значки. |
The Елемент ніколи не з'являється в тілі сторінки, водночас створює інтерактивний текст або зображення.
🔍 Найпопулярніші питання на співбесіді з HTML з реальними сценаріями та стратегічними відповідями
1) Яка різниця між семантичними та несемантичними елементами HTML, і чому це важливо?
Що шукає інтерв'юер: Розуміння семантики, доступності, SEO та зручності обслуговування.
Приклад відповіді:
«Семантичні елементи, такі як , , , та передають значення та структуру як браузерам, так і допоміжним технологіям. Вони покращують доступність завдяки кращій навігації за орієнтирами, допомагають пошуковим системам розуміти ієрархію контенту та роблять код більш зручним у підтримці. Несемантичні елементи, такі як і не мають внутрішнього значення, тому їх найкраще використовувати для випадків, коли не існує відповідного семантичного елемента. Я спочатку надаю пріоритет семантичним елементам, а потім доповнюю їх класами або атрибутами ARIA лише за необхідності».
2) Як зробити складну форму доступною та зручною для користувача за допомогою простого HTML?
Що шукає інтерв'юер: Володіння вбудованими елементами керування форм, підписами, обмеженнями та атрибутами доступності.
Приклад відповіді:
«Я починаю з правильних асоціацій, використовую відповідні type атрибути, такі як email, tel та dateта додайте required, min та pattern для перевірки обмежень. Я групую пов'язані поля за допомогою і Я використовую aria-describedby щоб пов’язати вхідні дані з допоміжним текстом та повідомленнями про помилки, надайте чіткі placeholder текст без заміни підписів та ввімкнути autocomplete жетони, як given-name та address-line1Я покладаюся на вбудовану систему повідомлень для перевірки, але доповнюю її доступними звітами про помилки, які зосереджені на першому недійсному полі.
3) Поясніть, як ви б створювали адаптивні зображення з оптимальною продуктивністю.
Що шукає інтерв'юер: Практичне використання , sizes, та .
Приклад відповіді:
«Я використовую з srcset надати кілька рішень та sizes атрибут, який відображає фактичну ширину візуалізації макета. Для художнього оформлення я обгортаю зображення в з медіа-кондиціонованим елементи. Я завжди включаю внутрішні width та height щоб зарезервувати місце та зменшити зміщення макета, і я вважаю loading="lazy" для зображень під згином. Де це доречно, я використовую сучасні формати, такі як AVIF або WebP, з резервними варіантами.
4) Застаріла сторінка використовує таблиці для макета та недоступна для користувачів. Як ви підходите до її рефакторингу?
Що шукає інтерв'юер: Стратегія міграції, управління ризиками та тестування.
Приклад відповіді (використовується обов'язкова фраза №1):
«На моїй попередній посаді я замінив табличні структури семантичними контейнерами, такими як , , та CSS Grid для макета. Я мігрував фрагментами, щоб зменшити ризик, зіставляючи кожну область таблиці із семантичними розділами та перевіряючи за допомогою HTML-валідатора та aXe. Я додав відповідні рівні заголовків, орієнтири та порядок фокусування клавіатури. Я перевірив парність за допомогою візуальних регресійних тестів та покращив продуктивність, видаливши зображення-пробілювачі та застарілі атрибути.
5) Як робити defer та async на differ, and why should HTML authors care?
Що шукає інтерв'юер: Розуміння поведінки рендерингу та блокування.
Приклад відповіді:
"async завантажує та виконує скрипт, щойно він стає доступним, що може призвести до його виконання поза порядком. defer завантажує під час парсингу, але гарантує виконання після парсингу HTML, за порядком. Автори HTML повинні бути обережними, оскільки блокувальні скрипти затримують перший рендеринг. За замовчуванням я defer для скриптів сторінок, що залежать від готовності DOM та резервування async для незалежних скриптів, таких як аналітика».
6) Опишіть випадок, коли ви поєднували запити на піксельно-ідеальний дизайн із семантичним, доступним HTML.
Що шукає інтерв'юер: Співпраця, комунікація та принципові компроміси.
Приклад відповіді (використовується обов'язкова фраза №2):
«На попередній посаді дизайн вимагав вкладених декоративних обгорток, які заохочували несемантичну розмітку. Спочатку я запропонував семантичну структуру, а потім досяг візуальних результатів за допомогою CSS, а не додаткових…» елементи. Я продемонстрував покращення навігації зчитувача з екрана та задокументував узгоджений API компонентів. Компроміс зберіг запланований вигляд, зберігаючи при цьому доступність та зручність обслуговування.
7) Ви виявили кумулятивне зміщення макета через зображення та iframe без розмірів. Який ваш план?
Що шукає інтерв'юер: Практичні рішення реальних проблем з продуктивністю.
Приклад відповіді (використовується обов'язкова фраза №3):
«На попередній роботі я перевіряв усі і елементи та додані внутрішні width та height атрибути, що відповідають співвідношенню сторін джерела. Я використав CSS max-width: 100% адаптивно масштабуватися, а коли йшлося про динамічний контент, я застосовував CSS aspect-ratio заповнювачі властивостей або контейнерів. Я перевірив покращення на панелі Продуктивність та Lighthouse, підтвердивши зменшення зміщення макета.
8) Які найкращі практики для написання доступних HTML-таблиць?
Що шукає інтерв'юер: Правильна структурна розмітка та допоміжна технічна підтримка.
Приклад відповіді:
«Я використовую для лаконічної назви, , , та для структури та для визначення заголовків. Для складних таблиць із багаторівневими заголовками я використовую headers та id атрибути для відображення комірок. Я уникаю використання таблиць для макета, забезпечую достатній контраст тексту для вмісту всередині комірок і за потреби надаю зведення поза таблицею для контексту».
9) Як ви справляєтеся з жорсткими термінами, коли кілька HTML-документів конкурують за увагу?
Що шукає інтерв'юер: Пріоритезація, комунікація та якість під тиском.
Приклад відповіді (використовується обов'язкова фраза №4):
«На моїй попередній посаді я сортував завдання за впливом на користувачів та ланцюгами залежностей. Спочатку я доставляв сторінки з найбільшим впливом та найнижчим ризиком, повідомляв зацікавленим сторонам про компроміси та встановлював визначення виконаних робіт, яке включало перевірку, перевірку доступності та базові бюджети на виконання. Я документував будь-які відкладені вдосконалення та заплановані подальші виправлення, щоб гарантувати, що якість не погіршиться».
10) Односторінковий маркетинговий сайт має бути SEO-оптимізованим без JavaЗалежність від скриптів. Які HTML-стратегії ви застосовуєте?
Що шукає інтерв'юер: Можливість доставляти зручний для пошуку та стійкий контент.
Приклад відповіді:
«Я гарантую, що основний контент відтворюється в HTML, а не вводиться JavaСкрипт. Я використовую логічну ієрархію заголовків, описову і <meta name=”description”>, канонічні URL-адреси та семантичні розділи. Я розмічаю контент відповідними мікроданими або JSON-LD, де це необхідно, забезпечую змістовне внутрішнє посилання та додаю соціальні метатеги для попереднього перегляду. Я перевіряю структуру документа та підтверджую придатність для сканування за допомогою статичної карти сайту.
