How to Semantically Provide a Caption, Title or Label for a List in HTML

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

Option 1

HTML5 has the figure and figcaption elements, which I find work quite nicely.

Example:

<figure>
    <figcaption>Fruit</figcaption>
    <ul>
        <li>Apple</li>
        <li>Pear</li>
        <li>Orange</li>
    </ul>
</figure>

These are then easily styled with CSS.

Option 2

Using CSS3's ::before pseudo-element can be a nice solution:

HTML:

<ul title="Fruit">
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

CSS:

ul[title]::before {
    content: attr(title);
    /* then add some nice styling as needed, eg: */
    display: block;
    font-weight: bold;
    padding: 4px;
}

You can, of course, use a different selector than ul[title]; for example, you could add a 'title-as-header' class and use ul.title-as-header::before instead, or whatever you need.

This does have the side effect of giving you a tooltip for the whole list. If you don't want such a tooltip, you could use a data attribute instead (e.g., <ul data-title="fruit"> and ul[data-title]::before { content: attr(data-title); }).

How to semantically add heading to a list

As Felipe Alsacreations has already said, the first option is fine.

If you want to ensure that nothing below the list is interpreted as belonging to the heading, that's exactly what the HTML5 sectioning content elements are for. So, for instance you could do

<h2>About Fruits</h2>
<section>
  <h3>Fruits I Like:</h3>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
  </ul>
</section>
<!-- anything here is part of the "About Fruits" section but does not 
     belong to the "Fruits I Like" section. -->

How to mark up caption for HTML lists

It looks like you want a HTML5 answer. If all your lists have header I would use a <dl> (now meaning description list) with a single <dt> header and the list items as <dd>'s:

<dl>
    <dt>Fruits I love:</dt>
    <dd>Ananas</dd>
    <dd>Strawberry</dd>
</dl>

If you mix a lot of lists with/without headers I would stick with <ul>/<ol> and use normal <hX>'s. Wrap the <hX> and the list in a <div> to preserve the semantics:

<div class="list">
    <h2>Fruits I love:</h2>
    <ul>
        <li>Ananas</li>
        <li>Strawberry</li>
    </ul>
</div>

aria label for list title, semantically correct?

I think it would be more semantically correct to have the title separate from the list (being a list of links rather than a list of links and title). I don't know how this would affect search engines, however. But this shouldn't make styling any more difficult:

<div>
    <h4>My Title</h4>
    <ul>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
    </ul>
</div>

If you were then wanting them displayed inline you could simply:

div h4, div ul, div ul li { display:inline-block; }
div ul { list-style-type:none; padding:0; }

JSFiddle example.

How do I semantically group a header with a UL in HTML?

It should not be set in the first li because this would assume a sibling relationship to the preceding li elements whereas the header is more important in the hierarchy. Imagine screen-readers etc

<h2>Databases:</h2>
<ul id="databases">        
    <li>Microsoft SQL Server - 10+ years</li>
    <li>Sybase SQL Server - 5 years</li>
    <li>Oracle - 5 years</li>
</ul>

Swap out the h2 for a h(n) depending on the hierarchy in relation to the other headers on the page. To target the header in css just give it a class if there are other headers that will share the same style e.g.

<h2 class="subHeader">Languages:</h2>
<ul id="languages">        
    <li>English</li>
    <li>Chinese</li>
    <li>French</li>
</ul>

Otherwise give it an id

How do i make pictures next together with unordered list under them in a marquee

As the marquee tag is deprecated this snippet uses a slightly different method.

It has two copies of each of the marquee items and lays them out in a container which is a horizontal grid which takes up twice the width of the container (in this case, the viewport).

In this way we can translate the container 50% to the left and then repeat the animation - the second part of the container will be 'replaced' by the first and the movement will be continuous.

A second thing that had to be fixed was having a ul in a span. Instead the span has become a div.

<HTML>

<head>
  <title>Banner</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .banner {
      width: 200vw;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 0;
      position: absolute;
      top: 0;
      left: 0;
      animation: move infinite 6s linear;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    @keyframes move {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }
    
    .banner>* {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    .banner img {
      width: 10vh;
      height: 10vh;
      object-fit: cover;
    }
    
    .caption ul {
      padding-inline-start: 0;
    }
    
    .
  </style>
</head>

<body>
  <div class="banner">
    <div>
      <img src="https://picsum.photos/id/1015/200/300">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1016/300/200">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1015/200/300">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1016/300/200">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1015/200/300">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1016/300/200">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1015/200/300">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1016/300/200">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>

  </div>
</body>

</html>

How to Semantically Provide a Caption, Title or Label for a List in HTML