html
Guidelines for semantic HTML markup, document structure, forms, accessibility attributes, and modern HTML best practices
What this skill does
# HTML Development Guidelines ## Core Principles - Write semantic HTML to improve accessibility and SEO - Use appropriate elements for their intended purpose - Ensure proper document structure and hierarchy - Prioritize accessibility by using ARIA roles and attributes when needed ## Semantic Elements ### Document Structure - Use `<header>` for introductory content and navigation - Use `<main>` for the primary content (one per page) - Use `<footer>` for footer content - Use `<nav>` for navigation sections - Use `<aside>` for tangentially related content ### Content Sections - Use `<article>` for self-contained, distributable content - Use `<section>` for thematic grouping of content - Use appropriate heading hierarchy (`<h1>` through `<h6>`) - Only one `<h1>` per page, representing the main topic ### Text Content - Use `<p>` for paragraphs - Use `<ul>`, `<ol>`, `<dl>` for lists appropriately - Use `<blockquote>` for quotations - Use `<figure>` and `<figcaption>` for illustrations ## Interactive Elements ### Buttons and Links - Use `<button>` for clickable actions that don't navigate - Use `<a>` for links that navigate to URLs - Always include `href` attribute on links - Never use `<div>` or `<span>` for clickable elements ### Forms - Use `<form>` 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 `<fieldset>` and `<legend>` - 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 `<!DOCTYPE html>` declaration - Set language attribute on `<html>` 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 `<font>`, `<center>`, `<b>`, `<i>` for styling - Use CSS for visual presentation - Use `<strong>` and `<em>` 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 `<link rel="preload">`
Related in Web Dev
generating-lwc-components
IncludedLightning Web Components with PICKLES methodology and 165-point scoring. Use this skill when the user creates or edits LWC components, builds wire service patterns, or writes Jest tests for LWC. TRIGGER when: user creates/edits LWC components, touches lwc/**/*.js, .html, .css, .js-meta.xml files, or asks about wire service, SLDS, or Jest LWC tests. DO NOT TRIGGER when: Apex classes (use generating-apex), Aura components, or Visualforce.
tanstack-query
IncludedManage server state in React with TanStack Query v5. Set up queries with useQuery, mutations with useMutation, configure QueryClient caching strategies, implement optimistic updates, and handle infinite scroll with useInfiniteQuery. Use when: setting up data fetching in React projects, migrating from v4 to v5, or fixing object syntax required errors, query callbacks removed issues, cacheTime renamed to gcTime, isPending vs isLoading confusion, keepPreviousData removed problems.
document-processor-api
IncludedProcess documents with Nutrient DWS. Use when the user wants to generate PDFs from HTML or URLs, convert Office/images/PDFs, assemble or split packets, OCR scans, extract text/tables/key-value pairs, redact PII, watermark, sign, fill forms, optimize PDFs, or produce compliance outputs like PDF/A or PDF/UA. Triggers include convert to PDF, merge these PDFs, OCR this scan, extract tables, redact PII, sign this PDF, make this PDF/A, or linearize for web delivery.
nutrient-document-processing
IncludedProcess documents with Nutrient DWS. Use when the user wants to generate PDFs from HTML or URLs, convert Office/images/PDFs, assemble or split packets, OCR scans, extract text/tables/key-value pairs, redact PII, watermark, sign, fill forms, optimize PDFs, or produce compliance outputs like PDF/A or PDF/UA. Triggers include convert to PDF, merge these PDFs, OCR this scan, extract tables, redact PII, sign this PDF, make this PDF/A, or linearize for web delivery.
tanstack-query
IncludedManage server state in React with TanStack Query v5. Covers useMutationState, simplified optimistic updates, throwOnError, network mode (offline/PWA), and infiniteQueryOptions. Use when setting up data fetching, fixing v4→v5 migration errors (object syntax, gcTime, isPending, keepPreviousData), or debugging SSR/hydration issues with streaming server components.
accelint-nextjs-best-practices
IncludedNext.js performance optimization and best practices. Use when writing Next.js code (App Router or Pages Router); implementing Server Components, Server Actions, or API routes; optimizing RSC serialization, data fetching, or server-side rendering; reviewing Next.js code for performance issues; fixing authentication in Server Actions; or implementing Suspense boundaries, parallel data fetching, or request deduplication.