ul or nav for breadcrumbs in HTML?

Question

The Foundation front-end framework provides 2 ways of representing breadcrumbs in HTML:

<ul class="breadcrumbs">
  <li><a href="#">Home</a></li>
  <li><a href="#">Features</a></li>
  <li class="unavailable"><a href="#">Gene Splicing</a></li>
  <li class="current"><a href="#">Cloning</a></li>
</ul>

And this way with nav and a elements instead of ul and li:

<nav class="breadcrumbs">
  <a href="#">Home</a>
  <a href="#">Features</a>
  <a class="unavailable" href="#">Gene Splicing</a>
  <a class="current" href="#">Cloning</a>
</nav>

Which way is semantically more appropriate?

I think both are semantically correct. In the specification, examples using the `
` element have the structure of `
` — dsgriffin, May 20 '13 at 19:14
@Zenith - any good reasons to believe one of them is **more** semantically correct than the other? — at., May 20 '13 at 19:20
Well, the majority of examples using
on the spec (http://www.w3.org/TR/html5/sections.html#the-nav-element) uses unordered lists and list elements to contain navigation anchors, so I'd go with that. Not to say the other way is less semantically correct (I think both are equal), but that's just what I'd go for. — dsgriffin, May 20 '13 at 19:23
I’d say this should be two questions: 1. use `nav` or not? 2. Use `ul` or not? You could certainly use `nav` in your first example (around the `ul`) and you could certainly omit `nav` in your second example. — unor, May 26 '13 at 12:52

score 2 · Answer 1 · answered Jun 10 '15 at 05:07

Use This SCHEMA strcture

**

Use this for Microdata for breadcrumber

**

<div class="breadcrumbs">
  <ul>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="home" >
      <a href="index.html" title="Go to Home Page" itemprop="url">
        <span itemprop="title">Home</span>
      </a>
      <span>></span>
    </li>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="category5">
      <a href="product.html" title="Product" itemprop="url">
        <span itemprop="title">product name</span>
      </a>
      <span>></span>
    </li>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="category5">
      <a href=".finalproduct.html" title="final product" itemprop="url">
        <span itemprop="title">final product</span>
      </a>
      <span>></span>
    </li>
    <li class="category6"><strong>Final Product view</strong></li>
  </ul>
</div>

**

Important: It also used for SEO Purpose in search engine like google,yahoo for displaying efficient in it...

**

enter link description here

Ian Y. · Accepted Answer · 2021-08-26T15:11:38.617

0

Crumbs are used for marking, so they are marks instead of list items. Therefore from the viewpoint of semantics, the second way is the correct approach.

== 2021-08-26 Update ==

Please note that Schema.org recommends using ordered list. I once discussed this thing with a person who understands accessibility, and I was informed that screen readers announce the amount of list items when they access a list, so using list in this situation is useful for screen reader users to know the amount of crumbs a breadcrumb navigation has.

edited Aug 26 '21 at 15:11

answered May 22 '13 at 10:17

Ian Y.

2,293
6
39
55

The bit BETWEEN each link is a mark, if it exists, but the main bit is an ordered list of links. – MikeB Aug 26 '21 at 15:03
@MikeBrockington It depends on how one views a breadcrumb navigation. Anyway, I just updated my answer. – Ian Y. Aug 26 '21 at 15:07

score 0 · Answer 3 · answered Mar 26 '21 at 08:10

schema.org recommends using the following scheme https://schema.org/BreadcrumbList

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name">Dresses</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

ul or nav for breadcrumbs in HTML?

3 Answers3