HTML Structure

~300 words · 2 min read

What is semantic HTML?

Semantic HTML means using tags that describe the meaning of their content, not just how it should look. Instead of nesting everything inside generic <div> elements, you use elements like <header>, <nav>, <main>, <article>, and <footer> to communicate structure.

A typical page skeleton

<body>
  <header>
    <nav>...</nav>
  </header>
  <main>
    <article>
      <h1>Post Title</h1>
      <p>Content...</p>
    </article>
  </main>
  <footer>...</footer>
</body>

Why semantics matter

Three big reasons: accessibility (screen readers use landmarks to navigate), SEO (search engines weight content by its role), and maintainability (other developers understand your intent faster).

Heading hierarchy

Use one <h1> per page (the main topic), then nest logically: <h2> for sections, <h3> for subsections. Never skip levels — jumping from <h2> straight to <h4> breaks the document outline that assistive technology relies on.

Links and images

<a href="https://example.com" target="_blank" rel="noopener">Visit</a>
<img src="logo.svg" alt="Company logo">

The alt attribute is mandatory for accessibility — it's read aloud to screen-reader users and displayed when the image fails to load. Purely decorative images use an empty alt="".

Forms basics

<form>
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Send</button>
</form>

Always pair a <label> with its input via matching for/id. Clicking the label then focuses the field — a free usability and accessibility win.

CSS Selectors