Why it is accepted to use an UL, LI structure in menu lists?

Question

I'm new to HTML. When I started reading documentation about lists, I've noticed that everywhere an <ul>, <li> structure is used, even for creating very simple lists.

But for me it's most comfortable to use only <a> elements with CSS:

display: block;
/* and/or */
float: left;

So, why use <ul>, <li> instead of just <a>?

Thanks a lot.

Answer 1

Because structurally they're the most appropriate elements for that purpose. Also helps screen reader users in terms of properly dictating the elements of a page.

Remember that HTML is for markup/content ( what IS this text? a paragraph? wrap it in a p tag ), CSS is for styling, JS is for behaviour.

You can have thousands of anchors on your web page, but what if you want to style anchors nested within listed items differently from other anchors?

<ul>
<li><a href="#">blah</a></li>
</ul>

<a href="#">sfl</a>

If you had done things properly, your css would be trivial to implement

a { }
ul li a { }

Otherwise you'd have to throw classes around anchors and it would be messy and unstructural.

In regards to the SEO - I believe that in the past semantically marked up code didn't have much bearing but nowadays with specs like RDF, HTML 5 elements the web is getting more and more semantic, so it's only beneficial to be as semantic as you can be.

In 2010, Google specified three forms of structured metadata that their systems will use to find structured semantic content within webpages. Such information, when related to reviews, people profiles, business listings, and events will be used by Google to enhance the 'snippet', or short piece of quoted text that is shown when the page appears in search listings. Google specifies that that data may be given using microdata, microformats or RDFa.[13] Microdata is specified inside itemtype and itemprop attributes added to existing HTML elements; microformat keywords are added inside class attributes as discussed above; and RDFa relies on rel, typeof and property attributes added to existing elements.[14]

Answer 2

Because your markup is supposed to be semantic rather than just for display purposes.

Anyone, or anything, that reads your document can immediately tell that a section marked-up with <ul><li>...</li></ul> tags is a list.

CSS doesn't describe what something is, only how it should be rendered. Ideally, you should mark-up your document to describe what each part is, and then use CSS to render those parts appropriately.

Answer 3

Because UL, LI and OL are the HTML elements created with the specific purpose of being lists. By using the proper markup you are adding more information to your content, any automated tool that sees your code will know that those are lists and be able to act accordingly.

If you want links inside a list item, you can put an A element nested inside the LI:

<ul>
    <li><a href="example.com">Example</a></li>
</ul>