HTML Semantic Markup

Creates well-structured HTML documents using semantic elements that convey meaning to browsers, search engines, and assistive technologies. Covers proper use of sectioning elements (article, section, nav, aside), heading hierarchy, landmark roles, figure/figcaption, details/summary, dialog, and microdata annotations for rich, accessible, SEO-friendly document structure.

Usage

Describe the page or component you need to mark up semantically. Specify the content type (article, product listing, navigation, form, etc.) and any accessibility requirements. The skill generates clean, semantic HTML with proper element choices explained and common anti-patterns highlighted.

Examples

• "Convert a div-soup blog post page to semantic HTML with proper article, header, footer, and aside elements"
• "Create semantic markup for a FAQ page with expandable answers using details/summary elements"
• "Build a product card component using semantic HTML with proper figure, heading, and price markup"
• "Structure a multi-section landing page with navigation, hero, features, testimonials, and footer"

Guidelines

• Use article for self-contained, independently distributable content (blog post, product card, comment)
• Use section for thematic grouping of content with a heading; use div for purely presentational grouping
• Maintain a single h1 per page and a logical heading hierarchy (h1 > h2 > h3) without skipping levels
• Use nav for primary navigation blocks only, not every group of links (footer links rarely need nav)
• Use figure and figcaption for images, charts, code examples that are referenced from surrounding content
• Use button for actions and a (anchor) for navigation — never use div or span as interactive elements
• Add landmark roles implicitly through semantic elements: main, nav, aside, header, footer
• Use the dialog element for modal dialogs instead of custom div-based implementations