Paste HTML for Analysis

We'll parse your snippet for semantic correctness, heading outlines, and landmark roles.

Validation Report

Review your semantic score and fix suggestions.

0 / 100

Breakdown

Heading Hierarchy 0/30
Landmark Roles 0/30
Element Semantics 0/30
Accessibility (Alt/Label) 0/10
Run analysis to see issues.

Heading Hierarchy Preview

A visualization of the document outline algorithm.

Landmark Roles Found

HTML with Highlights

Hover over red underlines to see non-semantic warnings.

Semantic Best Practices

Checklist for building robust, accessible HTML outlines.

Headings & Outlines

  • Always include exactly one `<h1>` per page/document representing the main topic.
  • Do not skip heading levels (e.g., don't jump from `<h2>` to `<h4>`).
  • Use headings to create a logical table of contents, not to style text.

Landmark Regions

  • Wrap primary content in a `<main>` element.
  • Use `<header>` for the site banner/logo and `<footer>` for copyright/closing info.
  • Use `<nav>` for major navigation blocks. If multiple exist, use `aria-label` to distinguish.
  • Use `<aside>` for content tangentially related to the main content (e.g., sidebars).

Interactive & Meaningful Elements

  • Use `<button>` for actions, and `<a>` for navigation linking to URLs. Do not use `<div class="btn">`.
  • Include `alt` attributes on all `<img>` tags. Use empty `alt=""` for purely decorative images.
  • When using `<b>` or `<i>`, consider if `<strong>` or `<em>` (which convey semantic stress) is more appropriate.
  • Use `<time>` to represent dates and times.
  • Use `<ul>`/`<ol>` for lists of items, not a series of `<div>` separators.