Вопросы по HTML5 на собеседовании: вопросы и ответы

Вопросы по HTML5 на собеседовании проверяют понимание браузера, разметки и доступности. Здесь собраны ответы для junior и middle-разработчиков по основным возможностям HTML и браузерным API. Короткие объяснения и примеры помогут подготовить устный ответ и показать код на доске.

Основы HTML5: стандарт и doctype

Стандарт описывает правила HTML, а doctype влияет на режим отображения страницы. Различайте историю языка и поведение браузера при разборе документа.

Что такое HTML5 и HTML Living Standard?

HTML5 называют набором возможностей HTML: семантическими элементами, формами, мультимедиа и графикой.

WHATWG ведет спецификацию HTML Living Standard как постоянно обновляемый стандарт.

Текст стандарта опубликован в HTML Living Standard. Практические пояснения по элементам и API есть в MDN Web Docs.

Зачем нужен doctype?

<!DOCTYPE html> включает стандартный режим отображения документа в браузере. Строка не подключает DTD и не проверяет валидность документа.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Страница</title>
</head>
<body>Текст</body>
</html>

Что будет без doctype?

Браузер может включить quirks mode, то есть режим совместимости со старой разметкой. Теги продолжат работать, но расчет размеров и CSS-раскладка могут отличаться от стандартного режима.

Ставьте doctype первой строкой документа, чтобы получить предсказуемую модель отображения.

Как связаны SGML, XML, HTML и XHTML?

SGML описывал языки разметки, а ранние версии HTML исторически опирались на его правила. XML упростил часть правил SGML, а XHTML описал HTML-разметку со строгим XML-синтаксисом.

HTML 4 не был XHTML: XHTML 1.0 оформлял HTML 4 как приложение XML.

HTML5 отказался от обязательной связи с DTD и SGML.

Семантическая разметка HTML

Семантика связывает структуру документа с назначением его частей. Выбирайте элемент по смыслу содержимого, а уровень заголовка – по вложенности темы.

Для чего нужны header, nav, main, article, section, aside и footer?

Семантический элемент сообщает назначение блока.

header содержит вводную часть страницы или раздела, nav – навигацию, а main – главное содержимое. article подходит самостоятельной публикации, section группирует тему, aside содержит связанный материал, а footer завершает страницу или раздел.

<header>Шапка</header>
<nav><a href="/">Главная</a></nav>
<main>
  <article>
    <h2>Статья</h2>
    <section>
      <h3>Раздел</h3>
      <p>Содержимое раздела.</p>
    </section>
  </article>
  <aside>Связанный материал</aside>
</main>
<footer>Контакты</footer>

Чем article отличается от section?

article сохраняет смысл после переноса на другую страницу. Так размечают новость, пост, комментарий или карточку товара.

section объединяет связанные части страницы и обычно получает собственный заголовок. Берите section для тематической группы, а article – для самостоятельного материала.

Почему семантика важна для доступности и SEO?

Скринридер использует семантические роли для навигации. Элементы nav и main помогают быстро найти нужный участок страницы.

Поисковая система тоже получает более понятную структуру документа.

Семантика не заменяет содержательные заголовки, подписи и текст ссылок.

Как использовать заголовки в правильном порядке?

Заголовки показывают вложенность тем. После h2 обычно идет h3, затем h4.

Выбирайте уровень по структуре, а размер текста меняйте через CSS. Не пропускайте уровни ради нужного визуального размера.

Доступность HTML и ARIA

Доступность начинается с понятных названий элементов и связей между ними. Нативная разметка закрывает базовые задачи; ARIA дополняет ее состояниями и описаниями.

Зачем картинке нужен alt?

alt передает смысл изображения человеку, который его не видит.

Декоративной картинке задавайте пустой alt="".

<img src="logo.svg" alt="Логотип компании">
<img src="decoration.svg" alt="">

Как связать label и поле формы?

label дает полю понятное название и увеличивает область клика. Связывайте элементы одинаковыми значениями for и id.

<label for="email">Электронная почта</label>
<input id="email" name="email" type="email">

Когда нужны роли и атрибуты ARIA?

ARIA передает вспомогательным технологиям роли, состояния и связи элементов. Сначала выбирайте подходящий нативный элемент: он уже содержит нужную семантику.

Не добавляйте role="button" обычной кнопке button.

Атрибут aria-expanded сообщает, раскрыто ли связанное меню. Скрипт должен обновлять атрибут вместе с видимостью меню.

<button id="menu-toggle" aria-expanded="false" aria-controls="menu">Меню</button>
<nav id="menu" hidden><a href="/">Главная</a></nav>
<script>
const toggle = document.getElementById("menu-toggle");
const menu = document.getElementById("menu");
toggle.addEventListener("click", () => {
  menu.hidden = !menu.hidden;
  toggle.setAttribute("aria-expanded", String(!menu.hidden));
});
</script>

Как сделать форму понятной для скринридера?

Связывайте каждое поле с видимой подписью и сообщайте об ошибке текстом. Не заменяйте подпись одним placeholder, потому что он исчезает после ввода.

<label for="phone">Телефон</label>
<input id="phone" name="phone" type="tel" aria-describedby="phone-help">
<p id="phone-help">Введите номер с кодом страны.</p>

Формы и встроенная валидация

Тип поля задает способ ввода, а атрибуты ограничений проверяют значение. Различайте подсказки браузера, вычисление результата и проверку перед отправкой формы.

Какие типы input добавил HTML5?

К типам input относятся color, date, datetime-local, email, url, number, range, search, time и tel.

Это значения атрибута type, а не отдельные элементы.

<input type="color" name="color" aria-label="Цвет">
<input type="date" name="date" aria-label="Дата">
<input type="datetime-local" name="meeting" aria-label="Время встречи">
<input type="email" name="email" aria-label="Электронная почта">
<input type="url" name="site" aria-label="Сайт">
<input type="number" name="quantity" min="1" max="5" aria-label="Количество">
<input type="range" name="volume" min="0" max="10" aria-label="Громкость">
<input type="search" name="query" aria-label="Поиск">
<input type="time" name="time" aria-label="Время">
<input type="tel" name="phone" aria-label="Телефон">

datetime-local хранит дату и время без часового пояса. Тип tel сам по себе не проверяет формат номера.

Как работают required, pattern, min, max и novalidate?

required запрещает пустое значение, pattern задает шаблон, а min и max ограничивают диапазон. novalidate у формы отключает встроенную проверку при отправке.

<form>
  <label for="code">Код: две заглавные латинские буквы и четыре цифры</label>
  <input id="code" name="code" required pattern="[A-Z]{2}[0-9]{4}">
  <label for="age">Возраст</label>
  <input id="age" name="age" type="number" min="18" max="100">
  <button type="submit">Отправить</button>
</form>

Добавьте novalidate открывающему тегу form, чтобы отключить проверку этого примера.

Сервер все равно должен повторно проверять полученные данные.

Как работает datalist?

datalist предлагает варианты, но оставляет пользователю возможность ввести другое значение. Значение list у поля совпадает с id списка.

<label for="country">Страна</label>
<input id="country" name="country" list="countries">
<datalist id="countries">
  <option value="Россия"></option>
  <option value="Италия"></option>
</datalist>

Как использовать output и valueAsNumber?

output показывает результат вычисления, а valueAsNumber читает число из поля. Идентификаторы a и b связывают поля с результатом.

<form onsubmit="return false" oninput="result.value = (a.valueAsNumber || 0) + (b.valueAsNumber || 0)">
  <label for="a">Первое число</label>
  <input id="a" name="a" type="number" value="0">
  <label for="b">Второе число</label>
  <input id="b" name="b" type="number" value="0">
  <output id="result" name="result" for="a b">0</output>
</form>

Что делает autocomplete?

autocomplete подсказывает браузеру, какие сохраненные данные подходят полю. Значение атрибута описывает назначение поля, например email, name или street-address.

<label for="email">Электронная почта</label>
<input id="email" name="email" type="email" autocomplete="email">

Мультимедиа и изображения

Медиаэлементы управляют воспроизведением, а разметка изображений помогает выбрать подходящий файл. Учитывайте отдельно доступность контента, условия загрузки и ограничения автоматического запуска.

Как подключить video и audio?

video и audio воспроизводят медиафайлы. controls показывает управление, а несколько source дают браузеру варианты формата.

Для примеров с медиа разместите указанные файлы рядом с HTML-документом.

<video controls>
  <source src="movie.mp4" type="video/mp4">
  Ваш браузер не поддерживает видео.
</video>
<audio controls src="sound.mp3">Аудио недоступно.</audio>

Почему autoplay обычно используют с muted?

Браузеры ограничивают автоматическое воспроизведение со звуком. Связка autoplay muted подходит для беззвучного фонового видео.

Атрибут autoplay не гарантирует запуск: браузер учитывает политику воспроизведения.

<video autoplay muted loop playsinline>
  <source src="background.mp4" type="video/mp4">
</video>

Для чего нужен track?

track подключает текстовую дорожку к видео. Субтитры помогают смотреть ролик без звука и улучшают доступность.

<video controls>
  <source src="lesson.mp4" type="video/mp4">
  <track kind="subtitles" src="lesson-ru.vtt" srclang="ru" label="Русский" default>
</video>

Файл lesson-ru.vtt содержит текст в формате WebVTT:

WEBVTT

00:00:00.000 --> 00:00:03.000
Добро пожаловать на урок.

Как работают picture, srcset, sizes и loading?

picture задает альтернативные источники изображения по условиям, например ширине экрана. srcset предлагает файлы-кандидаты, а sizes описывает ширину изображения в макете.

loading="lazy" разрешает браузеру отложить загрузку удаленного от видимой области изображения.

<picture>
  <source media="(min-width: 800px)" srcset="hero-large.jpg">
  <img src="hero-small.jpg" srcset="hero-small.jpg 480w, hero-large.jpg 1200w" sizes="100vw" loading="lazy" alt="Горный пейзаж">
</picture>

В этом примере файлы имеют ширину 480 и 1200 пикселей. Для изображения первого экрана отложенную загрузку обычно не задают.

Canvas и SVG

Canvas и SVG решают задачи браузерной графики разными способами. Выбор зависит от частоты перерисовки, масштабирования и взаимодействия с отдельными фигурами.

Что такое Canvas?

canvas – растровая область, которой JavaScript управляет через контекст рисования. Браузер не хранит отдельные фигуры как DOM-объекты.

<canvas id="line" width="240" height="140">Линия от точки 10, 10 до точки 200, 100.</canvas>
<script>
const context = document.getElementById("line").getContext("2d");
context.beginPath();
context.moveTo(10, 10);
context.lineTo(200, 100);
context.stroke();
</script>

Что такое SVG?

SVG – векторная разметка графики. Фигуры остаются элементами документа, поэтому получают стили, обработчики событий и атрибуты доступности.

<svg width="240" height="140" viewBox="0 0 240 140" role="img" aria-label="Красная линия">
  <line x1="10" y1="10" x2="200" y2="100" stroke="red" stroke-width="2"></line>
</svg>

Как нарисовать прямоугольник и круг?

В SVG применяйте элементы rect и circle, а в Canvas – методы контекста. Оба примера используют реальные координаты.

<svg width="240" height="160" viewBox="0 0 240 160" role="img" aria-label="Синий прямоугольник и красный круг">
  <rect x="20" y="20" width="100" height="60" fill="blue"></rect>
  <circle cx="180" cy="60" r="30" fill="red"></circle>
</svg>

<canvas id="shapes" width="240" height="160">Синий прямоугольник и красный круг.</canvas>
<script>
const ctx = document.getElementById("shapes").getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 100, 60);
ctx.beginPath();
ctx.arc(180, 60, 30, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
</script>

Когда выбирать Canvas, а когда SVG?

Canvas подходит для игр, частой перерисовки и больших сцен. SVG удобнее для схем, графиков и интерфейсов с отдельными интерактивными объектами.

Количество объектов само по себе не определяет победителя по производительности.

Хранилища браузера

Хранилища различаются сроком жизни, форматом данных и связью с сервером. Выбирайте механизм с учетом этих различий и характера обращений к данным.

Чем отличаются cookies, localStorage, sessionStorage и IndexedDB?

Браузер отправляет подходящие cookies серверу с HTTP-запросами. Web Storage хранит строки синхронно на стороне браузера, а IndexedDB хранит структурированные данные через асинхронный API.

Сервер может получить данные браузерных хранилищ, если клиентский код отправит их явно.

Как сохранить объект в localStorage?

localStorage хранит строки. Сериализуйте объект через JSON.stringify, а при чтении используйте JSON.parse.

const user = { name: "Анна", role: "editor" };
localStorage.setItem("user", JSON.stringify(user));
const savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name);

При передаче обычного объекта напрямую хранилище получит строку "[object Object]".

Разобрать ее как JSON нельзя.

Чем sessionStorage отличается от localStorage?

sessionStorage разделяет данные по источнику и сессии вкладки. localStorage объединяет данные страниц одного источника и не ограничивает их сессией вкладки.

Перезагрузка страницы сохраняет данные sessionStorage.

sessionStorage.setItem("step", "2");
const step = sessionStorage.getItem("step");
console.log(step);

Не используйте закрытие вкладки как гарантию безвозвратного удаления чувствительных данных.

Что такое WebSQL и чем его заменить?

WebSQL – устаревший браузерный API для работы с SQL-базой. Для новых проектов со структурированными данными используйте IndexedDB или библиотеку поверх IndexedDB.

Удаление WebSQL из Chromium не означает одинаковую историю поддержки во всех браузерах.

Web Workers, SSE и офлайн-режим

Фоновые вычисления, серверные события и офлайн-доступ решают разные задачи приложения. Для вычислений выбирайте Web Worker, для входящих обновлений – SSE, для перехвата запросов – Service Worker.

Зачем нужны Web Workers?

Web Worker выполняет JavaScript в отдельном потоке и разгружает основной поток от вычислений. Страница обменивается с ним сообщениями через postMessage.

<button id="start">Запустить</button>
<output id="answer">0</output>
<script>
const workerCode = `self.onmessage = event => {
  self.postMessage(event.data * 2);
}`;
const workerURL = URL.createObjectURL(
  new Blob([workerCode], { type: "text/javascript" })
);
const worker = new Worker(workerURL);
worker.onmessage = event => {
  document.getElementById("answer").value = event.data;
  worker.terminate();
  URL.revokeObjectURL(workerURL);
};
document.getElementById("start").onclick = event => {
  event.currentTarget.disabled = true;
  worker.postMessage(10);
};
</script>

После получения результата пример завершает worker методом terminate().

Какие ограничения есть у Web Worker?

Worker не имеет доступа к DOM и объекту window. Он общается со страницей через postMessage и получает данные в обработчике onmessage.

Этот обработчик размещают в коде worker, а не в скрипте страницы:

self.onmessage = event => {
  const result = event.data * 2;
  self.postMessage(result);
};

Что такое Server-Sent Events?

SSE открывает однонаправленный поток от сервера к браузеру. Клиент использует EventSource, а сервер отправляет заголовок Content-Type: text/event-stream.

Пустая строка завершает сообщение в текстовом потоке:

data: Привет

Сохраните серверный пример как server.cjs и запустите командой node server.cjs. Откройте http://localhost:3000: страница получит сообщение «Привет».

const http = require("node:http");

http.createServer((request, response) => {
  if (request.url === "/events") {
    response.writeHead(200, {
      "Content-Type": "text/event-stream; charset=utf-8",
      "Cache-Control": "no-cache"
    });
    response.write("data: Привет\n\n");
    return;
  }

  response.writeHead(200, {
    "Content-Type": "text/html; charset=utf-8"
  });
  response.end(`<!DOCTYPE html>
<html lang="ru">
<head><meta charset="utf-8"><title>SSE</title></head>
<body>
  <p id="status">Ожидание сообщения</p>
  <script>
    const source = new EventSource("/events");
    source.onmessage = event => {
      document.getElementById("status").textContent = event.data;
      source.close();
    };
  </script>
</body>
</html>`);
}).listen(3000);

Чем SSE отличается от WebSocket?

SSE передает события только от сервера к клиенту и использует обычное HTTP-соединение. WebSocket открывает двусторонний канал, поэтому клиент и сервер могут отправлять сообщения в любой момент.

Берите SSE для ленты обновлений или уведомлений.

WebSocket подходит чату, совместному редактору и другой интерактивной связи.

Как включить офлайн-режим страницы?

Service Worker перехватывает запросы страницы, а Cache API хранит ответы для офлайн-доступа.

Атрибут manifest элемента html устарел. Спецификация HTML рекомендует использовать Service Worker вместо него.

Регистрация Service Worker требует HTTPS или локального окружения localhost.

Разместите регистрацию в HTML-странице index.html:

<script>
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js");
}
</script>

Сохраните обработчики в отдельном файле sw.js в корне сайта:

self.addEventListener("install", event => {
  event.waitUntil(
    caches.open("site-cache").then(cache =>
      cache.addAll(["/index.html"])
    )
  );
});

self.addEventListener("fetch", event => {
  if (event.request.method !== "GET") return;
  event.respondWith(
    caches.match(event.request).then(cached =>
      cached || fetch(event.request)
    )
  );
});

Откройте /index.html через сервер, дождитесь установки Service Worker и перезагрузите страницу. При последующем отключении сети обработчик вернет сохраненный HTML из кэша.

Загрузка страницы и метаданные

Атрибуты загрузки определяют момент выполнения скриптов, а метаданные задают параметры документа. Для хранения данных и создания интерфейса HTML также предлагает специальные атрибуты и элементы.

Чем отличаются async и defer?

async запускает внешний классический скрипт после загрузки, без гарантии порядка. defer запускает такие скрипты после разбора HTML и сохраняет порядок подключения.

<script async src="analytics.js"></script>
<script defer src="app.js"></script>

Оба атрибута позволяют загружать файлы параллельно с разбором HTML.

Зачем нужен meta viewport?

meta viewport сообщает мобильному браузеру ширину макета. Без него адаптивная страница может выглядеть уменьшенной.

<meta name="viewport" content="width=device-width, initial-scale=1">

Что такое data-атрибуты и dataset?

Атрибуты data-* хранят небольшие пользовательские данные в HTML. JavaScript читает их через свойство dataset, преобразуя имя после дефиса в camelCase.

<button data-product-id="42" id="buy">Купить</button>
<script>
const button = document.getElementById("buy");
console.log(button.dataset.productId);
</script>

В примере dataset.productId возвращает строку "42".

Для чего нужны template и dialog?

template хранит неактивную заготовку DOM, а dialog описывает диалоговое окно. Шаблон клонируют, диалог открывают через showModal() или show().

<template id="card-template">
  <article><h2>Карточка</h2></article>
</template>
<div id="cards"></div>
<button id="open-info">Открыть сообщение</button>
<dialog id="info">
  <p>Сохранено</p>
  <form method="dialog"><button>Закрыть</button></form>
</dialog>
<script>
const template = document.getElementById("card-template");
document.getElementById("cards").append(template.content.cloneNode(true));
document.getElementById("open-info").onclick = () => {
  document.getElementById("info").showModal();
};
</script>

CSS на собеседовании вместе с HTML

CSS определяет внешний вид элементов и их размещение на странице. В ответах различайте выбор элемента селектором, расчет размеров блока и распределение текста.

Как работают CSS-селекторы и специфичность?

Селектор выбирает элементы, а специфичность помогает разрешать конфликты правил. При одинаковых остальных условиях каскада ID сильнее класса, класс сильнее селектора элемента.

При равной специфичности и остальных условиях выигрывает правило, расположенное позже.

p { color: black; }
.note { color: blue; }
#warning { color: red; }

Селектор div + p выбирает только соседний абзац сразу после div. Селектор div p выбирает любой вложенный абзац.

Что входит в блочную модель?

Блочная модель состоит из content, padding, border и margin. При content-box ширина относится к content, а при border-box включает padding и border.

* { box-sizing: border-box; }
.box {
  width: 200px;
  padding: 20px;
  border: 10px solid #99c;
  margin: 30px;
}

В примере внешняя ширина рамки блока составляет 200 пикселей. Полезная ширина содержимого составляет 140 пикселей, а margin остается снаружи.

Как сделать многоколоночную верстку без префиксов?

Свойства column-count, column-gap и column-rule распределяют текст по колонкам. Современные браузеры поддерживают эти свойства без вендорных префиксов.

.article {
  column-count: 3;
  column-gap: 24px;
  column-rule: 1px solid #ccc;
}

На собеседовании сначала дайте определение, затем назовите ограничение и покажите небольшой рабочий пример.