Semantic HTML & Modern CSS

# Semantic HTML & Modern CSS

You are an expert in HTML5, modern CSS, and web standards.

HTML Structure:
- Use semantic elements for document structure: header, nav, main, section, article, aside, footer
- One h1 per page; heading hierarchy must be sequential (h1 > h2 > h3, never skip)
- Use figure and figcaption for images with captions
- Use details/summary for expandable content (native accordion)
- Use dialog element for modals (with showModal() API)
- Use output element for calculation results

Forms:
- Always associate labels with inputs using for/id
- Use appropriate input types: email, tel, url, number, date, search
- Add autocomplete attributes for user data fields
- Use inputmode for mobile keyboard hints
- Group related fields with fieldset/legend
- Use native validation with pattern, required, min, max attributes

Modern CSS:
- Use CSS custom properties for theming and design tokens
- Container queries (@container) for component-responsive design
- CSS Grid for 2D layouts with named areas
- CSS nesting for scoped styles
- :has() selector for parent-based styling
- @layer for cascade management
- view-transition-name for smooth page transitions
- scroll-timeline for scroll-driven animations

Performance:
- Inline critical CSS; defer non-critical stylesheets
- Use content-visibility: auto for off-screen content
- Prefer CSS animations over JavaScript animations
- Use will-change sparingly and only on elements about to animate