HTML Basics for Beginners Your First Webpage (HTML Tutorial #1)

HTML Series

HTML Basics for Beginners: Your First Webpage (HTML Tutorial #1)

Hey there, future web developer! 👋

Remember when you were a kid and built stuff with Lego blocks? Well, learning HTML is kinda like that — except instead of building a castle or spaceship, you’re building a website. And the best part? You don’t need any fancy tools or expensive software. Just you, a text editor, and a browser. That’s it!

If you’ve never written a single line of code before, don’t worry. This tutorial is for you. By the end, you’ll have built your very first webpage. No kidding!

This guide is part of our HTML Basics for Beginners series — a free course that teaches you web development from scratch.

What You’ll Learn Today

By the end of this tutorial, you’ll know how to:

✅ Create your first HTML file (the famous “Hello, World!”)
✅ Understand what all those weird <tags> mean
✅ Write headings and paragraphs (the building blocks of every website)
✅ Build a mini project: an “About Me” webpage

Sound good? Let’s dive in! 🚀

Why Should You Learn HTML?

Great question! Here’s the deal:

HTML is the skeleton of the internet. Every single website you’ve ever visited — Google, YouTube, Instagram, your favorite online store — they all start with HTML. It’s like the foundation of a house. Without it, you can’t build anything else.

Plus:

  • It’s super easy to learn (seriously, if you can type, you can code HTML)
  • You see results immediately (no waiting, no compiling — just open your file and BAM, there’s your webpage)
  • It’s the first step to becoming a web developer (after HTML, you learn CSS to make things pretty, then JavaScript to make things interactive)

Still not convinced? Here’s a fun fact: the first webpage ever created was made in 1991, and it was just pure HTML. No fancy styling, no animations — just text and links. And guess what? That webpage is still online today! 🤯

Okay, enough talk. Let’s build something!

Step 1: What Do You Need?

Here’s the good news: you already have everything you need.

To write HTML, you need:

  1. A text editor — This is where you write your code
    → Windows: Notepad (it’s already installed!)
    → Mac: TextEdit (also already installed!)
    → Want something fancier? Try VS Code (free and awesome)
  2. A web browser — This is where you see your webpage
    → Chrome, Firefox, Safari, Edge — any browser works

That’s literally it. No account sign-ups, no credit card, no complicated installations. Just grab a text editor and let’s go!

Step 2: Your First HTML File

Alright, here’s where the magic begins. 🎩✨

Let’s create your very first HTML file.

What to do:

  1. Open your text editor (Notepad, VS Code, whatever you picked)
  2. Copy and paste this code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my very first HTML page.</p>
  </body>
</html>
  1. Save the file as index.html (make sure it ends with .html, not .txt)
  2. Double-click the file — your browser will open it

YOU JUST BUILT A WEBPAGE. 🎉

I know it doesn’t look fancy yet, but seriously — you just created a real, working webpage. That’s awesome!

💡 Pro Tip: Create a folder called html-projects to keep all your practice files organized.

Try It Live! 🚀

See the Pen Codeboid – HTML Tutorial #1 — First Webpage by Codeboid (@Codeboid) on CodePen.

Step 3: Wait, What Do All Those Tags Mean?

Okay, let’s break down what you just wrote. Don’t worry, it’s simpler than it looks.

<!DOCTYPE html>

Translation: “Hey browser, this is an HTML5 document. Please read it correctly!”
You put this at the very top of every HTML file. It’s like saying “This is an English essay” before handing in your homework.

<html>
  ...
</html>

Translation: “Everything inside this tag is HTML code.”

The tag wraps your entire webpage.
It tells the browser where your HTML content starts and ends.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Webpage</title>
</head>

Translation: “Here’s some important info about my webpage.”
The <head> section contains invisible stuff — like the page title (what shows up in the browser tab). Users don’t see what’s in here, but it’s important for browsers and search engines.

<meta charset="UTF-8">

Translation: This makes sure your webpage can display all characters correctly (including emojis 😊).

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Translation: This helps your website look good on phones and tablets.

<title>My First Webpage</title>

Translation: “This is the name of my webpage.”

The <title> tag sets the text you see:

  • On the browser tab
  • In bookmarks
  • In search engine results (like Google)

Even though users don’t see it inside the page, it’s very important.
Every webpage should have a clear, meaningful title.

<body>
  <h1>Hello, World!</h1>
  <p>This is my very first HTML page.</p>
</body>

Translation: “Here’s all the stuff that shows up on the webpage.”
The <body> is where all your visible content goes — text, images, videos, everything!

The Sandwich Analogy 🥪

Think of HTML tags like bread slices:

  • <h1> is the top slice
  • Your text (“Hello, World!”) is the filling
  • </h1> is the bottom slice

Together, they make a complete sandwich… I mean, element!

Most HTML tags come in pairs: an opening tag <h1> and a closing tag </h1>. Notice the closing tag has a forward slash /.

Step 4: Let’s Add Some Headings

Headings are like the titles and subtitles of your webpage. HTML gives you six levels of headings: <h1> through <h6>.

<!DOCTYPE html>
<html>
  <head>
    <title>Heading Practice</title>
  </head>
  <body>
    <h1>This is a Huge Heading</h1>
    <h2>This is a Little Smaller</h2>
    <h3>Even Smaller</h3>
    <h4>Getting Tiny</h4>
    <h5>Really Tiny</h5>
    <h6>Okay This is Just Small</h6>
  </body>
</html>

What you’ll see:
Each heading gets progressively smaller. <h1> is the biggest (use it for your main title), and <h6> is the smallest.

When to Use Each Heading:

  • <h1> → Main title of your page (only use ONE per page)
  • <h2> → Major sections
  • <h3> → Sub-sections
  • <h4> to <h6> → Smaller sub-sections (honestly, you won’t use these much)

Think of it like a book:

  • <h1> = Book Title
  • <h2> = Chapter Name
  • <h3> = Section in the Chapter

Try It Live! 🚀

See the Pen Codeboid – HTML Tutorial #1 — Headings by Codeboid (@Codeboid) on CodePen.

Step 5: Writing Paragraphs

Great, so you’ve got headings. Now let’s add some actual text with paragraphs.

The paragraph tag is <p>. It’s super simple:

<p>This is a paragraph. You can write as much text as you want here. HTML will automatically handle the spacing and line breaks.</p>
<p>This is another paragraph. Notice how there's space between them automatically!</p>

Cool Thing About Paragraphs:

In HTML, you can press Enter a hundred times in your code, and the browser will ignore it. Watch:

<p>This is a paragraph.

Even though I pressed Enter a bunch of times,

the browser shows this as one continuous line.</p>

Result: “This is a paragraph. Even though I pressed Enter a bunch of times, the browser shows this as one continuous line.”

The browser only creates a new paragraph when you use <p> tags. Pretty smart, right?

Try It Live! 🚀

See the Pen Codeboid – HTML Tutorial #1 — Paragraphs by Codeboid (@Codeboid) on CodePen.

Step 6: Mini Project — Your “About Me” Page

Okay, time to put everything together! Let’s build something fun: an About Me webpage.

This is where you introduce yourself to the world. Think of it as your digital business card.

Here’s the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me</title>
</head>
<body>
    <h1>Hi, I'm Alex! 👋</h1>
    <p>Welcome to my very first webpage. I'm learning HTML, and honestly, it's way easier than I thought!</p>

    <h2>Who Am I?</h2>
    <p>I'm a student, a gamer, and a huge fan of pizza. I'm learning to code because I want to build my own website one day.</p>

    <h2>My Hobbies</h2>
    <p>When I'm not coding, you'll find me playing video games, reading sci-fi novels, or binge-watching Netflix shows.</p>

    <h2>Why I'm Learning HTML</h2>
    <p>I want to create my own blog, build cool projects, and maybe even land a job as a web developer someday. We all start somewhere, right?</p>

    <h2>Fun Fact About Me</h2>
    <p>I once tried to learn coding in high school but gave up after one day. Now I'm back, and this time I'm actually enjoying it!</p>
</body>
</html>

Try It Live! 🚀

See the Pen Codeboid – HTML Tutorial #1 — About Me Project by Codeboid (@Codeboid) on CodePen.

Your Turn! 🎯

Customize this page:

  1. Change “Alex” to your name
  2. Rewrite the paragraphs with YOUR hobbies, interests, and story
  3. Add more sections — like “My Favorite Movies” or “My Goals”
  4. Save it as about.html and open it in your browser

Boom. You just built a real webpage. How cool is that?

Step 7: Let’s Make It Even Better

Right now, your page is plain text. In the next tutorials, we’ll add:

  • Lists (bullet points, numbered lists)
  • Links (so you can click to other pages)
  • Images (because websites without pictures are boring)
  • Colors and styling (with CSS)

But for now, you’ve learned the foundation. You know how to create HTML files, write headings and paragraphs, and build a basic webpage. That’s HUGE!

Quick Recap: What You Learned Today

Let’s review what you just learned in this HTML basics for beginners tutorial:

✅ How to create an HTML file (save it as .html)
✅ The basic structure of a webpage (<!DOCTYPE html>, <html>, <head>, <body>)
✅ How to write headings (<h1> through <h6>)
✅ How to write paragraphs (<p>)
✅ How to build a simple “About Me” webpage

That’s a solid start! 🎉

Practice Challenge

Don’t just read this tutorial — actually do it. Here’s your homework:

  1. Create a new HTML file called myfirstpage.html
  2. Write an “About Me” page with:
    • One <h1> heading (your name)
    • Three <h2> headings (like “Hobbies,” “Goals,” “Fun Facts”)
    • At least four paragraphs
  3. Open it in your browser and admire your work!

The more you practice, the better you’ll get. Trust me!

What’s Next?

In Tutorial #2, we’re going to learn about lists and tables. You’ll learn how to organize information in bullet points, numbered lists, and data tables. Perfect for making to-do lists, favorite movies, or even your class schedule.

After that? We’ll dive into links and images to make your pages interactive and visual.

Stick with me, and by the end of this series, you’ll be building full websites like a pro. 🚀

FAQ for HTML Beginners

Do I need to memorize all these tags?

Nope! You’ll naturally remember the ones you use most (<h1>, <p>, <a>, <img>). For everything else, just Google it or use a reference guide.

What if I make a mistake?

That’s totally fine! If your page doesn’t look right, check for typos, missing closing tags, or wrong tag names. Browsers are forgiving — most mistakes won’t break anything.

Can I build a real website with just HTML?

Yes, but it’ll look plain. HTML is for structure. To make it look professional, you’ll need CSS for styling and JavaScript for interactivity (we’ll cover those later).

How long does it take to learn HTML?

With daily practice, you can learn the basics in 1-2 weeks. To get really comfortable? Maybe a month or two. The good news? You’ll see progress immediately!

Stay tuned, and keep practicing! 🌱

Get the Source Code

👉 Codeboid/html-series

Final Thoughts

Learning to code can feel overwhelming at first. But here’s the secret: everyone starts exactly where you are right now. Even the best developers in the world once wrote their first “Hello, World!” and felt proud.

You’re doing great. Keep going. Build something every day — even if it’s tiny.

And remember: HTML is not hard. You’ve got this. 💪

See you in the next tutorial! 🌱

Scroll to Top