One-sentence summary
HTML is the markup language that uses tags to define the headings, paragraphs, lists, links and images of a web page.
Why does it matter?
In the previous lesson we saw that a browser requests a file from a server. The file the browser draws on the screen is very often an HTML file.
Without HTML, a web page is like a blank sheet of paper with no headings and no paragraphs. HTML tells the browser "this is a heading", "this is a paragraph", "this is a link". In other words, it describes what the content is.
Learning HTML is the first step toward building your own web page. You have already written commands in order with Scratch and Python. HTML works with a similar idea: you build the page piece by piece, in an organised way.
What is HTML? Tags and elements
HTML (HyperText Markup Language) is not a programming language; it is a markup language. It marks up text to answer the question "what does this part represent?"
Tag
A tag is a command written inside angle brackets. Most tags have an opening and a closing form. The closing tag contains a slash (/).
<p>Hello, I am a paragraph.</p>Here <p> is the opening tag and </p> is the closing tag. The letter p comes from the word *paragraph*.
Element
The opening tag, the content and the closing tag together are called an element. The whole example above is a paragraph element.
Some elements are empty and have no closing tag. For example <br>, used for a line break, is one of them.
Attribute
To give a tag extra information, we use an attribute. An attribute is written inside the opening tag.
<a href="https://en.wikipedia.org">Open Wikipedia</a>Here the href attribute tells the browser which address the link goes to.
The basic page skeleton
Every HTML page starts with the same basic frame. This frame tells the browser how to read the document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>Let us look at the parts of this skeleton one by one.
<!DOCTYPE html>
This first line tells the browser "this document is written in modern HTML". It is the first line of every page.
<html>
The main element that wraps the whole page. The lang="en" attribute states that the page language is English. This helps screen readers and search engines.
<head>
Holds the invisible information of the page. This content is not shown directly on the screen; it gives instructions to the browser.
<meta charset="utf-8">— makes sure special characters display correctly.<meta name="viewport" ...>— makes the page display properly on phones.<title>— the title shown on the browser tab.
<body>
Everything we see on the screen goes here: headings, paragraphs, images and links.
Content tags
Now let us learn the basic tags we place inside <body>.
Headings: <h1>–<h6>
There are six heading levels, from <h1> to <h6>. <h1> is the largest and most important heading; <h6> is the smallest.
<h1>Robotics Club</h1>
<h2>What Did We Do This Week?</h2>
<h3>Line-Following Robot</h3>A page usually has a single <h1>. We use headings for order of importance, not for size.
Paragraph: <p>
We write blocks of text with paragraphs.
<p>Today I built my first web page.</p>
<p>On the first try the heading was too big, then I fixed it.</p>Lists: <ul> and <ol>
Use <ul> for an unordered (bulleted) list and <ol> for an ordered (numbered) list. Each item is a <li> element.
<ul>
<li>Pencil</li>
<li>Notebook</li>
<li>Ruler</li>
</ul>Link: <a>
We use a link to go to another page. The address is written in the href attribute.
<a href="https://en.wikipedia.org">Visit Wikipedia</a>Image: <img>
To add an image we use <img>. src holds the image address, and alt holds a description text for someone who cannot see the image.
<img src="robot.png" alt="A small robot with red wheels">The alt text is very important: it is used if the image does not load or if a screen reader is reading the page aloud. So writing alt means everyone can use the page. This is called accessibility.
Mini practice
Let us build a small page that introduces you. Type the skeleton below into a text editor and save it as about-me.html. Then double-click the file to open it in a browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Get to Know Me</title>
</head>
<body>
<h1>Hi, I am a student</h1>
<p>I am learning robotics and coding.</p>
<h2>Three things I like</h2>
<ul>
<li>Robots</li>
<li>Puzzles</li>
<li>Cycling</li>
</ul>
<p>To learn more:
<a href="https://en.wikipedia.org/wiki/HTML">the HTML page</a>
</p>
</body>
</html>After opening the page, try this:
- Change the
<h1>heading to your own sentence. - Add a fourth item to the list.
- Add a new
<p>paragraph.
When you save the change and refresh the browser, you see the result right away.
Common mistakes
Forgetting the closing tag
If you write <p> but forget </p>, the following content may stay inside the paragraph. Make it a habit to close every tag you open.
Leaving the alt text empty
Not writing alt when adding an <img> is a common mistake. Write a short text that describes the image in a meaningful way.
Using headings for size
Choosing <h3> just because "the text should be a bit smaller" is wrong. The heading level shows the order of importance of the content. Size is set with CSS (which we will see in the next module).
Mixing up <head> and <body> content
<title> must always be inside <head>. Headings that should appear on the screen (like <h1>) go inside <body>.
Safety note
- When building your own about-me page, do not share personal information: your full name, home address, phone number, school name or exact location should not appear on the page. Build this habit from the start, even when you are only testing on your own computer.
- Always ask an adult before publishing a page on the internet.
- The example addresses and image names in this lesson are imaginary; this academy has no real form or sign-up system that collects data.
- Before clicking a link (
<a>), check where it goes from thehrefvalue. Do not trust addresses you do not recognise.
Lesson summary
- HTML is a markup language that uses tags to define what the content is.
- Most elements have an opening and a closing tag; attributes give a tag extra information.
- Every page shares the same skeleton:
<!DOCTYPE html>,<html>,<head>and<body>. - Headings (
<h1>–<h6>), paragraph (<p>), lists (<ul>/<ol>), link (<a>) and image (<img>) are the basic content tags. - Writing
altfor<img>matters for accessibility and safety.
Review questions
- What is the difference between a tag and an element?
- What kinds of content do the
<head>and<body>sections hold? - On what basis should we choose headings from
<h1>to<h6>? - What does the
altattribute on an<img>tag do? - Which attribute decides which address a link (
<a>) goes to?
Answers
- A tag is a single command inside angle brackets (like
<p>). An element is the whole of the opening tag, content and closing tag (like<p>Hello</p>). <head>holds invisible information (character set, viewport, tab title).<body>holds all the content shown on the screen (headings, paragraphs, images).- By the order of importance of the content, not by size.
<h1>is the most important heading; use<h2>,<h3>and so on for sub-headings. - It is the description text shown or read out if the image does not load or if a screen reader reads the page aloud. It is needed for accessibility.
- The
hrefattribute decides it.
Source and verification note
For “Page Skeleton with HTML”, verification focuses on whether the relationship between What is HTML? Tags and elements and Element remains consistent across examples. Examples use standards-oriented HTML, CSS and browser JavaScript. A page should be checked not only visually but also for keyboard use, focus order, mobile layout and meaningful heading structure.
Next lesson
Semantic HTML: Making the page more organised and accessible with meaningful tags such as <header>, <nav>, <main> and <footer>.