What Semantic Html Markup Should Be Used To Create Breadcrumbs?

August 02, 2023 Post a Comment

What meaningful HTML tag should be used to create breadcrumbs? I have a menu bar which is created using unsorted list since it is a list:

Solution 1:

There's plenty of ways of marking up breadcrumbs. A list is fine. An ordered list is more appropriate for breadcrumbs because it is a list of links in a particular order.

If you don't want to use a list, you could instead leave them as a set of links in a div. Although if you're using HTML5, you may want to put them in a nav element.

Finally, the HTML5 spec suggests using a p element because they could be read as a paragraph of direction on how to get to the particular page.

Solution 2:

If you don't want to use an ordered list or paragraph tags, you could always use a nested list to semantically represent the hierarchical nature of the breadcrumbs.

The following example comes from Mark Newhouse's A List Apart article entitled "CSS Design: Taming Lists."

<divid="bread"><ul><liclass="first">Home
  <ul><li>&#187; Products
    <ul><li>&#187; Computers
        <ul><li>&#187; Software</li></ul></li></ul></li></ul></li></ul></div>

Solution 3:

Old post but came up high in a search and I think things have changed a bit since this question was originally asked.

In a html5 site I would use the nav tag as breadcrumbs are technically navigation through the site. If you want to make it even more clear what they are you can add microdata to state that they are breadcrumbs.

From Googles example and html5doctor

<nav><ul><liitemscopeitemtype="http://data-vocabulary.org/Breadcrumb"><ahref="http://www.example.com/dresses"itemprop="url"><spanitemprop="title">Dresses</span></a></li><liitemscopeitemtype="http://data-vocabulary.org/Breadcrumb"><ahref="http://www.example.com/dresses/real"itemprop="url"><spanitemprop="title">Real Dresses</span></a></li><liitemscopeitemtype="http://data-vocabulary.org/Breadcrumb"><ahref="http://www.example.com/clothes/dresses/real/green"itemprop="url"><spanitemprop="title">Real Green Dresses</span></a></li></ul>

Solution 4:

Using an unordered list for your breadcrumbs seems perfectly reasonable to me; there isn't always a named tag for every application specific structure and you are displaying a list of breadcrumbs afterall.

You can use css to make the bread crumbs display the way you would like.

Solution 5:

to create breadcrumb you can use following ways: (you should use nav as wrapper to tell bots there's some internal links, if you're using html5)

Matthew Rankin's answer describes this one.

second way using ol list instead of first way like below to tell bot there's an order between items:

<nav><olclass="breadcrumb"><li><ahref="#">Top Level</a></li><li><ahref="#">Second Level</a></li><li><ahref="#">Third Level</a></li><li>Current Item</li></ol></nav>

third way is using p tag and rel up for links(rel up is not final!)

<nav><p><ahref="/"rel="index up up up">Main</a> >
  <ahref="/products/"rel="up up">Products</a> >
  <ahref="/products/dishwashers/"rel="up">Dishwashers</a> >
  <a>Second hand</a></p></nav>

Html5 Guide