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

The <ul> tag creates an unordered list, with items typically marked by bullets.

The <dd> element defines the “Description Definition” 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 <source> element is used to specify available media formats.

Specifically used with <video>, <audio>, and <picture> elements, allowing the browser to choose the most suitable format.

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

The <hgroup> element groups a neighboring related <h1> to <h6> elements.

It may be useful if you frequently put <h1> and <h2> elements together, since the <h2> should probably be a <p> tag.

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

The <menu> functions exactly like a <ul>.

If your <li>’s have mostly links, you should use a <menu> element instead.

<menu> <!-- Instead of <ul> use a <menu> -->
  <li><a href="/home">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></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.

It’s functionally like a <div> - with a few extra built-in features.

According to MDN: JavaScript should be used to display the <dialog> element. Use the .showModal() method to display a modal dialog and the .show() method to display a non-modal dialog. The dialog box can be closed using the .close() method or using the dialog method when submitting a <form> that is nested within the <dialog> element. Modal dialogs can also be closed by pressing the Esc key.

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

The <time> element is used for date and time, which can include human-readable content and machine-readable datetime attributes.

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.