Loading...
Loading...
Back to Rules
Web Development
HTML and CSS Best Practices: Semantic Markup, Accessibility & Responsive Design Guide
Claude Directory November 29, 2025
0 copies 3 downloads
Elevate your web development with expert HTML and CSS best practices for semantic structure, top-tier accessibility, responsive layouts, and peak performance across all devices.
Rule Content
### Context
Building modern websites demands adherence to HTML and CSS standards that prioritize semantics, user accessibility, cross-device compatibility, and efficiency. These practices boost SEO, simplify maintenance, and ensure inclusive experiences for all users, including those relying on assistive technologies.
### Rules
#### HTML Structure
- Opt for semantic tags such as `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, and `<footer>` to convey meaning and aid screen readers.
- Reserve `<button>` for interactive actions; avoid repurposing `<div>` or `<span>` for clicks.
- Implement `<a>` elements for hyperlinks with a valid `href` attribute.
- Include descriptive `alt` attributes on all `<img>` tags.
- Construct forms using `<form>`, paired with labeled inputs of precise types (e.g., `type="email"`).
- Steer clear of outdated tags like `<font>` or `<center>`.
#### CSS Styling
- Link external stylesheet files instead of embedding styles inline.
- Prefer class-based selectors over IDs for greater reusability.
- Leverage Flexbox and CSS Grid for robust, adaptable layouts.
- Scale typography with `rem` and `em` units for better readability.
- Define CSS custom properties (variables) for unified color schemes and spacing.
- Adopt BEM (Block__Element--Modifier) for organized, scalable class names.
- Resolve style conflicts through specificity rather than `!important`.
#### Responsive Design
- Apply a mobile-first strategy with ascending media queries (e.g., `@media (min-width: 768px)`).
- Guarantee touch-friendly targets (at least 44x44 pixels).
- Serve optimized images using `srcset` and `sizes` attributes.
- Include `<meta name="viewport" content="width=device-width, initial-scale=1">` in `<head>`.
#### Accessibility Enhancements
- Incorporate ARIA roles and attributes judiciously to support screen readers.
- Maintain WCAG-compliant color contrasts (at least 4.5:1 for normal text).
- Enable full keyboard navigation with visible focus indicators.
- Structure content with landmark roles like `<nav>` and `<main>`.
#### Performance and Maintenance
- Compress and minify CSS/HTML files to reduce load times.
- Limit animations; apply `loading="lazy"` to offscreen media.
- Validate code with W3C tools and audit via Lighthouse.
- Test across browsers, devices, and tools.
- Add comments to intricate rules and standardize naming.
### Examples
**Semantic Header Example:**
```html
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
```
**Proper Button vs. Div:**
```html
<!-- Correct -->
<button type="button" aria-label="Close modal">×</button>
<!-- Avoid -->
<!-- <div onclick="closeModal()">×</div> -->
```
**Responsive CSS with Mobile-First:**
```css
/* Base (mobile) */
.container {
display: flex;
flex-direction: column;
}
/* Tablet+ */
@media (min-width: 768px) {
.container {
flex-direction: row;
}
}
/* Custom Property */
:root {
--primary-color: #007bff;
}
.btn {
background: var(--primary-color);
}
```
**Accessible Image:**
```html
<img src="hero.jpg" srcset="hero-300w.jpg 300w, hero-800w.jpg 800w" sizes="(max-width: 600px) 300px, 800px" alt="Description of hero image">
```
**BEM Class Example:**
```html
<div class="card">
<h2 class="card__title">Card Title</h2>
<p class="card__text">Content here.</p>
<button class="card__btn card__btn--primary">Action</button>
</div>Comments
More Rules
View allAI/ML
GLM-4.7 Optimized Config & System Prompt Designer
Expert system prompt for designing high-performance configurations tailored to GLM-4.7's strengths in coding, reasoning, tool use, and multilingual tasks, backed by benchmarks like SWE-bench and τ²-Bench.
C
CommunityAI/ML
GLM-4.7 Open-Source Coding Expert: Optimized System Prompt
Leverage GLM-4.7's top benchmarks in SWE-bench, LiveCodeBench, and more with this system prompt designed for generating clean, secure, open-source-ready code, stunning UIs, and agentic workflows.
C
CommunityAI/ML
GLM-4.7 Optimized Coding Agent
This system prompt transforms an AI into GLM-4.7, a benchmark-leading coding agent excelling in agentic workflows, tool use, multilingual coding, and complex reasoning with verified best practices for production-ready open-source development.
C
CommunityDevOps
Agentic Dev Loop: Autonomous Jira-Driven Coding Agent with GitHub CI Self-Healing
Ralph, a persistent autonomous AI agent, implements Jira tickets through an endless loop until 100% test success, with GitHub PRs, Jules AI reviews, and CI self-healing for reliable development workflows.
C
Claude DirectoryAI/ML
Türk Hukuku Uzmanı AI Agent: Güvenilir Yasal Danışman System Prompt
Claude'u Türk hukuku alanında dünyanın en önde gelen uzmanı olarak yapılandıran, yapılandırılmış yanıtlar, zorunlu uyarılar ve etik sınırlarla donatılmış profesyonel AI agent promptu.
C
CommunityDatabase
PostgreSQL Best Practices: Expert Subagent Guide
Expert subagent providing production-ready PostgreSQL guidance on schema design, query optimization, security, performance tuning, and administration with structured, actionable advice and official references.
C
Claude Directory