35

I have an HTML document where I would like to semantically group text to the head of a UL as a "header." The initial attempt looks like this:

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

The W3C validator points out that there's no text allowed inside a UL, but outside a LI. I could put the text inside an LI, then use the pseudo-class :first-child to find the "header" in my CSS, but this is clearly not the semantically correct way.

How do I handle this properly?

1

8 Answers 8

35

It should not be set in the first li because this would assume a sibling relationship to the succeeding 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

28

Just for reference, HTML 3.0 had <lh>:

<ul>
    <lh>This is a list header!
    <li>Item A
    <li>Item B
    <li>Item C
</ul>
2
  • 19
    Sadly this element was dropped. w3.org/TR/2014/CR-html5-20140429/…
    – George
    May 14, 2014 at 18:55
  • Interesting, this tells me I'm using HTML wrong for having columns (where one might wish for a repeating header after a break) or generating PDF:s etc (with a similar use case)... or maybe they just didn't consider breaks...
    – Erk
    Feb 24, 2023 at 22:13
16

You could try the <dl> (description list) tag for your listing purposes. You get a much cleaner code.

<dl>
  <dt>Databases</dt>
   <dd>Microsoft SQL Server - 10+ years</dd>
   <dd>Sybase SQL Server - 5 years</dd>
   <dd>Oracle - 5 years</dd>
  <dt>Second heading</dt>
   <dd>Item 1</dd>
   <dd>Item 2</dd>
   <dd>Item 3</dd>
</dl>

More information on description list here http://www.w3schools.com/tags/tag_dl.asp

3
  • Is it good for contact info? For example <dt>Phone numbers</dt><dd>x-xxx-xxx...<dd> ? I mean is it correct from the search bots or indexers point of view. Wouldn't it bad for SEO? Or may be classical <ul> is just more proper tag for usual information list like contacts or company's staff list?
    – remort
    Jan 9, 2013 at 17:20
  • You might want to have a look at hcard microformats for contact info: microformats.org/wiki/hcard
    – Jeff S.
    Nov 28, 2013 at 5:16
  • @remort: dt/dd is perfect for contact information.
    – Bergi
    Mar 9, 2016 at 18:35
8
<section>
    <h1>Databases:</h1>
    <ul>
        <li>Microsoft SQL Server - 10+ years</li>
        <li>Sybase SQL Server - 5 years</li>
        <li>Oracle - 5 years</li>
    </ul>
</section>

or even better

<section>
    <h1>Databases:</h1>
    <dl>
        <dt>Microsoft SQL Server</dt> <dd>10+ years</dd>
        <dt>Sybase SQL Server</dt>    <dd>5 years</dd>
        <dt>Oracle</dt>               <dd>5 years</dd>
    </dl>
</section>

Note the h1 is confined to the section, so it's not ambiguous as to whether the content following the list belongs to the heading Databases. In other words, the heading is scoped within the section.

2

Or nest your lists like so

<ul>
    <li>Databases</li>
    <li>
        <ul>
            <li>Microsoft SQL Server - 10+ years</li>
            <li>Sybase SQL Server - 5 years</li>
            <li>Oracle - 5 years</li>
        </ul>
    </li>
</ul>
2

here's an alternate answer:

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

the advantage of this is that you can use several of these "headers" within your UL without breaking them up into separate UL's and the default white space that causes (or using CSS to eliminate the white space...)

1
  • 1
    It works, but if you're using ordered list, you will also have to add the start property to ol tag(and usually set to 0 instead of the default 1). Dec 19, 2013 at 13:00
1

As per my answer to this question, I find the HTML5 figure and figcaption elements most appropriate:

<figure>
    <figcaption>Databases</figcaption>
    <ul>
        <li>Microsoft SQL Server - 10+ years</li>
        <li>Sybase SQL Server - 5 years</li>
        <li>Oracle - 5 years</li>
    </ul>
</figure>

Or alternatively 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;
}
2
  • 1
    This is acceptable, but just be aware that <figcaption> elements do not add to the document outline. Therefore, figures and figcaptions will be skipped when users / assistive technology jump from section to section or from heading to heading.
    – chharvey
    Jan 11, 2019 at 22:08
  • The figure element can thus be used to annotate illustrations, diagrams, photos, code listings, etc. Jan 25 at 9:14
-1

Maybe something like this:

<div>
 <span>Databases:<span>
 <ul id="databases">
        <li>Microsoft SQL Server - 10+ years</li>
        <li>Sybase SQL Server - 5 years</li>
        <li>Oracle - 5 years</li>
 </ul>
 </div>
1
  • 8
    I would not use a span tag to represent a header when the are header tags already defined in the spec
    – Nick Allen
    Mar 10, 2010 at 15:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.