# HTML > Apply Google HTML style guide conventions to HTML code - Skill: `the-perfect-developer/html` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add the-perfect-developer/html` - Raw SKILL.md: https://api.skillmd.com/api/skills/the-perfect-developer/html/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: the-perfect-developer (https://skillmd.com/u/the-perfect-developer) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/the-perfect-developer/html --- # HTML Style Guide This skill applies Google's HTML style guide conventions to ensure clean, semantic, and maintainable HTML code. ## Core Principles ### Document Structure Always use HTML5 doctype and UTF-8 encoding: ```html Page Title ``` ### Semantic HTML Use elements according to their purpose: - Headings (`h1`-`h6`) for hierarchical structure - `p` for paragraphs - `a` for links and navigation - `button` for interactive actions - Avoid `div` for clickable elements ```html
All recommendations
All recommendations ``` ### Separation of Concerns Keep structure (HTML), presentation (CSS), and behavior (JavaScript) strictly separated: - No inline styles (`style` attribute) - No inline event handlers (`onclick`, etc.) - Link minimal CSS and JavaScript files ```html

HTML sucks

Centered content
My first CSS-only redesign

My first CSS-only redesign

``` ## HTML Style Rules ### Valid HTML - Use valid HTML code tested with [W3C HTML validator](https://validator.w3.org/nu/) - Ensure proper opening and closing tags - Nest elements correctly ```html Test
This is only a test. Test
This is only a test.
``` ### Protocol Always use HTTPS for embedded resources: ```html ``` ### Multimedia Provide alternative content for accessibility: - Use meaningful `alt` text for images - Provide transcripts/captions for video/audio - Use `alt=""` for purely decorative images ```html Spreadsheet screenshot. ``` ### Entity References Do not use entity references (except for special HTML characters): - Exception: `<`, `&`, and invisible characters - Use UTF-8 encoding directly ```html The currency symbol for the Euro is “&eur;”. The currency symbol for the Euro is "€". ``` ### Optional Tags Consider omitting optional tags for file size optimization: ```html Spending money, spending bytes

Sic.

Saving money, saving bytes

Qed. ``` ### Type Attributes Omit `type` attributes for CSS and JavaScript (HTML5 defaults): ```html ``` ### ID Attributes Minimize use of `id` attributes: - Prefer `class` for styling - Prefer `data-*` for scripting - When required, always include hyphen (e.g., `user-profile` not `userProfile`) - Prevents global `window` namespace pollution ```html

``` ## Formatting Rules ### Indentation Indent by 2 spaces (no tabs): ```html ``` ### Capitalization Use only lowercase for: - Element names - Attributes - Attribute values (except text/CDATA) ```html Home Google ``` ### Whitespace Remove trailing whitespace: ```html

What?_

Yes please. ``` ### Block Elements Use new line for every block, list, or table element: ```html

Space, the final frontier.

Income Taxes
$ 5.00 $ 4.50
``` ### Line Wrapping Break long lines for readability (optional but recommended): ```html ``` ### Quotation Marks Use double quotes for attribute values: ```html Sign in Sign in ``` ## Code Quality Guidelines ### Comments Use comments to explain complex sections: ```html ``` ### Action Items Mark todos with `TODO:` keyword: ```html {# TODO: Revisit centering. #}
Test
``` ## Quick Reference | Rule | Convention | |------|------------| | Doctype | `` | | Encoding | UTF-8 with `` | | Protocol | HTTPS for all resources | | Indentation | 2 spaces | | Case | Lowercase only | | Quotes | Double quotes (`"`) | | Type attributes | Omit for CSS/JS | | Semantic elements | Use elements for their purpose | | Accessibility | Always provide `alt` for images | | IDs | Minimize use, include hyphens | ## Additional Resources - **`references/html-detailed.md`** - Comprehensive HTML patterns and edge cases - [W3C HTML Validator](https://validator.w3.org/nu/) - [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html) ## Summary Write HTML that is: - **Valid**: Passes W3C validation - **Semantic**: Uses elements for their intended purpose - **Accessible**: Includes alt text and proper structure - **Separated**: No inline styles or scripts - **Consistent**: Follows formatting conventions - **Lowercase**: All element/attribute names - **Secure**: HTTPS for all resources