Question

I recently created a menu for a web page where buttons are DIV elements. I’ve been Googling around and see that many people create UL lists and each button is a LI element. What benefit is using an UL and LIs instead of just DIVs? Is it somehow better for SEO? Does this have to do with “semantic” markup? Any compelling reason to rewrite my menu as a UL?

Answer 1

It’s the more semantically correct approach. A menu can be regarded an unordered list ( ul ) and each item as a list item ( li ).

Excessive use of div elements is also known as “divitis” and should be avoided where possible. (Which, of course, doesn’t mean that div elements are bad per se. There are legitimate use cases for div s in almost every web page.)

There is no functional difference in using more semantically sound elements but it makes for better, easier to read code, and enables you to build CSS definitions with less overhead.

Compare for example

div.menu { ..... }
div.menu div.subitem { ..... }
div.menu div.level2 div.subitem { ..... }

to

ul { ..... }
ul li { ..... }
ul ul li { ..... }

Prominent examples of where divs could be replaced by more fitting elements:

• As already said, Menus: <ul><li>

• Forms with labels: <fieldset><label>

• Headings <h1><h2> (just the headings, not complete header areas though)