Learn HTML Roadmap

A complete guide to every HTML tag, structured from fundamentals to semantic and accessible markup.

Your progress

0 of 64 topics completed

0% complete

HTML Fundamentals0/8

What is HTML?

HyperText Markup Language — the backbone of every web page.

Start Learning

<!DOCTYPE html>

The document type declaration that tells browsers to render in HTML5 mode.

Start Learning

Elements & Tags

How opening tags, closing tags, and content come together.

Start Learning

HTML Attributes

Configure elements with attributes like id, class, src, href, alt.

Start Learning

Global Attributes

Attributes (id, class, style, title, lang, hidden, tabindex…) usable on any element.

Start Learning

HTML Comments

Notes ignored by the browser but visible in the source.

Start Learning

Entities & Whitespace

Escape special characters with &, <, >,  .

Start Learning

Block vs Inline Elements

Two fundamental display behaviors that shape every layout.

Start Learning

Document Structure & Metadata0/10

<html> Root Element

The container for the entire document.

Start Learning

<head> Section

Holds metadata, title, links to CSS, and scripts.

Start Learning

<body> Element

Wraps all visible content on the page.

Start Learning

<title> Tag

Sets the page title shown in the browser tab and search results.

Start Learning

<meta> Tags

Charset, viewport, description, keywords, robots — all the SEO metadata.

Start Learning

<link> Tag

Connect external CSS, favicons, fonts, and canonical URLs.

Start Learning

<style> Tag

Embed CSS directly inside the HTML document.

Start Learning

<script> Tag

Embed or load JavaScript. Master defer, async, and module.

Start Learning

<noscript> Tag

Fallback content for users without JavaScript.

Start Learning

<base> Tag

Set a base URL for all relative links on the page.

Start Learning

Text & Formatting0/11

<h1>–<h6> Headings

Six levels of section headings — the page outline.

Start Learning

<p> Paragraph

A block of running text.

Start Learning

<br> & <hr>

Line breaks and thematic horizontal rules.

Start Learning

<div> Generic Block

A non-semantic block container — usually styled with CSS.

Start Learning

<span> Generic Inline

A non-semantic inline container for styling pieces of text.

Start Learning

<strong>, <em>, <b>, <i>

Bold and italic — semantic vs purely visual.

Start Learning

<u>, <mark>, <small>, <s>, <del>, <ins>

Underline, highlight, fine print, strikethrough, deletions and insertions.

Start Learning

<sub> & <sup>

Subscript and superscript text.

Start Learning

<code>, <pre>, <kbd>, <samp>, <var>

Display code, keyboard input, output samples, and variables.

Start Learning

<blockquote>, <q>, <cite>

Long quotes, inline quotes, and citation references.

Start Learning

<abbr>, <time>, <address>

Abbreviations, machine-readable times, and contact info.

Start Learning

Lists & Tables0/6

<ul> Unordered List

Bullet-point lists — items where order does not matter.

Start Learning

<ol> Ordered List

Numbered lists for steps, rankings, or anything sequential.

Start Learning

<dl>, <dt>, <dd>

Description lists for term/definition pairs.

Start Learning

<table>, <tr>, <th>, <td>

Tabular data with rows, headers, and cells.

Start Learning

<thead>, <tbody>, <tfoot>

Group table rows for accessibility and sticky headers.

Start Learning

colspan, rowspan & <colgroup>

Merging cells and styling whole columns.

Start Learning

Links & Navigation0/2

<a> Anchor Links

The link element — internal, external, mailto, tel, and download.

Start Learning

<nav> Navigation

Wraps the primary navigation links of a site or section.

Start Learning

Media & Embedded Content0/8

<img> Images

Embed images with alt text, lazy loading, and responsive sizes.

Start Learning

<picture> & <source>

Art direction and modern format fallbacks.

Start Learning

<figure> & <figcaption>

Pair an image, diagram, or code block with a caption.

Start Learning

<video> Tag

Embed video with controls, multiple sources, and captions.

Start Learning

<audio> Tag

Embed sound files with playback controls.

Start Learning

<iframe> Embeds

Embed another web page (YouTube, maps, sandboxed widgets).

Start Learning

<canvas> & <svg>

Pixel-based and vector graphics.

Start Learning

<embed> & <object>

Generic embeds for PDFs, Flash (legacy), and plugins.

Start Learning

Forms & Inputs0/11

<form> Element

Wrap input controls so they can be submitted together.

Start Learning

<input> Types

text, email, password, number, date, file, color, range, and more.

Start Learning

Checkboxes & Radio Buttons

Multi-select and single-select choices.

Start Learning

<label> Tag

Associate text with form controls for clicks and screen readers.

Start Learning

<button> Tag

Submit forms or trigger JavaScript actions.

Start Learning

<select>, <option>, <optgroup>

Drop-down and multi-select menus.

Start Learning

<textarea> Multi-line Input

Free-form multi-line text input.

Start Learning

<fieldset> & <legend>

Group related controls and label the group.

Start Learning

<datalist> Autocomplete

Suggest values for an <input> while letting users type freely.

Start Learning

<output>, <progress>, <meter>

Display calculated values, task progress, and known-range gauges.

Start Learning

HTML Form Validation

required, pattern, min/max, minlength/maxlength.

Start Learning

Semantic & Interactive0/8

<header> & <footer>

Page or section header and footer landmarks.

Start Learning

<main> Tag

The dominant content of the page — exactly one per page.

Start Learning

<section> & <article>

Group related content; mark up self-contained pieces.

Start Learning

<aside> Tag

Tangentially related content — sidebars, pull quotes, ads.

Start Learning

<details> & <summary>

Native disclosure widget — no JavaScript needed.

Start Learning

<dialog> Modal

Native modal and non-modal dialogs.

Start Learning

<template> & <slot>

Inert markup for cloning, and Web Components composition.

Start Learning

ARIA & Accessibility

role, aria-label, aria-hidden — make HTML usable for everyone.

Start Learning

Ready when you are

Take the HTML Quiz

A 30-question quiz covering structure, text, links, forms, tables, media, and semantic HTML. Pass and download a personalized completion certificate.

Start HTML Quiz