How long does it take to learn HTML? About six weeks, and here is the plan

What "knowing HTML" means at each stage

"I know HTML" can mean very different things. This is roughly how the stages break down:

Getting started is fast. There is nothing to install and no logic to learn: you describe the content and the browser displays it. The weeks go into knowing which element suits each situation and into the habit of choosing by meaning. Only writing lots of small pages builds that habit, so every week below finishes with a project.

Weeks 1 and 2 build a first page and the text inside it

Week 1 is module 1, First Page. Read what HTML is, then work through tags and elements, attributes and the page skeleton. By Friday you should be able to type this without peeking:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>
  <body>
    <h1>Main heading</h1>
  </body>
</html>

Close the week with the Hello World project.

Week 2 is module 2, Text: headings, paragraphs, strong and em, lists and nested lists, quotes and code, and entities such as < and ©. Watch the line between what text means and how it looks. <strong> marks something as important; the bold is a side effect. One useful exercise is to paste formatted text into an online rich text to HTML editor (opens in a new tab) and study which tags come out. Then build the recipe card project.

Weeks 3 and 4 add links, media and page structure

Week 3 is module 3, Links and Media, and this is where your pages start pointing at each other. You learn links, relative and absolute paths, jumps within a page, images, figures, audio, video and iframes. Paths trip up nearly everybody. Make a real folder on your computer with two pages and an images subfolder and link them every way you can think of until it clicks. The project is a travel postcard.

Week 4 is module 4, Structure and Semantics. Start with the generic boxes, <div> and <span>, then the landmarks <header>, <nav>, <main> and <footer>, then the content sections <article>, <section> and <aside>. For many students the div soup lesson is where it all falls into place: you take a page built from anonymous boxes and rewrite it with real structure. The project is a blog page, and if you have days left over, start module 5 on tables.

Weeks 5 and 6 cover tables, forms, the head and accessibility

Week 5 takes in modules 5 and 6, Tables and Forms. Tables are quick: rows, cells, header cells, captions and spanning, plus the rule that tables are not for layout. Forms take longer, and they deserve it, because a confusing form is where real users give up. Learn inputs, labels, input types, choices, buttons and built-in validation. The projects are a class timetable and a sign-up form.

Week 6 takes in modules 7 and 8, Head and Accessibility. Module 7 is everything inside <head>: title and charset, viewport and meta description, favicons and social previews, and linking CSS and JavaScript. Module 8 pulls the course together with good alt text, heading order, landmarks, label association, keyboard focus and ARIA basics. Treat the accessibility rescue project as your exam. If you can repair that page, you understand HTML.

Weeks 7 and 8 add some CSS and four final projects

Strictly speaking you have learned HTML by now. We still recommend these two weeks, because they turn what you know into finished work you can show people.

Week 7 is module 9, A Touch of CSS: the style attribute, the style element and selectors, external stylesheets, colours and fonts, and the box model. It is not a CSS course. It gives you enough to make your projects look tidy and no more.

Week 8 is module 10, Final Projects. You build a personal profile page, a full recipe page, a contact page with a form and a one-page portfolio, each pulling from several modules. Start every one from an empty file instead of copying old code, and only open the lessons when you are properly stuck.

Finish all four without step-by-step help and your HTML is good enough for a job, freelance work or your own projects.

Practice projects worth your evenings

The lessons introduce the elements. Your own projects are what make them stick, so pick subjects you actually care about and you will want to finish them:

• Rebuild a page you visit often. Take a simple article or recipe page, recreate only its HTML structure, then compare yours with the original using the browser's Inspect tool.
• Write a page about a hobby, with headings, a list, three images with good alt text and links to your sources.
• Mark up a timetable or a price list as a proper table with a caption and header cells.
• Build a feedback form with at least five labelled fields of different input types, some of them required.
• Make a three-page mini site with shared navigation and put it online with a free static host.
• Do a five-minute drill each day in the playground: type the skeleton from memory, then add one element you learned the day before.

Keep our cheat sheet open, and the interactive HTML cheat sheet and generators (opens in a new tab) at htmlcheatsheet.com too, but try to recall an element before you look it up. The effort of remembering is what makes you fluent.

Mistakes that slow beginners down

We see the same six habits holding people back:

• Watching and reading instead of typing. Tutorials feel productive, but HTML is learned through your fingers. Write some code in every session, even ten lines.
• Picking tags for their looks. An <h3> chosen because it is the right size, or a row of <br> tags used for spacing, will cause trouble later. Choose the element that fits the meaning and change the looks in CSS.
• Ignoring the head. Leave out charset, viewport or title and you get garbled characters, tiny pages on phones and weak search results.
• Skipping alt text and labels. They are not optional extras. Without them, images and forms do not work for screen reader users.
• Closing or nesting tags wrongly. The browser quietly repairs bad markup, so the mistake hides. The W3C Markup Validation Service (opens in a new tab) finds it in seconds:

<!-- Wrong: tags close in the wrong order -->
<p><strong>Sale ends today</p></strong>
<!-- Right: inner element closes first -->
<p><strong>Sale ends today</strong></p>

• Reaching for a framework too soon. Frameworks generate HTML, and if you cannot write good HTML yourself, you will not notice when they generate bad HTML.

What to learn after HTML

Once HTML feels natural, most people carry on in this order:

1. CSS in depth: layout systems, responsive design with media queries, custom properties and typography. Give it a few months. Most of what people call visual skill lives here.
2. Accessibility beyond the basics, meaning real screen reader testing, colour contrast, focus management and the WCAG 2.2 guidelines (opens in a new tab). Our HTML accessibility checklist is a good bridge.
3. JavaScript, the programming layer of the web: variables, functions, events and changing the page. Most beginner JavaScript reads and edits HTML elements, so everything you learned here pays off.
4. Tools: version control with Git (opens in a new tab), a deeper look at browser developer tools, and publishing your sites.

Keep writing HTML pages the whole way through. Every new skill on that list ends up applied to HTML, and a solid foundation makes each of them faster to learn.