--- name: html-markup description: Write semantic, accessible HTML5 markup following best practices for structure, SEO, and accessibility. Use when creating HTML templates, fixing markup issues, or building web page structures. --- # HTML Markup Skill ## Instructions When writing HTML: ### 1. Document Structure ```html Page Title | Brand ``` ### 2. Semantic Elements ```html

Article Title

Section Heading

Content...

``` ### 3. Headings Hierarchy ```html

Page Title (one per page)

Main Section

Subsection

Sub-subsection

Another Main Section

Subsection

``` ### 4. Forms ```html
Contact Information

We'll never share your email.

``` ### 5. Images ```html Descriptive alt text Description
Sales growth chart showing 50% increase
Fig 1: Sales growth Q1-Q4 2024
``` ### 6. Links ```html About Us External Site Download PDF Jump to Section 2 ``` ### 7. Lists ```html
  1. First step
  2. Second step
Term
Definition
Another term
Its definition
``` ### 8. Tables ```html
Monthly Sales Report
Month Sales Growth
January $10,000 +5%
February $12,000 +20%
Total $22,000 —
``` ### 9. Interactive Elements ```html
Click to expand

Hidden content revealed on click.

Modal Title

Modal content

 ``` ### 10. Accessibility Checklist - [ ] All images have alt text - [ ] Proper heading hierarchy - [ ] Form inputs have labels - [ ] Links are descriptive - [ ] Color isn't only indicator - [ ] Focus states visible - [ ] Skip link present - [ ] ARIA used correctly - [ ] Keyboard navigable - [ ] Language declared