开发者

Advantage of using <ul> and <li> to style tabs versus using pure <div> inside <div>?

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 开发者_Python百科0, and list-style needs to be set to none, while <div> doesn't have this issue.


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.


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


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜