Step 2 — HTML with meaning

HTML is about meaning. Don't drown in <div>s; pick tags that say what this is. Search engines, screen readers, and your future self benefit.

1. First page

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first page</title>
</head>
<body>
  <header>
    <h1>Hello, my first page</h1>
  </header>
  <main>
    <article>
      <h2>Today's line</h2>
      <p>I wrote my first HTML.</p>
    </article>
  </main>
  <footer>
    <p>© 2026 me</p>
  </footer>
</body>
</html>

<header>, <main>, <article>, <footer> — semantic tags that name their role.

2. Tag families

Structure

<header> <nav> <main> <article> <section> <aside> <footer>

Body

<h1>..<h6> <p> <ul>/<ol>/<li> <blockquote> <figure>/<figcaption>

Inline

<a href> <strong> <em> <code> <time datetime> <mark>

Forms

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

3. Input types

<input type="text">       <input type="email">      <input type="password">
<input type="number">     <input type="tel">        <input type="url">
<input type="date">       <input type="color">      <input type="file">
<input type="checkbox">   <input type="radio">

type="email" triggers automatic validation and keyboard hints on mobile.

4. Accessibility — alt · label · aria

<img src="logo.png" alt="Codingstairs logo">
<img src="decoration.svg" alt="">         <!-- decorative → empty alt -->

<label for="name">Name</label>
<input id="name" name="name">

<button aria-label="Search">🔍</button>

<div role="alert">Saved</div>            <!-- only when semantics don't cover -->

5. Metadata · SEO

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page title - Site name</title>
  <meta name="description" content="One-sentence summary">

  <meta property="og:title" content="Page title">
  <meta property="og:description" content="summary">
  <meta property="og:image" content="https://example.com/og.jpg">
  <meta property="og:url" content="https://example.com/page">

  <meta name="twitter:card" content="summary_large_image">

  <link rel="icon" href="/favicon.ico">
  <link rel="canonical" href="https://example.com/page">
</head>

title + description + og:image covers 80% of SEO basics.

6. Semantic vs anti-pattern

Anti-pattern:

<div class="header">
  <div class="title">My blog</div>
  <div class="nav"><div class="nav-item"><a href="/">Home</a></div></div>
</div>

Semantic:

<header>
  <h1>My blog</h1>
  <nav><ul><li><a href="/">Home</a></li></ul></nav>
</header>

7. Try it

Save as index.html, double-click — the browser opens it. In VS Code, type ! + Tab for the boilerplate.

8. Validators

validator.w3.org
Chrome DevTools → Lighthouse → Accessibility
WAVE browser extension

9. Gotchas

Multiple <h1> — convention is one per page; inside <article> counts separately
Overused <section> — if no heading, <div> is enough
Missing alt — mandatory (or alt="" for decorative)
<table> for layout — tables are for tabular data

Deeper

Step 3 — CSS adds color, spacing, alignment to the same HTML.