Techie BabajiLearn to Code. Build Real Skills.
Frontend track

HTML Tutorial

The structure of every web page. Learn elements, forms, semantics, SEO and accessibility.

BeginnerFollows the WHATWG HTML Living Standard.
Start: Introduction to HTML View all topics
0/22 complete
Topics
22
Full lessons
22
Est. hours
~4
Interview Qs
29

Overview

HTML (HyperText Markup Language) describes the structure and meaning of content on the web. Browsers read HTML and build the Document Object Model (DOM) that CSS styles and JavaScript manipulates.

This track starts with your very first page and ends with semantic, accessible, search-friendly markup you would be comfortable shipping to production.

What you will learn

  • Write valid, well-structured documents
  • Build accessible forms with native validation
  • Use semantic elements that help users and search engines
  • Embed images, audio, video and iframes responsibly

Prerequisites

None — this track starts from the very beginning.

Learning path

The recommended sequence, from beginner to advanced. Each stage builds on the one before.

  1. 1Getting Started · 5 topics · Beginner
    Introduction to HTML · HTML Document Structure · HTML Elements and Tags · Headings and Paragraphs · Attributes
  2. 2Content · 4 topics · Beginner
    Links and Navigation · Images · Lists · Tables
  3. 3Forms · 3 topics · Beginner → Intermediate
    Forms · Input Types · Form Validation
  4. 4Modern HTML · 4 topics · Intermediate
    Semantic HTML · Audio and Video · HTML5 Features · Iframes
  5. 5Production · 4 topics · Intermediate → Advanced
    Meta Tags · SEO-Friendly HTML · Accessibility · HTML Best Practices
  6. 6Practice · 2 topics · Advanced
    Mini Projects · HTML Interview Questions

Complete topic list

22 topics
1

Getting Started

5 topics
  1. Introduction to HTMLBeginner5m
  2. HTML Document StructureBeginner5m
  3. HTML Elements and TagsBeginner5m
  4. Headings and ParagraphsBeginner5m
  5. AttributesBeginner5m
2

Content

4 topics
  1. Links and NavigationBeginner5m
  2. ImagesBeginner5m
  3. ListsBeginner5m
  4. TablesBeginner5m
3

Forms

3 topics
  1. FormsBeginner5m
  2. Input TypesIntermediate5m
  3. Form ValidationIntermediate5m
4

Modern HTML

4 topics
  1. Semantic HTMLIntermediate5m
  2. Audio and VideoIntermediate5m
  3. HTML5 FeaturesIntermediate5m
  4. IframesIntermediate5m
5

Production

4 topics
  1. Meta TagsIntermediate5m
  2. SEO-Friendly HTMLAdvanced5m
  3. AccessibilityAdvanced6m
  4. HTML Best PracticesAdvanced5m
6

Practice

2 topics
  1. Mini ProjectsAdvanced5m
  2. HTML Interview QuestionsAdvanced15m

Code example

A taste of the track, from Introduction to HTML.

HTMLYour first web page Runnable
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, Techie Babaji!</h1>
    <p>This is my <strong>first</strong> web page.</p>
    <a href="https://developer.mozilla.org">Learn more on MDN</a>
  </body>
</html>
Expected output
A page with a large heading, a paragraph with the word “first” in bold, and a clickable link.
Opens this example in the full playground

Practice exercises

Introduction to HTML

Create a page about your favourite programming language. Include an h1, two paragraphs and a link to its official website.

HTML Document Structure

Write a complete HTML document from memory with the title “My Hobbies”, a heading and a short paragraph about one hobby.

HTML Elements and Tags

Write a paragraph that says “HTML is easy and fun” where “easy” is important (strong) and “fun” is emphasised (em). Add a horizontal rule below it.

Headings and Paragraphs

Create a mini recipe page: an h1 recipe name, an h2 “Ingredients”, an h2 “Method”, and a paragraph under each. Make one word important.

Attributes

Create a link with id "home-link" and class "nav", pointing to https://example.com, that opens in a new tab safely.

Links and Navigation

Build a nav with links to index.html, blog.html and an external GitHub profile that opens in a new tab.

Show all 21 exercises
Images

Add an image of a cat (use https://placecats.com/300/200) with good alt text, fixed dimensions, lazy loading and a caption.

Lists

Make an ordered list of 3 steps to start a computer, where step 2 has a nested unordered list of two sub-points.

Tables

Create a 3-day weekly timetable with a caption. The first column should be row headers (days) and one cell should span two columns for “Holiday”.

Forms

Build a login form that POSTs to /login with a username, a password, a “remember me” checkbox and a submit button. Link all labels.

Input Types

Build a hotel booking form with check-in and check-out dates, number of guests (1–6) and an email address.

Form Validation

Add a password field that is required, at least 8 characters long, and a “confirm password” field.

Semantic HTML

Convert this layout to semantic HTML: <div class="top"><div class="menu">…</div></div><div class="content">…</div><div class="bottom">…</div>

Audio and Video

Embed the MDN flower video so it shows controls, is 300px wide, has a poster and loads only metadata.

HTML5 Features

Create an FAQ with three <details> questions, the first one open by default.

Iframes

Embed https://example.com in a responsive, lazy-loaded iframe with a title, allowing scripts but nothing else.

Meta Tags

Write the <head> for a blog post called “10 Tips for Learning CSS”, including description, canonical and Open Graph title/image.

SEO-Friendly HTML

Fix this for SEO: <div class="big">Shoes</div><img src="s.jpg"><a href="/sale">click here</a>

Accessibility

Make this accessible: <div onclick="search()"><img src="search.svg"></div>

HTML Best Practices

List three problems in: <html><body><div onclick="go()" style="font-size:30px">Welcome</div><a href="x" target="_blank">here</a></body></html>

Mini Projects

Build Project 3: a product card for “Wireless Earbuds” priced ₹1,999 with three features and an Add to cart button.

Common interview questions

Frequently asked questions

Is HTML a programming language?
No. HTML is a markup language: it describes structure and meaning, but it has no variables, loops or logic. That is what JavaScript adds.
How long does it take to learn HTML?
Most learners are comfortable with the essentials in one to two weeks of regular practice. Accessibility and semantics take longer to master and are worth the investment.
Do I need to install anything?
Only a text editor and a browser. You can also practise directly in the Techie Babaji playground.