Сложный

Тест по HTML — Продвинутый уровень

Семантика

Доступность

SEO

Оптимизация

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

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

1 / 0

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

Позволяет вставить HTML-код через iframe
Используется для динамического импорта CSS
Создает видимый элемент при загрузке страницы
Хранит невидимый шаблон, который можно клонировать в JavaScript

2 / 0

Что делает атрибут loading="lazy" в <img>?

Загружает изображение сразу после загрузки DOM
Отложенная загрузка изображения, пока оно не появится в зоне видимости
Отключает кэширование изображения
Принудительно сохраняет изображение в локальное хранилище

3 / 0

Как <picture> помогает в адаптивной загрузке изображений?

Заменяет тег <img>
Позволяет загружать изображения в зависимости от браузера и условий отображения
Ограничивает разрешение изображения
Служит только для SVG

4 / 0

Что делает атрибут role="button"?

Превращает любой элемент в нативную кнопку
Позволяет браузеру стилизовать элемент как кнопку
Указывает скринридеру, что элемент выполняет роль кнопки
Добавляет к элементу анимацию нажатия

5 / 0

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

Останавливает загрузку стилей
Загружает и выполняет скрипт сразу
Выполняет скрипт после полной загрузки страницы
Загружает скрипт параллельно, но выполняет его после разбора DOM

6 / 0

Как повысить доступность формы в HTML?

Использовать только текстовые поля
Не указывать type у input
Добавлять ARIA-атрибуты и лейблы к каждому элементу
Скрывать все поля

7 / 0

Чем отличается async от defer в <script>?

Оба делают одно и то же
async выполняет скрипт после загрузки, defer — при инициализации
async выполняется сразу после загрузки, defer — после DOM
defer не работает без jQuery

8 / 0

Что делает <noscript>?

Отображает HTML для браузеров без поддержки JavaScript
Удаляет скрипты со страницы
Отключает стили
Показывает модальное окно

9 / 0

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

<meta name=theme-color>
<meta charset=UTF-8>
<meta name=viewport content=width=device-width, initial-scale=1.0>
<meta name=robots>

10 / 0

Как обеспечить SEO-дружественную структуру HTML?

Использовать только div и span
Применять семантические теги и корректные заголовки
Скрывать все элементы через display: none
Добавлять inline-стили ко всем тегам

11 / 0

Что делает атрибут autocomplete в <input>?

Запрещает ввод данных
Автоматически отправляет форму
Предлагает автозаполнение из истории браузера
Заполняет поле дефолтным значением

12 / 0

Зачем нужен Shadow DOM?

Для кэширования стилей
Изоляция стилей и логики внутри компонентов
Глобальное подключение JavaScript
Скрытие HTML от пользователя

13 / 0

Что делает contenteditable?

Запрещает редактирование HTML
Позволяет редактировать текст прямо на странице
Добавляет модальное окно редактирования
Удаляет элементы DOM

14 / 0

Как работает <meta http-equiv="refresh" content="10;url=https://example.com">?

Меняет title страницы через 10 секунд
Перенаправляет пользователя через 10 секунд
Очищает кэш страницы
Перезагружает стили

15 / 0

Что делает атрибут crossorigin в теге <img>?

Запрещает загрузку внешних изображений
Включает CORS для изображений
Ускоряет загрузку
Позволяет редактировать изображения

16 / 0

Что такое custom elements?

Пользовательские компоненты Web Components
Стили CSS
Плагины JavaScript
Индивидуальные HTML-разметки

17 / 0

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

Только с помощью стилей
Использованием тегов <caption>, <thead>, <tbody>, <th> и ARIA
Таблицы не могут быть доступны
Через JavaScript

18 / 0

Что делает атрибут type="module" в <script>?

Разбивает CSS по модулям
Позволяет использовать ES-модули и импортировать зависимости
Добавляет поддержку JSX
Ускоряет выполнение скрипта

19 / 0

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

Подсвечивает важный текст
Создает сноску
Формирует ссылку
Заменяет <strong>

20 / 0