Advantage of using and to style tabs versus using pure inside ?

Question

I think very often tabs are implemented as <ul> and a series of <li> inside. Is there advantage of that over just using <div> with a few <div>s inside?

Usually with <ul> as tabs, the padding-left of it needs to be reset to 0, and list-style needs to be set to none, while <div> doesn't have this issue.

Answer 1

Looks better when CSS isn’t applied, and is (I believe) easier to interact with in screen-readers.

Answer 2

Short and clear answer: Why should I use 'li' instead of 'div'?

Excerpt:

"For semantic correctness. HTML has the ability to express lists of things, and it helps the Google robot, screen readers, and all manner of users who don't care solely about the presentation of the site understand your content better."

"For the visually impaired, it can be helpful to distinguish what's in a list and what's not. Say if you have a list of ingredients in a recipe for example, and the user wants to skip to the instructions or just read the list, you need a list."

Don't forget to visit the link to learn more.

Answer 3

In terms of adding/changing the code, it is more readable and makes more sense. Tabs/navigation naturally seem like a list where the items are associated with each other.

Once implemented via CSS, it is extremely easy to add/modify when the time comes to change your navigation/tabs.