Отвечаю на популярные вопросы по HTML и CSS с собеседований джунов-фронтендеров / Хабр

Привет, Хабр!

Вопросы по HTML и CSS всё реже встречаются на собеседованиях для фронтендеров. Но в основном это касается позиций middle и выше. А вот для начинающих специалистов они всё ещё есть.

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

А главное, отвечать на них будет ChatGPT. Я же буду его дополнять, если потребуется. Многие же используют его для подготовки. Вот и посмотрим, как он справится.

Сразу скажу, что буду душнить. Так что вы сами рассудите, кто из нас лучше отвечает.

Давайте начнём!

Что такое семантика? Зачем она нужна?

Ответ ChatGPT: Семантика в HTML — это использование элементов по их смысловому назначению, а не только ради внешнего вида. Она помогает достичь несколько целей.

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

Во-вторых, семантическая верстка улучшает доступность. Скринридеры лучше ориентируются по странице. Доступны базовые возможности скринридера по быстрому к нужному разделу.

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

Разберём два примера кода. Первый будет с использованием только элемента div, а во втором будем использовать семантические элементы.

<body>
  <!-- пример №1 -->
  <div class="header">
    <div class="navigation">
      <!-- здесь область основной навигации -->
    </div>
  </div>
  <div class="main">
    <!-- здесь область основного контента -->
  </div>
</body>

<body>
  <!-- пример №2 -->
  <header class="header">
    <nav class="navigation">
      <!-- здесь область основной навигации -->
    </nav>
  </header>
  <main class="main">
    <!-- здесь область основного контента -->
  </main>
</body>

Проанализировав первый пример кода, поисковые системы, скринридеры и другие увидят «кучу div'ов». А во втором случае они увидят область навигации и основного контента.

Мой комментарий: В целом определение понравится интервьюеру. Но хочу поделиться своим определением.

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

ChatGPT назвал основные преимущества такого подхода. Личн�� я считаю, что аргумент про читаемость кода притянут за уши. Я его лучше бы не называл. Семантика помогает делать код понятным для поисковых систем и для различных технологий, таких как скринридер.

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

Что такое элемент label и зачем нужен атрибут for для него?

Ответ ChatGPT: Элемент label — это элемент, который связывает текстовую подпись с элементом формы (обычно input, select, textarea) и делает его более удобным и доступным.

Атрибут for нужен, чтобы явно связать элемент label с конкретным элементом формы с помощью его id.

<label for="password">Пароль</label>
<input id="password" type="password">

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

Мой комментарий: Тут всё по делу сказано. Добавить нечего.

Можем ли в элемент button положить элемент а?

Ответ ChatGPT: Нельзя. Элементы button и a — это интерактивные элементы, и по HTML-спецификации один интерактивный элемент нельзя вкладывать в другой.

Мой комментарий: В стандарте у каждого элемент есть описание того, к какой категории элементов он относится и какая у него контентная модель. Проще говоря, какие элементы в него можно вложить. Всего есть 18 категорий.

Например, элемент button относится к категориям: «Flow content», «Phrasing content» и «Interactive content». В него можно вкладывать элементы из категории: «Phrasing content» за исключением тех элементов, которые относятся к категории Interactive content.

Элемент a, как раз к ней относится, если объявлен атрибут href. Поэтому его нельзя вложить в элемент button.

Что такое CSS?

Ответ ChatGPT: CSS (Cascading Style Sheets) — это язык описания стилей, который используется для определения внешнего вида и визуального представления HTML-документов.

Мой комментарий: В целом ответ ChatGPT отличный. Я лично всегда рекомендую использовать меньше слов в объяснении терминов. Так вам будет проще не запутаться и собеседующему сложнее прицепиться к вам.

Мой вариант определения такой: «CSS — это язык стилизации HTML-элементов».

Что такое специфичность, и как она работает?

Ответ ChatGPT: Специфичность — это механизм в CSS, по которому браузер решает, какое правило применить, если несколько CSS-правил подходят к одному и тому же элементу. Она представляется в виде четвёрки чисел:

/*
(a, b, c, d), где:
a - Inline-стили
b - количество id-селекторов
c - количество классов, атрибутов и псевдоклассов
d - количество тегов и псевдоэлементов
*/

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

Мой комментарий: Специфичность — это алгоритм, с помощью которого рассчитывается приоритет правила. В результате его вычисления браузер получает число, состоящее из трёх цифр.

/*
A - количество селекторов по ID
B - количество селекторов по классу, атрибутам и псевдоклассам
C - количество селекторов по типу и по псевдоэлементам
*/

Чем число больше, тем более специфичен селектор.

В целом ChatGPT ответил правильно. Мне кажется, что мало разработчиков смотрели стандарт и знают, что специфичность рассчитывается по трём цифрам. Так что на этот момент можно не обращать внимание.

Важно другое. ChatGPT не сказал, что в CSS есть псевдо-классы, которые влияют на расчёт специфичности. Например, псевдо-класс :where() устанавливает специфичность в значение 0 0 0 для любого селектора.

#awesome-block {
  background-color: tomato; /* специфичность: 1, 0, 0 */
}

:where(#awesome-block) {
  background-color: tomato; /* специфичность: 0, 0, 0 */
}

При расчёте селектора с псевдо-классами :is() :not() или :has() браузеры выберут наиболее весомый селектор из тех, которые мы передадим.

:is(h1, #awesome-block) {
  background-color: tomato; /* специфичность: 1, 0, 0 */
}

:not(button, .awesome-block) {
  background-color: tomato; /* специфичность: 0, 1, 0 */
}

:has(div.awesome-container, .awesome-block) {
  background-color: tomato; /* специфичность: 0, 1, 1 */
}

Такой же принцип есть при использовании синтаксиса of S для псевдо-классов :nth-*.

:nth-child(even of li, .item) {
  background-color: tomato; /* специфичность: 0, 2, 0 */
}

Важно помнить о том, что псевдо-классы :nth-* добавляют свою специфичность, в отличие от псевдо-классов :is() :not() и :has().

Что такое флекс-контейнер? Как его создать?

Ответ ChatGPT: Флекс-контейнер — это элемент, внутри которого включён flexbox-контекст, то есть браузер начинает раскладывать его дочерние элементы по правилам Flexbox, а не обычного блочного или строчного потока.

Появляются следующие особенности:

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

Для создания флекс-контейнера нужно объявить свойство display со значением flex или inline-flex для элемента. После этого все прямые потомки становятся флекс-элементами.

Мой комментарий: Мне кажется, что определение чата слишком сложне. Я бы ответил так: Флекс-контейнер — это элемент, у которого установлено свойство display со значением flex или inline-flex.

Также ChatGPT забыл про возможность менять визуальный порядок элемента с помощью свойства order. Мой список особенностей флексбоксов:

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

В чём разница между флексбоксами и гридами?

Ответ ChatGPT: Разница между Flexbox и Grid в первую очередь в задачах, которые они решают, и в мерности раскладки.

Flexbox работает в одном направлении за раз. Либо по строке, когда установлено значение row для свойства flex-direction, либо по колонке при значении column.

/* дочерние элементы будут расположены в строку */
.container {
  display: flex;
  /* flex-direction: row; это строка добавляется автоматически */
}

/* дочерние элементы будут расположены в столбец */
.container {
  display: flex;
  flex-direction: column;
}

Grid изначально рассчитаны на две оси одновременно, а именно на строки и колонки. Мы описываем сетку, а потом раскладываем элементы по ячейкам.

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
}

В итоге Grid больше подходят для создания структуры всей страницы, а Flexbox для её точечных мест, таких как навигация, компоненты и т. д.

Мой комментарий: Ответ ChatGPT не совсем корректный. Разберём разницу между флексбоксами и гридами в нескольких аспектах.

Во-первых, отличается принцип расчёта размеров дочерних элементов. Для флекс-элементов браузеры рассчитывают размер, опираясь на контент по основной оси, и добавляют всё пространство к ним по дополнительной.

В итоге по умолчанию мы получаем, что ширина флекс-элементов рассчитана по контенту, а их высота соответствует родителю. А если поменяем направление осей, то и принцип расчёта размеров поменяется местами.

У гридов же всё по-другому. Браузеры сразу по двум осям распределяют всё пространство между элементами. Если в контейнере один дочерний элемент, то он получит всё сразу.

<body>
  <div class="awesome-container">
    <div class="awesome-block">дочерний элемент</div>
  </div>
</body>

.awesome-container {
  display: grid;
  height: 600px;
}

.awesome-block {
  background-color: pink; /* у свойства height будет значение 600px */
}

Если их больше, то браузеры равномерно распределят пространство между ними.

<body>
  <div class="awesome-container">
    <div class="awesome-block">дочерний элемент</div>
    <div class="awesome-block">дочерний элемент</div>
    <div class="awesome-block">дочерний элемент</div>
  </div>
</body>

.awesome-container {
  display: grid;
  height: 600px;
}

.awesome-block {
  background-color: pink; /* у свойства height будет значение 200px */
}

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

Например, мы можем расположить элементы только в одном направлении, т. е. либо в столбик, либо в строку.

/* дочерние элементы будут расположены в столбец */
.awesome-container {
  display: grid;
  /* grid-auto-flow: row; это строка добавляется автоматически */
}

/* дочерние элементы будут расположены в строку */
.awesome-container {
  display: grid;
  grid-auto-flow: column;
}

Если же нам нужно позиционировать элементы одновременно по строкам и столбцам , то гриды позволяют сделать это с помощью свойств grid-template-rows и grid-template-columns.

.awesome-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

Важным нюансом является то, что если элементов недостаточно для заполнения сетки, то браузеры всё равно резервируют места под них.

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

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

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

Заключение

Мы рассмотрели частые вопросы на собеседованиях. Мне хотелось бы, чтобы вы написали в комментариях свои ответы. Так у нас получатся более объективные ответы, и мы поможем новичкам.

На этом я прощаюсь. Спасибо за чтение!

P. S. Помогаю больше узнать про CSS в своём закрытом ТГ-канале CSS isn't magic. Присоединяйтесь. Как вступить написано в профиле.