Your First HTML Page: Hello World Tutorial
So you want to create a web page from scratch? That’s an exciting first step.
In this tutorial, you’ll build your very first HTML page and make it say the classic phrase: “Hello, world!”. You don’t need any coding experience—just a computer, a web browser, and a little curiosity.
By the end, you’ll know how to:
- Create an HTML file on your computer
- Write simple HTML code
- Open your page in a browser and see the result
- Make small changes so you can experiment and learn
What is HTML (in simple terms)?
HTML stands for HyperText Markup Language. That sounds complex, but think of it like this:
- HTML is the structure or skeleton of a web page.
- It tells the browser what to show: headings, paragraphs, links, images, and more.
When you visit any website, your browser is reading HTML behind the scenes and turning it into the page you see.
In this tutorial, you’ll write a small piece of that language yourself.
Step 1: Set up your tools
You don’t need any special software to start.
You only need:
- A web browser – Chrome, Firefox, Edge, Safari, or any modern browser.
- A text editor – This is where you’ll write code.
You can use:
- Windows: Notepad (built-in) or Notepad++ / VS Code
- Mac: TextEdit, but set it to plain text mode, or use VS Code
- Linux: Any text editor, such as Gedit, VS Code, or Nano
For now, pick any text editor you’re comfortable with.
Step 2: Create your first HTML file
Open your text editor.
Create a new file.
Save the file as:
hello-world.htmlMake sure the file extension is .html, not .txt.
Save it somewhere easy to find, like your Desktop or Documents folder.
This file will become your very first web page.
Step 3: Add the basic HTML structure
Every HTML page has a simple basic structure. Copy and paste this into your hello-world.html file:
<!DOCTYPE html> <!-- Tells the browser this is an HTML5 document -->
<html lang="en"> <!-- The root element of the page, language is English -->
<head>
<meta charset="UTF-8" /> <!-- Ensures text displays correctly -->
<title>My First HTML Page</title> <!-- The text that appears in the browser tab -->
</head>
<body>
<!-- All the content you see on the page goes between <body> and </body> -->
<h1>Hello, world!</h1> <!-- A big heading on the page -->
</body>
</html>
Save the file again.
What does each part do?
<!DOCTYPE html>– Tells the browser, “This is an HTML5 document.”<html>...</html>– Wraps everything on the page.<head>...</head>– Contains information about the page (not shown directly on the page), like the title.<title>...</title>– Shows text in the browser tab.<body>...</body>– Contains everything you actually see in the browser window.<h1>...</h1>– A heading, usually the largest and most important title.
Step 4: Open your page in a browser
Now let’s see your work!
- Find your
hello-world.htmlfile on your computer. - Double-click it.
- It should open in your default web browser.
You should see a blank page with a big title that says:
Hello, world!
If you see that message, congratulations—you’ve just created a web page. That’s a big win.
If it didn’t work:
- Check that the file ends with
.htmland not.txt. - Make sure you saved your code.
- Try refreshing the browser (usually
Ctrl + RorCmd + R).
Step 5: Add a paragraph of text
Let’s make your page a bit more interesting by adding a paragraph.
Update the <body> part of your file so it looks like this:
<body>
<h1>Hello, world!</h1> <!-- Main heading -->
<p>This is my very first web page. I'm learning HTML!</p> <!-- A paragraph of text -->
</body>
Save the file and refresh your browser.
You should now see:
- A big heading: Hello, world!
- A paragraph under it: This is my very first web page. I'm learning HTML!
Try it yourself
Change the paragraph text to something personal, like:
<p>My name is Alex, and this is my first step into web development.</p>
Save and refresh. You’ve just customized your own web page.
Step 6: Add more headings and text
Web pages often use multiple headings to structure content.
Add a second-level heading (<h2>) and another paragraph below it:
<body>
<h1>Hello, world!</h1>
<p>This is my very first web page. I'm learning HTML!</p>
<h2>About this page</h2> <!-- A smaller heading -->
<p>I created this page using a simple text editor and HTML.</p> <!-- Another paragraph -->
</body>
Save and refresh.
Now you should see:
- A large main title (
<h1>) - A medium-sized subtitle (
<h2>) - Two paragraphs of text
This is how you start giving your page structure.
Step 7: Add a list
Lists are very common on web pages. Let’s add a simple unordered list (a bullet-point list).
Add this after your second paragraph:
<body>
<h1>Hello, world!</h1>
<p>This is my very first web page. I'm learning HTML!</p>
<h2>About this page</h2>
<p>I created this page using a simple text editor and HTML.</p>
<h2>Things I've learned so far</h2>
<ul> <!-- Unordered list (bullets) starts here -->
<li>How to create an HTML file</li> <!-- List item -->
<li>How to add headings and paragraphs</li>
<li>How to view my page in a browser</li>
</ul>
</body>
Save and refresh.
You should now see a new heading and a bulleted list underneath.
What’s happening here?
<h2>– A smaller heading than<h1>, used for sub-sections.<ul>– Stands for unordered list, which creates a bullet-point list.<li>– Each list item inside the list.
Step 8: Add a link
Web pages are powerful because they can link to other pages. Let’s add a simple link.
Below your list, add this line:
<p>
Want to keep learning? Visit
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">this HTML guide</a>.
</p>
Your full <body> might now look like this:
<body>
<h1>Hello, world!</h1>
<p>This is my very first web page. I'm learning HTML!</p>
<h2>About this page</h2>
<p>I created this page using a simple text editor and HTML.</p>
<h2>Things I've learned so far</h2>
<ul>
<li>How to create an HTML file</li>
<li>How to add headings and paragraphs</li>
<li>How to view my page in a browser</li>
</ul>
<p>
Want to keep learning? Visit
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">this HTML guide</a>.
</p>
</body>
How does the link work?
<a>is called an anchor tag. It creates a link.hrefis an attribute that tells the browser where the link should go.- The text between
<a>and</a>is what the user clicks on.
Try clicking the link in your browser. It should open the HTML guide in a new page or tab.
Try it yourself: Make it your own
Now that you’ve seen a basic page, play with it a little.
Here are some ideas:
- Change the main heading to your name:
My Name's First Web Page - Add another list with your hobbies
- Add another link to your favorite website
For example:
<h2>My hobbies</h2>
<ul>
<li>Reading</li>
<li>Gaming</li>
<li>Coding practice</li>
</ul>
Every time you change something:
- Save the file.
- Refresh the browser.
You’ll instantly see the results of your changes, which is a great way to learn.
Quick recap: What you’ve learned
You’ve just taken real steps into web development. So far, you’ve learned how to:
- Create and save an HTML file (
.html) - Set up the basic structure of a web page with
<html>,<head>, and<body> - Use headings (
<h1>,<h2>) to structure your content - Add paragraphs with
<p> - Create lists with
<ul>and<li> - Add a link with
<a href="...">
Most importantly, you’ve seen that coding is something you can actually do, step by step.
What’s next?
If you enjoyed this, here are some directions to keep going:
- Learn more HTML tags: images (
<img>), tables (<table>), and more. - Explore CSS, which controls the colors, fonts, and layout of your page.
- Keep experimenting with your
hello-world.htmlfile or create a new one.
Learning to code can feel overwhelming at times, but every small page you build is progress. You’ve already written your first one—that’s a big achievement.
Keep going, stay curious, and have fun building the web, one page at a time.
