Why use <ul> and <li> tags?

[lAZLf]

I want to know what the benefits and disadvantages are of using <ul> and <li> tags instead of the usual <div> tags.

[haku]

It's not so much a benefit about what is correct, and what isn't. Li tags are for lists, div tags are for divisions of your page. They are different things.

 

List tags will also render as lists, and allow you to add bullet points as numbers, circles, roman numerals etc. You can't do this with divs. And finally, you will get better search engine results if you use semantic markup. Semantic markup involves making the content of a tag match the tag. Since a list isn't a division on your page, putting a list in a div tag doesn't tell the search engines that it is a list. Putting the list in list tags however tells the search engines its a list.

[rizlmilk]

I would say a good example of using ul and li is when you want to display a custom bullet image for a list with css. It may seem obvious, but before I realized it I was using an img tag to show an image before each item in a list. Using ul and li instead of img cuts down file size a hell of a lot.