Best Practices

Write clean, accessible, and maintainable websites.

1. Semantic HTML

Use meaningful tags instead of generic divs. This improves accessibility, SEO, and readability.

<!-- ❌ Bad -->
<div class="header">
  <div class="nav">
    <div class="link">Home</div>
  </div>
</div>

<!-- ✅ Good -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>

2. CSS Organization

Group styles logically: reset → layout → components → utilities. Use consistent naming.

/* 1. Reset / Base */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 2. Layout */
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }

/* 3. Components */
.card { background: white; border-radius: 8px; padding: 1.5rem; }
.btn { padding: 0.75rem 1.5rem; border-radius: 6px; border: none; }
.btn-primary { background: #0984e3; color: white; }

/* 4. Utilities */
.text-center { text-align: center; }
.mb-2 { margin-bottom: 2rem; }

3. Accessibility (a11y)

• Always include alt text on images

• Use proper heading hierarchy (h1 → h2 → h3, never skip levels)

• Ensure sufficient color contrast (4.5:1 minimum for text)

• Make all interactive elements keyboard-accessible

• Use label elements for form inputs

• Add aria-label for icon-only buttons

4. SEO Basics

Help search engines understand your page with proper meta tags and structure.

<head>
    <title>My Business - Web Design Services in NYC</title>
    <meta name="description" content="Professional web design services for small businesses in New York City. Modern, responsive websites starting at $499.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="canonical" href="https://mybusiness.com/">
    
    <!-- Open Graph for social sharing -->
    <meta property="og:title" content="My Business - Web Design">
    <meta property="og:description" content="Professional web design services">
    <meta property="og:image" content="https://mybusiness.com/preview.jpg">
</head>

5. Performance Tips

• Compress images — use WebP format when possible

• Minify CSS and JavaScript for production

• Use loading="lazy" on images below the fold

• Put CSS in <head>, scripts before </body>

• Avoid excessive DOM nesting (keep HTML structure flat)

• Use CSS custom properties for repeated values

6. Common Mistakes to Avoid

• ❌ Using only divs — use semantic elements instead

• ❌ Inline styles everywhere — use external CSS files

• ❌ Fixed widths on everything — use relative units and max-width

• ❌ Skipping mobile testing — always check responsive layouts

• ❌ Forgetting box-sizing: border-box — add it to your reset

• ❌ Not validating HTML — use the W3C validator