` (unique per page) - Include meta description - Close all tags properly - Use lowercase for element names and attributes - Quote all attribute values - Validate HTML with W3C validator **Example:** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Hack23 - Cybersecurity consulting with transparency"> <title>Hack23

# HTML CSS Best Practices > Semantic HTML5, CSS custom properties, responsive design, and performance optimization for web development Use when this capability is needed. - Skill: `tomevault-io/html-css-best-practices` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/html-css-best-practices` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/html-css-best-practices/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/html-css-best-practices --- # HTML/CSS Best Practices Skill ## Purpose This skill defines HTML and CSS best practices for building accessible, performant, and maintainable web interfaces, specifically for the Hack23 Homepage and related projects. ## Rules ### Semantic HTML5 **MUST USE:** - `

` for site/page header - ` ``` ```css .main-nav { position: relative; } .nav-toggle { display: block; background: none; border: none; cursor: pointer; padding: var(--spacing-sm); } .nav-menu { display: none; list-style: none; margin: 0; padding: 0; } /* Show menu when expanded */ .nav-toggle[aria-expanded="true"] + .nav-menu { display: block; } /* Desktop: horizontal menu, hide toggle */ @media (min-width: 768px) { .nav-toggle { display: none; } .nav-menu { display: flex; gap: var(--spacing-md); } } ``` ## Related ISMS Policies - **[Secure Development Policy](https://github.com/Hack23/ISMS-PUBLIC/blob/main/Secure_Development_Policy.md)** - Security in frontend code ## Related Documentation - [accessibility-wcag SKILL.md](../accessibility-wcag/SKILL.md) - Accessibility requirements - [seo-optimization SKILL.md](../seo-optimization/SKILL.md) - SEO best practices ## Performance Budget - **CSS file size**: < 50KB (gzipped) - **First Contentful Paint**: < 1.5s - **Largest Contentful Paint**: < 2.5s - **Cumulative Layout Shift**: < 0.1 ## Validation & Testing - **HTML Validator**: https://validator.w3.org/ - **CSS Validator**: https://jigsaw.w3.org/css-validator/ - **Lighthouse**: Run audits in Chrome DevTools - **BrowserStack**: Cross-browser testing --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/hack23) — claim your Tome and manage your conversions.

Cybersecurity Consulting Services

Security Assessments

Compliance Support