Your first HTML page

About 30 minutes · read, practise, then check your understanding

HTML is the skeleton of every web page. Every framework you learn later (React, Angular, Next.js) still produces HTML, so this is time well spent.

You will learn

What a tag and an element are
The basic shape every HTML page shares
How to write headings and paragraphs
How to check your HTML when the page looks wrong

Before you start

Lesson: How websites work

The idea, simply

HTML stands for HyperText Markup Language. It is not a programming language; it does not calculate anything. It labels content so the browser knows what each piece is: this is a heading, this is a paragraph, this is a link.

You label content with tags. Most tags come in pairs: an opening tag like <p> and a closing tag like </p>, with a slash. Everything between them, together with the tags, is called an element.

<p>Vanakkam! This is a paragraph.</p>

Opening tag, content, closing tag: one paragraph element

Every HTML page has the same outer shape. The <head> holds information about the page (like the title in the browser tab). The <body> holds everything people see.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Tab title goes here</title>
  </head>
  <body>
    Everything visible goes here
  </body>
</html>

The skeleton of every HTML page

<!DOCTYPE html> tells the browser this is modern HTML.
lang="en" says the page is in English; use lang="ta" for Tamil. Screen readers use this to pronounce words correctly.
meta charset="utf-8" lets the page show every language's letters, including Tamil.

Headings go from <h1> (most important, one per page) down to <h6>. Use them for structure, not for making text big; CSS handles size later.

See it in action

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Priya's notes</title>
  </head>
  <body>
    <h1>Priya's learning notes</h1>
    <h2>Week 1</h2>
    <p>I learned how browsers and servers talk to each other.</p>
    <h2>Week 2</h2>
    <p>I wrote my first HTML page.</p>
  </body>
</html>

A complete small page with one h1 and two sections

Common mistakes

Forgetting closing tags.: Type the closing tag right after the opening one, then fill in the middle.
Using h1, h2 to make text bigger.: Choose headings by importance. Change size with CSS in the next stage.
Saving the file as index.html.txt on Windows.: Turn on 'File name extensions' in File Explorer so you can see and fix the real name.

Key takeaways

HTML labels content; it does not calculate.
Elements are opening tag, content, closing tag.
Every page shares the same skeleton: doctype, html, head, body.