2.1. HTML

Базовые & Синтаксис:

Что такое HTML и для чего он используется? HyperText Markup Language — язык разметки для создания структуры веб-страниц. Он описывает содержимое с помощью тегов, а браузер интерпретирует их в визуальные элементы.
В чем разница между HTML-тегом и HTML-элементом? Тег — это синтаксическая конструкция в угловых скобках (<p>). Элемент — это тег вместе с его содержимым и закрывающим тегом (<p>Текст</p>). Пустые элементы (например, <img>) состоят из одного тега.
Что такое атрибуты в HTML? Приведите примеры. Дополнительные параметры тегов, задающие их поведение или вид (id, class, src, href). Пример: <a href="https://example.com">Ссылка</a>.
Что такое doctype и зачем он нужен? <!DOCTYPE html> — это объявление типа документа, которое говорит браузеру, как интерпретировать страницу. <img width="966" height="692" alt="image" src="https://github.com/user-attachments/assets/2e9c40f2-f2a9-4062-9a97-c92dbab9b4c8" />
Что такое «quirks mode» и «standards mode»? Стандартный режим — браузер следует современным спецификациям. Режим совместимости — эмулирует поведение старых браузеров (IE5). Отсутствие или неправильный doctype включает quirks mode, что может сломать верстку.
В чем разница между блочными и строчными элементами? Блочные (<div>, <p>) занимают всю доступную ширину, начинаются с новой строки и могут содержать другие блоки. Строчные (<span>, <a>) занимают место только по ширине своего содержимого, не переносят строку и не могут содержать блочные элементы.
Что такое пустые (void) элементы? Приведите примеры. Элементы без содержимого и закрывающего тега: <img>, <input>, <br>, <hr>, <link>, <meta>.
Можно ли использовать теги в нижнем регистре? Да, в HTML5 рекомендуется использовать нижний регистр для тегов и атрибутов. Почему:

Стандарт: HTML5 рекомендует нижний регистр
Читаемость: Код легче читать
XHTML: В XHTML только нижний регистр (если перейдете) Исключение: В CSS селекторы чувствительны к регистру, но в HTML теги — нет.

Что такое "мёртвая ссылка" (dead link)? (dead link, broken link) — это ссылка, которая ведет на несуществующую страницу (обычно возвращает ошибку 404).

Причины:

Страница удалена
URL изменился
Домен перестал существовать
Опечатка в ссылке

Как проверить:

Вручную перейти по ссылке
Использовать инструменты (W3C Link Checker, Screaming Frog)
Использовать плагины для браузера (Check My Links)

Почему важно:

Ухудшает пользовательский опыт
Вредит SEO (поисковики понижают рейтинг)
Создает негативное впечатление о сайте

Как предотвратить:

Используйте относительные ссылки для внутренних страниц
Настраивайте редиректы (301) при изменении URL
Регулярно проверяйте все ссылки на сайте

Как закомментировать код в HTML? Для комментариев в HTML используется синтаксис .

Особенности:

Комментарии не видны на странице
Видны в исходном коде страницы (через "Просмотр кода")
Можно использовать для заметок другим разработчикам

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

Какие сущности (entities) нужно экранировать в HTML? Сущности (HTML entities) — это специальные символы, которые заменяются на безопасный код, чтобы не ломать разметку.

Когда использовать:

Всегда экранируйте <, >, &, " при выводе пользовательского контента
Используйте для предотвращения переноса важных слов
Используйте спецсимволы для красивого отображения (тире, кавычки)

Что такое препроцессоры HTML (Pug, HAML)? Препроцессоры HTML — это инструменты, которые позволяют писать HTML в более коротком, удобном синтаксисе. Код на языке препроцессора компилируется в обычный HTML.

Основные препроцессоры:

Pug (ранее Jade) — самый популярный
HAML — используется в Ruby-сообществе
Slim — еще один Ruby-вариант
EJS — HTML с вставками JavaScript

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

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

Когда использовать:

Для больших проектов с командой разработчиков
Для динамических сайтов (вместе с бекендом)
Если нужен переиспользуемый код

Когда НЕ использовать:

Для простых статических страниц
Если команда не знакома с препроцессором
Если проект небольшой

Как проверить валидность HTML? Валидация HTML — это проверка кода на соответствие стандартам W3C. Валидный код работает корректно во всех браузерах и лучше индексируется поисковиками. Способы проверки:
Онлайн валидаторы:

W3C Validator — официальный и самый надежный
HTML Validator
Nu Html Checker — современная версия

Плагины для VS Code:

HTMLHint — линтер для HTML
htmllint — проверка синтаксиса
Prettier — форматирование и проверка
W3C Validation — интеграция с валидатором

Браузерные инструменты:

Chrome DevTools (F12) → Console → показывает ошибки
Firefox Developer Tools → Console

Что проверяет валидатор:

Правильное закрытие тегов
Корректное использование атрибутов
Отсутствие устаревших тегов
Правильную структуру документа
Доступность (ARIA)

Преимущества валидного кода:

Кроссбраузерность (работает во всех браузерах)
Лучшее SEO (поисковики любят валидный код)
Легче поддерживать и отлаживать
Улучшенная доступность

Интегрировать проверку валидности в workflow, чтобы ловить ошибки на ранних этапах.

Семантическая вёрстка:

Что такое семантическая верстка и почему она важна? Использование тегов, которые несут смысловую нагрузку (<header>, <article>, <nav>), а не просто <div>. Важность: улучшает SEO (поисковики лучше понимают структуру), доступность (скринридеры помогают незрячим) и читаемость кода.
Назовите основные семантические теги HTML5. <header> (шапка), <nav> (навигация), <main> (основной контент), <article> (самостоятельная статья), <section> (раздел), <aside> (боковая панель), <footer> (подвал), <figure>/<figcaption> (подпись к иллюстрации).
В чем разница между <article> и <section>? <article> — для самодостаточных, независимых блоков (пост в блоге, новость). <section> — для логических разделов документа (главы, группы контента). Если сомневаетесь, используйте <div>.
Когда использовать <main>, а когда <div>? <main> — для уникального основного содержимого страницы (не повторяется на других страницах). <div> — универсальный контейнер без смысловой нагрузки.
Для чего нужен тег <header>? Для вводной части или группы навигационных ссылок. Может использоваться внутри <article> как заголовок статьи.

HTML5 и Новые Возможности:

Какие новые возможности появились в HTML5? Семантические теги, нативные аудио/видео (<audio>, <video>), холст (<canvas>), локальное хранилище (LocalStorage/SessionStorage), новые типы полей ввода (date, email), геолокация, Web Workers.
Что такое тег <canvas>? Для чего используется? Область для рисования графики, анимаций и игр через JavaScript (в отличие от SVG, который основан на XML). Не имеет встроенных методов рисования — всё делается скриптами.
В чем разница между <canvas> и <svg>? Canvas — растровый (пиксельный), зависит от разрешения, не сохраняет объекты (нельзя менять нарисованное). SVG — векторный, масштабируется без потери качества, каждый элемент — это DOM-объект (можно менять стили и обработчики).
Какие новые типы input появились в HTML5? color, date, datetime-local, email, month, number, range, search, tel, time, url, week. Улучшают UX и валидацию на мобильных устройствах.
Что такое атрибут data-* и для чего он нужен? Пользовательские атрибуты для хранения произвольных данных в HTML (например, data-user-id="123"). Доступны в JS через dataset и не влияют на отображение.

Доступность (Accessibility / A11y):

Что такое ARIA и зачем она нужна? Accessible Rich Internet Applications — набор атрибутов для улучшения доступности динамического контента. Помогает скринридерам понять, что делает элемент (особенно если он не нативный).
Назовите основные ARIA-атрибуты. role (роль элемента), aria-label (текстовое описание), aria-labelledby (ссылка на другой элемент с описанием), aria-hidden (скрыть от скринридера), aria-expanded (состояние раскрытия).
Чем отличается aria-label от aria-labelledby? aria-label — напрямую задает текст. aria-labelledby — ссылается на id другого элемента, содержимое которого будет использовано как описание.
Почему важно использовать alt-текст для изображений? Для доступности (скринридеры озвучивают его) и SEO. Если изображение декоративное, лучше оставить alt="" (пустой).
Что такое семантическая навигация и как её реализовать? Использовать <nav> для блоков ссылок и заголовки (<h1>-<h6>) для иерархии. Скринридеры используют их для быстрой навигации по странице.

Формы и Валидация:

Как создать выпадающий список в HTML? Через <select> с вложенными <option>: <select><option value="1">Пункт</option></select>.
В чем разница между методами GET и POST в форме? GET — данные в URL, ограничен по длине, видимый, используется для поиска и фильтров (идемпотентный). POST — данные в теле запроса, нет ограничений, скрытый, для отправки паролей, загрузки файлов и изменения данных.
Как объединить ячейки в таблице? colspan — объединение по горизонтали (несколько столбцов). rowspan — по вертикали (несколько строк).
Что такое валидация форм на стороне клиента? Как её включить? Проверка введенных данных в браузере до отправки. Включается через атрибуты: required, type="email", minlength, pattern. Можно кастомизировать через CSS-псевдоклассы (:valid, :invalid).
Как сделать поле ввода обязательным? Добавить атрибут required к тегу <input>, <select> или <textarea>.

Мультимедиа и Встраивание:

Как вставить видео на страницу без использования сторонних плееров? Использовать <video> с атрибутами controls, src и несколькими для разных форматов: <video controls><source src="video.mp4" type="video/mp4"></video>.
Как вставить аудио без плеера? Через <audio> с атрибутом autoplay (осторожно, часто блокируется браузерами): <audio src="audio.mp3" controls></audio>.
Для чего нужен тег <iframe>? Для встраивания другой HTML-страницы внутрь текущей (например, видео с YouTube, карты Google).
Как защититься от кликджекинга при использовании iframe? Использовать заголовок X-Frame-Options: DENY (запрещает встраивание) или SAMEORIGIN (только с того же домена) на сервере встраиваемой страницы. Или атрибут sandbox у <iframe>.
Как вставить аудио на страницу? Для вставки аудио используется тег .

Атрибуты:

controls — панель управления
autoplay — автоматическое воспроизведение (осторожно, часто блокируется)
loop — повтор
muted — без звука
preload — none, metadata, auto

Поддерживаемые форматы:

MP3 — универсальный, поддержка везде
OGG — открытый формат
WAV — без сжатия (большой размер)
AAC — хорошее качество

Стилизация и CSS-взаимодействие:

Какие существуют способы подключения CSS к HTML? -Внешний файл (<link rel="stylesheet" href="style.css">). -Внутри <style> в <head>. -Инлайн-стили (атрибут style).
Что такое CSS-классы и идентификаторы (id)? Как их использовать? id — уникальный идентификатор (один на странице), для JS и якорей. class — может использоваться многократно, для стилизации групп элементов.
Что такое CSS-селекторы? Приведите примеры. Правила для выбора элементов: по тегу (p), классу (.class), id (#id), атрибуту ([type="text"]), псевдоклассам (:hover), псевдоэлементам (::before).

Производительность и Оптимизация:

Как оптимизировать загрузку HTML-страницы? Минифицировать HTML, использовать асинхронную загрузку скриптов (async/defer), сжимать изображения, использовать CDN, кеширование, не блокировать рендеринг CSS.
В чем разница между async и defer у тега <script>? async — скрипт скачивается параллельно, выполняется сразу после загрузки (порядок не гарантируется). defer — скачивается параллельно, но выполняется строго после полного разбора HTML (в порядке объявления). defer лучше, если скрипты зависят друг от друга.
Где лучше размещать тег <script> и почему? Рекомендуется перед закрывающим </body> или с атрибутом defer в <head>, чтобы не блокировать рендеринг страницы.
Что такое критический путь рендеринга (Critical Rendering Path)? Последовательность шагов браузера: построение DOM-дерева → CSSOM → Render Tree → Layout → Paint. Блокирующие ресурсы (CSS, JS без defer) замедляют этот процесс.
Что такое LCP, FID, CLS? (Core Web Vitals) LCP (загрузка самого большого элемента) — скорость загрузки контента. FID (задержка ввода) — отзывчивость. CLS (сдвиг макета) — стабильность визуала. Влияют на ранжирование в Google.

Продвинутые и Специфические Вопросы:

Что такое микроразметка (Microdata / Schema.org)? Разметка для поисковиков, помогающая понимать суть контента (товары, рецепты, отзывы). Используется с атрибутами itemscope, itemtype, itemprop.
В чем разница между localStorage и sessionStorage? localStorage — данные хранятся бессрочно (пока не очистит пользователь). sessionStorage — данные живут только в текущей вкладке/сессии. Оба хранят до ~5-10 МБ.
Как отследить, изменилось ли хранилище (localStorage)? Через событие storage на объекте window. Срабатывает во всех вкладках, кроме той, где произошло изменение.
Что такое Web Workers и для чего они нужны? Скрипты, работающие в фоновом потоке, независимо от основного UI-потока. Позволяют выполнять тяжелые вычисления без зависания интерфейса.
Что такое CORS и как он связан с HTML? Cross-Origin Resource Sharing — механизм безопасности, ограничивающий запросы с одного домена на другой. Для обхода нужны специальные заголовки на сервере.
Как сделать страницу адаптивной (responsive) с помощью HTML? Использовать <meta name="viewport" content="width=device-width, initial-scale=1.0"> и медиазапросы в CSS.
Что такое тег <picture> и когда его использовать? Гибкий контейнер для выбора разных изображений под разные условия (разрешение экрана, формат, ориентация): <picture><source srcset="large.jpg" media="(min-width: 800px)"><img src="small.jpg"></picture>.
Для чего нужен атрибут srcset у <img>? Для указания нескольких версий изображения с разными разрешениями, чтобы браузер загружал оптимальную под текущий экран.
Что такое Progressive Web App (PWA) и как HTML помогает в этом? PWA — веб-приложения, работающие как нативные. Используют Service Workers (JS), манифест (manifest.json) и HTTPS. HTML обеспечивает структуру.
Как обработать ошибку загрузки изображения? Через событие onerror у <img>: можно подставить запасную картинку или скрыть элемент.
Что такое HTML-шаблонизаторы и зачем они нужны? Инструменты (Handlebars, Pug, EJS), позволяющие генерировать HTML динамически, используя данные и логику (циклы, условия). Упрощают разработку сложных интерфейсов.

Ссылки и Навигация:

В чем разница между абсолютной и относительной ссылкой?

Как открыть ссылку в новой вкладке? Использовать атрибут target="_blank": <a href="https://example.com" target="_blank">Открыть в новой вкладке</a>. Другие значения target: target="_blank" target="_self" target="_parent" target="_top" target="frameName" Когда использовать _blank:

✅ Внешние ссылки (чтобы пользователь не покидал ваш сайт)
✅ Ссылки на PDF, документы
✅ Кнопки "Поделиться" Когда НЕ использовать:
❌ Внутренняя навигация (ухудшает UX, перегружает вкладками)
❌ Ссылки внутри документа (якоря)

Что такое якорная ссылка? (anchor link) — это ссылка, которая ведет к определенному месту на той же или другой странице. Особенности:

Якорь должен быть уникальным на странице
При переходе по якорю URL меняется (например, site.com#section1)
Можно использовать для навигации внутри длинных страниц (статьи, документация)

Что делает атрибут rel="noopener noreferrer"? Это безопасностный атрибут для ссылок, открываемых в новой вкладке через target="_blank". Когда ссылка открывается через target="_blank", новая страница получает доступ к объекту window.opener и может:

Перенаправить исходную страницу на фишинговый сайт
Внедрить вредоносный код
Собирать данные о пользователе

Можно ли сделать ссылку без текста? Да, можно, если внутри есть другой контент (изображение, иконка). Если ссылка без текста, обязательно добавляйте aria-label: <a href="https://site.com" aria-label="Перейти на главную страницу"><img src="logo.png" alt=""></a>

Структура и элементы документа:

Какой правильный порядок основных тегов в HTML-документе?

Правила хорошего тона:

Всегда указывайте <!DOCTYPE html>
Используйте lang="ru" для правильной локализации
<meta charset="UTF-8"> — обязательно
<title> — обязательный и уникальный для каждой страницы
Подключайте CSS в <head>, JS — перед </body>

Что должно быть в <head>? Содержит метаданные (данные о странице), которые не видны пользователю, но важны для браузеров и поисковых систем:

<meta charset="UTF-8"> - Кодировка
<title>Мой сайт</title> - Заголовок вкладки
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - Адаптивность на мобильных

Что такое <meta name="viewport"> и для чего он нужен? Этот тег управляет тем, как страница отображается на мобильных устройствах. Стандартный шаблон: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Без этого тега мобильные браузеры пытаются уместить десктопную версию в маленький экран (масштабируют до 980px), и страница выглядит мелкой.