` or `` for clickable elements ### Forms - Use `

` with proper `action` and `method` attributes - Associate labels with inputs using `for` attribute - Use appropriate input types (`email`, `tel`, `number`, etc.) - Group related inputs with `

` and `` - Include validation attributes (`required`, `pattern`, `min`, `max`) ## Media Elements ### Images - Always include `alt` attribute for images - Use descriptive alt text for informational images - Use empty `alt=""` for decorative images - Use `srcset` and `sizes` for responsive images - Include `width` and `height` to prevent layout shift ### Video and Audio - Provide captions and transcripts - Include multiple source formats for compatibility - Use `poster` attribute for video thumbnails - Consider autoplay impact on user experience ## Accessibility (ARIA) ### When to Use ARIA - Use ARIA when native HTML semantics are insufficient - Prefer native HTML elements over ARIA when possible - Ensure ARIA attributes match actual element behavior ### Common ARIA Attributes - `aria-label` for accessible names - `aria-describedby` for additional descriptions - `aria-hidden` for decorative elements - `aria-expanded` for expandable sections - `aria-live` for dynamic content updates ### Landmarks - Use landmark roles to define page regions - Ensure all content is within a landmark - Use `role="main"`, `role="navigation"`, etc., only when semantic elements aren't available ## Best Practices ### Document Meta - Include proper `` declaration - Set language attribute on `` element - Include viewport meta tag for responsive design - Use appropriate meta tags for SEO ### Code Quality - Validate HTML using W3C validator - Maintain consistent indentation - Close all tags properly (including self-closing) - Use lowercase for element names and attributes ### Deprecated Elements - Avoid ``, ``, ``, `` for styling - Use CSS for visual presentation - Use `` and `` for semantic emphasis ## HTMX Integration When using HTMX for interactivity: - Use `hx-get`, `hx-post` attributes for server requests - Leverage `hx-target` to specify update targets - Use `hx-swap` to control how content is inserted - Implement `hx-confirm` for critical actions - Use `hx-push-url` for URL updates without full refresh ## Bootstrap Integration When using Bootstrap: - Leverage Bootstrap's grid system for layouts - Use Bootstrap components with proper markup structure - Include necessary ARIA attributes with components - Use Bootstrap's utility classes for spacing and typography - Minimize custom CSS by using Bootstrap classes ## Performance - Minimize DOM depth and complexity - Load scripts with `defer` or `async` when appropriate - Use `loading="lazy"` for below-fold images - Preload critical resources with ``