Why do we build a navigation bar with list items instead of paragraphs?
May 26, 2014 1:55 PM   Subscribe

Paragraphs can run inline as well as list items, and you don't have to override anything to eliminate bullets. Is this somehow about accessibility?
posted by markcmyers to Technology (10 answers total) 4 users marked this as a favorite
From Listamatic's Why use lists for site navigation?
At a structural level, site navigation is simply a list of links to other areas of the site. Therefore, the best method for marking up site navigation is (arguably) to use a list element.
posted by bcwinters at 2:08 PM on May 26, 2014

Not accessibility; semantics.

Sure, you could build a nav bar as a list of paragraphs, but then you'd have...a list! So why not mark it up as such?


—it supports nesting, e.g. for secondary navs or hierarchical trees
—it gives you a built-in container tag (the <ul>), allowing for more complex styling
—it looks better in text browsers, e.g. lynx
posted by escape from the potato planet at 2:11 PM on May 26, 2014 [1 favorite]

If there's a technical reason, I don't know it. But semantically, a list item is an item in a list, and a paragraph is a sequence of sentences that form a connected unit in a text. The former describes a nav bar, the latter doesn't. And it's usually less hassle in the long run if you cooperate with the intended uses of these things rather than fight them.
posted by baf at 2:12 PM on May 26, 2014 [1 favorite]

As the others are saying: because it's a list of links.

Think about what happens if your CSS fails to load, or if the entity reading the HTML document is not a graphical web browser. You want to be telling the reader, whether human or robot, "this section of the page is for navigation, and it's a list of links", not "here are some paragraphs".
posted by nowonmai at 2:19 PM on May 26, 2014

The general idea behind using lists has already been covered, but it's also worth noting that those are just arbitrary lists that you happen to be using for navigation, which still doesn't "mean" much.
HTML5 extended the semantic line of reasoning with the nav and menu elements, which explicitly place a "navigation" context around the contained lists. (Technically, you could put other stuff in there, but lists are the common pattern.)
posted by Su at 2:21 PM on May 26, 2014

As above it's mostly about semantics.

The fun thing about html is that the tags only have any built-in properties because the renderer gives them default css. If you wanted to you could override css until a div acted like a span and a span acted like a div, or whatever crazy things you wanted to do. It just wouldn't make much sense to anyone else.

You can also make up completely arbitrary tags of your own and give them css to do what you want, though I don't think every browser will understand them.
posted by drjimmy11 at 2:26 PM on May 26, 2014

(Here is a a Stack Overflow question about the use of arbitrary tags.)
posted by drjimmy11 at 2:28 PM on May 26, 2014

Yes, semantics, but also precedent.

This A List Apart piece from 2002 was hugely influential in making the case for marking up navigation as lists, mainly because it provided a lot of CSS examples that made navigation look good. That in turn was because CSS for lists was good enough in the early 2000s to provide nice-looking results with decent flexibility and cross-browser consistency.

If the CSS functionality for lists had been crappy in 2002, it wouldn't have caught on, regardless of the semantic justification.
posted by holgate at 2:45 PM on May 26, 2014 [2 favorites]

And to add to Su's comment, it was because CSS-styled lists caught on for navigation in the early 2000s that HTML5 added additional elements specific lists as navigation.
posted by holgate at 2:47 PM on May 26, 2014

(I'm actually going to link to a 2003 archive.org snapshot of that A List Apart article so that you can see it in its near-original design context, and also because the modern rendering breaks some of the CSS it demonstrates. For the full effect, you'd need to use an old Mozilla, Firefox 0.6, IE6 or perhaps Safari 1.0...)
posted by holgate at 10:07 PM on May 26, 2014

« Older Natural flea/tick prevention   |   How did colonial Americans speak? Newer »
This thread is closed to new comments.