Перейти к основному содержимому

200 вопросов по HTML

В РАЗРАБОТКЕЛАБОРАТОРИЯНЕ ОБЯЗАТЕЛЬНО

200 вопросов по HTML​

Основы HTML​

Вопрос​

Что такое HTML?

Ответ​

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

Вопрос​

Из чего состоит базовая структура HTML-документа?

Ответ​

Базовая структура HTML-документа включает следующие элементы:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Заголовок страницы</title>
</head>
<body>
    <!-- Содержимое страницы -->
</body>
</html>

Элемент <!DOCTYPE html> указывает браузеру на использование стандарта HTML5. Элемент <html> является корневым. Внутри него располагаются <head> (метаданные) и <body> (видимое содержимое).

Вопрос​

Что делает тег <!DOCTYPE html>?

Ответ​

Тег <!DOCTYPE html> объявляет тип документа и сообщает браузеру, что страница написана в соответствии со стандартом HTML5. Это не является HTML-тегом, а инструкцией для парсера.

Вопрос​

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

Ответ​

Кодировку документа задают с помощью метатега внутри <head>:

<meta charset="UTF-8">

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

Вопрос​

Как указать язык страницы?

Ответ​

Язык страницы указывают с помощью атрибута lang у корневого элемента <html>:

<html lang="ru">

Это помогает поисковым системам и вспомогательным технологиям (например, экранным читалкам) правильно интерпретировать содержимое.

Вопрос​

Что такое тег и элемент в HTML?

Ответ​

Тег — это конструкция в угловых скобках, например <p> или </p>. Элемент — это совокупность открывающего тега, содержимого и закрывающего тега (если он не самозакрывающийся). Например:

<p>Это параграф.</p>

Здесь <p> и </p> — теги, а весь фрагмент — элемент.

Вопрос​

Какие теги являются самозакрывающимися?

Ответ​

Самозакрывающиеся теги не требуют отдельного закрывающего тега. Примеры:

  • <img>
  • <br>
  • <hr>
  • <input>
  • <meta>
  • <link>

В HTML5 их можно писать без косой черты (<br>), но в XHTML требуется <br />.

Вопрос​

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

Ответ​

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

<a href="https://example.com">Ссылка</a>

Здесь href — атрибут, а "https://example.com" — его значение.

Вопрос​

Можно ли использовать один и тот же id несколько раз на странице?

Ответ​

Нет. Значение атрибута id должно быть уникальным в пределах одной HTML-страницы. Повторное использование одного и того же id нарушает стандарт и может привести к непредсказуемому поведению скриптов и стилей.

Вопрос​

Чем отличается class от id?

Ответ​

Атрибут class может использоваться многократно на одной странице и применяется для группировки элементов с общими стилями или поведением. Атрибут id уникален для каждого элемента и используется для однозначной идентификации конкретного элемента.

Семантика и структура документа​

Вопрос​

Что такое семантические элементы в HTML5?

Ответ​

Семантические элементы явно описывают своё назначение и структурную роль в документе. Примеры: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>. Они улучшают доступность и SEO.

Вопрос​

Для чего используется тег <main>?

Ответ​

Тег <main> обозначает основное содержимое документа, уникальное для данной страницы и не повторяющееся в других частях сайта (в отличие от шапки, подвала или боковой панели). На странице должен быть только один <main>, и он не должен находиться внутри <article>, <aside>, <footer>, <header> или <nav>.

Вопрос​

Когда использовать <section>, а когда <div>?

Ответ​

Тег <section> применяют, когда блок логически представляет собой отдельный раздел документа с собственным заголовком (например, глава статьи). Тег <div> — универсальный контейнер без семантического смысла, используемый для стилизации или группировки, когда семантика не важна.

Вопрос​

Чем <article> отличается от <section>?

Ответ​

Элемент <article> представляет собой самодостаточную единицу содержимого, которая может быть извлечена из контекста и понятна отдельно (например, пост в блоге, новость, комментарий). Элемент <section> — это тематический блок внутри более крупного документа, который обычно не имеет смысла вне контекста.

Вопрос​

Можно ли вкладывать <header> внутрь <article>?

Ответ​

Да. Элемент <header> может использоваться внутри <article>, <section> или <main> для обозначения вводной части этого конкретного блока (например, заголовок статьи и дата публикации).

Вопрос​

Для чего нужен тег <nav>?

Ответ​

Тег <nav> обозначает блок навигации — набор ссылок, предназначенных для перемещения по сайту или разделу. Обычно содержит основное меню, таблицу содержания или пагинацию.

Вопрос​

Что такое ARIA и как оно связано с HTML?

Ответ​

ARIA (Accessible Rich Internet Applications) — это набор атрибутов, расширяющих семантику HTML для улучшения доступности веб-приложений. Например, aria-label, aria-hidden, role="button". Используется, когда нативные HTML-элементы недостаточны для передачи смысла вспомогательным технологиям.

Вопрос​

Нужно ли всегда использовать семантические теги вместо <div>?

Ответ​

Семантические теги следует использовать, когда они точно отражают смысл содержимого. Если блок не несёт семантической нагрузки (например, служит только для стилизации), допустимо использовать <div>.

Вопрос​

Где правильно размещать <aside>?

Ответ​

Элемент <aside> используется для содержимого, косвенно связанного с основным потоком документа: боковые панели, цитаты, реклама, глоссарии. Он может находиться внутри <article> (если относится к нему) или на уровне всего документа.

Вопрос​

Может ли страница содержать несколько <header> или <footer>?

Ответ​

Да. Каждый семантический раздел (<article>, <section>) может иметь свой собственный <header> и <footer>. Эти элементы не ограничены одним экземпляром на странице.

Текст и медиа​

Вопрос​

Как добавить изображение на страницу?

Ответ​

Изображение добавляют с помощью тега <img> с обязательными атрибутами src и alt:

<img src="image.jpg" alt="Описание изображения">

Атрибут alt обеспечивает доступность и отображается, если изображение не загрузилось.

Вопрос​

Почему атрибут alt обязателен?

Ответ​

Атрибут alt предоставляет текстовую альтернативу изображению для пользователей с нарушениями зрения (через экранные читалки), при отключённых изображениях или медленном интернете. Это требование доступности и SEO.

Вопрос​

Как вставить видео на страницу?

Ответ​

Видео вставляют с помощью тега <video>:

<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    Ваш браузер не поддерживает видео.
</video>

Атрибут controls добавляет стандартные элементы управления. Вложенный текст отображается, если браузер не поддерживает тег <video>.

Вопрос​

Как добавить аудио?

Ответ​

Аудио добавляют с помощью тега <audio>:

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Ваш браузер не поддерживает аудио.
</audio>

Поддерживаются форматы MP3, WAV, OGG и другие, в зависимости от браузера.

Вопрос​

Как создать список?

Ответ​

Существует два типа списков:

  • Маркированный (ненумерованный): <ul>
  • Нумерованный: <ol>

Пример:

<ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
</ul>

<ol>
    <li>Первый шаг</li>
    <li>Второй шаг</li>
</ol>

Вопрос​

Что такое <dl>, <dt>, <dd>?

Ответ​

Это теги для создания списка определений:

<dl>
    <dt>HTML</dt>
    <dd>Язык разметки гипертекста.</dd>
    <dt>CSS</dt>
    <dd>Язык стилей.</dd>
</dl>

<dt> — термин, <dd> — его определение.

Вопрос​

Как выделить цитату?

Ответ​

Для блочных цитат используют <blockquote>, для строчных — <q>:

<blockquote cite="https://example.com">
    Это длинная цитата из внешнего источника.
</blockquote>

<p>Он сказал: <q>Привет!</q></p>

Атрибут cite указывает источник.

Вопрос​

Как обозначить аббревиатуру?

Ответ​

Аббревиатуру обозначают тегом <abbr> с атрибутом title:

<abbr title="HyperText Markup Language">HTML</abbr>

При наведении курсора отображается расшифровка.

Вопрос​

Как показать изменённый текст (добавленный или удалённый)?

Ответ​

Удалённый текст — <del>, добавленный — <ins>:

<p>Цена: <del>1000 руб.</del> <ins>799 руб.</ins></p>

Эти теги полезны для отслеживания изменений в документах.

Вопрос​

Как вставить код в текст?

Ответ​

Строчный фрагмент кода — <code>, блок кода — <pre><code>...</code></pre>:

<p>Используйте функцию <code>console.log()</code>.</p>

<pre><code>function hello() {
    console.log("Привет!");
}</code></pre>

Тег <pre> сохраняет пробелы и переносы строк.

Формы и интерактивные элементы​

Вопрос​

Как создать HTML-форму?

Ответ​

Форму создают с помощью тега <form>. Обязательные атрибуты — action (адрес обработчика) и method (метод отправки: GET или POST):

<form action="/submit" method="post">
    <!-- Поля формы -->
</form>

Вопрос​

Какие основные типы полей ввода существуют в HTML?

Ответ​

Основные типы полей задаются через атрибут type у тега <input>:

  • text — текстовое поле
  • email — email-адрес
  • password — пароль (символы скрываются)
  • number — числовое значение
  • date — дата
  • checkbox — флажок
  • radio — переключатель
  • file — выбор файла
  • submit — кнопка отправки

Пример:

<input type="email" name="user_email" required>

Вопрос​

Для чего нужен атрибут name у элементов формы?

Ответ​

Атрибут name определяет имя поля, под которым его значение будет передано на сервер при отправке формы. Без name данные не попадут в запрос.

Вопрос​

Чем отличаются GET и POST в формах?

Ответ​

При методе GET данные формы добавляются к URL в виде строки запроса (?key=value&...). При POST данные передаются в теле HTTP-запроса.
GET используется для получения данных (например, поиск), POST — для изменения состояния (регистрация, заказ).

Вопрос​

Как сделать поле обязательным для заполнения?

Ответ​

Используют атрибут required:

<input type="text" name="username" required>

Браузер автоматически проверит заполнение перед отправкой формы.

Вопрос​

Как создать выпадающий список?

Ответ​

Выпадающий список создаётся с помощью тега <select>, внутри которого размещаются <option>:

<select name="country">
    <option value="ru">Россия</option>
    <option value="de">Германия</option>
</select>

Атрибут value определяет значение, отправляемое на сервер.

Вопрос​

Как группировать связанные элементы формы?

Ответ​

Связанные элементы формы группируют с помощью тега <fieldset>, а заголовок группы задают через <legend>:

<fieldset>
    <legend>Контактная информация</legend>
    <input type="email" name="email">
    <input type="tel" name="phone">
</fieldset>

Это улучшает доступность и структуру.

Вопрос​

Как связать метку с полем ввода?

Ответ​

Метку связывают с полем с помощью тега <label> и атрибута for, значение которого совпадает с id поля:

<label for="email">Email:</label>
<input type="email" id="email" name="email">

Альтернативно, можно обернуть поле в <label>:

<label>Email: <input type="email" name="email"></label>

Вопрос​

Как ограничить длину вводимого текста?

Ответ​

Используют атрибуты minlength и maxlength:

<input type="text" minlength="3" maxlength="20">

Браузер не позволит отправить форму, если длина не соответствует условиям.

Вопрос​

Как задать диапазон чисел для числового поля?

Ответ​

Используют атрибуты min, max и step:

<input type="number" name="age" min="18" max="99" step="1">

Вопрос​

Как добавить подсказку в поле ввода?

Ответ​

Подсказку добавляют с помощью атрибута placeholder:

<input type="text" placeholder="Введите ваше имя">

Текст исчезает при фокусе на поле.

Вопрос​

Как отключить автозаполнение поля?

Ответ​

Используют атрибут autocomplete="off":

<input type="text" autocomplete="off">

Это предотвращает сохранение и подстановку браузером ранее введённых значений.

Вопрос​

Как создать многострочное текстовое поле?

Ответ​

Многострочное поле создаётся с помощью тега <textarea>:

<textarea name="comment" rows="4" cols="50">Текст по умолчанию</textarea>

Атрибуты rows и cols задают размер, но чаще используют CSS.

Вопрос​

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

Ответ​

Стандартная отправка формы вызывает перезагрузку. Чтобы избежать этого, используют JavaScript и метод preventDefault():

<form id="myForm">
    <input type="text" name="data">
    <button type="submit">Отправить</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault();
    // Отправка через fetch или другую логику
});
</script>

Вопрос​

Что делает атрибут novalidate у формы?

Ответ​

Атрибут novalidate отключает встроенную валидацию браузера:

<form novalidate>
    <!-- Поля без автоматической проверки -->
</form>

Это полезно, когда валидация реализуется полностью на стороне JavaScript.

Вопрос​

Как создать кнопку, которая не отправляет форму?

Ответ​

По умолчанию кнопка внутри формы имеет тип submit. Чтобы она не отправляла форму, явно указывают type="button":

<button type="button">Нажми меня</button>

Вопрос​

Как отправить файл через форму?

Ответ​

Для отправки файлов требуется:

  1. Установить enctype="multipart/form-data"
  2. Использовать <input type="file">

Пример:

<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="avatar" accept="image/*">
    <button type="submit">Загрузить</button>
</form>

Атрибут accept ограничивает типы файлов.

Вопрос​

Как реализовать поиск по сайту с помощью формы?

Ответ​

Форма поиска использует метод GET, чтобы результат отображался в URL:

<form action="/search" method="get">
    <input type="search" name="q" placeholder="Поиск...">
    <button type="submit">Найти</button>
</form>

Тип search может добавлять «иконку очистки» в некоторых браузерах.

Вопрос​

Как сделать поле только для чтения?

Ответ​

Используют атрибут readonly:

<input type="text" value="Нельзя изменить" readonly>

Поле остаётся фокусируемым и отправляется с формой, но редактировать его нельзя.

Вопрос​

Чем disabled отличается от readonly?

Ответ​

Поле с disabled неактивно: оно не получает фокус, не взаимодействует с пользователем и не отправляется с формой. Поле с readonly отправляется, но не редактируется.

Метаданные, SEO и внутренняя структура документа​

Вопрос​

Где размещаются метаданные HTML-документа?

Ответ​

Метаданные размещаются внутри элемента <head>. Они не отображаются на странице, но предоставляют информацию браузеру, поисковым системам и другим сервисам.

Вопрос​

Какие основные метатеги используются для SEO?

Ответ​

Основные метатеги для SEO:

  • <title> — заголовок страницы (отображается в результатах поиска)
  • <meta name="description" content="..."> — краткое описание содержимого
  • <meta charset="UTF-8"> — кодировка
  • <meta name="viewport" content="width=device-width, initial-scale=1"> — адаптивность на мобильных устройствах

Пример:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Главная — Мой сайт</title>
    <meta name="description" content="Описание сайта для поисковых систем">
</head>

Вопрос​

Для чего нужен тег <title>?

Ответ​

Тег <title> задаёт заголовок документа, который отображается:

  • в заголовке вкладки браузера,
  • в результатах поисковой выдачи,
  • при сохранении закладки.

Это один из самых важных элементов для SEO.

Вопрос​

Что делает метатег viewport?

Ответ​

Метатег viewport управляет масштабированием и шириной области просмотра на мобильных устройствах:

<meta name="viewport" content="width=device-width, initial-scale=1">

Без него мобильные браузеры могут отображать страницу как на десктопе и уменьшать её, делая текст нечитаемым.

Вопрос​

Как подключить внешнюю таблицу стилей?

Ответ​

Внешний CSS-файл подключают с помощью тега <link> в <head>:

<link rel="stylesheet" href="styles.css">

Атрибут rel="stylesheet" указывает назначение ресурса.

Вопрос​

Как подключить иконку сайта (favicon)?

Ответ​

Иконку подключают через тег <link> с атрибутом rel="icon":

<link rel="icon" href="/favicon.ico" type="image/x-icon">

Поддерживаются форматы .ico, .png, .svg.

Вопрос​

Можно ли вставлять CSS прямо в HTML?

Ответ​

Да. CSS можно вставлять:

  • Внутри тега <style> в <head>
  • Через атрибут style у любого элемента (инлайновые стили)

Пример:

<head>
    <style>
        body { background: #f0f0f0; }
    </style>
</head>
<body style="color: black;">

Вопрос​

Как задать автора документа?

Ответ​

Автора указывают с помощью метатега:

<meta name="author" content="Иван Петров">

Это не влияет на SEO напрямую, но может использоваться внутренними системами.

Вопрос​

Как запретить индексацию страницы поисковиками?

Ответ​

Используют метатег:

<meta name="robots" content="noindex, nofollow">

Значение noindex запрещает добавление страницы в индекс, nofollow — переход по ссылкам на ней.

Вопрос​

Что такое Open Graph и зачем он нужен?

Ответ​

Open Graph — это протокол метаданных, позволяющий контролировать, как страница отображается при публикации в социальных сетях (Facebook, Telegram, LinkedIn и др.). Основные теги:

<meta property="og:title" content="Заголовок">
<meta property="og:description" content="Описание">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">

Вопрос​

Как указать ключевые слова для страницы?

Ответ​

Раньше использовали <meta name="keywords">, но современные поисковые системы (Google, Yandex) его игнорируют. Ключевые слова следует естественным образом включать в содержимое страницы, заголовки и описание.

Вопрос​

Можно ли включать JavaScript в <head>?

Ответ​

Да, но с осторожностью. Скрипты в <head> блокируют парсинг HTML, что замедляет отображение страницы. Рекомендуется:

  • Использовать defer или async при подключении внешних скриптов
  • Переносить не критичные скрипты в конец <body>

Пример безопасного подключения:

<script src="app.js" defer></script>

Вопрос​

Что делает атрибут defer у тега <script>?

Ответ​

Атрибут defer указывает браузеру загружать скрипт асинхронно, но выполнять его после полной загрузки HTML-документа, сохраняя порядок выполнения относительно других скриптов с defer.

Вопрос​

Чем async отличается от defer?

Ответ​

  • async: скрипт загружается параллельно с парсингом HTML и выполняется сразу после загрузки, без ожидания завершения парсинга и без сохранения порядка.
  • defer: скрипт загружается параллельно, но выполняется после полного построения DOM и в порядке следования в документе.

defer предпочтителен для скриптов, зависящих от DOM.

Вопрос​

Как задать базовый URL для всех относительных ссылок на странице?

Ответ​

Используют тег <base> в <head>:

<base href="https://example.com/assets/">

После этого ссылка <img src="logo.png"> будет интерпретирована как https://example.com/assets/logo.png.

Вопрос​

Нужно ли закрывать тег <meta>?

Ответ​

В HTML5 тег <meta> является самозакрывающимся и не требует закрывающего тега. Правильно: <meta charset="UTF-8">. Запись <meta ... /> допустима, но не обязательна.

Вопрос​

Как указать, что страница доступна на нескольких языках?

Ответ​

Используют теги <link rel="alternate" hreflang="...">:

<link rel="alternate" hreflang="ru" href="https://example.com/ru/">
<link rel="alternate" hreflang="en" href="https://example.com/en/">

Это помогает поисковым системам показывать правильную версию пользователю.

Вопрос​

Можно ли использовать несколько тегов <head>?

Ответ​

Нет. В корректном HTML-документе должен быть ровно один элемент <head>. Наличие нескольких нарушает стандарт и может привести к ошибкам обработки.

Вопрос​

Что произойдёт, если поместить <div> внутрь <head>?

Ответ​

Браузер проигнорирует такой <div> или переместит его в <body> во время построения DOM. Только определённые элементы допустимы внутри <head>: <title>, <meta>, <link>, <style>, <script>, <base>.

Вопрос​

Как проверить, что HTML-документ соответствует стандарту?

Ответ​

Используют валидатор W3C: https://validator.w3.org/. Он анализирует разметку и сообщает об ошибках и предупреждениях, нарушающих спецификацию HTML.

Доступность (Accessibility)​

Вопрос​

Что такое доступность веб-контента?

Ответ​

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

Вопрос​

Как HTML способствует доступности?

Ответ​

HTML предоставляет семантические элементы и атрибуты, которые передают смысл и структуру контента вспомогательным технологиям (например, экранным читалкам). Правильное использование тегов <button>, <label>, <header>, alt, aria-* и других делает интерфейс понятным без визуального восприятия.

Вопрос​

Почему важно использовать нативные HTML-элементы вместо <div> с JavaScript?

Ответ​

Нативные элементы (<button>, <input>, <select>) автоматически поддерживают клавиатурную навигацию, фокус, события и роли ARIA. Их поведение предсказуемо для браузеров и вспомогательных технологий. Кастомные виджеты на основе <div> требуют ручной реализации всей этой логики.

Вопрос​

Как сделать кнопку доступной?

Ответ​

Используют семантический тег <button> с понятным текстом или aria-label:

<button>Сохранить</button>
<!-- или -->
<button aria-label="Закрыть модальное окно">×</button>

Не следует эмулировать кнопку через <div onclick="...">.

Вопрос​

Что делать, если изображение чисто декоративное?

Ответ​

Для декоративных изображений указывают пустой alt="". Это сообщает экранным читалкам игнорировать элемент:

<img src="decoration.png" alt="">

Если изображение несёт смысл — alt должен содержать краткое описание.

Вопрос​

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

Ответ​

Используют ARIA-атрибут aria-current="page":

<nav>
    <a href="/home">Главная</a>
    <a href="/about" aria-current="page">О нас</a>
</nav>

Экранные читалки объявят, что ссылка указывает на текущую страницу.

Вопрос​

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

Ответ​

Применяют специальный CSS-класс, например:

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

HTML:

<span class="visually-hidden">Перейти к основному содержимому</span>

Вопрос​

Как скрыть элемент полностью от всех, включая экранные читалки?

Ответ​

Используют атрибут aria-hidden="true" в сочетании со скрытием через CSS (display: none или visibility: hidden). Только aria-hidden недостаточно, если элемент остаётся в DOM и видим.

Пример:

<div style="display: none;" aria-hidden="true">Временно скрытый блок</div>

Вопрос​

Для чего нужен заголовок <h1> на странице?

Ответ​

Заголовок <h1> обозначает основную тему страницы. Он должен быть единственным и уникальным. Экранные читалки используют его как точку входа в содержимое, а поисковые системы — для понимания тематики.

Вопрос​

Можно ли пропускать уровни заголовков (например, использовать <h1>, затем <h3>)?

Ответ​

Нет. Структура заголовков должна быть иерархической и последовательной: <h1> → <h2> → <h3> и так далее. Пропуск уровней нарушает логическую структуру документа и затрудняет навигацию для пользователей вспомогательных технологий.

Вопрос​

Как сделать форму доступной?

Ответ​

Форма считается доступной, если:

  • Каждое поле имеет связанную метку (<label> или aria-labelledby)
  • Обязательные поля помечены (required, aria-required)
  • Сообщения об ошибках доступны (aria-invalid, aria-describedby)
  • Форма отправляется клавиатурой (Enter, Tab)
  • Визуальные подсказки дублируются текстом

Вопрос​

Что такое «скип-линк» и зачем он нужен?

Ответ​

«Скип-линк» — это невидимая (до фокуса) ссылка в начале страницы, позволяющая клавиатурным пользователям сразу перейти к основному содержимому, минуя повторяющееся меню:

<a href="#main-content" class="visually-hidden focusable">Перейти к содержимому</a>
...
<main id="main-content">...</main>

CSS-класс focusable убирает скрытие при фокусе.

Вопрос​

Как обозначить область поиска?

Ответ​

Используют роль ARIA search или семантический тег <form role="search">:

<form role="search">
    <label for="q">Поиск:</label>
    <input type="search" id="q" name="q">
    <button type="submit">Найти</button>
</form>

Это помогает экранным читалкам идентифицировать назначение формы.

Вопрос​

Как сделать таблицу доступной?

Ответ​

Доступная таблица:

  • Имеет заголовки столбцов/строк (<th>)
  • Связывает ячейки с заголовками через scope или headers
  • Не использует таблицу для верстки макета

Пример:

<table>
    <caption>Расписание занятий</caption>
    <thead>
        <tr>
            <th scope="col">Время</th>
            <th scope="col">Предмет</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>10:00</td>
            <td>HTML</td>
        </tr>
    </tbody>
</table>

Вопрос​

Что такое role в ARIA?

Ответ​

Атрибут role явно задаёт тип элемента для вспомогательных технологий. Например, role="alert" указывает, что содержимое является важным уведомлением, которое должно быть немедленно прочитано.

Вопрос​

Когда следует использовать ARIA?

Ответ​

ARIA применяют, когда нативные HTML-элементы не могут выразить необходимую семантику (например, при создании кастомных виджетов: выпадающих меню, вкладок, слайдеров). Приоритет всегда у нативного HTML.

Вопрос​

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

Ответ​

Используют инструменты:

  • Lighthouse (в DevTools Chrome)
  • axe DevTools
  • WAVE (webaim.org)
  • Ручная проверка с клавиатурой и экранными читалками (NVDA, VoiceOver)

Вопрос​

Что такое фокус и почему он важен?

Ответ​

Фокус — это состояние элемента, готового принимать ввод (например, через клавиатуру). Важно, чтобы все интерактивные элементы были фокусируемыми (tabindex="0" при необходимости) и имели визуальный индикатор фокуса (обычно outline).

Вопрос​

Можно ли убирать outline у фокусируемых элементов?

Ответ​

Убирать стандартный outline можно только если заменить его на другой чётко видимый стиль фокуса (например, border, box-shadow). Полное отсутствие индикации фокуса нарушает доступность.

Вопрос​

Как сделать модальное окно доступным?

Ответ​

Доступное модальное окно:

  • Перехватывает фокус и удерживает его внутри
  • Закрывается по Esc
  • Имеет role="dialog" и aria-modal="true"
  • Указывает заголовок через aria-labelledby
  • Скрывает фоновый контент от экранных читалок (aria-hidden="true" на основном содержимом)

Производительность и лучшие практики​

Вопрос​

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

Ответ​

Основные рекомендации:

  • Поместить CSS в <head> для предотвращения FOUC (вспышки нестилизованного контента)
  • Разместить JavaScript в конце <body> или использовать defer
  • Минимизировать количество внешних ресурсов
  • Использовать семантическую разметку без избыточной вложенности
  • Сжимать HTML на сервере (gzip, Brotli)

Вопрос​

Почему важно писать валидный HTML?

Ответ​

Валидный HTML гарантирует предсказуемое поведение в разных браузерах, улучшает SEO, повышает доступность и снижает вероятность ошибок при парсинге. Невалидная разметка может привести к неожиданному построению DOM.

Вопрос​

Нужно ли указывать тип скрипта в теге <script>?

Ответ​

В HTML5 атрибут type="text/javascript" не требуется, так как JavaScript является значением по умолчанию. Корректно писать просто:

<script src="app.js"></script>

Указание type необходимо только для нестандартных скриптов (например, type="module").

Вопрос​

Что такое «критический путь отрисовки»?

Ответ​

Критический путь отрисовки — это последовательность шагов, которые браузер выполняет для преобразования HTML, CSS и JavaScript в пиксели на экране. Оптимизация этого пути (уменьшение блокирующих ресурсов) ускоряет первую отрисовку.

Вопрос​

Как ускорить загрузку шрифтов?

Ответ​

Рекомендуется:

  • Использовать font-display: swap в @font-face, чтобы показывать текст сразу с резервным шрифтом
  • Предзагружать важные шрифты через <link rel="preload">:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Вопрос​

Зачем нужен атрибут crossorigin при подключении шрифтов или скриптов?

Ответ​

Атрибут crossorigin указывает браузеру делать запрос с CORS (Cross-Origin Resource Sharing). Он обязателен при предзагрузке шрифтов и при использовании модулей из другого origin, чтобы избежать ошибок безопасности.

Вопрос​

Как избежать макетных сдвигов (CLS)?

Ответ​

Cumulative Layout Shift (CLS) возникает, когда элементы меняют положение после начальной отрисовки. Чтобы избежать этого:

  • Всегда указывать размеры изображений (width и height)
  • Резервировать место под рекламу и динамические блоки
  • Не вставлять контент над существующим (например, баннеры сверху)

Вопрос​

Почему важно указывать width и height у изображений?

Ответ​

Указание размеров позволяет браузеру заранее выделить место под изображение до его загрузки. Это предотвращает сдвиг макета и улучшает метрику CLS (Cumulative Layout Shift), влияющую на Core Web Vitals.

Вопрос​

Как правильно подключать favicon для всех устройств?

Ответ​

Используют несколько форматов и размеров:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<meta name="theme-color" content="#ffffff">

Это обеспечивает корректное отображение на десктопах, iOS и Android.

Вопрос​

Что такое «прогрессивное улучшение» в HTML?

Ответ​

Прогрессивное улучшение — это подход, при котором базовый функционал доступен даже без CSS и JavaScript, а дополнительные возможности добавляются для современных браузеров. Например, форма работает без AJAX, но с ним становится удобнее.

Вопрос​

Что такое «грациозная деградация»?

Ответ​

Грациозная деградация — это проектирование для современных браузеров с обеспечением базовой работоспособности в старых. Например, сайт использует Flexbox, но для IE9 есть fallback на float.

Вопрос​

Как уменьшить размер HTML-файла?

Ответ​

Методы:

  • Удалить комментарии и лишние пробелы (минификация)
  • Избегать встраивания больших данных (например, base64-изображений)
  • Выносить стили и скрипты во внешние файлы (если они кэшируются)
  • Использовать короткие имена классов в production (через сборщики)

Вопрос​

Нужно ли закрывать все теги в HTML5?

Ответ​

Нет. В HTML5 многие теги могут быть не закрыты (например, <li>, <p>, <td>), и браузер корректно их обработает. Однако явное закрытие улучшает читаемость и снижает риск ошибок, особенно в шаблонах.

Вопрос​

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

Ответ​

Используют медиазапрос @media print и классы вроде .no-print:

.no-print { display: none !important; }
<div class="no-print">Этот блок не появится при печати</div>

Вопрос​

Что такое «prefetch» и «preconnect»?

Ответ​

  • <link rel="prefetch"> указывает браузеру загрузить ресурс, который, вероятно, понадобится позже (например, следующая страница).
  • <link rel="preconnect"> устанавливает раннее соединение с доменом третьей стороны (например, CDN), чтобы сократить задержку.

Пример:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="prefetch" href="/next-page.html">

Вопрос​

Как обеспечить безопасность через HTML?

Ответ​

Хотя HTML сам по себе не обеспечивает безопасность, можно:

  • Указывать rel="noopener noreferrer" для внешних ссылок с target="_blank"
  • Избегать встраивания ненадёжного HTML (XSS)
  • Использовать Content Security Policy (CSP) через HTTP-заголовки

Вопрос​

Почему для внешних ссылок с target="_blank" нужно rel="noopener"?

Ответ​

Без rel="noopener" открываемая страница получает доступ к объекту window.opener, что может быть использовано для фишинга или перенаправления родительской страницы. Атрибут noopener изолирует контексты.

Вопрос​

Как проверить производительность HTML-страницы?

Ответ​

Используют:

  • Lighthouse (в DevTools Chrome)
  • PageSpeed Insights
  • WebPageTest
  • Chrome DevTools → Performance и Network вкладки

Эти инструменты анализируют время загрузки, CLS, FID, TTI и другие метрики.

Вопрос​

Что такое «above-the-fold» контент?

Ответ​

«Above-the-fold» — это часть страницы, видимая пользователю без прокрутки. Критически важные ресурсы для этой области следует загружать в первую очередь (инлайн-стили, критический CSS).

Вопрос​

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

Ответ​

Рекомендации:

  • Использовать <meta name="viewport">
  • Применять адаптивную разметку (flex, grid)
  • Укрупнять интерактивные элементы (минимум 48×48 px)
  • Минимизировать всплывающие клавиатуры (правильные типы input)
  • Сжимать изображения и использовать современные форматы (WebP, AVIF)

Современные возможности HTML5​

Вопрос​

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

Ответ​

HTML5 ввёл следующие семантические элементы для структурирования документа:
<header>, <footer>, <nav>, <main>, <article>, <section>, <aside>, <figure>, <figcaption>, <time>, <mark>, <progress>, <meter>.

Эти теги улучшают читаемость кода, доступность и SEO.

Вопрос​

Для чего используется тег <time>?

Ответ​

Тег <time> обозначает дату, время или продолжительность. Он может содержать машиночитаемое значение в атрибуте datetime:

<time datetime="2026-03-27">27 марта 2026</time>
<time datetime="PT2H30M">2 часа 30 минут</time>

Это помогает поисковым системам и календарям извлекать события.

Вопрос​

Чем <progress> отличается от <meter>?

Ответ​

  • <progress> показывает ход выполнения задачи (например, загрузку файла). Он может быть с определённым (value/max) или неопределённым состоянием.
  • <meter> отображает скалярное значение в известном диапазоне (например, объём диска, рейтинг).

Примеры:

<progress value="70" max="100">70%</progress>
<meter value="0.75" min="0" max="1">75%</meter>

Вопрос​

Как вставить подпись к изображению?

Ответ​

Используют пару тегов <figure> и <figcaption>:

<figure>
    <img src="diagram.png" alt="Схема процесса">
    <figcaption>Рисунок 1: Схема обработки данных</figcaption>
</figure>

Это семантически связывает изображение и его описание.

Вопрос​

Что такое Web Components и как они связаны с HTML?

Ответ​

Web Components — это набор стандартов (Custom Elements, Shadow DOM, HTML Templates), позволяющих создавать переиспользуемые компоненты с инкапсуляцией. Они расширяют HTML за счёт пользовательских тегов:

<my-button theme="primary">Нажми</my-button>

Поддержка есть во всех современных браузерах.

Вопрос​

Как использовать шаблоны в HTML?

Ответ​

Шаблоны определяют фрагменты разметки, которые не отображаются при загрузке, но могут быть клонированы через JavaScript:

<template id="user-card">
    <div class="card">
        <h3></h3>
        <p></p>
    </div>
</template>

<script>
const template = document.getElementById('user-card');
const clone = template.content.cloneNode(true);
// Заполнить и вставить в DOM
</script>

Вопрос​

Что такое datalist и как его использовать?

Ответ​

Элемент <datalist> предоставляет автозаполнение для поля ввода на основе списка вариантов:

<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
</datalist>

Пользователь может выбрать вариант или ввести свой.

Вопрос​

Как добавить поддержку drag-and-drop в HTML?

Ответ​

HTML5 предоставляет нативный API drag-and-drop. Элемент должен иметь атрибут draggable="true", а контейнер — обрабатывать события dragover и drop:

<div draggable="true" id="draggable">Перетащи меня</div>
<div id="dropzone"></div>

<script>
document.getElementById('dropzone').addEventListener('dragover', e => e.preventDefault());
document.getElementById('dropzone').addEventListener('drop', e => {
    e.preventDefault();
    // Логика перемещения
});
</script>

Вопрос​

Что такое contenteditable?

Ответ​

Атрибут contenteditable делает любой элемент редактируемым пользователем:

<div contenteditable="true">Кликни и измени этот текст</div>

Значения: "true", "false", "plaintext-only". Используется в редакторах WYSIWYG.

Вопрос​

Как сохранить данные пользователя локально без отправки на сервер?

Ответ​

Хотя это чаще реализуется через JavaScript, HTML может участвовать через формы с атрибутом autocomplete или использование localStorage в обработчиках. Сам HTML не хранит данные, но задаёт интерфейс для их ввода.

Вопрос​

Что такое spellcheck и где его применяют?

Ответ​

Атрибут spellcheck включает или отключает проверку орфографии в полях ввода и редактируемых блоках:

<textarea spellcheck="true"></textarea>
<div contenteditable="true" spellcheck="false">Без проверки</div>

По умолчанию зависит от браузера и типа поля.

Вопрос​

Как указать, что ссылка открывается в новой вкладке?

Ответ​

Используют атрибут target="_blank" вместе с rel="noopener noreferrer" для безопасности:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Внешняя ссылка</a>

Вопрос​

Что делает атрибут download у ссылки?

Ответ​

Атрибут download указывает браузеру скачать ресурс по ссылке вместо его открытия:

<a href="/manual.pdf" download>Скачать руководство</a>

Можно задать имя файла: download="guide.pdf".

Вопрос​

Как встроить карту или другой внешний контент?

Ответ​

Используют тег <iframe>:

<iframe src="https://maps.google.com/..." width="600" height="400" title="Карта проезда"></iframe>

Атрибут title обязателен для доступности.

Вопрос​

Можно ли ограничить действия во встроенном iframe?

Ответ​

Да. Атрибут sandbox накладывает ограничения на iframe:

<iframe src="page.html" sandbox="allow-scripts allow-same-origin"></iframe>

Без разрешений iframe не может запускать скрипты, отправлять формы и т.д.

Вопрос​

Что такое srcdoc у iframe?

Ответ​

Атрибут srcdoc позволяет встроить HTML-контент напрямую в iframe без внешнего файла:

<iframe srcdoc="<h1>Привет из iframe!</h1>"></iframe>

Если браузер не поддерживает srcdoc, используется src.

Вопрос​

Как подключить SVG прямо в HTML?

Ответ​

SVG можно встраивать инлайн:

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="red" />
</svg>

Это даёт полный контроль через CSS и JavaScript.

Вопрос​

Что такое picture и зачем он нужен?

Ответ​

Элемент <picture> позволяет задавать несколько источников изображения для разных условий (размер экрана, плотность пикселей, формат):

<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source type="image/webp" srcset="photo.webp">
    <img src="photo.jpg" alt="Фото">
</picture>

Браузер выбирает первый подходящий <source>.

Вопрос​

Как добавить аудио с несколькими форматами?

Ответ​

Используют несколько тегов <source> внутри <audio>:

<audio controls>
    <source src="sound.mp3" type="audio/mpeg">
    <source src="sound.ogg" type="audio/ogg">
    Ваш браузер не поддерживает аудио.
</audio>

Браузер выберет первый поддерживаемый формат.

Вопрос​

Что такое track и как он используется?

Ответ​

Тег <track> добавляет субтитры, описания или главы к <video> или <audio>:

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <track kind="subtitles" src="subs_ru.vtt" srclang="ru" label="Русские">
</video>

Формат файла — WebVTT (.vtt).

Интеграция с JavaScript и CSS​

Вопрос​

Как получить доступ к HTML-элементу из JavaScript?

Ответ​

Существует несколько методов:

  • document.getElementById('id')
  • document.querySelector('.class')
  • document.querySelectorAll('div')
  • element.getElementsByTagName('p')

Пример:

const button = document.getElementById('submit-btn');
button.addEventListener('click', () => { /* ... */ });

Вопрос​

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

Ответ​

Используют свойства:

  • textContent — для чистого текста (безопасно от XSS)
  • innerHTML — для HTML-разметки (требует осторожности)

Пример:

element.textContent = 'Новый текст';
element.innerHTML = '<strong>Жирный текст</strong>';

Вопрос​

Как динамически добавить класс элементу?

Ответ​

Через API classList:

element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('expanded');

Это предпочтительнее прямого изменения className.

Вопрос​

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

Ответ​

Используют методы:

  • element.setAttribute('name', 'value')
  • element.getAttribute('name')
  • element.removeAttribute('name')

Для стандартных свойств (например, id, src) можно обращаться напрямую: element.id = 'new-id'.

Вопрос​

Как создать новый HTML-элемент в JavaScript?

Ответ​

Используют document.createElement():

const div = document.createElement('div');
div.textContent = 'Динамический блок';
div.className = 'dynamic-item';
document.body.appendChild(div);

Альтернатива — innerHTML или <template> для сложных структур.

Вопрос​

Как применить стили к элементу через JavaScript?

Ответ​

Через свойство style:

element.style.color = 'red';
element.style.backgroundColor = '#f0f0f0';

Имена свойств пишутся в camelCase (background-color → backgroundColor).

Вопрос​

Как скрыть элемент с помощью JavaScript?

Ответ​

Есть два основных способа:

  • element.style.display = 'none' — полностью убирает из потока
  • element.hidden = true — устанавливает атрибут hidden, который по умолчанию даёт display: none

Разница в семантике: hidden — это состояние, а не стиль.

Вопрос​

Как отслеживать изменения в DOM?

Ответ​

Используют MutationObserver:

const observer = new MutationObserver(mutations => {
    mutations.forEach(m => console.log('Изменение:', m));
});
observer.observe(document.body, { childList: true, subtree: true });

Это предпочтительнее устаревших событий DOMSubtreeModified.

Вопрос​

Как передать данные из HTML в JavaScript без глобальных переменных?

Ответ​

Используют data-атрибуты:

<button data-user-id="123" data-role="admin">Профиль</button>

В JavaScript:

const btn = document.querySelector('button');
const userId = btn.dataset.userId; // "123"
const role = btn.dataset.role;     // "admin"

Вопрос​

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

Ответ​

Используют событие DOMContentLoaded:

document.addEventListener('DOMContentLoaded', () => {
    // Код, работающий с DOM
});

Или размещают скрипт перед закрывающим </body>.

Вопрос​

Как применить CSS-анимацию при добавлении элемента?

Ответ​

Добавляют класс с анимацией после небольшой задержки или через requestAnimationFrame:

const el = document.createElement('div');
el.className = 'fade-in'; // без начального состояния
document.body.appendChild(el);
// Принудительно применить стили
el.offsetHeight; // триггер перерисовки
el.classList.add('visible'); // активирует transition/animation

Вопрос​

Как избежать FOUC (вспышки нестилизованного контента)?

Ответ​

Помещают все критические стили в <head> и избегают отложенной загрузки основного CSS. Для компонентов, зависящих от JavaScript, можно использовать класс .no-js и заменять его на .js при загрузке скрипта.

Вопрос​

Как стилизовать элемент только если он поддерживается браузером?

Ответ​

Используют CSS-функцию @supports:

@supports (display: grid) {
    .container { display: grid; }
}

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

Вопрос​

Как связать CSS-переменные с JavaScript?

Ответ​

CSS-переменные объявляют в :root, а изменяют через JavaScript:

:root { --main-color: blue; }
.box { color: var(--main-color); }
document.documentElement.style.setProperty('--main-color', 'green');

Вопрос​

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

Ответ​

Создают элемент и проверяют наличие свойства:

function supportsVideo() {
    return !!document.createElement('video').canPlayType;
}

Для новых API используют typeof или 'in':

if ('querySelector' in document) { /* поддерживается */ }

Вопрос​

Как обработать отправку формы без перезагрузки?

Ответ​

Перехватывают событие submit и вызывают preventDefault():

form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    const response = await fetch('/api/submit', {
        method: 'POST',
        body: formData
    });
    // Обработка ответа
});

Вопрос​

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

Ответ​

Устанавливают tabindex="0" и вызывают focus():

element.tabIndex = 0;
element.focus();

Это необходимо для кастомных виджетов, не имеющих нативной фокусировки.

Вопрос​

Как программно отправить форму?

Ответ​

Вызывают метод submit() у элемента формы:

document.getElementById('myForm').submit();

Важно: это обходит событие submit и встроенную валидацию. Для их запуска используют requestSubmit().

Вопрос​

Чем form.submit() отличается от form.requestSubmit()?

Ответ​

  • submit() немедленно отправляет форму, игнорируя валидацию и событие submit.
  • requestSubmit() имитирует нажатие кнопки: запускает валидацию и событие submit, как если бы пользователь сам отправил форму.

Вопрос​

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

Ответ​

Устанавливают атрибут disabled:

button.disabled = true;
try {
    await sendRequest();
} finally {
    button.disabled = false;
}

Это предотвращает повторные отправки.

Редкие и продвинутые вопросы​

Вопрос​

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

Ответ​

Атрибут is позволяет создать элемент как экземпляр пользовательского встроенного элемента (custom built-in element), унаследованного от нативного тега:

<button is="my-button">Кастомная кнопка</button>

Требует предварительной регистрации через customElements.define('my-button', MyButton, { extends: 'button' }). Поддержка ограничена (отсутствует в Safari).

Вопрос​

Можно ли переопределить поведение стандартного тега с помощью Web Components?

Ответ​

Нет. Стандартные теги (<div>, <button>, <input> и т.д.) нельзя переопределить напрямую. Но можно создать пользовательский элемент с другим именем или расширить нативный тег через механизм extends и атрибут is (ограниченная поддержка).

Вопрос​

Что такое «named flow» и поддерживается ли он в HTML?

Ответ​

«Named flow» — это устаревшая идея из спецификации CSS Regions, позволявшая переносить контент между контейнерами. Она не была реализована в основных браузерах и не является частью современного HTML/CSS.

Вопрос​

Как работает парсинг HTML при наличии ошибок?

Ответ​

Браузер использует алгоритм восстановления ошибок (error recovery) согласно спецификации HTML5. Он пытается построить валидное дерево DOM даже из невалидной разметки, закрывая незакрытые теги, перемещая недопустимые элементы и игнорируя некорректные конструкции.

Вопрос​

Что произойдёт, если вложить <a> внутрь другого <a>?

Ответ​

Вложенность ссылок запрещена спецификацией. Браузер автоматически закроет первую ссылку перед началом второй:

<!-- Исходный код -->
<a href="#">Внешняя <a href="#">внутренняя</a></a>

<!-- Фактический DOM -->
<a href="#">Внешняя </a><a href="#">внутренняя</a>

Вопрос​

Можно ли использовать блочные элементы внутри строчных?

Ответ​

С технической точки зрения браузер допускает это, но семантически это нарушает модель документа. Например, <span><div>...</div></span> приведёт к автоматическому закрытию <span> перед <div>. Лучше избегать таких конструкций.

Вопрос​

Что такое «void elements» в HTML?

Ответ​

Void elements — это самозакрывающиеся элементы, которые не могут содержать дочерние узлы: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source>, <track>, <wbr>. Их нельзя закрывать как <br></br>.

Вопрос​

Как влияет порядок атрибутов на работу HTML?

Ответ​

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

Вопрос​

Что делает тег <wbr>?

Ответ​

Тег <wbr> (word break opportunity) указывает браузеру возможную точку переноса слова, если ширины контейнера недостаточно:

<p>Этот длинныйидентификатор<wbr>может быть разбит</p>

Перенос происходит только при необходимости.

Вопрос​

Для чего используется <ruby>, <rt>, <rp>?

Ответ​

Эти теги предназначены для аннотации текста (например, фуригана в японском языке):

<ruby>
    漢 <rt>かん</rt>
    字 <rt>じ</rt>
</ruby>

<rp> содержит скобки для браузеров без поддержки ruby-аннотаций.

Вопрос​

Что такое «document outline» и работает ли он в браузерах?

Ответ​

Document outline — теоретическая структура документа, основанная на вложении секций и заголовков (<h1>–<h6>). На практике ни один браузер и экранный читалок её не реализуют. Поэтому важно использовать последовательную иерархию заголовков.

Вопрос​

Можно ли использовать пробелы в значениях атрибутов id или class?

Ответ​

  • В id пробелы недопустимы — значение должно быть одним токеном.
  • В class пробелы разделяют несколько имён классов: class="btn primary large" означает три класса.

Вопрос​

Что произойдёт, если не указать alt у <img>?

Ответ​

Браузер будет считать изображение декоративным, но поведение вспомогательных технологий может быть непредсказуемым. Некоторые читалки прочитают имя файла или URL. Лучше всегда указывать alt.

Вопрос​

Как HTML обрабатывает символы вне диапазона UTF-8?

Ответ​

При корректной кодировке (<meta charset="UTF-8">) все Unicode-символы отображаются правильно. Если символ не поддерживается шрифтом, отображается placeholder (□ или ). Сам HTML не ограничивает набор символов.

Вопрос​

Что такое «foreign content» в HTML?

Ответ​

Foreign content — это фрагменты разметки из других пространств имён, например SVG или MathML, встроенные в HTML-документ. Браузер переключает парсер в соответствующий режим при входе в такие элементы.

Вопрос​

Поддерживает ли HTML комментарии внутри тегов?

Ответ​

Нет. Комментарии <!-- --> допустимы только между тегами или внутри текстового содержимого. Конструкция <div <!-- комментарий --> class="test"> недопустима и приведёт к ошибке парсинга.

Вопрос​

Как работает механизм «browsing context»?

Ответ​

Browsing context — это среда, в которой отображается документ (вкладка, окно, iframe). Каждый <iframe> создаёт свой browsing context. Это влияет на историю, сессию, origin и изоляцию.

Вопрос​

Что такое «top-level browsing context»?

Ответ​

Top-level browsing context — это основной документ, открытый во вкладке или окне браузера (не внутри iframe). Он является корнем дерева browsing contexts.

Вопрос​

Можно ли создать HTML-документ без <body>?

Ответ​

Да. Теги <html>, <head>, <body> могут быть опущены. Браузер автоматически создаст их при построении DOM. Однако явное указание улучшает читаемость и поддерживаемость.

Вопрос​

Какой минимальный валидный HTML-документ?

Ответ​

Минимальный валидный HTML5-документ:

<!DOCTYPE html>
<title>Заголовок</title>
<p>Содержимое</p>

Браузер автоматически добавит <html>, <head>, <body>.

Освоение главы0%