How to semantically provide a caption, title or label for a list in HTML

Captioning: bonding <figcaption> with <figure>

First, <figure> to <figcaption> is like Batman to Robin, providing a semantic sidekick in HTML. The <figcaption> integrates smoothly with the <figure> wrapper, making list caption semantics correctly structured and accessible. Before styling, ensure your structure's semantic association is on point.

<figure>
  <!-- Robin 'figcaption' steps in -->
  <figcaption>Grocery List</figcaption>
  <!-- Batman 'ul' swoops down -->
  <ul>
    <li>Milk</li>
  </ul>
</figure>


Harness headings for higher semantics

Heading tags provide an instant semantic connection to lists. Consider captions as <h3> just before your <ul> offering accessible, clear structures that screen-readers smile at!

<h3 id="fruits">Fruits</h3>
<!-- Now you 'C' the 'Fruits' -->
<ul aria-labelledby="fruits">
  <li>Apples</li>
  <li>Bananas</li>
</ul>


Though the heading levels should follow a logical sequence, keep a keen eye on the nesting hierarchy and not the h level!

::before and data-attribute: dynamic duo for captions

Sprinkle in alternative methods, where <header> or classes don a non-visual cape for captions. Or, use CSS3's ::before pseudo-element which, like Harry Potter's cloak, can mask in captions directly before the list.

<ul data-caption="Todo-list">
  <!-- Harry Potter invisibly captioning -->
  <li>Laundry</li>
</ul>


ul:before {
  content: attr(data-caption);
  display: block;
  font-weight: bold;
  /* This CSS is full of CLASS! */
}


Stay updated with emerging W3C protocols for newer semantic superpowers, like the <legend> element for list heroes similar to form-structure champions!

List styling: the little black dress of semantics

Styling shouldn't mess with semantics. Unlike title attributes, CSS class selectors or data attributes avoid side-effect monsters, like unwanted tooltips, and give creative freedom. Work around your list and captions with a unique class or data attribute.

<!-- The little black dress looks fantastic -->
<figure class="list box">
  <figcaption class="necklace">Playlist</figcaption>
  <ul>
    <li>Bohemian Rhapsody</li>
  </ul>
</figure>


In the fitting room, aka CSS, you can touch up the list's look:

/* This list is about to attend a party */
.stylish-list .list-caption {
  font-size: 1.2em;
  color: #333;
}


Semantic alternatives to traditional push-ups (alias lists)

Description lists (<dl>) can group items, providing a native caption system, with <dt> taking the Captain America shield (caption role) for <dd> items or Avengers.

<dl>
  <dt>Captains of the Earth</dt>
  <!-- Captain America '<dt>' leading the '<dd>' Avengers -->
  <dd>Steve Rogers</dd>
  <dd>Captain Planet</dd>
</dl>


Accessibility via semantics

When architecting a webpage, semantic HTML aims at UI clarity, supporting users, especially those relying on assistive technologies. Clear hierarchy with ARIA landmarks, like arrows in Hawkeye's quiver, make navigation intuitive:

<!-- Like the Tower of Avengers, guiding the way -->
<nav aria-label="Main navigation">
  <ul>
    <li>Home</li>
  </ul>
</nav>


Addressing semantics with HTML5 and ARIA

HTML5 and ARIA provide a semantic lexicon to convey meaningful document structuring. Tools like ARIA roles and attributes can enhance even simplest of structures:

<section role="region" aria-labelledby="todays-tasks">
  <h2 id="todays-tasks">Today's Tasks</h2>
  <ul><li>Task 1</li></ul>
</section>


Such notions help make web content manageable and understandable for a wider user base.