HTML Course 15.5 Breadcrumbs and internal link structure

15.5 Breadcrumbs and Internal Link Structure

Breadcrumbs are a secondary navigation aid that reveals the user’s location within a site’s hierarchy. They improve usability, enhance accessibility, and can boost SEO by providing clear context and structured links. Internal link structure refers to how you organize and connect pages using anchor (<a>) elements, relative and absolute URLs, and fragment identifiers.

1. Semantic Markup for Breadcrumbs

• Wrap in a <nav> element with aria-label='Breadcrumb' for accessibility.
• Use an ordered list (<ol>) or unordered list (<ul>) to reflect sequence.
• Mark the current page with aria-current='page' and omit a link.
• Ensure each link has descriptive text, avoiding generic “Click here.”

Example: Basic Breadcrumb Trail

2. Internal Link Structure

Internal links connect pages within the same site. Proper structuring helps users navigate, search engines crawl, and maintain logical organization.

Examples of Internal Links

• Root-relative:

  Web Design Services
      

• Document-relative:

  
  Project Details
      

• Fragment identifier:

  
  See Pricing Details
  
  
  Pricing FAQ
      

• Absolute URL:

  Read the Launch Post
      

3. Skip Links for Accessibility

Include a “Skip to content” link at the top to help keyboard users bypass repetitive navigation.

Skip to main content



  
Main Article
  
...

4. Best Practices

• Keep link text concise and descriptive (“Our Team” vs. “Click here”).
• Use root-relative URLs for consistency across environments (dev, staging, production).
• Avoid deep nested document-relative paths; reorganize if folder depth is excessive.
• Implement aria-current='page' on the active breadcrumb item.
• Validate all links periodically to prevent 404 errors.
• Maintain a clear, shallow hierarchy when possible (3–4 levels).
• For dynamic sites, generate breadcrumbs and sitemaps server-side or via JavaScript frameworks.