CODEWITHSUNDEEP
htmlcss
sushil bharwani
sushil bharwani

Reputation: 30197

What's the reason behind using UL Li lists to draw navigation bars?

I have seen css navigation designs done mostly through ul and li lists for the tab structure. What is the reason behind this?. What is the fall-back for such sites if css is somehow disabled?

Upvotes: 6

Views: 243

Answers (4)

atripes
atripes

Reputation: 1723

Semantic markup has various reasons, for example:

  • screen readers can access the site more easily
  • google bot can crawl the site more easily

This link gives more detail on the topic: Semantic HTML. Besides, it is HIGHLY unlikely someone will have CSS disabled. In my opinion there is absolutely no need to provide fallback for that case, the navigation would still be accessible anyway.

Upvotes: 7

fiorebat
fiorebat

Reputation: 3451

Navigation is a menu, in older html there was a tag, deprecated in html4 (http://www.w3.org/TR/html401/struct/lists.html#h-10.4) because menu and ul renders the same.

Now navigation menu in html5 must be contanined in the semantic tag.

Upvotes: 1

shawty
shawty

Reputation: 5829

There is no concrete reason, that is there is no rule book that states you MUST do navigation links using a UL LI list.

However, for the 2 reasons all ready given in the comments, and W3C recommendations about document structure , layout and html semantics, then it is ** RECOMMENDED** that navigation links be performed in that manner.

It's much like conforming to patterns in code, by using standards compliant structures and methods, the next person that has to maintain that site after you can look at it and say, ahh ... I see whats going on here.

As for screen readers, they (as has been mentioned) can also do a similar analysis on the document layout, and thus decide which elements are important to a visually impaired user.

Upvotes: 2

mliebelt
mliebelt

Reputation: 15525

I think it is just a pattern that worked well when it was developed (in all browsers), so it was documented in CSS books and used by a lot of people. You don't have to change too much (ul { list-style: none;} and li { display: inline; }), so it is easy to add. And if you disable CSS in your browser, you just get a more ugly version which is working as well.

Upvotes: 0

Related Questions