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]