semantic-layout

Validate HTML semantic elements and accessibility structure for SEO clarity.

7|Updated Feb 19, 2026

Search Tags:#accessibility #semantic html #html structure #on-page seo #aria landmarks #skip navigation

Ready to run

npx skills add https://github.com/thisisAhsanIqbal/nextjs-seo-audit --skill semantic-layout

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: semantic-layout
Source: https://github.com/thisisAhsanIqbal/nextjs-seo-audit/tree/main/skills/semantic-layout
Command: npx skills add https://github.com/thisisAhsanIqbal/nextjs-seo-audit --skill semantic-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps identify missing or weak semantic HTML and accessibility structure that can reduce usability for assistive technologies and lower SEO clarity for crawlers.

Core Features & Use Cases

Validates required HTML5 semantic elements: Detects whether <header>, <main>, <footer>, and <nav> are present and reports pass/warn/fail counts.
Checks accessibility fundamentals for structure: Verifies skip-navigation link presence and inspects ARIA landmark role usage for common landmarks.
Finds structural quality issues: Flags likely div-soup patterns, checks for layout-related heading placement, and reviews image/date/list/table markup opportunities.

Quick Start

Use semantic-layout to audit the current page HTML for semantic element coverage, skip-navigation accessibility, ARIA landmark roles, and structural layout issues.

Frequently Asked Questions about semantic-layout

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I audit HTML structure for semantic elements and ARIA landmarks?▼

Auditing HTML structure involves detecting presence and counts of core semantic tags like header, main, footer, and nav. It verifies ARIA landmark roles and reports PASS, WARN, or FAIL statuses with targeted fix guidance.

Why does my React or Next.js rendered HTML lack semantic clarity for on-page SEO?▼

React or Next.js rendered HTML often lacks semantic clarity due to div-soup patterns where div density outweighs semantic elements. Auditing flags these structural issues, missing skip navigation, and poor heading placement to improve SEO.

What is the best way to check for skip navigation links and accessibility structure?▼

The best way to check accessibility structure is to inspect rendered HTML for skip-navigation link presence and verify ARIA landmark role usage. This validates structural layout heuristics and identifies missing markup opportunities.

Can I detect div-soup patterns in my web pages to improve assistive technology usability?▼

You can detect div-soup patterns by comparing div density to semantic elements within the document. This comparison flags structural quality issues and provides targeted guidance to improve usability for assistive technologies.

Does semantic HTML auditing work for server-side rendered HTML?▼

Semantic HTML auditing works for server-side rendered HTML by applying structural layout heuristics to the final output. It detects semantic coverage, skip navigation, and ARIA landmarks regardless of the rendering method.