HTML Roadmap for Juniors (2026 Edition) - Paolo Kos Blog

HTML gets dismissed as “too easy” - until you see how much bad HTML breaks real projects.

Master this first, and everything else becomes easier.

Phase 1: HTML Fundamentals (2 Weeks)

1.1 Document Structure

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- content here -->
</body>
</html>

Learn:

DOCTYPE, lang attribute, charset, viewport meta
<head> vs <body> - what goes where
Semantic page structure (<header>, <main>, <footer>)

1.2 Headings & Content Hierarchy

<h1>Main title</h1>
<section>
  <h2>Section title</h2>
  <article>
    <h3>Article title</h3>
    <h4>Subsection</h4>
  </article>
</section>

Learn:

Proper H1-H6 usage (one H1 per page)
Why hierarchy matters for screen readers and SEO
<section>, <article>, <aside> - when to use each

1.3 Text Content

<p>Paragraph with <strong>strong</strong> and <em>emphasis</em>.</p>
<blockquote cite="source">Long quote</blockquote>
<q>Short quote</q>
<cite>Source name</cite>
<br> | <hr>

Learn:

Semantic text elements: <p>, <strong>, <em>, <mark>, <code>, <pre>
Quotes, citations, line breaks, horizontal rules
Never use <b>, <i>, or <font>

Phase 2: Forms Mastery (2 Weeks)

2.1 Basic Forms

<form action="/submit" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"
         required minlength="8" maxlength="128">

  <button type="submit">Submit</button>
</form>

Learn:

action, method, enctype
label + for + id (accessibility gold)
required, minlength, maxlength, pattern

2.2 Input Types

<input type="text">
<input type="email">
<input type="password">
<input type="tel">
<input type="url">
<input type="number" min="1" max="100">
<input type="date">
<input type="range">
<input type="checkbox">
<input type="radio" name="group">
<input type="file" accept=".pdf,.doc">
<textarea></textarea>
<select>
  <option value="1">Option 1</option>
</select>

Learn:

Every input type and when to use it
name vs id vs value
accept, multiple, checked, selected

2.3 Native Form Validation

<input type="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

Learn:

Native validation attributes
:valid and :invalid pseudo-classes
<datalist> for suggestions

Phase 3: Semantic Layout (2 Weeks)

3.1 Page Layout

<body>
  <header>
    <nav></nav>
  </header>

  <main>
    <section></section>
  </main>

  <aside></aside>
  <footer></footer>
</body>

Learn:

<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
Screen reader flow and SEO benefits

3.2 Lists & Tables

<nav>
  <ul role="menubar">
    <li role="menuitem"><a href="/">Home</a></li>
  </ul>
</nav>

<table>
  <thead>
    <tr><th>Name</th><th>Email</th></tr>
  </thead>
  <tbody>
    <tr><td>John</td><td>john@example.com</td></tr>
  </tbody>
</table>

Learn:

<ul>, <ol>, <dl>
Table structure and scope
ARIA roles for complex navigation

Phase 4: Media & Embedding (1 Week)

4.1 Images

<figure>
  <img src="image.jpg"
       alt="Descriptive alt text"
       width="800"
       height="600"
       loading="lazy"
       decoding="async">
  <figcaption>Caption text</figcaption>
</figure>

Learn:

Useful alt text
Layout stability with width/height
<picture>, <figure>, <figcaption>

4.2 Video & Audio

<video controls width="640" height="360"
       poster="thumbnail.jpg"
       preload="metadata">
  <source src="video.mp4" type="video/mp4">
</video>

Learn:

<video>, <audio>, <source>
preload, autoplay, muted
<track> for captions

4.3 Embedding

<iframe src="https://example.com"
        width="800"
        height="600"
        title="Embedded content"
        loading="lazy"
        sandbox="allow-scripts allow-same-origin">
</iframe>

Learn:

iframe sandboxing
Meaningful title attributes

Phase 5: Accessibility Foundations (1 Week)

5.1 Focus Management

<a href="#content" class="skip-link">Skip to main content</a>
<main id="content" tabindex="-1"></main>

Learn:

tabindex usage
Skip links
:focus-visible

5.2 ARIA Basics

<button aria-expanded="false" aria-controls="menu">Menu</button>
<div id="menu" role="menu" hidden></div>

Learn:

Common ARIA attributes
When NOT to use ARIA (semantic HTML first)

5.3 Color & Contrast

Learn:

WCAG contrast ratios
Color blindness considerations
Focus indicators

Phase 6: Real-World HTML Patterns (1 Week)

6.1 Common Components

<article class="card">
  <img src="..." alt="...">
  <h3>Card title</h3>
  <p>Description</p>
  <footer>Meta</footer>
</article>

Learn:

Cards, modals, dropdowns
Breadcrumbs, pagination
Loading states

6.2 Forms in the Wild

<fieldset>
  <legend>Shipping Address</legend>
  <label><input type="radio" name="address"> Same as billing</label>
</fieldset>

Learn:

Fieldsets and legends
Conditional fields
Multi-step forms

How to Practice This Roadmap

Daily (30–60 min):

Pick one topic
Build 3 variations by hand
Test with keyboard or screen reader
Validate HTML

Weekly:

Clone a real site section (HTML only)
Make it semantic and accessible
Deploy it

Milestone project:

Landing page with navigation, cards, form, footer
Fully keyboard navigable

Why HTML Mastery Still Matters

Even with frameworks and AI:

Bad HTML breaks everything
Accessibility starts here
SEO reads HTML first
Semantic HTML improves performance

Master HTML first.