Тест по HTML — Сложный уровень
Чем отличается <section> от <article>?
- 1. article — это часть страницы, section — самостоятельная публикация
- 2. section используется только для навигации
- 3. article — независимый блок, section — логическая секция документа
- 4. section всегда вложен в article
Что делает тег <template>?
- 1. Позволяет вставить HTML-код через iframe
- 2. Используется для динамического импорта CSS
- 3. Создает видимый элемент при загрузке страницы
- 4. Хранит невидимый шаблон, который можно клонировать в JavaScript
Что делает атрибут loading="lazy" в <img>?
- 1. Загружает изображение сразу после загрузки DOM
- 2. Отложенная загрузка изображения, пока оно не появится в зоне видимости
- 3. Отключает кэширование изображения
- 4. Принудительно сохраняет изображение в локальное хранилище
Как <picture> помогает в адаптивной загрузке изображений?
- 1. Заменяет тег <img>
- 2. Позволяет загружать изображения в зависимости от браузера и условий отображения
- 3. Ограничивает разрешение изображения
- 4. Служит только для SVG
Что делает атрибут role="button"?
- 1. Превращает любой элемент в нативную кнопку
- 2. Позволяет браузеру стилизовать элемент как кнопку
- 3. Указывает скринридеру, что элемент выполняет роль кнопки
- 4. Добавляет к элементу анимацию нажатия
Что делает атрибут defer у тега <script>?
- 1. Останавливает загрузку стилей
- 2. Загружает и выполняет скрипт сразу
- 3. Выполняет скрипт после полной загрузки страницы
- 4. Загружает скрипт параллельно, но выполняет его после разбора DOM
Как повысить доступность формы в HTML?
- 1. Использовать только текстовые поля
- 2. Не указывать type у input
- 3. Добавлять ARIA-атрибуты и лейблы к каждому элементу
- 4. Скрывать все поля
Чем отличается async от defer в <script>?
- 1. Оба делают одно и то же
- 2. async выполняет скрипт после загрузки, defer — при инициализации
- 3. async выполняется сразу после загрузки, defer — после DOM
- 4. defer не работает без jQuery
Что делает <noscript>?
- 1. Отображает HTML для браузеров без поддержки JavaScript
- 2. Удаляет скрипты со страницы
- 3. Отключает стили
- 4. Показывает модальное окно
Какой мета-тег помогает сделать страницу адаптивной?
- 1. <meta name=theme-color>
- 2. <meta charset=UTF-8>
- 3. <meta name=viewport content=width=device-width, initial-scale=1.0>
- 4. <meta name=robots>
Как обеспечить SEO-дружественную структуру HTML?
- 1. Использовать только div и span
- 2. Применять семантические теги и корректные заголовки
- 3. Скрывать все элементы через display: none
- 4. Добавлять inline-стили ко всем тегам
Что делает атрибут autocomplete в <input>?
- 1. Запрещает ввод данных
- 2. Автоматически отправляет форму
- 3. Предлагает автозаполнение из истории браузера
- 4. Заполняет поле дефолтным значением
Зачем нужен Shadow DOM?
- 1. Для кэширования стилей
- 2. Изоляция стилей и логики внутри компонентов
- 3. Глобальное подключение JavaScript
- 4. Скрытие HTML от пользователя
Что делает contenteditable?
- 1. Запрещает редактирование HTML
- 2. Позволяет редактировать текст прямо на странице
- 3. Добавляет модальное окно редактирования
- 4. Удаляет элементы DOM
Как работает <meta http-equiv="refresh" content="10;url=https://example.com">?
- 1. Меняет title страницы каждые 10 секунд
- 2. Перенаправляет пользователя через 10 секунд
- 3. Очищает кэш страницы
- 4. Перезагружает стили
Что делает атрибут crossorigin в теге <img>?
- 1. Запрещает загрузку внешних изображений
- 2. Включает CORS для изображений
- 3. Ускоряет загрузку
- 4. Позволяет редактировать изображения
Что такое custom elements?
- 1. Пользовательские компоненты Web Components
- 2. Стили CSS
- 3. Плагины JavaScript
- 4. Индивидуальные HTML-разметки
Как реализуется доступность таблиц в HTML?
- 1. Только с помощью стилей
- 2. Использованием тегов <caption>, <thead>, <tbody>, <th> и ARIA
- 3. Таблицы не могут быть доступны
- 4. Через JavaScript
Что делает атрибут type="module" в <script>?
- 1. Разбивает CSS по модулям
- 2. Позволяет использовать ES-модули и импортировать зависимости
- 3. Добавляет поддержку JSX
- 4. Ускоряет выполнение скрипта
Для чего нужен тег <mark>?
- 1. Подсвечивает важный текст
- 2. Создает сноску
- 3. Формирует ссылку
- 4. Заменяет <strong>