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

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

Элемент <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>

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

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

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

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

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

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

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

<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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Атрибуты 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>

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