Интервью-вопрос
Что такое HTML
HTML описывает структуру и смысл страницы. Сильный ответ показывает, как из разметки получается DOM и почему выбор тегов влияет на доступность, SEO, формы и поддержку интерфейса.
- Добавлен
- Редакция
Подготовьте короткий ответ и пару деталей на случай уточняющих вопросов.
Мини-квиз
Проверка перед разбором
Несколько быстрых вопросов перед разбором. Так проще поймать места, которые только кажутся понятными.
Вопрос 1 из 50 правильно
Разбор
Разобраться, а не зазубрить
Дальше разбираем суть, типичные уточнения и места, где легко сказать лишнее или перепутать термины.
Базовая идея
HTML отвечает на вопрос: что находится на странице и какой у этого смысл. Это не язык программирования и не язык стилей. Он описывает документ через элементы, атрибуты, текст, ссылки, изображения, формы и другие части интерфейса.
Хороший короткий ответ может звучать так:
HTML это язык разметки. С его помощью я описываю структуру и смысл страницы: заголовки, текст, ссылки, формы, изображения и области интерфейса. Браузер парсит HTML, строит DOM, а CSS и JavaScript уже работают поверх этой структуры.
Такой ответ показывает базу и сразу связывает ее с реальной работой фронтенд-разработчика.
Что происходит в браузере
Браузер получает HTML как текст, парсит его и строит DOM-дерево. DOM это не просто копия файла. Это дерево узлов, которое браузер использует для рендера, применения CSS, выполнения JavaScript и построения accessibility tree.
Минимальная структура документа обычно выглядит так:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Профиль пользователя</title>
</head>
<body>
<main>
<h1>Профиль</h1>
<p>Основная информация о пользователе.</p>
</main>
</body>
</html>Важно не просто назвать теги. doctype включает современный режим разбора, lang помогает произношению и переводам, charset защищает от проблем с кодировкой, а main и h1 дают странице понятную структуру.
Семантика важнее внешнего вида
Семантический HTML означает, что тег выбран по смыслу, а не только по удобству стилизации. Например, <button> описывает действие, <a> описывает переход, <nav> описывает навигацию, а <main> основное содержимое страницы.
Плохой пример:
<div class="button" onclick="saveProfile()">Сохранить</div>Визуально это может быть кнопка, но для клавиатуры и assistive technologies такой элемент не равен настоящей кнопке. Вам придется вручную добавлять tabindex, роли, обработку Enter и Space, состояния disabled и фокус. Безопаснее начать с нативного элемента:
<button type="button">Сохранить</button>Практический вывод для интервью: HTML может уменьшить количество кода и багов, если использовать возможности браузера, а не имитировать их с нуля. Если кнопка находится в форме и должна отправлять данные, используйте type="submit". Если она только открывает модальное окно или меняет UI-состояние, явно задайте type="button", чтобы не получить случайный submit.
Как выбирать тег на практике
Короткий алгоритм выбора тега
Используйте <a href>. Так работают открытие в новой вкладке, копирование ссылки и доступность.Используйте <button>, а не кликабельный div. У кнопки сразу есть фокус и клавиатурное поведение.Используйте <label> и id или вложите поле внутрь label. Так поле легче нажать, а screen reader понятнее озвучивает форму.Выберите <header>, <main>, <nav>, <section>, <article> или <footer>, если роль блока понятна по смыслу.Если сомневаетесь, начните с поведения и смысла элемента. Пользователь переходит куда-то, значит нужна ссылка. Пользователь запускает действие, значит нужна кнопка. Нужно ввести данные, значит нужны элементы формы и подписи. Только если у блока нет специальной роли, берите нейтральные <div> или <span>.
На интервью это лучше звучит не как запрет на <div>, а как правило выбора. <div> нормален для группировки и layout, но плох как замена нативному интерактивному элементу.
Где HTML влияет на качество фронтенда
Что может сломаться из-за слабой разметки
div + onClickМышью работает, но клавиатура и screen reader дают плохой опыт. Безопаснее выбрать button или a.
input без labelПользователь не понимает назначение поля. Автотесты доступности тоже это поймают. Свяжите input с label.
div soupКод трудно читать, навигация по регионам хуже. Добавьте осмысленные landmarks и заголовки.
img без altЧасть контента пропадает для screen reader и при ошибке загрузки. Дайте короткую текстовую альтернативу.
innerHTMLHTML из CMS или API может содержать вредный скрипт. Безопаснее рендерить данные как текст или пропускать разметку через проверенный sanitizer.
p внутри p, div внутри pБраузер сам перестроит DOM. В React или SSR это может дать hydration warning и сломать обработчики на ожидаемых узлах.
У HTML есть прямые последствия для пользовательского опыта. Неправильная вложенность может привести к неожиданному DOM, сломанным CSS-селекторам и проблемам гидрации в React-приложении с SSR. Плохая семантика усложняет автотесты доступности. Отсутствие подписей у полей формы снижает понятность интерфейса и может ухудшить автозаполнение.
Есть и риск безопасности. Если приложение получает HTML из CMS, комментариев или API, его нельзя без проверки вставлять в DOM через innerHTML или dangerouslySetInnerHTML. Иначе пользовательский контент может стать XSS. Безопасная альтернатива: выводить данные как текст или пропускать разрешенную разметку через sanitizer с понятным списком тегов и атрибутов.
Поэтому в сильном ответе полезно сказать: HTML это не просто стартовый шаблон страницы. Это контракт между содержимым, браузером, стилями, скриптами, поисковыми системами и технологиями доступности.
Как связать HTML с CSS и JavaScript в ответе
Удобная формула для собеседования:
- HTML отвечает за структуру и смысл.
- CSS отвечает за внешний вид и адаптивность.
- JavaScript отвечает за интерактивность, состояние и обмен данными.
Но эти слои не изолированы полностью. CSS выбирает элементы по структуре и классам. JavaScript читает и меняет DOM. Screen reader получает информацию из семантики и доступных имен. Если HTML выбран плохо, следующим слоям приходится компенсировать ошибку. Из-за этого код часто становится хрупким.
Практический вывод
На интервью не нужно перечислять все теги HTML. Лучше показать зрелую картину: HTML задает основу интерфейса, браузер превращает его в DOM, а правильная семантика делает страницу понятной для людей, браузера и инструментов.
Короткий сильный ответ:
HTML это язык разметки для структуры и смысла веб-страницы. Я использую его, чтобы описать контент, формы, ссылки, кнопки и области страницы. Браузер строит из HTML DOM, а уже поверх него работают CSS, JavaScript и доступность. Поэтому я выбираю теги и атрибуты по назначению, а не только по внешнему виду.
Если вопрос задан джуниору, этого достаточно. Если вас спрашивают глубже, добавьте примеры про <button> вместо кликабельного <div>, alt для смысловых изображений, label для форм и валидную структуру документа.
Частые ошибки
Где обычно ошибаются
Проверьте формулировки, которые звучат уверенно, но на интервью быстро выдают пробелы.
- 1
Называть HTML языком программирования
Такой ответ звучит неточно. HTML не описывает алгоритмы, условия и вычисления. Он размечает содержание и показывает его смысл. Лучше сказать: HTML это язык разметки, из которого браузер строит DOM.
- 2
Сводить HTML к набору тегов
Если сказать только про
<h1>,<p>и<a>, ответ получится слишком поверхностным. Добавьте, что теги и атрибуты создают структуру документа, влияют на доступность, формы, навигацию и работу CSS и JavaScript. - 3
Игнорировать семантику
Страница из одних
<div>может выглядеть нормально, но хуже работает для клавиатуры, screen reader и поддержки. Сначала выбирайте нативный тег по смыслу.<div>оставляйте для нейтральной группировки. - 4
Путать ссылку и кнопку
<a>нужен для перехода,<button>нужен для действия. Если сделать действие ссылкой без настоящегоhref, можно сломать фокус, ожидания пользователя, аналитику и поведение браузера. Для отправки формы используйте<button type="submit">, а для обычного действия вне submit-сценария задавайтеtype="button". - 5
Забывать про базовые атрибуты
lang,charset,alt,type,name,autocompleteи связкаlabelс полем влияют не только на валидность. Они меняют доступность, поведение форм, автозаполнение и то, как браузер понимает документ. - 6
Вставлять внешний HTML без проверки
Разметка из CMS, комментария пользователя или API не должна попадать в DOM как есть.
innerHTMLиdangerouslySetInnerHTMLс непроверенными данными могут открыть XSS. Безопаснее хранить и выводить текст. Если HTML действительно нужен, ограничьте разрешенные теги и атрибуты через sanitizer.
Follow-up
Что могут спросить дальше
Короткие ответы на вопросы, которыми проверяют, понимаете ли вы роль HTML в реальном интерфейсе.
Живые ответы
Видео с похожим вопросом
Если найдем публичные интервью с таким вопросом, добавим их сюда. Их удобно смотреть после теории, чтобы свериться с живыми ответами.
Пока видео нет. Когда появятся подходящие публичные интервью, добавим их в этот блок, чтобы можно было сравнить разбор с тем, как отвечают реальные кандидаты.
Почему нельзя мутировать состояние
Разбор вопроса «Почему нельзя мутировать состояние» для Frontend Developer: что проверяет интервьюер, ключевые тезисы, практические примеры и частые ошибки.
Что такое семантика в HTML 😎
Семантика в HTML означает выбор тегов по смыслу, а не по внешнему виду. Разбираем, как это влияет на доступность, структуру страницы, поддержку кода и ответы на интервью.