The breadcrumb in HTML shows a path through a site and marks the place of a page inside it. It links back to higher pages and lets a user move between sections without guesswork.
Here is an example of where you can place breadcrumbs in a single article page:
It also gives search engines a clear path of the site. This makes it a key part of good site structure for smart beginners who want to build easy paths in HTML.
What is an HTML Breadcrumb?
An HTML breadcrumb shows a user’s path inside a site and tells where the page stands in the site order. It also gives links back to higher pages and helps a user move around without guesswork.
Here is an example:
<nav aria-label="breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/shop">Shop</a></li>
<li>Shirts</li>
</ol>
</nav>This shows the user stands in the Shirts page under Shop and can go back to Home or Shop. It also helps search engines read the site structure.
Types of Breadcrumb Navigation in HTML
Three main types exist in practice, and each one has a unique path style.
Location-based breadcrumb:
This type shows the page position in the site and fits sites with deep folder paths.
Home > Products > Phones > Model A
The user sees each folder step and can jump to any step.
Path-based breadcrumb:
This type shows each step the user took and fits a site that allows many ways to reach one page.
Home > Deals > Electronics > Model A
The user returns to any earlier step in that path.
Attribute-based breadcrumb:
This type shows filters or tags on a product page and fits shops with many product traits.
Home > Shoes > Size 10 > Black
The user drops any filter with one click.
Wrapping Up
You learned what an HTML breadcrumb is and how it works, and you also learned the main types with code samples for each one.
Here is a quick recap:
- A breadcrumb shows the path of a page inside a site.
- Location type shows folder steps.
- Path type shows the way the user came.
- Attribute type shows active filters or tags.
FAQs
What is HTML breadcrumb navigation?
<nav>element for structure<ol>or<ul>for the path<a>links for clickable steps
How do I create a simple HTML breadcrumb?
<nav aria-label="breadcrumb">
<ol>
<li><a href="index.html">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li>Article</li>
</ol>
</nav>Why is HTML breadcrumb important for SEO?
- Search engines understand site structure
- Users can move back with fewer clicks
- Breadcrumb links appear in search results
What are the types of breadcrumb navigation?
- Location-based: shows position in site hierarchy
- Attribute-based: shows categories or filters
- History-based: shows path user followed
Similar Reads
Comments in HTML help you explain your code. You can add notes without showing anything in the browser. Understand How…
HTML5 gave the web new elements that describe content with more meaning. Developers now use these elements to build pages…
The HTML class attribute helps group elements. It helps you update the page style without changing the structure of HTML.…
HTML global attributes work on most elements. They do not depend on the tag name. You can use them with…
In this article, you will learn what HTML meta tags are and how they work. You also see how they…
The <ins> tag in HTML shows text that the author added after the original content. This helps readers know what…
The HTML button tag creates interactive controls on a web page. You can use this element to trigger actions or…
The HTML<kbd> tag shows the keys that a user must press. This helps you to give instructions for commands or…
The address tag in HTML shows contact details. The <address> tag helps show who owns the page or article. Understand…
HTML code does not always show the same result on every browser. Old browsers follow outdated rules while modern browsers…
