На главнуюОткрыть архив материалов

Самые популярные вопросы по HTML и CSS на собеседовании frontend-разработчика

19 марта 2026 г.

HTML и CSS — фундамент фронтенд-разработки. На собеседованиях вопросы по этим технологиям проверяют не только знание тегов и свойств, но и понимание семантики, раскладки, адаптивности и современных подходов. Мы собрали более 50 самых популярных вопросов с подробными ответами и примерами, которые помогут вам систематизировать знания и уверенно пройти интервью.

Вопросы по HTML

1. Что такое HTML?

HTML (HyperText Markup Language) — это язык разметки для создания веб-страниц. Он описывает структуру документа с помощью тегов. Браузер интерпретирует HTML и отображает содержимое. HTML не является языком программирования, это язык разметки.

2. Что такое семантическая верстка?

Семантическая верстка — это подход, при котором HTML-теги выбираются по их смыслу, а не по внешнему виду. Семантические теги (<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>) описывают содержимое, которое в них находится.

Преимущества:

  • Улучшение SEO (поисковые системы лучше понимают структуру).
  • Доступность (скринридеры могут навигировать по странице).
  • Читаемость кода для разработчиков.

3. Что такое DOCTYPE и зачем он нужен?

<!DOCTYPE html> — это декларация типа документа. Она сообщает браузеру, какую версию HTML использовать. В HTML5 достаточно простого объявления. Без DOCTYPE браузер может перейти в режим совместимости (quirks mode) и отображать страницу непредсказуемо.

4. Какие основные мета-теги используются в HTML?

Мета-теги находятся в <head> и содержат метаданные о странице:

<meta charset="UTF-8"> <!-- Кодировка -->
<meta name="description" content="Описание страницы">
<meta name="keywords" content="ключевые, слова">
<meta name="author" content="Имя автора">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Для адаптивности -->
<meta http-equiv="refresh" content="30"> <!-- Обновление каждые 30 сек -->

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

data-* атрибуты позволяют хранить пользовательские данные в HTML-элементах. Они начинаются с data- и могут быть прочитаны через JavaScript.

<div id="user" data-id="123" data-role="admin">John</div>

<script>
    const user = document.getElementById('user');
    console.log(user.dataset.id); // '123'
    console.log(user.dataset.role); // 'admin'
</script>

6. Чем отличается div от span?

  • <div> — блочный элемент. Занимает всю доступную ширину, начинается с новой строки. Используется для группировки крупных блоков.
  • <span> — строчный (инлайн) элемент. Занимает только необходимое пространство, не переносит строки. Используется для выделения части текста внутри строки.

7. Что такое блочные и строчные элементы?

Блочные элементы (block):

  • Начинаются с новой строки.
  • Занимают всю доступную ширину родителя.
  • Могут содержать другие блочные и строчные элементы.
  • Примеры: <div>, <p>, <h1>-<h6>, <ul>, <li>, <section>.

Строчные элементы (inline):

  • Не переносят строку, располагаются на одной линии.
  • Занимают ширину по содержимому.
  • Не могут содержать блочные элементы.
  • Примеры: <span>, <a>, <strong>, <em>, <img>.

8. Как создать ссылку на якорь на странице?

Сначала создаем элемент с id:

<h2 id="section1">Раздел 1</h2>

Затем создаем ссылку на этот якорь:

<a href="#section1">Перейти к разделу 1</a>

Для ссылки с другой страницы: <a href="page.html#section1">...</a>

9. Что такое iframe?

<iframe> (inline frame) — элемент, который позволяет встраивать другую HTML-страницу внутрь текущей. Используется для встраивания видео с YouTube, карт, виджетов.

<iframe src="https://example.com" width="600" height="400"></iframe>

10. Как работают формы в HTML?

Формы используются для сбора данных от пользователя и отправки их на сервер.

<form action="/submit" method="POST">
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    
    <button type="submit">Отправить</button>
</form>

Основные атрибуты:

  • action — URL, куда отправляются данные.
  • method — HTTP-метод (GET или POST).
  • name — имя поля, используется как ключ при отправке.

11. Какие типы input существуют в HTML5?

HTML5 добавил много новых типов для <input>:

  • text — текстовое поле.
  • password — поле для пароля.
  • email — для email (валидация).
  • number — для чисел.
  • tel — для телефона.
  • url — для URL.
  • search — поисковое поле.
  • date, time, datetime-local — для даты и времени.
  • color — выбор цвета.
  • range — ползунок.
  • checkbox — флажок.
  • radio — переключатель.
  • file — загрузка файла.
  • submit, reset, button — кнопки.

12. Что такое localStorage и sessionStorage?

Это механизмы веб-хранилища (Web Storage API) для хранения данных в браузере.

  • localStorage — данные хранятся бессрочно, пока не будут очищены вручную или через код.
  • sessionStorage — данные хранятся только в течение сессии (пока открыта вкладка).

API одинаков для обоих: setItem(), getItem(), removeItem(), clear().

13. Какие новые семантические теги появились в HTML5?

HTML5 ввел множество семантических тегов:

  • <header> — шапка страницы или раздела.
  • <footer> — подвал.
  • <nav> — навигационное меню.
  • <main> — основное содержимое (уникальное для страницы).
  • <article> — независимая, самодостаточная часть контента.
  • <section> — логический раздел контента.
  • <aside> — контент, связанный с основным (боковая панель).
  • <figure> и <figcaption> — для иллюстраций и подписей.
  • <mark> — выделенный текст.
  • <time> — дата/время.
  • <progress> — прогресс выполнения.
  • <meter> — значение в диапазоне.

14. Что такое canvas и SVG?

  • <canvas> — элемент для рисования графики через JavaScript (растровая). Используется для игр, графиков, анимаций.
  • SVG (Scalable Vector Graphics) — формат векторной графики на основе XML. Масштабируется без потери качества. Подходит для иконок, логотипов, иллюстраций.

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

Доступность (a11y) — это практика создания веб-страниц, которые могут использоваться людьми с ограниченными возможностями. Ключевые аспекты:

  • Семантические теги.
  • Атрибуты alt для изображений.
  • Атрибуты aria-* (Accessible Rich Internet Applications).
  • Правильная структура заголовков (h1-h6).
  • Возможность навигации с клавиатуры.
  • Контрастность цветов.

16. Что такое микроразметка (microdata)?

Микроразметка — это способ добавить дополнительные семантические данные в HTML, чтобы поисковые системы лучше понимали контент. Использует атрибуты itemscope, itemtype, itemprop. Наиболее популярный формат — Schema.org.

<div itemscope itemtype="https://schema.org/Person">
    <span itemprop="name">Иван Иванов</span>
    <span itemprop="jobTitle">Разработчик</span>
</div>

Вопросы по CSS

17. Что такое CSS?

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

18. Какие способы подключения CSS существуют?

  1. Внешний файл (рекомендуемый): <link rel="stylesheet" href="styles.css">
  2. Внутренний (встроенный) стиль: <style> ... </style> в <head>.
  3. Инлайновые стили: атрибут style у элемента (<div style="color: red;">).
  4. Импорт: @import url("styles.css"); внутри CSS-файла или <style>.

19. Что такое специфичность (specificity)?

Специфичность — это алгоритм, который определяет, какие CSS-правила применятся к элементу, если несколько правил конфликтуют. Специфичность считается как 4 уровня (по некоторым моделям):

  1. Инлайновые стили (style="...") — наивысший приоритет.
  2. ID — (#header) — 100.
  3. Классы, псевдоклассы, атрибуты — (.menu, :hover, [type="text"]) — 10.
  4. Элементы и псевдоэлементы — (div, ::before) — 1.

Универсальный селектор * и комбинаторы (+, >, ~) не влияют на специфичность. !important переопределяет специфичность, но его использование не рекомендуется.

20. Что такое каскад в CSS?

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

  1. Важность и происхождение (user агентские стили, авторские стили, пользовательские стили).
  2. Специфичность.
  3. Порядок определения (позднее определенное правило переопределяет раннее).

21. Что такое блочная модель (box model)?

Блочная модель описывает, как элементы занимают пространство на странице. Каждый блок состоит из:

  • Content — содержимое элемента.
  • Padding — внутренний отступ от содержимого до границы.
  • Border — граница вокруг padding.
  • Margin — внешний отступ от границы до соседних элементов.

Ширина элемента по умолчанию = content + padding + border. Margin не влияет на внутреннюю ширину, но влияет на расположение.

22. Чем отличается box-sizing: border-box от content-box?

  • box-sizing: content-box (по умолчанию): ширина и высота задаются только для content. Padding и border добавляются к ширине.
  • box-sizing: border-box: ширина и высота включают content, padding и border. Это упрощает верстку, так как заданная ширина остается фиксированной независимо от padding и border.
* {
    box-sizing: border-box;
}

23. Какие виды позиционирования в CSS?

Свойство position определяет, как элемент располагается в документе:

  • static — статическое (по умолчанию). Элемент следует потоку документа.
  • relative — относительно своего нормального положения.
  • absolute — абсолютное позиционирование относительно ближайшего позиционированного предка (не static).
  • fixed — фиксированное относительно окна браузера.
  • sticky — гибрид relative и fixed (прилипает при прокрутке).

24. Чем отличаются relative, absolute, fixed и sticky?

  • relative — элемент смещается относительно своего места, но место в потоке за ним сохраняется.
  • absolute — элемент удаляется из потока, позиционируется относительно ближайшего позиционированного предка.
  • fixed — элемент удаляется из потока, позиционируется относительно окна браузера, не двигается при прокрутке.
  • sticky — ведет себя как relative, пока не достигнет заданной позиции при прокрутке, затем становится fixed.

25. Что такое Flexbox?

Flexbox (Flexible Box Layout) — это модуль CSS для создания одномерных раскладок (в ряд или колонку). Предназначен для распределения пространства между элементами и выравнивания их внутри контейнера.

.container {
    display: flex;
}

26. Какие основные свойства Flexbox?

Для родителя (flex-контейнер):

  • flex-direction — направление оси (row, column, row-reverse, column-reverse).
  • flex-wrap — перенос на новую строку (nowrap, wrap, wrap-reverse).
  • justify-content — выравнивание по главной оси (flex-start, flex-end, center, space-between, space-around, space-evenly).
  • align-items — выравнивание по поперечной оси (stretch, flex-start, flex-end, center, baseline).
  • align-content — выравнивание строк при многорядности.

Для дочерних элементов:

  • flex-grow — коэффициент увеличения.
  • flex-shrink — коэффициент сжатия.
  • flex-basis — базовый размер.
  • align-self — переопределение align-items для конкретного элемента.
  • order — порядок сортировки.

27. Что такое CSS Grid?

CSS Grid Layout — это двумерная система раскладки, позволяющая работать одновременно со строками и колонками. Подходит для создания сложных сеток.

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

28. Чем отличается Grid от Flexbox?

  • Flexbox — одномерный (либо строки, либо колонки). Лучше подходит для распределения элементов в одной плоскости.
  • Grid — двумерный (строки и колонки одновременно). Лучше подходит для создания сложных сеток, где нужно контролировать оба измерения.

Часто их комбинируют: Grid для общей структуры страницы, Flexbox для выравнивания внутри ячеек.

29. Что такое адаптивная (responsive) верстка?

Адаптивная верстка — это подход, при котором дизайн подстраивается под разные размеры экрана (от мобильных до десктопов). Основные принципы:

  • Гибкие сетки (использование % вместо пикселей).
  • Гибкие изображения (max-width: 100%).
  • Медиа-запросы для разных разрешений.
  • Mobile-first подход.

30. Что такое медиа-запросы (media queries)?

Медиа-запросы позволяют применять CSS в зависимости от характеристик устройства (ширина экрана, ориентация, тип устройства).

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .sidebar {
        width: 300px;
    }
}

31. Что такое подход mobile first?

Mobile first — это стратегия разработки, при которой сначала создается версия для мобильных устройств, а затем с помощью медиа-запросов добавляются стили для больших экранов. Преимущества:

  • Производительность (меньше кода для мобильных).
  • Упрощение разработки (легче расширять, чем урезать).
  • Лучший UX на мобильных.
.sidebar {
    display: none; /* Скрыто на мобильных */
}

@media (min-width: 768px) {
    .sidebar {
        display: block; /* Показано на планшетах и выше */
    }
}

32. Какие единицы измерения в CSS?

Абсолютные:

  • px — пиксели.
  • cm, mm, in — сантиметры, миллиметры, дюймы.
  • pt — пункты (1/72 дюйма).
  • pc — пики (1/6 дюйма).

Относительные:

  • % — процент от родителя.
  • em — относительно размера шрифта родителя.
  • rem — относительно размера шрифта корневого элемента (<html>).
  • vw — 1% от ширины окна.
  • vh — 1% от высоты окна.
  • vmin — минимум из vw и vh.
  • vmax — максимум из vw и vh.
  • ch — ширина символа "0".
  • ex — высота символа "x".

33. Чем отличаются em от rem?

  • em — зависит от размера шрифта родительского элемента. Может создавать каскадный эффект при вложенности.
  • rem — зависит только от размера шрифта корневого элемента (<html>). Более предсказуем и удобен для глобальных размеров.

34. Что такое псевдоклассы?

Псевдоклассы определяют особое состояние элемента. Они начинаются с двоеточия (:).

  • :hover — при наведении мыши.
  • :active — при активации (нажатии).
  • :focus — при фокусе (например, на поле ввода).
  • :visited — для посещенных ссылок.
  • :first-child, :last-child, :nth-child(n) — позиционные.
  • :not(selector) — отрицание.
  • :is(), :where() — группировка.

35. Что такое псевдоэлементы?

Псевдоэлементы позволяют стилизовать определенные части элемента. Начинаются с двойного двоеточия (::).

  • ::before — создает псевдоэлемент перед содержимым.
  • ::after — создает псевдоэлемент после содержимого.
  • ::first-line — первая строка текста.
  • ::first-letter — первая буква.
  • ::selection — выделенный пользователем текст.
.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    background: black;
    color: white;
}

36. Что такое наследование в CSS?

Некоторые CSS-свойства наследуются от родителя к потомкам. Например, color, font-family, line-height. Другие, такие как margin, padding, border, не наследуются.

Можно принудительно унаследовать значение через inherit или сбросить через initial (значение по умолчанию) или unset (если наследуется — inherit, иначе initial).

37. Что такое CSS-переменные (custom properties)?

CSS-переменные позволяют хранить значения для повторного использования. Объявляются через двойной дефис (--), читаются через var().

:root {
    --primary-color: #3498db;
    --spacing: 16px;
}

.button {
    background-color: var(--primary-color);
    margin: var(--spacing);
}

.dark-theme {
    --primary-color: #2c3e50; /* переопределение в области видимости */
}

38. Как создавать анимации в CSS?

Два основных способа:

1. transition — для плавных изменений между состояниями.

.button {
    background: blue;
    transition: background 0.3s ease;
}
.button:hover {
    background: darkblue;
}

2. @keyframes и animation — для сложных анимаций.

@keyframes slidein {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100px);
    }
}

.element {
    animation: slidein 2s ease infinite;
}

39. Чем отличается transition от animation?

TransitionAnimation
Только между двумя состояниямиМножество ключевых кадров
Требует триггера (hover, focus и т.д.)Может запускаться автоматически
Линейное или криволинейное изменениеСложные последовательности
Ограниченный контрольПолный контроль (direction, iteration count, fill-mode)

40. Что такое transform?

Свойство transform позволяет изменять форму, размер и положение элемента. Не влияет на поток документа (соседние элементы не смещаются).

.element {
    transform: rotate(45deg); /* поворот */
    transform: scale(1.5); /* масштабирование */
    transform: translate(50px, 20px); /* смещение */
    transform: skew(10deg); /* наклон */
    transform: matrix(1, 2, 3, 4, 5, 6); /* матричное преобразование */
}

41. Что такое float и как с ним работать?

float — свойство, которое заставляет элемент "плавать" слева или справа, позволяя тексту и инлайн-элементам обтекать его. Раньше использовалось для создания колонок, но сейчас вытеснено Flexbox и Grid.

img {
    float: left;
    margin-right: 10px;
}

Проблема: родитель может "схлопнуться", так как float-элементы удаляются из потока. Решение — clearfix.

42. Что такое clearfix?

Clearfix — это техника для исправления схлопывания родителя, содержащего float-элементы.

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

43. Как выровнять элемент по вертикали?

Несколько способов:

  1. Flexbox (самый простой):
.parent {
    display: flex;
    align-items: center;
}
  1. Абсолютное позиционирование + transform:
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
  1. Grid:
.parent {
    display: grid;
    align-items: center;
}
  1. line-height для одной строки текста.

44. Как отцентрировать блок?

Горизонтально:

  • Для блочных с шириной: margin: 0 auto;
  • Для текста: text-align: center;
  • Flexbox: justify-content: center;

Вертикально и горизонтально:

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Или Grid */
.parent {
    display: grid;
    place-items: center;
}

45. Что такое БЭМ (BEM)?

БЭМ (Блок-Элемент-Модификатор) — это методология именования классов CSS для создания переиспользуемых компонентов.

  • Блок — независимый компонент (.button).
  • Элемент — часть блока (.button__icon).
  • Модификатор — вариант блока или элемента (.button--large, .button__icon--hidden).
<div class="card card--featured">
    <img class="card__image" src="...">
    <h3 class="card__title">Заголовок</h3>
</div>

46. Что такое препроцессоры CSS?

Препроцессоры расширяют возможности CSS, добавляя переменные, вложенность, миксины, функции и т.д. Затем они компилируются в обычный CSS. Популярные препроцессоры:

  • Sass/SCSS — самый популярный.
  • Less.
  • Stylus.

Пример SCSS:

$primary-color: #3498db;

.button {
    background: $primary-color;
    
    &:hover {
        background: darken($primary-color, 10%);
    }
}

47. Что такое PostCSS?

PostCSS — это инструмент для трансформации CSS с помощью плагинов. Он не является препроцессором, а скорее экосистемой плагинов. С его помощью можно:

  • Автоматически добавлять вендорные префиксы (Autoprefixer).
  • Использовать будущий синтаксис CSS (cssnext).
  • Минифицировать CSS.
  • Анализировать код (stylelint).

48. Что такое Critical CSS?

Critical CSS — это техника оптимизации производительности, при которой стили для "надстройки" (часть страницы, видимая без прокрутки) встраиваются непосредственно в HTML, а остальные стили загружаются асинхронно. Это ускоряет первый рендер (FCP).

49. Что такое CSS Modules?

CSS Modules — это способ локальной области видимости для CSS. Каждый класс уникален и не конфликтует с другими. Используется в связке со сборщиками (Webpack, Vite).

/* styles.module.css */
.button {
    background: blue;
}

// component.jsx
import styles from './styles.module.css';
<button className={styles.button}>Click</button>;

50. Что такое CSS-in-JS?

CSS-in-JS — это подход, при котором CSS пишется внутри JavaScript-файлов. Популярные библиотеки: styled-components, Emotion, JSS.

import styled from 'styled-components';

const Button = styled.button`
    background: blue;
    color: white;
    padding: 10px;
`;

51. Как оптимизировать CSS?

  • Минификация (удаление пробелов, комментариев).
  • Объединение файлов (меньше запросов).
  • Удаление неиспользуемого CSS (PurgeCSS, UnCSS).
  • Critical CSS.
  • Использование современных форматов (WebP для изображений в CSS).
  • Оптимизация селекторов (избегать глубокой вложенности).
  • Асинхронная загрузка неиспользуемых стилей.

52. Что такое вендорные префиксы?

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

  • -webkit- — для Chrome, Safari, Edge.
  • -moz- — для Firefox.
  • -ms- — для старых версий IE/Edge.
  • -o- — для старых Opera.
.element {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

Сейчас префиксы часто добавляются автоматически с помощью Autoprefixer (плагин PostCSS).

Продолжить чтение
Что почитать дальше

Дополнительные материалы из архива, которые могут быть полезны после этой статьи.

Смотреть все публикации