Quiz: Does HTML still belong on your résumé?

The <dd> element defines a description, definition, or value in a description list, used within <dl> tags to pair with <dt> (Description Term).

This is useful when showing key-value data. Profile information, Settings, and Stats are a common examples.

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

The <figure> tag is typically used to wrap self-contained (media) content, like an image or chart, along with <figcaption> to provide a caption.

This is useful for images, diagrams, code snippets, and more.

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

The <article> element is used to define a standalone piece of content that can be independently distributed or reused.

It is often used for blog posts, news articles, forum posts, or user comments.

You can use multiple articles on a page (for infinitely scrolling pages, for example). Or, you can nest them within each other to create a hierarchy of “standalone content.”

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

<fieldset> is used to group related form controls, and <legend> provides a title/label for the group, improving accessibility.

This is useful for grouping related form elements, like a section for shipping address or payment details.

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

The <meter> element is used to represent a scalar (single) measurement within a set range, such as temperature, disk usage or a vote tally.

It may seem similar to a <progress> bar, however progress bars ALWAYS start at zero. Therefore <progress> elements show a percent of completion, while a <meter> shows any value within a definable range.

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

The <hgroup> element groups a heading with related secondary content, usually one or more <p> elements.

It may be useful when a heading has a subtitle, tagline, or alternative title that should not become another heading in the document outline.

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

The <menu> represents a list of commands or interactive controls.

If your list is navigation links, use <nav> with a <ul>. Use <menu> for toolbar-like controls or command lists.

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

<details> allows for collapsible content, and <summary> specifies a visible title for the content.

This is useful for FAQs, collapsible sections, or any content that can be toggled.

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

The <dialog> element is used for pop-ups or modals, and provides semantic markup, extended CSS, and a native API for these interactions.

Use JavaScript to open it with .showModal() for modal dialogs or .show() for non-modal dialogs, and close it with .close() or a form submission using method="dialog".

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

ARIA (Accessible Rich Internet Applications) attributes enhance web accessibility by providing extra context for screen readers and other assistive technologies.

There are roles, states, and properties that can be used to describe elements.

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

The role attribute describes

the purpose of an element to assistive technologies, helping improve accessibility.