Correct Semantics for Ul in Ul

correct semantics for ul in ul

You must wrap every inner ULs with an LI, i.e.

<ul class="menu">
    <li>
        <a href="">Uutiset</a>
    </li>
    <li> <----
        <ul class="inside">
            <li><a href="">Fringilla Condimentum</a></li>
            <li><a href="">Lorem</a></li>
        </ul>
    </li> <----
 </ul>      

Why should I use UL/LI in my HTML?

It is more semantically correct.

What you have above is an unordered list of languages. You should be using an unordered list of items (UL element with LI elements) to be semantically correct about it.

This also helps screen readers and other technologies that depend on correct semantics to work.

What's semantically correct here - a table or a ul ?

Unlike Mike, I don't think we're dealing with tabular data here. You have nested lists of publications. Following a few guidelines (Google, html5 Doctor, ...) about authorship and publications dates; the extra data about publication you're dealing with is more likely "labels" to your content that could be styled in many ways, thus rejecting the tabular data hypothesis. I've chosen the following approach per <li> :

<span class="title">What Should I use, li or table?</span>        
<time datetime="2014-04-08T15:27Z">2d ago</time>
<address><a rel="author" href="#">John Jackson</a></address>

I reproduced your nested list in this JSFiddle, styled it as yours and styled it in a non-tabular way. You'll notice the HTML segment never changed in any of the three styling I've produced. Being able to style it like the previous Fiddles demonstrates how the HTML is semantically appropriate.

Semantics often induces different valid approaches, some of my usage might not be perfect, but the main idea should be appropriate. Let me know if this answers your question properly! :-)

Should I use div's or ul li tags to Structure my HTML content

It really depends on the content; not what it may be in the future, but what it currently is.

If each item consists only of a link, don’t use a heading element (h2). A heading opens a new section, but there is no point in having a section if it contains no other content. Using a list probably makes sense here, assuming that the 6 items are in some kind of relationship (which seems to be the case, as they are in the same section).

<section>
  <h1>Section Title</h1>

  <ul>
    <li>Title One</li>
    <li>Title Two</li>
    <li>Title Three</li>
  </ul>

</section>

If an item contains more content, like a description or an image (i.e., it becomes a teaser), you might want to use a sectioning content element. The article element is typically appropriate here (e.g., for products, blog posts, etc.). Using a list in addition is possible, but, I think, not so common; I wouldn’t recommend it, unless you need an ordered list (e.g., for conveying the ranking in case each item is a search result).

<section>
  <h1>Section Title</h1>

  <article>
    <h2>Title One</h2>
    <!-- more content -->
  </article>

  <article>
    <h2>Title Two</h2>
    <!-- more content -->
  </article>

  <article>
    <h2>Title Three</h2>
    <!-- more content -->
  </article>

</section>

This structure cannot only be used for teasers, but even for "full content" items.

Are ul, li and divs semantic correct for a HTML5 grid layout?

Anything that deals with semantics seems to be very up in the air in the HTML5 community. We can only look at what the spec has to say about specific elements.

The <ul> element represents the unordered list.

The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.

HTML lists are groups of related items.

The <div> element has no special meaning at all.

When no other element is suitable, the div element is used as an element of last resort. Otherwise, it leads to poor accessibility for reader.

The <div> represents its children.

Thus it depends on the specific content. <ul> -> <li> should be used for lists of related items. There may be other semantic tags to use as well depending on the circumstance.

I got most of my information from http://www.w3.org/community/webed/wiki/HTML/Elements

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); }).

Semantic significance of li without ol or ul ?

The standard is clear :

Permitted parent elements :

ul, ol, menu

Any other use should be avoided as a browser might very well not support it.

The fact the norm prohibits it means there is no accepted semantic, apart the one each developer invents for his own use.

Is it semantically correct in HTML to markup a list with only a single list item?

Absolutely. A list is not defined by quantity. It's defined by semantics. So a list can consist of only one element if only one item applies to the list's purpose. For example, I have only crashed one computer today so that list would be only one element long.

---

Related Topics