OpenClaw LaunchOpenClaw Launch
🏛️

Semantic HTML Guide

Verified

by Community

Guides you in choosing the right semantic HTML elements for your content. Covers document structure, landmarks, interactive elements, and when semantic HTML eliminates the need for ARIA attributes.

semantic-htmlstructurelandmarkselements

Semantic HTML Guide

Use the right semantic HTML elements to build inherently accessible web pages.

Usage

Describe your content structure to get semantic HTML recommendations.

Examples

  • "Choose the right elements for a blog article layout"
  • "Structure a complex form with proper semantic grouping"
  • "Replace divs with semantic elements in our navigation"

Guidelines

  • Use native HTML elements before adding ARIA
  • Structure pages with header, main, nav, aside, and footer
  • Use heading levels (h1-h6) in logical order
  • Choose button vs link based on behavior, not appearance
  • Use fieldset and legend for related form controls

More Accessibility Skills

🏷️
ARIA Label Guide

Write effective ARIA labels for web accessibility.

🔊
Screen Reader Testing

Test your web application with screen readers effectively.

🎨
Color Contrast Checker

Ensure your color combinations meet WCAG standards.

⌨️
Keyboard Navigation Guide

Implement complete keyboard navigation for web apps.