HTML for Beginners: Your First Webpage, Explained Like You Are 5

Learn to Code · August 26, 2026

Welcome! If you have ever wondered "how is a website actually made?" — you are in exactly the right place. I'm going to walk you through HTML from the very beginning, in plain English, like we are sitting next to each other. No jargon without an explanation. No skipping steps. By the end of this article, you will be able to read an HTML file and understand every character in it — even if you have never written a single line of code in your life.

Grab a coffee. Take a deep breath. Let's go.

The three layers of a webpage: HTML, CSS, JavaScript

What even is HTML?

HTML stands for HyperText Markup Language. Let's break that down word by word, because every word is doing work:

HyperText means "text that links to other text." That's the whole idea behind the web — you click a word, you jump to another page. HTML is the language of that system.

Markup means you are not really programming a computer. You are marking up a document — circling headings, underlining important parts, saying "this is a paragraph, this is a list, this is a picture." Think of a teacher with a red pen marking up a student's essay. That's you. With a keyboard.

Language just means there's a set of rules. The browser knows the rules, and so will you, in about 20 minutes.

When you visit a website, your browser (Chrome, Firefox, Safari, Edge — they're all browsers) downloads an HTML file and reads it. The HTML file tells the browser: "Here is a heading. Here is a paragraph. Here is an image. Here is a button." The browser obeys, and you see a webpage.

HTML is not a programming language. It doesn't do math. It doesn't make decisions. It just describes what's on the page. That's it. That's the job.

Anatomy of an HTML tag

HTML is made of tags. A tag is a word wrapped in angle brackets. That's the entire concept. Let me show you:

Hello, world!

This is one tag: an tag (which means "level-1 heading, the biggest one"). It opens, it has some text inside, and it closes. The closing tag is the same as the opening tag but with a slash: .

Open, content, close. Open, content, close. That's the rhythm of every HTML tag you'll ever write.

Some tags have attributes — extra information inside the opening tag. Like this:

<a href="https://mangobaz.com" target="_blank" rel="noopener">Visit us</a>

The href part is an attribute. It tells the browser "this link goes to that URL." Attributes always have a name and a value, separated by an equals sign, with the value in quotes.

The 8 tags you'll use 90% of the time

You don't need to memorize a hundred tags. Honestly, these eight will carry you through almost everything:





  

    My first page

  

  

    This is a big heading

    <h2>This is a smaller heading</h2>

    <p>This is a paragraph of text. You can write as much as you want here.</p>

    <a href="https://mangobaz.com" target="_blank" rel="noopener">This is a link</a>

    <img src="https://mangobaz.com/cat.jpg" alt="A cat" loading="lazy">

    <ul>

      <li>First item in a list</li>

      <li>Second item in a list</li>

    </ul>

    Click me

Let me walk through them one by one:

1. through — headings

Headings, from biggest (h1) to smallest (h6). Use h1 once per page for the main title. Use h2 for sections. Use h3 for sub-sections. Don't use them just to make text big — use CSS for that.

2.
— paragraph

A block of text. Browser automatically adds space above and below.

3. — link (the "anchor")

Clickable text (or image) that takes you somewhere. The destination goes in the href attribute.

4. — image

Self-closing tag — no closing tag needed. The src attribute says where the image is. The alt attribute is for screen readers and is required for accessibility.

5.
and
— lists

Unordered list (ul = bullet points) and ordered list (ol = numbered). Each item inside is wrapped in

6. — button

A clickable button. By itself it does nothing — you'd add JavaScript to make it do something. We'll cover that in another article.

7. and — invisible boxes

These don't show anything on their own. They are containers — invisible rectangles that hold other things. You'll use them constantly to group elements together so you can style them with CSS. More on that later.

8. — form fields

Text boxes, checkboxes, radio buttons, file pickers. They come in many flavors:

Putting it all together: your first webpage

Open any plain text editor (Notepad on Windows, TextEdit on Mac — just make sure it's in "plain text" mode, not rich text). Create a new file called index.html. Type this exactly:







  

  My first page





  Hi! I'm learning HTML.

  <p>This is a paragraph. Below is a list of things I want to learn:</p>

  <ul>

    <li>HTML (you are here)</li>

    <li>CSS</li>

    <li>JavaScript</li>

  </ul>

  <p>Here's a link to <a href="https://mangobaz.com" target="_blank" rel="noopener">Mangobaz</a>.</p>

Save the file. Double-click it. It opens in your browser. You just made a webpage. Yes, really. That is all a webpage is.

The structure every HTML file has

Every HTML file on the planet has the same skeleton. The bits change. The bones don't:

— the very first line. Tells the browser "we are using HTML5, the modern version." Without it, browsers can get confused and act weird.

— the root. Everything else lives inside this.

— invisible. Holds the page's title (shown in the browser tab), links to CSS files, and meta info. The user never sees what's in the head.

— visible. Everything the user actually sees lives here.

Nesting: tags inside tags

Tags can go inside other tags. This is called nesting. The rule is: when you nest, you must close the inner tag before the outer tag. Like Russian nesting dolls — close the small one before you close the big one.

Correct:

<p>This is <strong>very important</strong>.</p>

Wrong:

<p>This is <strong>very important.</p></strong>

Browsers are forgiving and will probably render both. But the wrong one is technically broken, and you'll spend hours debugging weird spacing issues later. Get the nesting right from day one.

Common mistakes beginners make (and how to dodge them)

Forgetting the closing tag. The browser will guess, but its guess might not be what you meant. Always close your tags.

Mixing up
and . Use
for paragraphs. Use only for line breaks inside a paragraph (like in an address). Don't use to add space between paragraphs — that's what CSS is for.

Using headings for size. Don't use just because you want big text. Use CSS. Use because it's the most important heading on the page.

Skipping alt on images. Screen readers need it. Search engines need it. You need it (when an image fails to load, the alt text shows instead).

Putting around everything. Use semantic tags where possible: for the top of a page, for navigation, for the main content, for a self-contained piece, for the bottom.

What to do next

You now know what HTML is, what a tag is, how to structure a page, and the eight tags you'll use most. That's a real foundation. The next step is CSS — the language that takes your plain HTML and turns it into something beautiful. Read the next article in this series when you're ready.

Until then, here's your homework: open a text editor and make a page about yourself. Your name as , a paragraph about your favorite hobby, a list of three things you love, and a link to a website you like. Save it, double-click it, and feel the magic of having made something from nothing.

You did it. Welcome to the web.

← More in Learn to Code