Собеседование Frontend (HTML) — вопросы и подготовка

Что такое HTML, включая его роль в построении DOM-дерева, взаимодействие с браузером и отличие от CSS и JavaScript?

Кратко о том, что такое HTML-документ и из каких частей он состоит.

Что такое HTML5, включая ключевые нововведения стандарта, совместимость со старыми браузерами и ограничения использования?

Что такое DOM и как браузер строит дерево элементов; как получить доступ к узлам и как изменения DOM влияют на производительность.

Что такое блочные элементы и как они ведут себя в потоке документа.

Что такое семантическая разметка, включая цели использования семантических тегов, влияние на SEO и доступность?

Что такое строчные элементы, включая ограничения по размерам, особенности позиционирования и практические случаи использования?

Что такое атрибуты HTML, включая стандартные атрибуты, пользовательские data-* атрибуты и ограничения их использования?

Кратко о глобальных атрибутах HTML: это атрибуты, которые можно использовать почти на любых элементах — id, class, style, title и др. Ниже — что они делают и к каким проблемам приводят при неправильном применении.

Что такое комментарии в HTML, включая их назначение, влияние на размер страницы и возможные риски утечки информации?

Что такое семантические теги HTML5: кратко и по делу.

Что такое тег article, включая сценарии использования для независимого контента и ограничения такого подхода?

Что такое тег section, включая критерии выбора между ним и div, а также типичные ошибки применения?

Коротко: элементы header и footer задают вводную и заключительную часть логического блока — страницы или любой секции. Они служат для заголовков, навигации, данных об авторе, дат публикации и ссылок на сопутствующие ресурсы.

Что такое тег aside и каково его назначение в HTML?

Что такое тег <main>, включая требования спецификации, ограничения по количеству экземпляров и влияние на доступность?

Что такое тег figure, включая связь с figcaption, преимущества использования и ограничения?

Тег <time> обозначает дату и/или время в человекочитаемом контенте и может содержать машинно-читаемое значение в атрибуте datetime. Полезен для семантики, доступа и автоматической обработки (поиск, индексирование, парсинг).

Кратко о том, что такое микроразметка и зачем использовать Schema.org и структурированные данные для улучшения представления сайта в поисковой выдаче.

Что такое тег nav и как правильно выделять навигационные блоки; влияние на SEO и доступность.

Что такое атрибуты action и method в HTML-формах: куда отправляются данные и каким HTTP-методом. Включены особенности GET и POST и связанные компромиссы.

Кратко: HTML-форма — это набор полей и элементов управления, которые браузер собирает и отправляет на сервер при сабмите. Формы определяют, какие данные, в каком кодировке и каким методом будут переданы.

Что такое элемент input, включая основные типы полей, сценарии использования и ограничения браузерной реализации.

Обзор специальных типов input в HTML5 (например, email, url, date, number), что они дают и какие есть подводные камни при кроссбраузерном использовании.

Браузер проверяет поля формы по набору встроенных правил и атрибутов (required, pattern, min, max, step и т.д.) и предотвращает отправку, если данные не проходят проверку. Это удобный первый уровень валидации, но не заменяет серверную проверку.

Что такое элемент fieldset и зачем он нужен?

Что такое элемент label и зачем он нужен в формах.

Что такое элемент datalist, механизм автодополнения и ограничения поддержки браузерами?

Что такое атрибут autocomplete и как он влияет на UX и безопасность?

Загрузка файлов через HTML-формы — это отправка бинарных данных (файлов) с клиента на сервер. Для корректной передачи файлов форма должна использовать enctype="multipart/form-data". Браузеры упаковывают каждый файл в отдельную «часть» (part) с заголовками, границами (boundary) и метаданными.

Что такое атрибут alt, включая требования доступности, SEO и последствия его отсутствия?

Что такое адаптивные изображения, включая srcset, sizes и компромиссы между качеством и производительностью?

Краткое руководство по элементу <img>: обязательные атрибуты, методы оптимизации изображений и как минимизировать их влияние на производительность страницы.

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

Что такое элемент picture, включая переключение источников изображений и сценарии использования?

Атрибут loading="lazy" указывает браузеру отложить загрузку ресурса (обычно изображений и iframe) до тех пор, пока элемент не приблизится к области просмотра. Это встроенный способ ленивой загрузки без библиотек: браузер сам решает, когда начать загрузку, используя собственные эвристики.

Что такое элементы audio и video, их поддержка форматов, встроенные элементы управления и ограничения браузеров?

Краткий обзор элемента iframe: как встраивать сторонний контент и какие безопасности учитывать.

Что такое веб-доступность, включая стандарты WCAG, основные принципы и бизнес-ценность внедрения?

Что такое ARIA-атрибуты, включая назначение ролей, состояний и ограничения их использования?

Что такое атрибут sandbox для iframe и зачем он нужен?

Что такое веб‑доступность, включая стандарты WCAG, основные принципы и бизнес‑ценность внедрения?

Что такое атрибут role, как он взаимодействует со скринридерами и какие ошибки при его применении встречаются чаще всего?

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

Что такое метатеги HTML и как title, description и robots влияют на поисковую оптимизацию (SEO).

Что такое канонические ссылки и как link rel="canonical" помогает предотвратить проблемы дублированного контента?

Что такое Open Graph метаданные и как они влияют на предпросмотр ссылок в соцсетях?

Что такое доступные таблицы и как правильно использовать caption, thead, tbody, scope и другие приёмы, чтобы данные были понятны пользователям скринридеров и клавиатурой?

Что такое скрытый контент с точки зрения доступности?

Что такое доступные формы, включая подписи полей, сообщения об ошибках и поддержку вспомогательных технологий?

Что такое структура заголовков h1-h6 и как она влияет на SEO, доступность и организацию контента.

Это разметка, которая сообщает поисковым системам соответствие между страницами на разных языках или для разных регионов. Правильная реализация помогает показывать пользователю нужную языковую версию и уменьшать проблемы с дублированным контентом.

Что такое файл sitemap и какую роль он играет в HTML‑проекте?

Критический путь рендеринга — набор шагов и ресурсов, которые браузер должен выполнить/загрузить, чтобы впервые корректно отобразить содержимое страницы. Включает разбор HTML, построение DOM, загрузку и парсинг CSS (CSSOM), исполнение JavaScript, построение Render Tree и layout/paint.

Что такое предварительная загрузка ресурсов через preload и зачем её используют?

Какие проблемы возникают при чрезмерной вложенности HTML-элементов, включая сложность сопровождения и производительность?

Краткий обзор этапов разбора HTML-документа, загрузки ресурсов, построения DOM/CSSOM, рендеринга и точек блокировки.

Как влияет размер DOM-дерева на производительность страницы, включая память, скорость рендеринга и поддержку браузером?

Что такое prefetch, включая сценарии ускорения навигации и компромиссы по расходованию сетевых ресурсов?

Что такое ленивый рендеринг контента, включая преимущества для больших страниц и ограничения подхода?

Краткие рекомендации для улучшения LCP, CLS и INP — что менять в HTML, как расставлять ресурсы и какие приёмы применять, чтобы страница была быстрой и стабильной.

Что такое XSS (Cross-Site Scripting) и как злоумышленники внедряют вредоносный код через HTML, а также какие практические методы защиты существуют.

Какие риски возникают при использовании пользовательского HTML-контента, включая хранение, отображение и санитизацию данных?

Что такое Content Security Policy и как она ограничивает источники контента для повышения безопасности приложения?

Краткий обзор подходов к архитектуре приложений и типичных сценариев развёртывания и эксплуатации в production.

Что такое атрибуты rel="noopener" и rel="noreferrer", как они защищают от tabnabbing и какие есть компромиссы?

Какие проблемы безопасности связаны с iframe, включая clickjacking, и какие существуют методы защиты?

Как проектировать HTML-разметку крупного корпоративного приложения, включая переиспользование компонентов и долгосрочную поддержку?

Что такое атрибут sandbox у <iframe> — краткое объяснение и уровни изоляции контента, а также ограничения и практические советы по использованию.

Какие компромиссы возникают между семантической разметкой и требованиями UI-библиотек, включая React и другие компонентные фреймворки?

Как организовывать семантическую структуру сложного SPA-приложения, включая взаимодействие с клиентским роутингом и SEO?

Краткое руководство по успешной организации HTML в дизайн-системе: единообразие компонентов, предсказуемые точки интеграции и масштабируемость разработки.

Как проектировать HTML для мультиязычного сайта, учитывая локализацию, доступность и SEO?

Как проектировать HTML для SSR-приложений с учётом гидратации, индексации и производительности?

Какие проблемы возникают при генерации HTML на сервере и на клиенте, включая различия в производительности и поддержке SEO?

Почему чрезмерное использование div считается антипаттерном, включая последствия для поддержки кода и доступности?

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

Как проектировать HTML для публичных сервисов с высокой нагрузкой, учитывая производительность рендеринга и поддержку миллионов страниц?

Почему вложенные интерактивные элементы считаются ошибкой и к каким проблемам это приводит?

Какие проблемы возникают при дублировании идентификаторов id в HTML — как это влияет на JavaScript, CSS и вспомогательные технологии?

Почему использование таблиц для построения макета считается устаревшим подходом, включая исторические причины и современные альтернативы?

Какие признаки указывают на плохую архитектуру HTML-разметки, включая чрезмерную связанность, низкую семантичность и сложность сопровождения?

Какие проблемы возникают при использовании инлайновых обработчиков событий в HTML, включая безопасность и сопровождение кода?