Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is it common to create toolbar with tag <UL> and <LI>?

I found that quite a few "toolbar" in web page is implemented with HTML tag UL and LI with style "float:left".

Fore example, with the help of FireBug it is easy to find this pattern in http://www.yahoo.com/.

Is there any reason for that? I don't think that UL and LI are invented to create toolbar.

like image 888
Morgan Cheng Avatar asked Mar 22 '09 12:03

Morgan Cheng


People also ask

Why do we use UL and Li?

Using li and ul is not only more semantic, but it gives meaning to the html nodes, helping screen readers, web crawlers, etc. Questions like this tend to cause discussions, presentation of opinions, and abstract arguments (e.g., about something being “semantic”), rather than technical answers based on facts.

What is UL OL Li in HTML?

HTML 4.01 Unordered lists (UL), ordered lists (OL), and list items (LI) HTML 4.01 Definition lists: the DL, DT, and DD elements.

Can we use Li without UL?

If you just use <li></li> without <ul> or <ol> the rendered result will be a un ordered list with bullet icons preceding each list item, and when you see the DOM there won't be any <ul> or <li> tag added.

What is UL in HTML?

The <ul> HTML element represents an unordered list of items, typically rendered as a bulleted list.


2 Answers

HTML was intended for semantics (what things mean), not presentation (what they look like). Since <ul> represents an unordered list, and since a toolbar is conceptually just a list of items, this is sensible. Even StackOverflow does it!

<div class="nav">
  <ul>
    <li><a href="/questions">Questions</a></li>
    <li><a href="/tags">Tags</a></li>
    <li><a href="/users">Users</a></li>
    <li><a href="/badges">Badges</a></li>
    <li><a href="/unanswered">Unanswered</a></li>
  </ul>
</div>  
like image 182
John Feminella Avatar answered Oct 13 '22 22:10

John Feminella


UL and LI are for lists. And you are listing a bunch of links (sub-navigation, tools(?), etc.)

like image 23
stesch Avatar answered Oct 13 '22 21:10

stesch