Хабр, привет!
Меня всегда раздражали вопросы на проверку знаний HTML и CSS. На моей памяти я ни разу не встретил человека, который спрашивал что-то интересное. По этой причине у меня появилось несколько статей с вопросами по CSS, которые собрали достаточно много просмотров для меня.
А что касается HTML, то я ничего не написал. Сегодня буду исправляться. Сразу скажу, что это не будут вопросы в стиле: «А какие HTML5-элементы вы знаете?». Мне хочется, чтобы вам было интересно и чтобы вы узнали что-то новое.
По этой причине большинство вопросов связаны с практикой. И абсолютно точно вы не ответите на все. Хотя, может, я ошибаюсь. Вот и проверим, насколько я прав.
Давайте посмотрим, что я вам подготовил.
Корректно ли использовать атрибут inputmode со значением numeric для элемента input, в который будут вводить цифровой код?
<body>
<form>
<!-- другие элементы -->
<label for="code">Цифровой код</label>
<input inputmode="numeric" type="text" id="code">
<!-- другие элементы -->
</form>
</body>Ответ
Ответ на вопрос начнём с объяснения назначения атрибута inputmode. Он решает только одну задачу, а именно сообщает, какую виртуальную клавиатуру показывать браузерам при вводе данных на мобильных платформах.
Чтобы определиться со значением в нашем случае, нужно проанализировать формат данных, который требуется ввести пользователю. Поскольку цифровой код представляет собой набор цифр, то при его вводе должна отображаться виртуальная клавиатура только с цифрами. Для этого как раз подходит значение numeric.
Правильный ответ: Конечно, да! Значение numeric позволяет более удобно вводить цифровой код.
От какой проблемы спасают атрибуты width и height?
<body>
<svg xmlns="http://www.w3.org/svg" width="32" height="32" viewBox="0 0 256 256">
<!-- оставшиеся элементы -->
</svg>
</body>Ответ
Для ответа на вопрос нужно вспомнить, как отобразят браузеры элемент svg без атрибутов width и height. А они будут использовать значение атрибута viewBox, чтобы рассчитать размеры.
В нашем примере оно представляет собой набор четырёх чисел, разделённых пробелами. Таким способом значение задаёт прямоугольник, который определяет границы окна отображения элемента svg. Первое значение — это min-x, второе — это min-y, третье — это ширина, а четвёртое — это высота.
В итоге браузеры сделают элемент svg размером 256 пикселей на 256 пикселей, если у него не будет атрибутов width и height. По этой причине иконка может занять очень много пространства на экране, если у нас не загрузятся стили.
Чтобы этого не случилось, нужно объявлять атрибуты width и height. Так браузеры поймут размеры элемента svg сразу и не будут анализировать значение атрибута viewBox.
Правильный ответ: Атрибуты задают размеры элемента svg, чтобы иконка не занимала много пространства в случае, если стили не загрузятся.
Каким атрибутом можно сделать сразу всю группу элементов a неактивными?
Ответ
В HTML есть атрибут inert, который может сделать часть страницы недоступной для браузера. Буквально, пользователь не сможет кликнуть, сфокусироваться, ввести данные и найти через поиск по странице всё, что будет находиться в элементе с объявленным атрибутом.
В нашем примере атрибут inert поможет нам сделать все элементы a неактивными.
Правильный ответ: Атрибутом inert. Для этого его нужно добавить к элементу ul.
Я добавил название скачиваемого файла в качестве значения к атрибуту download. Можно ли так делать?
<body>
<a href="b3f7be5pc3b8w24q6g.pdf" download="Заказ №5241836">Скачать детали заказа</a>
</body>Ответ
У атрибута download можно указать значение в виде произвольной строки, которая будет являться рекомендуемым именем файла. Оно подставляется в системное окно при сохранении файла.
В нашем примере будет подставлена строка «Заказ №5241836».
Правильный ответ: Да.
Атрибут lang, объявленный для элемента span, бесполезный. Правда или ложь?
<body>
<p>
Олимпи́йский комите́т Росси́и (англ. <span lang="en">Russian Olympic Committee</span>) — организация, представляющая страну в международном олимпийском движении
</p>
</body>Ответ
Атрибут lang указывает не только основной язык страницы. Его задача — подсказать браузерам, на каком языке написан контент элемента. Эта информация, например, помогает скринридерам корректно озвучивать информацию.
Правильный ответ: Ложь. Атрибут lang поможет скринридерам корректно озвучить информацию на английском языке.
Есть ли разница между двумя фрагментами кода?
<body>
<img src="mediastore/nn-banner.webp">
</body><body>
<img src="mediastore/nn-banner.webp" alt="">
</body>Ответ
С точки зрения визуального восприятия разницы нет. Если картинка не загрузится, то пользователи в любом случае не увидят альтернативный текст. Но разница заключается в том, как скринридеры проанализируют элемент img.
В первом случае они поймут, что атрибут alt отсутствует. Вместо него они озвучат всё содержимое атрибута src. Во втором случае элемент img не будет обнаружен. Скринридеры никогда его не найдут.
Правильный ответ: Разница есть и заключается в том, что скринридеры по-разному обрабатывают элемент img и озвучивают его.
Атрибут disabled, установленный у элемента fieldset, сделает неактивными все элементы input. Правда или ложь?
<body>
<form>
<fieldset disabled>
<legend>Прозвище Дракса из «Стражей Галактики»?</legend>
<label>
<input type="radio" name="answer" value="Exterminator">
Уничтожитель
</label>
<label>
<input type="radio" name="answer" value="Destroyer">
Разрушитель
</label>
<label>
<input type="radio" name="answer" value="Accuser">
Обвинитель
</label>
</fieldset>
</form>
</body>Ответ
Элемент fieldset помогает браузерам найти сгруппированные элементы формы. По сути они воспринимают их как отдельные части. Если у элемента fieldset установлен атрибут disabled, то все интерактивные элементы внутри становятся неактивными. Они даже не передадут значения при отправке формы.
Правильный ответ: Правда.
Можно ли на одной странице использовать несколько элементов main?
Ответ
Стандартом допускается использование любого количества элементов main на странице. Единственное, что нужно сделать, это визуально отобразить один, а остальные скрыть, добавив атрибут hidden.
<body>
<main>
<!-- здесь контент -->
</main>
<main hidden>
<!-- здесь контент -->
</main>
<main hidden>
<!-- здесь контент -->
</main>
</body>Правильный ответ: Можно, только визуально должен отображаться один.
Вам нужно использовать в разметке ссылку «Наверх». Какой вариант вы выберите?
<body>
<a href="#top" aria-label="Обратно наверх">
<!-- иконка здесь -->
</a>
<!-- оставшаяся часть кода страницы -->
</body><body>
<!-- оставшаяся часть кода страницы -->
<a href="#top" aria-label="Обратно наверх">
<!-- иконка здесь -->
</a>
</body>Ответ
Если пользователь будет использовать клавишу Tab для перехода между элементами, то в первом варианте он сразу попадёт на ссылку «Наверх». Хотя он и так находится там. Получается, что он совершил лишнее действие.
Во втором варианте пользователь попадёт на ссылку, только если дойдёт до конца страницы. По этой причине лучше располагать элемент a перед закрывающим элементом body.
Правильный ответ: Вариант №2, потому что в первом пользователь попадёт на ссылку, ещё находясь в верхней части страницы.
Какая ошибка есть в разметке страницы?
<body>
<header>
<!-- здесь элементы h1 и nav -->
</header>
<main>
<section aria-labelledby="blog-heading">
<h2 id="blog-heading">Мой блог</h2>
<article aria-labelledby="heading-1">
<h4><a href="#0" id="heading-1">Мое путешествие в Москву</a></h4>
<p>Было классно. Увидел Кремль, Собор, поел в Белом кролике</p>
</article>
<article aria-labelledby="heading-2">
<h4><a href="#0" id="heading-2">Мое путешествие в Казань</a></h4>
<p>Погода была дождливой. Но чак-чак супер</p>
</article>
</section>
<!-- здесь другие элементы section -->
</main>
</body>Ответ
Анализируя разметку, можно сказать, что на странице есть заголовок первого уровня в элементе header. Далее у каждого элемента section есть заголовок второго уровня. Но почему-то в элементе article находится заголовок четвёртого уровня, а не третьего. То есть нарушена иерархия заголовков.
Это приводит к тому, что ассистивные технологии неправильно анализируют страницу. Например, в результате этой ошибки пользователям скринридера сложнее понять структуру.
Правильный ответ: Нарушена иерархия заголовков.
Есть ли разница между двумя примерами разметки блока «Хлебные крошки»?
<body>
<!-- вариант №1 -->
<nav aria-label="Хлебные крошки">
<ul>
<li><a href="../">Главная</a></li>
<li><a aria-current="page">Новости</a></li>
</ul>
</nav>
</body><body>
<!-- вариант №2 -->
<nav aria-label="Хлебные крошки">
<ol>
<li><a href="../">Главная</a></li>
<li><a aria-current="page">Новости</a></li>
</ol>
</nav>
</body>Ответ
Разница заключается в использовании элементов ul и ol. Согласно стандарту первый является неотсортированным списком, а второй, наоборот, отсортированным. Получается, у списка ol дочерние элементы должны быть расположены согласно какой-либо сортировке.
Область «Хлебные крошки» как раз представляет собой список элементов, у которого есть строгий порядок. На примере разметки из вопроса видно, что если поменять местами пункт «Новости» и «Главная», сломается структура навигации.
Правильный ответ: Есть. Поскольку элемент ol представляет собой упорядоченный список, то он лучше подходит для области «Хлебные крошки».
Заключение
Сколько правильных ответов удалось набрать вам? Если их нет совсем, то это совсем не проблема. Мои вопросы не показывают «уровень знаний». Я просто хотел помочь вам узнать про разные аспекты HTML и их практическое применение, а также подсказать, на что стоит обратить своё внимание.
Надеюсь, у меня это получилось. Обязательно поделитесь своими впечатлениями в комментариях.
На этом у меня всё. Спасибо за чтение!
P. S. Помогаю больше узнать про CSS и дружелюбные интерфейсы в своих закрытых ТГ-каналах CSS isn't magic и UX + Dev = a11y. Присоединяйтесь. Как вступить, написано в профиле.
© 2026 ООО «МТ ФИНАНС»