Let’s Try a Simple Example Using HTML
To really understand how HTML works, the best thing you can do is build something, even if it’s super simple.
Good news: you don’t need any fancy tools. Just Notepad and your web browser. That’s it.
Step 1: Open Notepad (or any basic text editor).
Now type this in:
Step 2: Save the file
Go to File > Save As
Name it: index.html
Make sure the file extension is .html, not .txt, this tells your computer it’s a webpage.
Save it somewhere easy to find, like your Desktop.
🌐 Step 3: Open It in Your Browser
Go to your Desktop and double-click the file you just saved.
It’ll open in your web browser, and you’ll see just one word: hello
🧠 What Just Happened?
You wrote a webpage.
This is where it all begins.
Recreating a Simple Wikipedia-Style Page
Recreating a Simple Wikipedia-Style Page
Now let’s try building a tiny version of the Scarlett Johansson page we saw earlier.
We’ll keep it super simple: just a title and a couple of lines about her.
Do This:
- Open the same file you made earlier — index.html.
- Erase everything in it.
Now copy and paste this:
Scarlett Johansson
Scarlett Ingrid Johansson (/dʒoʊˈhænsən/; born November 22, 1984) is an American actress and singer.
Her films as a leading actress have grossed over $15.1 billion worldwide, making her the highest-grossing lead actor in history.
Now, save and refresh the browser.
You will see:
The words are there on the screen — great. That means it’s working.
But… take a closer look. It’s all bunched up. There’s no title at the top. Everything just runs together like plain text.
It works, but it doesn’t look right. It definitely doesn’t feel like a proper page.
So What’s Missing?
Right now, your browser is just showing the text as-is.
It has no idea what’s important or what should stand out. It doesn’t know what’s a heading, what’s a paragraph, or where things should be spaced.
And this is where things get interesting — because next, you’ll learn how to tell the browser what’s what.
That’s the key to making real web pages. Not just showing text, but shaping it the way you want.
Using Tags to Structure Content
Headings, paragraphs, and images in a webpage are all built with HTML tags.
Tags are how we tell the browser: this is a heading, this is a paragraph, this is an image.
They give the page structure so the browser knows how to display everything in a clean, organized way. Think of them like little labels for different parts of a web page.
For example, let’s say we want “Scarlett Johansson” to show up as a heading. We just wrap it in a heading tag. The main heading tag is <h1>:
<h1>Scarlett Johansson</h1>So here, <h1> means heading starts from here and </h1> means heading ends here.
Similarly, we’ll put the paragraphs inside <p> tags:
<p>Scarlett Ingrid Johansson (/dʒoʊˈhænsən/; born November 22, 1984) is an American actress and singer.</p>
<p>Her films as a leading actress have grossed over $15.1 billion worldwide, making her the highest-grossing lead actor in history.</p>Now just save the Notepad file and refresh your browser.
You will see:
- A big heading with her name
- Two paragraphs neatly shown below it
As you can see, HTML helps us display the content in the structure we want.
Assignment
Let’s practice a little.
In the Scarlett Johansson page you’re building, add two more paragraphs below the ones you already wrote.
You can copy a couple of short lines from her Wikipedia page, or just make up simple sentences yourself.
👉 Remember: each paragraph should be wrapped inside <p> tags.
Save the file and refresh your browser to make sure the new paragraphs show up one after the other.
Solution Code for Assignment
<h1>Scarlett Johansson</h1>
<p>Scarlett Ingrid Johansson (/dʒoʊˈhænsən/; born November 22, 1984) is an American actress and singer.</p>
<p>Her films as a leading actress have grossed over $15.1 billion worldwide, making her the highest-grossing lead actor in history.</p>
<p>She was born and raised in New York City and began acting as a child.</p>
<p>Over the years, she has won multiple awards and is known for her versatility on screen.</p>