Dan Levy

Квиз: Место ли HTML в вашем резюме?

Покажи, на что ты способен!

Думаете, вы профи в HTML5?

В конце концов, отличить <div> от <span> вы в состоянии, верно? Но насколько хорошо вы разбираетесь в продвинутых семантических элементах HTML5?

Примечание: если вы не пройдете этот тест, вы по закону обязаны удалить пункт «Владение HTML» из своего резюме.

Поехали!

1. 

Разминка

Какова основная роль элемента <ul> в HTML?

Тег <ul> создает неупорядоченный список, элементы которого обычно помечаются маркерами (bullets).

2. 

Продвинутый семантический HTML

Что именно представляет собой элемент <dd> в HTML?

Элемент <dd> определяет описание, определение или значение в списке описаний. Он используется внутри тегов <dl> в паре с <dt> (Description Term).

Это крайне полезно при отображении данных в формате «ключ-значение». Типичные примеры: информация в профиле пользователя, настройки или статистические показатели.

<dl>
<dt>JS</dt>
<dd>Client-side</dd>
<dd>Server-side</dd>


<dt>HTML</dt>
<dd>Client-side</dd>
</dl>

3. 

Продвинутый семантический HTML

В каких случаях следует использовать элементы <figure> и <figcaption>?

Тег <figure> обычно используется для оборачивания самодостаточного (медиа) контента, такого как изображение или график, вместе с тегом <figcaption>, который служит для подписи.

Это полезно для изображений, диаграмм, фрагментов кода и многого другого.

<figure>
<img src="image.jpg" alt="Description of image">
<figcaption>Image caption</figcaption>
</figure>

4. 

Продвинутый семантический HTML

Каково назначение элемента <article> в HTML?

Элемент <article> используется для определения самодостаточного фрагмента контента, который может распространяться или переиспользоваться независимо.

Его часто применяют для постов в блогах, новостных заметок, сообщений на форумах или пользовательских комментариев.

Вы можете использовать несколько артиклей на одной странице (например, для бесконечной прокрутки). Или же вкладывать их друг в друга для создания иерархии «независимого контента».

<article>
<h2>Article Title</h2>
<p>Article content...</p>
<article class="discussion">
<h3>Comment by User</h3>
<p>Comment content...</p>
</article>
</article>

5. 

Продвинутый семантический HTML

Каково назначение элементов <fieldset> и <legend> в форме?

<fieldset> используется для группировки связанных элементов управления формой, а <legend> предоставляет заголовок или метку для этой группы, что значительно улучшает доступность.

Это крайне полезно для логического разделения разделов формы, например, для блока с адресом доставки или платежными реквизитами.

<fieldset>
<legend>Shipping Address</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
...
</fieldset>
<fieldset>
<legend>Payment Details</legend>
<label for="card">Card Number:</label>
<input type="text" id="card" name="card">
...
</fieldset>

6. 

Продвинутый семантический HTML

Каково назначение элемента <meter>?

Элемент <meter> используется для представления скалярного (одиночного) измерения в установленном диапазоне, такого как температура, использование дискового пространства или результаты голосования.

Он может показаться похожим на индикатор <progress>, однако прогресс-бары ВСЕГДА начинаются с нуля. Таким образом, элементы <progress> показывают процент завершения, в то время как <meter> отображает любое значение внутри определяемого диапазона.

<meter min="-60" max="130" value="75" /> 75°F
<meter min="0" max="100" value="75" /> 75%

7. 

Семантический HTML

Для чего используется элемент <source>?

Элемент <source> используется для указания доступных медиаформатов.

В частности, он применяется внутри элементов <video>, <audio> и <picture>, позволяя браузеру выбрать наиболее подходящий формат.

<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

8. 

Продвинутый семантический HTML

Как следует использовать элемент <hgroup>?

Элемент <hgroup> группирует заголовок с сопутствующим вторичным контентом, обычно одним или несколькими элементами <p>.

Это полезно, когда у заголовка есть подзаголовок, слоган или альтернативное название, которое не должно становиться отдельным заголовком в структуре (outline) документа.

<article>
<hgroup>
<h1>Frankenstein</h1>
<p>Or: The Modern Prometheus</p>
</hgroup>
<section>
<h2>Chapter 1</h2>
<p>...</p>
</section>
</article>

9. 

Продвинутый семантический HTML

Для чего в HTML используется элемент <menu>?

Элемент <menu> представляет собой список команд или интерактивных элементов управления.

Если ваш список состоит из навигационных ссылок, используйте <nav> вместе с <ul>. Используйте <menu> для элементов, подобных панели инструментов, или списков команд.

<menu>
<li><button type="button">Copy</button></li>
<li><button type="button">Paste</button></li>
</menu>

10. 

Продвинутый семантический HTML

Какую роль играют элементы <details> и <summary> в HTML?

<details> позволяет создавать сворачиваемый контент, а <summary> задает видимый заголовок для этого контента.

Это крайне полезно для FAQ, раскрывающихся секций или любого контента, состояние которого можно переключать.

<details>
<summary>Click to expand 🤯</summary>
<p>Hidden content! 💥</p>
</details>

11. 

Продвинутый семантический HTML

Для чего следует использовать элемент <dialog>?

Элемент <dialog> используется для создания всплывающих или модальных окон. Он предоставляет семантическую разметку, расширенные возможности CSS и нативный API для управления этими взаимодействиями.

Используйте JavaScript, чтобы открыть его с помощью .showModal() для модальных окон или .show() для немодальных, и закройте его методом .close() или через отправку формы с атрибутом method="dialog".

<dialog>
<h2>Modal Title</h2>
<p>Modal content...</p>
<button>Close</button>
</dialog>

12. 

Продвинутый семантический HTML

Как используется элемент <time> в HTML?

Элемент <time> используется для представления дат, времени или продолжительности. Он может содержать текст, понятный человеку, и атрибут datetime с данными, понятными машине. В HTML не существует элемента <date>.

13. 

Продвинутый семантический HTML

В чем заключается основное назначение атрибутов ARIA?

Атрибуты ARIA (Accessible Rich Internet Applications) повышают доступность веб-контента, предоставляя дополнительный контекст для экранных дикторов (screen readers) и других вспомогательных технологий.

Существуют роли (roles), состояния (states) и свойства (properties), которые используются для описания элементов.

<button aria-label="Close" aria-expanded="true">X</button>
<main aria-live="polite">...</main>
<dialog
role="alertdialog"
aria-modal="true"
aria-labelledby="dialog_label"
aria-describedby="dialog_desc"
></dialog>

14. 

Продвинутый семантический HTML

Для чего используется атрибут role в HTML?

Атрибут role описывает назначение элемента для вспомогательных технологий, помогая улучшить доступность (accessibility).

Ну что, как результаты? Готовы использовать больше семантических элементов в следующем проекте? 🚀

Или смирились с <div> и <span> до конца жизни? 😅

Пишите в комментариях! 👇

Loading comments...