Why should I use UL/LI in my HTML?

Question

I have the following structure that seems really nice for me and I always use HTML5:

  

        

                      

              相关标签:
       
      

Answer 1

Tags are not only for presentation (which can be deeply changed today, anyway) but also for meaning. You can almost (?) do a complete Web page with only div and span, for example, but it doesn't mean it is a good idea...

You mention HTML5: they went great lengths to add several tags with similar rendering, but very different semantical meaning.
As written above, this helps screen readers: they will read differently your coding, perhaps trying to read it as a whole sentence, while they will read a real list with proper tone and pauses.
But it might also help web spider (think "Google", but not only) to better grasp the structure of your page and better index the most important parts.

Answer 2

Since the release of HTML 5, <nav> can be used for website navigation block instead of div.

Referring to the HTML Standard

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

The HTML Standard includes an example that use <nav> followed by <ul> and <li>.

<nav>
  <ul>
   <li><a href="/">Home</a></li>
   <li><a href="/events">Current Events</a></li>
   ...more...
  </ul>
</nav>

But it also says

A nav element doesn't have to contain a list, it can contain other kinds of content as well.

<nav>
 <h1>Navigation</h1>
 <p>You are on my home page. To the north lies <a href="/blog">my
 blog</a>, from whence the sounds of battle can be heard. To the east
 you can see a large mountain, upon which many <a
 href="/school">school papers</a> are littered. Far up thus mountain
 you can spy a little figure who appears to be me, desperately
 scribbling a <a href="/school/thesis">thesis</a>.</p>
</nav>

Based on the Standard, the use of ul and li is personal preference as long as you have nav to indicate navigation.

Answer 3

To add to Oded's answer, specifically the reason you want to be semantically correct is for all the web users out there who aren't using a normal browser. Consider as an example a blind person using a screen reader, or some sort of web crawler.