Підготуйтеся до проходження співбесіди з HTML за допомогою цієї статті. Тут ви знайдете актуальні питання, які можуть бути поставлені на співбесіді фронтенд розробника, а також короткі відповіді та посилання на корисні навчальні матеріали. Перевірте знання ключових концепцій, правильного використання тегів, атрибутів та семантики HTML, щоб бути впевненим у своїх знаннях перед важливим інтерв'ю.
Нижче наведено 10 питань по темі HTML (джерело), які часто задають на співбесіді. Прочитавши питання, постарайтеся відповісти на нього так, ніби ви це робили під час свого інтерв'ю. Під питанням ви знайдете відповідь та посилання на джерела, які розкривають тему докладніше.
1) Чому, як правило, краще розміщувати підключення CSS всередині елемента head, а JS скриптів , перед закриваючим тегом body? Чи знаєте ви якісь винятки, наведіть приклади?
Переглянути відповідь
Стилі рекомендується підключати в head для того, щоб сторінка якнайшвидше прийняла свій зовнішній вигляд. Скрипти, підключені в head, можуть загальмувати цей процес, у зв'язку з цим їх рекомендується підключати перед закриваючим тегом body. Винятком є скрипти аналітики для визначення кількості відвідувачів, які не дочекалися завантаження сторінки. У цьому випадку скрипт повинен бути підключений в head
Докладніше тут:
2) Як забезпечити коректне відображення тексту на сторінці кількома мовами (мова про кодування)?
Переглянути відповідь
Кодування HTML-сторінки має бути вказане для того, щоб браузер зміг коректно відобразити текст на сторінці. В іншому випадку замість необхідних символів з'являться малозрозумілі ієрогліфи.
Докладніше тут:
3) Яку функцію виконує елемент doctype?
Переглянути відповідь
Цей елемент містить тип поточного документа. Тобто. елемент необхідний для правильного відображення та роботи сторінки у браузері.
Докладніше тут:
4) На що потрібно звернути увагу під час розробки мультимовних сайтів?
Переглянути відповідь
На обсяг коду, його читабельність та масштабованість. А також, на швидкодію та продуктивність у процесі перемальовування контенту, якщо переклад здійснюється «на льоту». Якщо для кожної сторінки сайту існує її локалізована версія, необхідно звернути увагу на те, чи ідентифікують її пошукові системи.
Докладніше тут:
5) Для чого потрібні data - атрибути?
Переглянути відповідь
Для зберігання додатково інформації, асоційованої з будь-яким елементом.
Докладніше тут:
6) Опишіть різницю між cookies, sessionstorage та localstorage.
Переглянути відповідь
sessionstorage – зберігає інформацію у браузері, доки не закрито вкладку, після її закриття – інформація видаляється. localstorage - зберігає інформацію у браузері навіть після того, як вкладку закрито, не має терміну життя. cookies - зберігають інформацію, мають термін життя (expires), відправляються на сервер із запитом.
Докладніше тут:
7) Опишіть різницю між script, script async та script defer
Переглянути відповідь
script — браузер почне завантажувати файл JS, як тільки зустріне рядок з його викликом, при цьому завантаження браузером частини HTML сторінки, що залишилася, продовжиться після того, як буде виконано js скрипт.
script-async - браузер не зупинить обробку HTML сторінки, а читатиме її далі. Після того як скрипт завантажиться, він виконається, не чекаючи завантаження всієї HTML сторінки. Якщо скриптів кілька - першим відпрацює той, який швидше завантажиться.
При використанні script-defer також буде асинхронне виконання скрипта, але на відміну від script-async - першим спрацює той скрипт, який зустрівся раніше. Ще одна відмінність від async це те, що script-defer спрацює, коли вся сторінка HTML буде оброблена браузером.
Докладніше тут:
8) Що таке прогресивний рендеринг?
Переглянути відповідь
Це процес відтворення контенту сторінки в міру його завантаження (прогресивно). Наприклад, спочатку малюється текст, потім зображення, таблиці тощо.
Докладніше тут:
9) За що відповідає атрибут srcset у тезі img? Поясніть, яким чином браузер обробляє цей атрибут.
Переглянути відповідь
Список з одного або декількох значень, які вказують набір можливих зображень для відображення у браузері. Кожне значення атрибуту може мати дескриптори ширини чи щільності пікселів, виходячи з яких браузер розуміє яку картинку зі списку необхідно завантажити.
Докладніше тут:
10) Ви використовували колись HTML-препроцесори? Розкажіть про недоліки/переваги будь-якого з них.
Переглянути відповідь
Препроцесори дають додатковий функціонал з відтворення колекцій, а також використання умовних конструкцій безпосередньо в HTML файлі і т.д. Також дають коротший синтаксис, PUG, наприклад. Вищезгаданий PUG обробляє вкладеності за допомогою відступів, що під час копіпасту коду часто ламає всю верстку та її компіляцію.
Докладніше тут:
