When should I use elements '<ul>'?

Asked

Viewed 1,415 times

10

Recently I was thinking about the structure of a component for a project in which we are trying to follow the outlines of the W3C semantics, but I ended up with a certain doubt.

Here is the component code:

<div class="cmp-scrollBanner">
    <div class="message">Message One</div>
    <div class="message hide">Message Two</div>
    <div class="message hide">Message Three</div>

    <div class="controls">
        <!-- código irrelevante -->
    </div>
</div>

As you can see, it shows several messages, one at a time, which can be n messages.

My question is whether I should be using elements ul and li in place of div messages. Semantically speaking, any list I have is passive to use uls? Even if within this list are large and complex contents?

When I should and should not use unordered lists?

html html5 semantics

3 answers

10

The specification of HTML5 defines ul so (free translation):

The element ul represents a list of unordered items; that is, a list whose meaning does not change if the order of the items that compose it is changed.

If you want to follow to the letter what the specification says, it may be the case to use an ordered list, since its content looks like a feed of messages, which would lose meaning if not in chronological order (correct me if I misunderstood your example).

Semantically speaking, is any list I have passive to use uls? Even if within this list are large and complex contents?

It is recommended that any list be represented as a list, i.e., ul, ol or dl (the latter is a little different, can be considered a list of key pairs/value). However...

Notice: Opinion content below!

Any discussion about semantics always involves a considerable amount of opinion. I’ve seen people argue that a list of links within a nav does not need to be represented as the list, because the nav would already mean a "list of navigation items"; some people defend the opposite.

One of the great arguments in favor of "semantic HTML" is that it would be a step towards the semantic web. And the semantic web is the one where machines can exchange information about the meaning of the content they access or store. Well, what would be the gain in knowing that such a content is an unedited list? This says nothing about the content, and very little about its structure.

So always look at the semantics discussions with one foot behind you. There are no absolute truths; it is no use wanting to follow everything you say, or fatally you fall into contradiction. It is interesting that its content is well structured and that this structure makes sense when read by humans. In my opinion this is the most important at this time, in 2014. I would rather represent your messages as list items, but that’s not so other than owning divs with class mensagem inside of another div with class mensagens. If the list and its items do not carry any class, the Divs with classes even carry more meaning.

9


When we decide which component to use, we should think beyond the presentation itself, because aesthetically it would not make a difference to a user if we are using div or ul, but we need to think that there are other types of users, for example:

  • Screen readers for the visually impaired
  • Bot of search engines

These types of users are not interested in the presentation of the site, but in its formatting. HTML has the ability to express lists of things, so you can help these types of users better understand the content.

As for the extensive content within a li, one li may contain any element that is valid in body, but to HTML 4.0.1 may contain flow elements which is a set of elements of block and inline, for HTML 5 is valid content of any stream.

  • 1

    I may be mistaken, but I had the impression that HTML 4.01 was very restrictive in relation to what could go inside a <li>. HTML5, on the other hand, is very permissive, even allowing headers, which according to the specification would be contradictory (because headers determine sections, and it makes no sense for a list to cross the boundary from one section to another). Overall I agree with your answer (mine follows the same line), but to be honest I never really understood what great gain a screen reader, and especially a bot, would have to know that a content is a list.

  • 2

    @bfavaretto, you’re right when you say HTML 4.0.1, I fixed my answer, as for the screen reader, I’ve needed and accurate, and I really notice difference in formatting, not at all but in a large part of them.

  • 1

    Actually screen readers seem to be the biggest beneficiaries by the use of lists. You can pause between items, etc. I have very little experience with them, but I understand how you can use them. Google, for example, does not know what distinction could be made to rank something based on whether or not it is contained in the list. Note that I’m not criticizing your answer, I found it great, I’m just thinking out loud!

  • 2

    @bfavaretto, I agree and find interesting, however from what I have researched, use ul can help boot identify more easily, a sequence of related items, a list of subjects, a group of links or options, an image gallery and etc.

  • 2

    boot or bot?

  • @brasofilo, thanks for Obs, is bot, I edited the reply :)

Show 1 more comment

8

The semantics of HTML is something that makes sense (mainly) for search engines, which are based on the semantic structure of their code to perform the correct rankings. Naturally, obeying the semantic order is important in any situation, as it makes your work easier and more fluid. For the current issue, I see how appropriate the use of lists when you have a content hierarchy. Hence you can have the list chaining:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
            <li>Subitem 3</li>
        </ul>
    </li>
</ul>

As there is no hierarchical order in your messages, I see no problem in using div to represent them.

References

http://www.w3.org/MarkUp/html3/bulletlists.html

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

Browser other questions tagged html html5 semantics

You are not signed in. Login or sign up in order to post.