Forum Moderators: open

Message Too Old, No Replies

How should I mark up breadcrumbs...?

This is a question for Semantic Markup Man!

         

ronin

12:05 am on Jun 28, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Hmmm... I'm having a bit of a redesign at the moment.
Sharpening things up, improving the layout of the page, reducing the weight, adding usability touches and so forth.

The breadcrumbs on my old design are marked up like this:

<p>Top &gt; Section 1 &gt; Subsection 1a</p>

but it just struck me today that perhaps that's a list?

Is it?

Perhaps it should be:

<ul><li>Top</li><li>Section 1</li><li>Subsection 1a</li></ul>

Anyone - regardless of whether you remember Semantic Markup Man or not - have a preference?

cziffra

1:48 am on Jun 28, 2005 (gmt 0)

10+ Year Member



I use unordered lists for my breadcrumbs. IMO, this is semantically correct. It also is very easy to style.

tedster

2:26 am on Jun 28, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I guess a list is a close as we can get. Semantically, each "member" of this list has a hierarchic relationship to the others -- that is, they are not equivalent the way most list items are but rather contain each other.

No HTML element exactly expresses that subtlety, that kind of relationship -- so unordered lists sounds good to me.

moltar

2:33 am on Jun 28, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You can have inner lists. E.g.


<ul>
...<li>Home
......<ul>
.........<li>Widgets
............<ul>
................<li>Blue Widgets</li>
............</ul>
.........</li>
......</ul>
...</li>
</ul>

Then you can float <ul>'s to the left. Add a little padding-left to each <li> and set a background image on the left with a small graphical arrow. So it will look like:

Home -> Widgets -> Blue Widgets

tedster

3:25 am on Jun 28, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ah, moltar -- semantic perfection!

flashfan

3:39 am on Jun 28, 2005 (gmt 0)

10+ Year Member



Is it reducing or increasing the file size if you use "ul"?

moltar

3:41 am on Jun 28, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ah, moltar -- semantic perfection!

Who told you my real name? :)

moltar

3:42 am on Jun 28, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Is it reducing or increasing the file size if you use "ul"?

As opposed to what?

ronin

3:06 pm on Jun 28, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



That's inspired, moltar, but I think I'll just go with a simple unordered list, without nesting. I'm probably going to use the :after pseudo-class to insert a &gt; after each <li>st item, rather than a graphic.

moltar

4:00 pm on Jun 28, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



ronin, I would use one <ul> too, if I had to do it in real life :) It was more of an extreme example.