Skill Roadmap

HTML

HTML is the markup language that structures every page on the web. This roadmap walks you from how the web works through tags, attributes, semantic structure, media, forms, and the accessibility and SEO habits that separate a page that just renders from one that's built properly.

What skills does a front-end developer need HTML for?

It's the foundation everything else in the browser sits on top of

HTML is where every frontend development path starts. Before writing a single line of CSS or JavaScript, you need to understand how markup languages work, how a browser turns your file into a page, and how the pieces of the web — DNS, domain names, hosting, HTTP — fit together.

From there it's about knowing the vocabulary: tags, attributes, and the difference between block-level structure and inline text. Developers heading toward UI-heavy work should be comfortable with semantic layout tags, forms, and media embedding, while anyone shipping pages publicly needs a working grasp of accessibility and basic SEO.

Universally, writing clean, valid, semantic markup is what makes CSS easier to style, JavaScript easier to hook into, and pages easier for both screen readers and search engines to understand.

The HTML Roadmap

Work through these in order, then start building real pages

STEP 1

How the Web Works

The infrastructure behind every page load, before you write a single tag.

What are Markup Languages? Frontend Dev Introduction What is HTTP? DNS Domain Names Browsers Hosting What is SEO?
STEP 2
HTML5 logo

Document Fundamentals

The skeleton every HTML file shares, and the rules markup follows.

Tags and Attributes HTML Comments Case Insensitivity Whitespace !DOCTYPE html / body head / meta Your First HTML File
STEP 3

Basic Text Tags

The core set of tags used to write and format text content.

h1 to h6 title p b / strong i / em mark hr br sub sup pre Links HTML Entities
STEP 4

Grouping Text & Attributes

Wrapping and labelling content so it can be targeted and styled.

div / span Grouping Text id class style Data Attributes Standard Attributes
STEP 5

Lists

Structuring grouped and hierarchical content.

Ordered Lists Unordered Lists Definition Lists Nested Lists
STEP 6

Media, Embedding & Tables

Bringing images, audio, video, and tabular data into a page.

Images Audio / Video iframe img vs figure Priority Hints Embedding Media Table Tag Lists and Types
STEP 7

Semantic HTML

Tags that describe meaning and structure, not just appearance.

header nav main article section aside footer Semantic Markup
Quotation & citation
blockquote cite q dfn abbr address del / s / ins Highlighting Changes
STEP 8

Forms & Inputs

Collecting and validating user input directly in the browser.

Using Forms Labels and Inputs Form Validation Limitations File Uploads CSP
STEP 9
CSS3 logo

Styling, Accessibility & SEO

Connecting HTML to CSS and JavaScript, and making pages usable and findable.

Inline CSS Internal CSS External CSS Layout Tags Styling Basics Including JavaScript Accessibility Basics of SEO

GitHub Projects

Real, buildable projects to put on your own GitHub

Frequently Asked Questions

Common questions from people starting out with HTML

Is HTML a programming language?

No. HTML is a markup language — it describes the structure and content of a page rather than defining logic, loops, or conditions. It works alongside CSS for presentation and JavaScript for behaviour and logic.

Do I need to learn CSS and JavaScript before HTML?

No — HTML comes first. It provides the structure that CSS styles and JavaScript manipulates, so learning tags and semantic layout before diving into styling or scripting makes both of those easier to pick up later.

How long does it take to learn HTML?

The core tags, attributes, and document structure can be picked up in a few days. Getting comfortable with semantic layout, forms, accessibility, and embedding media well enough to build real pages typically takes a few weeks of regular practice.

What's the difference between HTML and HTML5?

HTML5 is simply the current version of the HTML standard. It added semantic layout tags like header, nav, and article, native audio and video embedding, and form input types that used to require extra scripting or plugins.

Is HTML still relevant with frameworks like React?

Yes — every framework still renders down to HTML in the browser. JSX and templating syntaxes are built on the same tags and semantics, so understanding HTML directly makes framework-based markup easier to read and debug.

How do I validate my HTML?

Run your markup through the W3C Nu Html Checker or a linter like webhint. They flag unclosed tags, invalid nesting, missing attributes, and other issues that can cause inconsistent rendering or accessibility problems.

Track complete

From how the web works to forms, semantics, and accessibility — that's the structural foundation every page is built on. Keep practising, then move on to CSS to bring your markup to life.

Where next?

Keep exploring by domain or drill into a single skill