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?
Best answer: From Listamatic's Why use lists for site navigation?
posted by bcwinters at 2:08 PM on May 26, 2014
Best answer: 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?
Plus:
—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]
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?
Plus:
—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]
Best answer: 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
posted by baf at 2:12 PM on May 26, 2014
Best answer: 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
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
Best answer: 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
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
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
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]
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
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
posted by holgate at 10:07 PM on May 26, 2014
This thread is closed to new comments.