ТОП 100+ вопросов про HTML с технических собеседований, вместе с ответами

Самые частые вопросы про HTML на собеседовании: DOM, семантика, доступность, оптимизация.

<button> – это строчный (inline) или блочный (block) элемент в HTML?

Определите, к какому типу элементов относится тег `<button>` в HTML и как это влияет на его поведение и стилизацию на странице. В чем отличие его поведения от других элементов?
WebHTML

Junior, Trainee

Что такое атрибут в HTML?

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

Junior, Trainee

Что такое DOM?

Опишите, что представляет собой объектная модель документа (DOM) и как она используется при работе с веб-страницами.
JavaScriptWebHTML

Junior, Trainee

Какие есть варианты стилизации элементов в HTML?

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

Junior, Trainee

Какой тег семантически подходит для списков в HTML?

Определите, какие теги в HTML следует использовать для создания списков. Как они отличаются и в каких ситуациях они применяются?
WebHTML

Junior, Trainee

Зачем нужны data-атрибуты в HTML?

Расскажите, что такое data-атрибуты в HTML и для чего они используются. Как они помогают в хранении пользовательских данных и взаимодействии с JavaScript?
WebHTML

Junior, Trainee

Перечислите основные семантические теги в HTML.

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

Junior, Trainee

Какой тег семантически подходит для заголовков и подзаголовков в HTML?

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

Junior, Trainee

Как остановить дефолтную (встроенную) обработку события в JavaScript?

Объясните, как можно предотвратить выполнение стандартного действия, которое связано с определенным событием в браузере, например, отправку формы при нажатии на кнопку.
JavaScriptWebHTML

Junior, Trainee

<input> – это строчный (inline) или блочный (block) элемент в HTML?

Объясните, к какому типу элементов относится тег `<input>` в HTML и как это сказывается на его размещении и отображении на веб-странице.
WebHTML

Junior, Trainee

<label> – это строчный (inline) или блочный (block) элемент в HTML?

Рассмотрите, к какому типу элементов относится тег `<label>` в HTML и как это влияет на его поведение и позиционирование на странице. Чем он отличается от других типов элементов?
WebHTML

Junior, Trainee

Какая разница между свойствами HTML-элементов innerHTML и innerText в JavaScript?

Объясните, в чем разница между свойствами innerHTML и innerText в JavaScript и как они используются для работы с содержимым HTML-элементов.
JavaScriptWebHTML

Junior

Как можно сделать ссылку на эл. почту в HTML?

Объясните, как создать ссылку в HTML, которая при клике откроет почтовый клиент с готовым шаблоном для отправки письма на определенный адрес.
WebHTML

Junior

Как остановить всплытие (bubbling) события в JavaScript?

Опишите, как можно предотвратить всплытие события в JavaScript, чтобы оно не поднималось по дереву DOM к родительским элементам.
JavaScriptWebHTML

Junior

Как можно сделать ссылку на номер телефона в HTML?

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

Junior

Почему <link> располагают внутри <head> в HTML?

Объясните, почему теги `<link>` для подключения стилей или других ресурсов обычно размещают внутри тега `<head>` в HTML. Как это влияет на рендеринг страницы?
WebHTML

Middle, Junior

Что такое DOCTYPE и зачем он нужен в HTML?

Определите, что такое декларация DOCTYPE в HTML и для чего она нужна. Как её наличие влияет на работу браузера и рендеринг страницы?
WebHTML

Middle, Junior

Что такое семантичность (семантика) в HTML?

Объясните, что означает термин семантичность в контексте HTML. Почему семантические элементы важны для структуры веб-страницы и её восприятия пользователями и поисковыми системами?
WebHTML

Middle, Junior

Для чего нужен атрибут srcset у изображения в HTML?

Опишите назначение атрибута `srcset` у тега `<img>` в HTML. Как он помогает управлять загрузкой изображений на странице в зависимости от устройства пользователя?
WebHTML

Middle, Junior

Как можно отслеживать изменение размера элемента в JavaScript?

Опишите, какие способы существуют для отслеживания изменения размеров элемента в JavaScript. Укажите, какие встроенные методы или API можно использовать для реализации такой задачи и как эти изменения могут быть использованы в разработке интерфейсов.
WebHTML

Middle, Junior

В чем отличие подключения скрипта через async и defer в HTML?

Опишите разницу между атрибутами async и defer при подключении скриптов в HTML и как они влияют на порядок выполнения кода и загрузку страницы.
JavaScriptWebHTML

Middle, Junior

Что такое tabindex в HTML?

Объясните, что такое атрибут tabindex в HTML и как он используется для управления фокусом при навигации с помощью клавиатуры. Как различные значения этого атрибута влияют на порядок перехода между элементами?
WebHTML

Middle, Junior

Почему <script> располагают в конце <body> в HTML?

Объясните, почему рекомендуется размещать теги `<script>` в конце тега `<body>` в HTML. Как это влияет на загрузку и производительность страницы?
WebHTML

Middle, Junior

Чему равен this в обработчике событий в JavaScript?

Опишите, какое значение принимает this в контексте обработчика событий в JavaScript и как оно связано с элементом, на котором произошло событие.
JavaScriptWebHTML

Middle, Junior

Какие HTTP-методы поддерживает форма (<form>) в HTML?

Перечислите и объясните, какие HTTP-методы можно использовать в атрибуте `method` тега `<form>` в HTML. Как они влияют на способ отправки данных с формы?
WebHTML

Middle, Junior

Опишите процесс всплытия (bubbling) событий в DOM.

Расскажите о механизме всплытия событий в DOM, как этот процесс работает и какие этапы включает.
JavaScriptWebHTML

Middle, Junior

Как узнать высоту или ширину элемента в JavaScript?

Расскажите, какими методами и свойствами можно воспользоваться в JavaScript для получения текущих размеров элемента, таких как его высота и ширина.
JavaScriptWebHTML

Middle

Как узнать координаты элемента в JavaScript?

Объясните, как в JavaScript можно определить координаты элемента относительно окна или документа, и какие методы и свойства для этого подходят.
JavaScriptWebHTML

Middle

Что такое CSSOM?

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

Middle

Что такое Shadow DOM в JavaScript?

Расскажите, что такое Shadow DOM и как он работает в JavaScript. Объясните, как Shadow DOM помогает инкапсулировать стили и разметку и где его использование наиболее полезно.
JavaScriptWebHTML

Senior, Middle

В чем разница между stopPropagation и stopImmediatePropagation в JavaScript?

Объясните, как работают методы stopPropagation и stopImmediatePropagation в JavaScript при обработке событий. Укажите, в чем заключается их основное различие и в каких случаях каждый из них применим.
WebHTML

Senior, Middle

Что такое веб-компоненты (WebComponents, custom elements) в JavaScript?

Объясните, что представляет собой технология WebComponents в JavaScript. Укажите, из каких основных компонентов состоит данная технология и как она используется для создания переиспользуемых и инкапсулированных элементов в веб-приложениях.
JavaScriptWebHTML

Senior, Middle

Какие этапы отрисовки страницы есть в браузере?

Опишите основные этапы отрисовки страницы в браузере. Как браузер обрабатывает HTML, CSS и JavaScript, чтобы превратить их в визуальное представление страницы?
JavaScriptWebHTMLCSS

Senior, Middle

Что такое доступность (accessibility) в HTML?

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

Senior, Middle

Что такое reflow и repaint при отрисовке в браузере?

Объясните, что такое процессы reflow и repaint в браузере. Как изменения в DOM или CSS влияют на эти процессы и в каких ситуациях они могут быть вызваны?
JavaScriptWebHTMLCSS

Senior, Middle