--- 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

January 15, 2025

Section Heading

Content...

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

Page Title (one per page)

Main Section

Subsection

Sub-subsection

Another Main Section

Subsection

``` ### 4. Forms ```html ``` ### 5. Images ```html Descriptive alt text

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

Item one
Item two

First step
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.

``` ### 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

html-markup

Install this skill

Comments