Web Standards 101

1. Semantic HTML

Semantic HTML means using the correct elements to describe your content. It helps browsers, assistive tech, and search engines understand your site.

<header>
  <h1>My Blog</h1>
  <nav><a href="#">Home</a></nav>
</header>

<main>
  <article>
    <h2>First Post</h2>
  </article>
</main>

2. Responsive CSS

Use flexbox, grid, and media queries for mobile-first layouts.

.container {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

3. Accessibility Basics

• Alt text for images
• Form labels & ARIA
• Keyboard navigation

<label for="email">Email:</label>
<input id="email" type="email" required>