0%
Illustration of small workers assembling the skeleton of a web page with scaffolding and a blueprint

Module 1: First Page · Lesson 1 of 6

What Is HTML? A Beginner's Explanation with Examples

About 5 min

By HTML6 (opens in a new tab) · Updated · How we write and check content

All lessons in Module 1
  1. What HTML Is
  2. Tags and Elements
  3. Attributes
  4. The Page Skeleton
  5. Head and Body
  6. Project: Hello World Page

Module overview

Goal: Find out what HTML does, then edit your first page.

Learn

Every web page you have ever visited is a plain text file written in HTML (HyperText Markup Language (opens in a new tab)). HTML labels content. It doesn't calculate anything or make decisions. Picture the stickers you put on boxes when you move house: this box is a heading, that one is a paragraph, the flat one is a picture.

The text you write is called the source code. A browser such as Chrome, Firefox or Safari reads it and turns each label into something you can see. A heading comes out big and bold. A link becomes clickable.

The labels sit inside angle brackets, like <h1>. The next lesson, Tags and Elements, explains exactly how they work. For now, notice one thing: only the words between them show up on the page.

The short version

  • HTML (HyperText Markup Language) labels each piece of content so the browser knows whether it is a heading, a paragraph or a picture.
  • HTML is a markup language. It describes structure and meaning, and it can't calculate or make decisions the way a programming language can.
  • A browser reads your source code and draws the page. The tags never appear; you see only the content between them.
  • An HTML page is a plain text file, so any text editor can create one.

Example

<h1>My Weekend</h1>
<p>I went hiking and saw a deer.</p>
<p>Next weekend: pancakes.</p>

Your task

The editor already has a tiny page in it. Make it yours:

  1. Change the heading text Hello, world! to a greeting with your name, for example Hi, I'm Sam!.
  2. Add a second paragraph below the first one: copy the line that starts with <p> and ends with </p>, then change the words between them.

Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.

Quick quiz

Common mistakes

Wrong

My Weekend
I went hiking and saw a deer.

Right

<h1>My Weekend</h1>
<p>I went hiking and saw a deer.</p>

The browser ignores line breaks in source code. Without tags, both lines run together into one plain sentence.

Wrong

[h1]My Weekend[/h1]

Right

<h1>My Weekend</h1>

HTML tags use angle brackets. Square brackets are forum code, and a browser prints them as plain text.

Go deeper

Every browser understands three languages. HTML gives a page its structure, CSS controls how it looks, and JavaScript makes it interactive. You can build a working page with HTML alone, but you can't build one without it. Our guide HTML vs CSS vs JavaScript shows how the three fit together.

Browsers are forgiving. Broken HTML doesn't produce an error message. Instead, the HTML standard spells out exactly how to recover, so Chrome, Firefox and Safari all repair mistakes the same way. Handy, but it also hides bugs. A free checker such as the W3C Markup Validation Service (opens in a new tab) lists every problem in your code.

Other programs read your page too. Search engines read the tags to work out which text is a heading and what the page is about. Screen readers use the same tags so blind visitors can jump from one heading to the next.

You can read the HTML of any website. Press Ctrl+U (Cmd+Option+U on a Mac), or right-click and choose View Page Source. You'll see the same tags you are learning now.

Frequently asked questions

Is HTML a programming language?

No. HTML is a markup language. It says what each piece of content is, and it has no variables, loops or conditions. CSS handles appearance and JavaScript handles behavior. Writing HTML still counts as real coding, and every web developer starts with it.

What does HTML stand for?

HyperText Markup Language. HyperText is text that links to other text, markup means labels (tags) placed around content, and language means a shared set of rules that every browser follows. Tim Berners-Lee created HTML around 1991. Today the WHATWG maintains it as the HTML Living Standard (opens in a new tab).

Do I need special software to write HTML?

No. A plain text editor and a browser are all you need. Save the file with a .html extension and open it in your browser. A code editor such as VS Code adds colors and auto-completion. Skip word processors like Word, which add hidden formatting that isn't HTML. If you'd prefer not to install anything yet, an online editor such as HTML Code Editor (opens in a new tab) shows a live preview as you type.

Tags in this lesson

<h1>The top-level heading, naming what the page is about.<p>One paragraph of text.

Read next

What is HTML, and what does a browser do with it?

HTML in plain English: what the letters stand for, how a browser turns tags into a page, what elements and attributes are, and a first page you can write in ten minutes.

HTML vs CSS vs JavaScript, and what each one does

HTML vs CSS vs JavaScript with one quiz card built three times, a layer at a time, so you can see what each language adds. Plus a comparison table and which to learn first.

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

How long does it take to learn HTML? One hour to a first page, two weeks for the basics, six weeks to be comfortable. A week-by-week plan with free lessons and projects.