skills.rest
TheNordicOne
TheNordicOneCOMMUNITY
Explore all skills by this author →
GitHub

semantic-html

Guide semantic HTML authoring with landmarks and Baseline 2024 elements.

9|Updated Jan 18, 2025
Search Tags:#accessibility#media#semantic html#tables#dialog#popover#landmarks
One-click install
npx skills add https://github.com/TheNordicOne/ngx-formbar --skill semantic-html-thenordicone
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: semantic-html
Source: https://github.com/TheNordicOne/ngx-formbar/tree/main/.claude/skills/semantic-html
Command: npx skills add https://github.com/TheNordicOne/ngx-formbar --skill semantic-html-thenordicone

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of inconsistent, non-semantic, and accessibility-poor HTML by guiding you to use the correct native elements, landmarks, and modern Baseline 2024 features.

Core Features & Use Cases

  • Landmark and document structure guidance: Ensures a coherent page outline (e.g., correct use of <main>, labeled landmarks, and heading practices) to improve navigation for assistive technologies.
  • Correct modern element selection: Helps you choose between <dialog>, popover, <search>, <details>, and related patterns to match intended behavior (modal focus trapping vs lightweight overlays).
  • Table, image, and media correctness: Standardizes accessible tables (caption/scope) and media requirements (alt text, dimensions/aspect ratio, lazy-loading rules) to prevent common usability regressions.

Quick Start

Ask the AI to review your HTML for semantic structure, landmark correctness, and modern Baseline 2024 element usage, including whether your modals use <dialog> and overlays use popover.

Frequently Asked Questions about semantic-html

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

FAQPage Schema
How do I write semantic HTML with correct landmark structure for accessibility?▼

Semantic HTML requires native elements like <main> and labeled landmarks to create a coherent page outline. This structure improves navigation for assistive technologies by enforcing correct document structure and heading practices over redundant ARIA attributes.

When should I use the HTML dialog element versus the popover attribute?▼

Use the <dialog> element for modal focus trapping and the popover attribute for lightweight overlays. Selecting the correct Baseline 2024 interactive element ensures your overlay behavior matches the intended user interaction pattern and accessibility requirements.

What are the accessibility requirements for HTML tables and media elements?▼

Accessibility requirements for HTML tables and media include providing table captions, scope attributes, and image alt text. Enforcing these proper attributes prevents common usability regressions and standardizes media correctness for screen reader users.

Why should I use native HTML elements instead of ARIA roles for page structure?▼

Use native HTML elements instead of ARIA roles because native semantics provide built-in accessibility and behavior. Enforcing native-element semantics over redundant ARIA reduces markup misuse and ensures correct landmark rules are automatically applied.

How do I validate HTML markup for common accessibility errors?▼

Validate HTML markup for accessibility errors by checking landmark correctness, modern Baseline 2024 element usage, and media attributes. This validation catches common markup misuse, ensuring proper captions, alt text, and dialog or popover patterns are implemented correctly.

Related Skills

Explore More Design & Creative Skills→
afonsolelisafonsolelis

codigo-html

Enforce clean, semantic HTML5 with mandatory boilerplate and validation.

Community
Basic
wojonswojons
4

testing-accessibility

Test web applications for WCAG compliance using automated tools.

Community
Intermediate
benswiftbenswift
26

frontend-web-engineer

Develops accessible, responsive HTML/CSS/JavaScript interfaces with Playwright-based testing.

Community
Intermediate
hschnehschne
1

html

Write and refactor semantic, accessible HTML across plain HTML, ERB, and Svelte templates.

Community
Intermediate