CRITICAL: Before writing or editing ANY HTML code, ALWAYS use the Context7 MCP server to check for relevant context.

Context7 provides access to a knowledge base that may contain:

• Project-specific HTML patterns and conventions
• Custom component libraries and templates
• Style guide requirements
• Accessibility standards for the project
• Performance benchmarks and requirements
• Team preferences and coding standards

Workflow:

1. Before writing code: Query Context7 for relevant patterns, conventions, or examples
2. During editing: Check Context7 for project-specific requirements that might affect your changes
3. After writing: Verify your code aligns with any Context7 guidance

Use Context7 to search for topics like:

• "HTML conventions"
• "accessibility requirements"
• "component templates"
• "form patterns"
• "performance standards"
• Specific component or pattern names

Never skip the Context7 check - it ensures your HTML aligns with project standards and leverages existing patterns.

1. Semantic first - Use elements for their intended meaning, not just appearance
2. Accessibility by default - Every user deserves a great experience
3. Progressive enhancement - Start with working HTML, layer on CSS/JS
4. Performance matters - Optimize for speed and efficiency

Minimal Valid HTML5 Document

```html

```

Essential Meta Tags

```html

```

Use the Right Element for the Job

```html

```

Sectioning Elements

| Element | Purpose | When to Use |

|---------|---------|-------------|

|

ARIA Labels and Roles

```html

📧

Email Address

Email Address

```

Focus Management

```html

Skip to main content

```

Alternative Text

```html

```

ARIA Live Regions

```html

```

Accessible Form Structure

```html

```

HTML5 Input Types

```html

```

Input Attributes for Better UX

```html

type="text"

name="username"

pattern="[a-zA-Z0-9_]{3,16}"

title="Username must be 3-16 characters, letters, numbers, and underscores only"

>

```

Accessible Data Tables

```html

```

Choosing the Right List Type

```html

• Apples
• Bananas
• Oranges

1. Preheat oven to 350°F
2. Mix dry ingredients
3. Add wet ingredients
4. Bake for 25 minutes

HTML

HyperText Markup Language, the standard markup language for web pages.

CSS

Cascading Style Sheets, used to style HTML elements.

• Fruits

  • Tropical

    • Mango
    • Papaya

  • Citrus

    • Orange
    • Lemon

```

Image Optimization

```html

src="image-800w.jpg"

srcset="

image-400w.jpg 400w,

image-800w.jpg 800w,

image-1200w.jpg 1200w,

image-1600w.jpg 1600w

"

sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"

alt="Descriptive alt text"

loading="lazy"

decoding="async"

width="800"

height="600"

>

```

Resource Loading Strategies

```html

```

HTML Size Optimization

```html

Text

Text

```

Details and Summary (Native Disclosure)

```html

```

Dialog Element (Native Modal)

```html

Open Dialog

```

Data Attributes

```html

```

Template Element

```html

```

Videos

```html

controls

width="640"

height="360"

poster="video-thumbnail.jpg"

preload="metadata"

>

kind="subtitles"

src="subtitles-en.vtt"

srclang="en"

label="English"

>

kind="captions"

src="captions-en.vtt"

srclang="en"

label="English CC"

default

>

Your browser doesn't support HTML5 video.

Download the video instead.

```

Audio

```html

Your browser doesn't support HTML5 audio.

Download the audio instead.

```

Iframes

```html

```

HTML Validation Checklist

• [ ] Valid DOCTYPE declaration
• [ ] Proper nesting (no overlapping tags)
• [ ] All tags properly closed
• [ ] Unique IDs on a page
• [ ] Valid attributes for each element
• [ ] Proper character encoding (UTF-8)
• [ ] Alt text for all images (or empty alt for decorative)
• [ ] Form labels associated with inputs
• [ ] Heading hierarchy (no skipped levels)
• [ ] Lang attribute on html tag
• [ ] Valid HTML5 (use W3C validator)

Common HTML Mistakes to Avoid

```html

First paragraph

Second paragraph

First paragraph

Second paragraph

Content

```

Input Sanitization Context

```html

```

External Resources

```html

External Link

```

Build from HTML Up

```html

```

Recommended Tools

| Purpose | Tool | Why |

|---------|------|-----|

| Validation | [W3C Validator](https://validator.w3.org/) | Check HTML validity |

| Accessibility | [axe DevTools](https://www.deque.com/axe/) | Find a11y issues |

| Performance | [Lighthouse](https://developers.google.com/web/tools/lighthouse) | Audit performance |

| HTML Minification | [html-minifier](https://github.com/kangax/html-minifier) | Reduce file size |

| Linting | [HTMLHint](https://htmlhint.com/) | Catch common mistakes |

HTML in Build Pipelines

```bash

# Validate HTML

npx html-validate src/*/.html

# Minify HTML

npx html-minifier --collapse-whitespace --remove-comments input.html -o output.html

# Check accessibility

npx pa11y http://localhost:3000

```

Common Character Entities

| Character | Entity | Numeric |

|-----------|--------|---------|

| < | < | < |

| > | > | > |

| & | & | & |

| " | " | " |

| ' | ' | ' |

| © | © | © |

| ® | ® | ® |

| ™ | ™ | ™ |

| non-breaking space |   |   |

| — (em dash) | — | — |

| – (en dash) | – | – |

Global Attributes

Available on all HTML elements:

• id - Unique identifier
• class - CSS class names (space-separated)
• style - Inline CSS styles
• title - Advisory information (tooltip)
• lang - Language of element content
• dir - Text directionality (ltr, rtl, auto)
• hidden - Hide element
• tabindex - Tab order (-1, 0, positive numbers)
• contenteditable - Make element editable
• data-* - Custom data attributes
• draggable - Enable drag and drop
• spellcheck - Enable spell checking

1. Always check Context7 MCP before writing/editing code - Leverage project-specific patterns and requirements
2. Always use semantic HTML - Choose elements based on meaning, not appearance
3. Validate your HTML - Use W3C validator to catch errors
4. Prioritize accessibility - Use ARIA attributes, alt text, and keyboard navigation
5. Optimize for performance - Lazy load images, defer scripts, minimize HTML
6. Use progressive enhancement - Start with HTML, layer on CSS and JavaScript
7. Keep it simple - Don't over-engineer with unnecessary divs and complexity
8. Test across browsers - Ensure compatibility with all major browsers
9. Think mobile-first - Design for small screens, enhance for larger ones
10. Use meaningful names - IDs and classes should describe purpose, not appearance
11. Comment sparingly - Code should be self-documenting, comments for complex logic only