HTML: средний уровень

Если вы уже уверенно владеете основами HTML и хотите перейти на следующий уровень, тестовые задания среднего уровня на платформе HeadHunter (hh.ru) помогут углубить ваши знания и проверить умение применять их в более сложных ситуациях. Здесь уже недостаточно просто знать базовые теги — потребуется понимание семантической структуры страниц, правильное использование вложенности элементов, атрибутов и работа с формами и таблицами. В этой статье мы разберем примеры таких задач, дадим развернутые ответы и объясним, как избежать типичных ошибок.

👉🏻Навигация и ссылки по всем материалам в Telegram

Вопрос 1

Вам нужно настроить корректное отображение страницы на мобильных устройствах, установив ширину области просмотра равной ширине устройства. Какую строку кода нужно добавить, чтобы это сделать?

Варианты ответа:

<meta name="viewport" content="width=device-width, maximum-scale=2.0">
<meta name="viewport" content="width=800">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="viewport" content="width=device-width">

Обоснование:
Тег <meta name="viewport"> используется для управления отображением веб-страницы на мобильных устройствах. Указание width=device-width задаёт ширину области просмотра равной ширине устройства, что и требуется по условию задачи.

Вариант 1: Включает параметр maximum-scale=2.0, что ограничивает возможность масштабирования страницы, но это не является строго обязательным по задаче.
Вариант 2: Устанавливает фиксированную ширину области просмотра (800px), что не подходит для адаптивного отображения.
Вариант 3: Корректно задаёт ширину устройства через width=device-width и начальный масштаб (initial-scale=1.0), что является стандартным подходом.
Вариант 4: Устанавливает user-scalable=no, что отключает возможность масштабирования пользователем. Это может ухудшить пользовательский опыт.
Вариант 5: Минимальный корректный вариант для выполнения требования.

Правильный ответ:
3. <meta name="viewport" content="initial-scale=1.0, width=device-width">

Вопрос 2

Какие ошибки допущены в коде?

Варианты ответа:

Отсутствует закрывающий тег для <h1>, тег <img> имеет закрывающую часть, у тега <b> отсутствует закрывающая часть.
Отсутствует закрывающий тег для <meta>, тег <img> имеет закрывающую часть, отсутствует закрывающий тег для <div>.
Отсутствует закрывающий тег для <footer>, у тега <b> отсутствует закрывающая часть, отсутствует закрывающий тег для <div>.
Отсутствует закрывающий тег для <p>, отсутствует закрывающий тег для <div>, отсутствует закрывающий тег для <meta>.
Отсутствует закрывающий тег для <div>, тег <img> имеет закрывающую часть, у тега <b> отсутствует закрывающая часть.

Обоснование:

Анализируем ошибки:

Тег <b>: Внутри параграфа <p> открывается тег <b>, но отсутствует его закрывающий тег (</b>).
Тег <img>: Тег <img> должен быть одиночным (самозакрывающимся) и не требует закрывающего тега </img>.
Тег <div>: В коде отсутствует закрывающий тег для <div>, что нарушает структуру HTML.
Тег <meta>: Не требует закрывающего тега, так как является одиночным.
Теги <h1> и <footer>: Оба имеют правильные открывающие и закрывающие теги.

Вывод:
Правильный ответ:
3. Отсутствует закрывающий тег для <footer>, у тега <b> отсутствует закрывающая часть, отсутствует закрывающий тег для <div>.

Вопрос 3

В макете есть фраза “Итальянская кухня”. С помощью какого тега вы разметите данный элемент?

Варианты ответа:

С помощью тега <h1>
С помощью тега <a>
С помощью тега <p>
С помощью тега <span>
С помощью тега <li>

Обоснование:

Тег <h1>: Используется для основного заголовка страницы. В данном случае фраза "Итальянская кухня" не является заголовком всей страницы, поэтому этот тег не подходит.
Тег <a>: Применяется для ссылок. "Итальянская кухня" не является ссылкой, поэтому этот тег не подходит.
Тег <p>: Используется для разметки параграфов текста. Однако, текст "Итальянская кухня" носит декоративный характер и обычно не оформляется в виде параграфа.
Тег <span>: Это универсальный элемент для выделения части текста или контейнера, который идеально подходит для стилизации таких коротких фраз, как "Итальянская кухня".
Тег <li>: Применяется только в списках, и здесь список не используется.

Правильный ответ:
4. С помощью тега <span>

Вопрос 4

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

Варианты ответа:

На данной странице не должно быть заголовка первого уровня.
Явного заголовка первого уровня на странице нет, его нужно добавить скрытым.
Элемент с текстом “Главная”.
Только элемент с текстом “Дубай, ОАЭ”.
Все заголовки карточек должны быть заголовком первого уровня <h1>.

Обоснование:

Заголовок первого уровня <h1> должен быть уникальным на странице и отражать её главную суть. В данном макете:

"Главная": Не является подходящим заголовком, так как это служебный элемент навигации.
Карточки мест (например, "Дубай, ОАЭ"): Они относятся к контенту страницы, но заголовком первого уровня они быть не могут, так как их несколько, и они описывают отдельные элементы.
Добавление скрытого заголовка: Если явного заголовка первого уровня нет, логично добавить его скрытым (например, "Популярные туры"), чтобы корректно структурировать страницу.

Вывод:
Правильный ответ:
2. Явного заголовка первого уровня на странице нет, его нужно добавить скрытым.

Вопрос 5

Вы хотите добавить к форме скрытое поле, чтобы передавать на сервер данные, которые пользователь не вводил вручную. Что нужно сделать, чтобы реализовать этот функционал?

Варианты ответа:

Добавить элемент <input type="hidden"> с нужным значением внутри формы.
Вставить скрытый элемент <input type="text" style="display: none;"> и установить его значение через JavaScript.
Использовать элемент <input type="password" hidden> для передачи данных на сервер.
Добавить элемент <input type="hidden"> с атрибутом value="0" и затем изменить его значение через CSS.
Использовать атрибут hidden внутри элемента <input> и задать ему значение через JavaScript.

Обоснование:
Скрытое поле <input type="hidden"> является стандартным HTML-элементом для передачи данных на сервер, которые пользователь не видит и не вводит вручную. Этот тег:

Отображается как невидимый элемент.
Позволяет указать значение с помощью атрибута value.
Прост и интуитивно понятен.

Разбор вариантов:

Правильный подход: Использование <input type="hidden"> — стандартный и рекомендуемый способ решения задачи.
Использование <input type="text" style="display: none;"> создаёт элемент, который скрыт через CSS, но это усложняет код и не рекомендуется.
<input type="password" hidden> используется для паролей, но это неверный способ передачи данных, так как оно не является скрытым полем.
Изменение значения через CSS невозможно, так как CSS не работает с атрибутами.
Использование атрибута hidden в <input> некорректно, так как атрибут hidden предназначен для скрытия HTML-элементов, а не для передачи данных.

Правильный ответ:
1. Добавить элемент <input type="hidden"> с нужным значением внутри формы.

Вопрос 6

Вы добавляете текстовый блок на веб-страницу, который содержит цитату. Какой атрибут вам нужно использовать в элементе <blockquote>, чтобы указать источник цитаты?

Варианты ответа:

Атрибут title в элементе <blockquote>
Атрибут link в элементе <blockquote>
Атрибут cite в элементе <blockquote>
Атрибут src в элементе <blockquote>
Атрибут href в элементе <blockquote>

Обоснование:

Тег <blockquote> используется для выделения больших блоков цитат. Чтобы указать источник цитаты, HTML предоставляет атрибут cite. Этот атрибут позволяет добавить URL-адрес или текст, который идентифицирует источник цитируемого материала.

Разбор вариантов:

title: Используется для создания всплывающей подсказки, но не подходит для указания источника.
link: Не существует как атрибут для тега <blockquote>.
cite: Это правильный атрибут для указания источника цитаты.
src: Используется для тегов <img>, <audio>, <video>, но не для <blockquote>.
href: Используется для ссылок в теге <a>, но не для <blockquote>.

Правильный ответ:
3. Атрибут cite в элементе <blockquote>

Вопрос 7

Какая ошибка допущена в следующем коде?

Исходный код:

Варианты ответа:

Отсутствует обязательная заголовочная ячейка таблицы <th>.
Элемент <td colspan="2">Ячейка 3</td> лишний.
Элемент <td>Ячейка 4</td> лишний.
У тега <table> отсутствует обязательный атрибут border.
У тегов <tr> отсутствует обязательный атрибут char.

Обоснование:

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

Обязательная заголовочная ячейка (<th>): Строго обязательной заголовочной ячейки в таблице нет, если это не таблица с заголовками.
Использование colspan="2": Данная конструкция указывает, что ячейка занимает две колонки. Однако в текущем коде вторая ячейка (<td>Ячейка 4</td>) идёт следом, что приводит к нарушению структуры таблицы (слишком много ячеек в строке).
Элемент <td>Ячейка 4</td>: Он действительно лишний, так как строка уже занята ячейкой с атрибутом colspan="2".
Атрибут border: Он необязательный и используется только для визуального оформления.
Атрибут char: Он устарел и редко используется в HTML5.

Правильный ответ:
3. Элемент <td>Ячейка 4</td> лишний.

Вопрос 8

Вам нужно добавить к видео субтитры для пользователей, чтобы они могли читать текст при просмотре. Какой тег и атрибут вы используете для добавления субтитров?

Варианты ответа:

Тег <track> с атрибутом kind="descriptions"
Тег <track> с атрибутом kind="chapters"
Тег <track> с атрибутом kind="metadata"
Тег <track> с атрибутом kind="subtitles"
Тег <track> с атрибутом kind="captions"

Обоснование:

Тег <track> используется для добавления текстовых дорожек к мультимедийным элементам, например <video> или <audio>. Это могут быть субтитры, описания, главы и другая информация.
Атрибут kind определяет тип добавляемой дорожки:subtitles: Используется для субтитров, отображаемых на экране для зрителей.
captions: Предназначен для текстов, которые включают дополнительную информацию для людей с ограничениями по слуху (например, описания звуков).
descriptions: Описывает визуальные элементы для людей с нарушениями зрения.
chapters: Обозначает главы мультимедийного контента.
metadata: Хранит метаданные, не отображаемые пользователю.

Так как вопрос касается обычных субтитров для пользователей, необходимо использовать атрибут kind="subtitles".

Правильный ответ:
4. Тег <track> с атрибутом kind="subtitles".

Вопрос 9

Вам нужно создать навигационное меню в шапке сайта. Что необходимо сделать, чтобы реализовать этот функционал?

Варианты ответа:

Обернуть навигационное меню тегом <header>, а внутри использовать тег <menu>
Использовать только тег <nav> без дополнительных тегов
Вложить тег <nav> внутри тега <header>
Вложить тег <header> внутри тега <nav>
Обернуть навигационное меню тегом <header>, а внутри использовать тег <nav>

Обоснование:

Тег <header>: Используется для обозначения заголовочной части страницы или раздела. Внутри него часто размещают логотип, название сайта, навигацию и другие ключевые элементы шапки.
Тег <nav>: Это семантический элемент, используемый для определения основного блока навигации (меню).
Правильная структура: По стандарту HTML5, навигационное меню, расположенное в шапке сайта, обычно создаётся следующим образом:<header> оборачивает шапку сайта.
<nav> располагается внутри <header> для обозначения навигационного меню.

Другие варианты:

<menu>: Устаревший тег, который редко используется и не подходит для современных семантических структур.
Использование только <nav>: Это нарушает логику структуры страницы, так как шапка сайта должна быть явно обозначена.
Вложение <header> в <nav>: Нарушение семантики HTML5, так как <header> — более общий контейнер.

Правильный ответ:
5. Обернуть навигационное меню тегом <header>, а внутри использовать тег <nav>.

Вопрос 10

С помощью SVG вам необходимо нарисовать прямоугольник. Каким тегом вы воспользуетесь?

Варианты ответа:

<path>
<polygon>
<rect>
<circle>
<line>

Обоснование:

<path>: Используется для сложных форм и кривых, а не для стандартных геометрических фигур.
<polygon>: Предназначен для многоугольников с произвольным числом сторон, что делает его избыточным для простого прямоугольника.
<rect>: Это правильный тег для создания прямоугольников и квадратов в SVG. У него есть атрибуты x, y, width, и height, которые позволяют задать размеры и положение прямоугольника.
<circle>: Применяется для рисования окружностей.
<line>: Используется для рисования линий, а не фигур.

Правильный ответ:
3. <rect>

Вопрос 11

Вам необходимо создать класс элементу с активным состоянием, который находится в блоке hero. Выберите вариант ответа, в котором содержится правильный код для выполнения этой задачи.

Анализ вариантов:

hero__element--active: Этот вариант соответствует методологии БЭМ (Блок, Элемент, Модификатор). Блок — это hero, элемент — это hero__element, а активное состояние обозначается модификатором --active. Данный подход является правильным.
hero_active__element: Не соответствует правилам БЭМ, так как модификатор должен быть после элемента, а не перед ним.
<divclass="hero">: Неверное написание атрибута class. Между div и class отсутствует пробел.
hero__element hero__element--active: Этот вариант корректен и допускается, если необходимо использовать два класса (основной и модификатор).
hero__element hero__element-active: Использование -active вместо --active нарушает правила БЭМ.

Правильный ответ:
4. <div class="hero"> <div class="hero__element hero__element--active"></div> </div>

Вопрос 12

Вы создаете карточку продукта на веб-странице, содержащую изображение, название и цену. Чтобы сделать карточку доступной для пользователей с ограниченными возможностями, как вы должны разметить изображение?

Варианты ответа:

Использовать тег <figure> и <figcaption> для добавления описания к изображению.
Добавить атрибут role="img" для явного указания, что элемент является изображением.
Использовать атрибут alt с описанием изображения.
Добавить атрибут aria-label для предоставления альтернативного текста.
Использовать CSS для визуального скрытия текста, связанного с изображением.

Обоснование:

Использовать <figure> и <figcaption>: Эти теги полезны для добавления подписи к изображению, но они не являются обязательными для доступности и не заменяют alt.
Добавить role="img": Этот атрибут может быть использован, но он не обязателен для стандартного тега <img>, так как <img> уже имеет встроенную семантику.
Использовать атрибут alt: Это лучший подход для обеспечения доступности, так как alt предоставляет альтернативный текст для экранных читалок, используемых людьми с нарушениями зрения.
Добавить aria-label: Этот атрибут может быть использован, но для тега <img> лучше использовать alt, так как он предназначен специально для описания изображений.
Использовать CSS для скрытия текста: Это никак не улучшает доступность, а только скрывает текст.

Правильный ответ:
3. Использовать атрибут alt с описанием изображения.

Вопрос 13

На странице присутствует уведомление об ошибке, которое появляется после неправильного ввода данных. Какой атрибут ARIA необходимо использовать, чтобы указать вспомогательным технологиям, таким как скринридер, что это сообщение — предупреждение?

Варианты ответа:

Атрибут aria-checked="true"
Атрибут aria-label="warning"
Атрибут aria-expanded="true"
Атрибут aria-live="assertive"
Атрибут aria-hidden="true"

Обоснование:

aria-checked="true": Используется для обозначения состояния элемента, например, чекбокса, и не подходит для предупреждений.
aria-label="warning": Предназначен для описания элемента, но не сигнализирует о предупреждении.
aria-expanded="true": Применяется для раскрывающихся элементов, например, аккордеонов, и не имеет отношения к уведомлениям.
aria-live="assertive": Это правильный ответ, так как этот атрибут сообщает вспомогательным технологиям о том, что сообщение имеет высокий приоритет и должно быть немедленно озвучено пользователю (например, в случае ошибки).
aria-hidden="true": Противоположный атрибут, который скрывает элемент от вспомогательных технологий, что не подходит для уведомлений.

Правильный ответ:
4. Атрибут aria-live="assertive".

Заключение

Дорогие читатели! Если материалы данной статьи помогли вам успешно пройти тест на платформе HeadHunter, буду признателен, если вы поставите лайк 👍🏻 именно той статье, которая соответствовала вашему уровню подготовки. Также, если тестирование оказалось неудачным ❌, пожалуйста, оставьте комментарий 📝 с указанием количества ошибок допущенных в тесте.

Эта обратная связь чрезвычайно важна. Она позволит в дальнейшем проанализировать эффективность материалов, а также создать аналитическое заключение для всей серии статей по прохождению тестирования на платформе. Спасибо за вашу помощь в совершенствовании контента!