Хабр, привет!
Меня всегда раздражали вопросы на проверку знаний 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 ООО «МТ ФИНАНС»
Комментарии (20)
TAZAQ
16.06.2026 09:25Можно ли на одной странице использовать несколько элементов main?
Ну технически, ответ “можно” без всяких но
Aggle
16.06.2026 09:25Семь правильных. С учётом того, что html-ем я последний раз занимался уже не помню сколько лет назад, — наверное неплохо (ручки-то помнят!).
Спасибо за толковую статью!
gabirx
16.06.2026 09:25забавно, занимаюсь рендерингом html, и понятия не имею как оно отрабатывать должно. надо смотреть спецификации, которые постоянно обновляются
TooBigBigs
Классно, спасибо! Примерно половину ответил правильно.
Это при том, что в разработке я придерживаюсь примерно такой последовательности :
сначала используй возможности HTML
не получается - попробуй CSS
не получается - попробуй северный уровень (PHP)
не получается (точно не получается? Подумай ещё!) - только тогда JS
С недоумением и расстройством наблюдаю, как большинство начинают с последнего или в лучшем случае предпоследнего и мучаются, мучаются, мучаются… Потом прихожу я, удаляю 80% кода и офигеваю с того, как они умудрились пропустить первое мимо своих мозгов.
Akuma
Начинают с последнего потому, что знают что через голый html/css многое не получить. Любой шаг влево-вправо и всё
TooBigBigs
И да, и нет. Чаще не знают, как много можно получить. Не думают, что может и не надо делать шаги влево-вправо.
Недавно я удалил несколько КБ. кода и пару sql-запросов, заменив всё на 2 строчки CSS! Хитрые строчки, их написал ЧатЖПТ, а я просто предположил, что так, наверное, должно быть, можно.
До этого кодер самоотверженно работал несколько дней, создавая минное поле из багов, решая эту второстепенную задачу на PHP. То есть, получается, не проверив возможность низкоуровневой реализации подходами 1-2, убился на 3-м и запоганил кусочек проекта.
Akuma
А можно подробнее что там было?
Не представляю что вы там такое заменяли на полностью клиентскую часть
TooBigBigs
Очень просто : подсчет числа объектов в выборке SQL-объектов. По неведомой причине выбранный CRUD-фреймворк не давал такой элементарной возможности в рамках своего API.
Кодер грустно писал параллельнный SQL-запрос с нуля руками, а там куча условий и ещё пара динамических галочек на JS.
Я: подсчитал число TR внутри TABLE через CSS, вывел после последнего TR.
Понятно, что решение не содержит числа на сервере, но и задача ставилась “Сделать подсчет числа объектов на всякий случай”. Её в ТЗ и требованиях не было, скорее второстепенный функционал для собственного же удобства.
Итого: 15 минутное решение закрыло задачу VS несколько дней работы и усложнение поддержки в 2 раза.
randomsimplenumber
Backend'ера посадили вместо верстальщика. И какого результата ожидали увидеть?
Wesha
«Когда у вас в руках молоток, все предметы начинают казаться подозрительно похожими на гвозди» ©
randomsimplenumber
Вот именно. Прелесть в том что коллектив несколько дней любовался как чувак своим молотком пытается штукатурить.
TooBigBigs
Я не умею разделять задачи на бэкенд и верстку. Это приводит к тому, что кодер делает кривую-косую кнопку, а на предъявы отвечает, что он не дизайнер.
Верстальщик верстает так, что его код невозможно загнать в цикл, а на предъявы отвечает, что он не кодер.
Дизайнер рисует так, что сверстать это через циклы действительно сложно, а на предъявы отвечает, что он не верстальщик, не кодер, и вообще он так видит.
И все они не понимают, что делают в целом.
В какой-то момент я принял решение гнать их всех в шею и оставить одного более-менее вменяемого “кодера”. Теперь могу добавить, что и его стоило бы тогда же выгнать, вполне успешно заменяем ЧатЖПТ.
randomsimplenumber
Не хватает архитектора. Дожен же хоть кто то понимать как оно работает.
TooBigBigs
Архитектор - это я.
Только вот кончилось всё тем, что мне на порядок проще самому сделать всё: от анализа бизнес-задач и дизайна интерфейса до финального разворачивания проекта на сервере и настройки DNS-зон доменов.
Реально проще, чем пытаться делегировать, поскольку на простых задачах моя продуктивность ~= 1/2 продуктивности всех троих, на средних - x2, а на сложных - примерно x10.
Такая вот странная заковыка вышла - полный fullstack, я один до 30 раз эффективнее “обычных” разработчиков и заменяю продакшн целиком.
Впрочем, радоваться особо нечему, ибо ни счастья, ни автоматического изменения дохода это автоматически не дает. Со счастьем скорее даже наоборот.
randomsimplenumber
Так может не ваша продуктивность х10, а ихняя х/10.
gerbert_MX
я постепенно пришел к JS (я не фронт-енд, просто балуюсь) потому что получается максимум результата (динамического) при минимуме сторонних приседаний. JS работает ожидаемо, тот же css может тебя подвести на разных браузерах, а JS с canvas один, един и неделим
я понимаю что в плане поддержки теми же слабовидящими или с выключенным js такие поделия не катят, но я делаю для себя или узкого круга лиц и меня функционал устраивает
особенно хорошо сейчас с неронками - WPA что будет работать без интернета (то есть "установить" можно с локалхоста) с нужным тебе функционалом, причем нейроки умеют работать с бразуером, а значит нужно просто нарезать задачу и то как его проверять что бы на выходе получить уже готовое или практически готовое
maxshopen
Как то php не вписывается в последовательность. Можно пример что вы имели ввиду?
TooBigBigs
Если что-то можно решить путем отдельного запроса к серверу (PHP или нет - не важно), и на нём обработать логику, то лучше так и сделать.
Пример: юзер загрузил мышкой фотки к уже имеющимся. Надо приделать к новым фоткам кнопки. Не надо городить никакого кода - просто принудительно обновим страницу, кнопки сами приделаются по F5.