When should I use 'ul' elements?

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

• Screen readers for the visually impaired
• Search site bot

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 to better understand the content.

For long content within a li , a li can contain any element that is valid in body , but for HTML 4.0.1 may contain flow elements that are a set of block and inline elements, to HTML 5 is valid content of any stream.

The HTML5 specification define ul so (translation free):

  

The ul element 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 exactly what the specification says, it may be the case to use an ordered list, since your content looks like a feed message, which would lose its meaning if it is not in order chronological (correct me if I misunderstood your example).

  

Semantically speaking, any list I have is able to use uls? Even though there are large and complex content within this list?

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

Warning: opinion content below!

One of the big arguments in favor of "semantic HTML" is that it would be a step towards the semantic web. And the semantic web is one in which machines can exchange information about the meaning of the content they access or store. Well, and what would be gained in knowing that such content is an unordered list? This does not say anything about the content, and very little about its structure.

Therefore, always look at the discussions about semantics with one foot behind. There are no absolute truths; no use wishing to follow everything they 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 the moment in 2014. I would rather represent your messages as items in a list, but this is not so other than having div s with class mensagem inside another div with class mensagens . If the list and its items do not lead to any class, divs with classes even make more sense.

HTML semantics is something that makes sense (mainly) for search engines, which are based on the semantic structure of your code to perform the correct rankings . Naturally, obeying the semantic order is important in any situation as it ends up making your work easier and more fluid. For the current question, I see how appropriate the use of lists when you have a content hierarchy. Hence you can have 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 using div to represent them.

References

link

link