div vs li when to use them

Question

Hi I have about six months experience in web development. I have the following observation, I use <div> tags a lot, it gives me the ability to position the elements, to archive the elements, and it seems I can use <div> tags to do everything, simply playing with its display property.

I've never had to use <ul> or <li> elements in combination, except for horizontal menu navigation, and I am not sure why you can't do it with <div> elements, but it seems to be the 'convention' for achieving a horizontal menu.

Did I miss something? Are there some properties that <li> elements have that are better or more useful than <div> elements?

_{Please don't restrict this question to only horizontal menu list; I want to know any scenario where you would use a <li> over something else.}

Answer 1

Yes, you can do anything (more or less) strictly with div tags (with exceptions, like forms and inputs, and images, and what not). But that's not the point.

First, specific tags have default css applied to them. li's have bullets, for example. You can change these, but in many situations, it's just easier to use the tag that has the style you're looking for.

But the most important reason is what's called "semantic markup", which is the concept that which element you use corresponds to a semantic meaning. li means it's a list of items, so even if you have no CSS applied (such as when a screen reader reads a page aloud for blind person) then it still has meaning.

Answer 2

The only reason to use one tag over another is semantics. The purpose of HTML syntax is to provide meaning to the content that is being rendered.

A <ul> element is an unordered list. It means the content is a collection of items where order is unimportant.

A <div> element is simply a structural element with no semantics associated with it. You could certainly use <div> elements to create the styles typically associated with <ul> elements, but it would mean losing the inherent semantics of the original element.

If you wanted to maintain the original semantics with <div> elements, you could use the list role:

<div role="list">
    <div role="listitem">...content...</div>
    <div role="listitem">...content...</div>
    <div role="listitem">...content...</div>
</div>

However, the WAI-ARIA roles model isn't very well supported, so you'd be better off using the basic markup of:

<ul>
    <li>...content...</li>
    <li>...content...</li>
    <li>...content...</li>
</ul>