What is HTML? A Complete Beginner's Introduction

If you’ve ever used a website (and you have!), you’ve already seen HTML in action. HTML is the basic language that tells a web browser what to show on the screen: text, images, links, and more.

In this beginner-friendly guide, you’ll learn what HTML is, how it works, and how to create your very first simple web page. You don’t need any coding experience—just curiosity and a computer.

What is HTML, in simple terms?

HTML stands for HyperText Markup Language.

Let’s break that down:

HyperText: Text that can link to other pages or sections (like a clickable link).
Markup: Special symbols (called tags) that tell the browser how to display things.
Language: A set of rules and words that computers understand.

HTML is not a programming language like JavaScript or Python. Instead, it’s a markup language used to structure content on a web page.

Think of HTML as the skeleton of a website. It defines what goes where: headings, paragraphs, images, links, lists, and more.

What do you need to start?

You don’t need any special software to start writing HTML.

You just need:

A text editor
- On Windows: Notepad (comes pre-installed)
- On Mac: TextEdit (set to plain text mode)
- Or a free code editor like VS Code, Atom, or Sublime Text
A web browser
- Chrome, Firefox, Edge, Safari, or any modern browser

That’s it. No installations, no accounts, no setup headaches.

HTML basics: tags and elements

HTML is made up of tags. Tags usually come in pairs:

An opening tag: <p>
A closing tag: </p>

Together, they create an element:

<p>This is a paragraph.</p>

<p> tells the browser “this is the start of a paragraph.”
</p> tells the browser “this is the end of the paragraph.”

Everything between the tags is the content.

You’ll see many different tags, like:

<h1> for a main heading
<p> for a paragraph
<a> for a link
<img> for an image

Don’t worry about memorizing them all. You’ll learn them gradually.

Your first HTML page (Example 1)

Let’s create the simplest possible web page.

Step 1: Create a new file

Open your text editor.
Create a new file.
Save it as index.html on your Desktop or in a folder you can find easily.

Step 2: Add this basic HTML code

Copy and paste the code below into your index.html file:

<!DOCTYPE html> <!-- Tells the browser this is an HTML5 document -->
<html> <!-- The root element of the page -->
  <head> <!-- Contains page settings and information -->
    <meta charset="UTF-8" /> <!-- Helps display text correctly -->
    <title>My First Web Page</title> <!-- Text that appears in the browser tab -->
  </head>
  <body> <!-- Everything inside here shows on the page -->
    <h1>Hello, world!</h1> <!-- Big heading -->
    <p>This is my very first web page using HTML.</p> <!-- Paragraph of text -->
  </body>
</html>

Step 3: View your page in a browser

Find your index.html file.
Double-click it.
It should open in your web browser.

You should see a big “Hello, world!” heading and a short paragraph below it.

Try it yourself:

Change the text inside <h1> and <p> to anything you like. Save the file, then refresh the browser tab. You’ve just edited a web page!

Understanding the structure of an HTML page

Let’s quickly review what each part of that code does:

<!DOCTYPE html>: Tells the browser you’re using modern HTML5.
<html>...</html>: Wraps the whole page.
<head>...</head>: Holds information about the page (title, character set, etc.), not visible on the page itself.
<title>...</title>: Sets the text shown on the browser tab.
<body>...</body>: Contains all the content you actually see.

If you can remember head = behind the scenes, body = visible content, you’re off to a great start.

Adding more content: headings, paragraphs, and line breaks (Example 2)

Let’s expand your page with a bit more structure.

Replace the <body> in your file with this:

<body>
  <h1>My First HTML Page</h1> <!-- Main title of the page -->

  <h2>About Me</h2> <!-- Smaller subheading -->
  <p>Hi! My name is Alex and I am learning HTML for the first time.</p>

  <h2>My Hobbies</h2>
  <p>I enjoy reading, coding, and playing games.<br />
     I am excited to build my own websites!</p> <!-- <br /> adds a line break -->
</body>

What you’ll see when you refresh:

A large main heading: “My First HTML Page”
A smaller heading: “About Me” with a paragraph below
Another smaller heading: “My Hobbies” with a paragraph split into two lines

Notice the <br /> tag. It creates a line break, like pressing Enter in a text document.

Try it yourself:

Change the name “Alex” to your own.
Add another hobby in the last paragraph.
Add a new section using <h2> and <p> about your favorite movies or books.

Creating lists and links (Example 3)

Most web pages have lists and links. Let’s add those next.

Update your <body> to look like this:

<body>
  <h1>My First HTML Page</h1>

  <h2>About Me</h2>
  <p>Hi! My name is Alex and I am learning HTML for the first time.</p>

  <h2>My Hobbies</h2>
  <ul> <!-- Unordered list (bulleted) -->
    <li>Reading</li> <!-- List item -->
    <li>Coding</li>
    <li>Playing games</li>
  </ul>

  <h2>Find Me Online</h2>
  <p>
    Visit my favorite website:
    <a href="https://www.wikipedia.org" target="_blank">Wikipedia</a>
    <!-- <a> creates a link. href is the URL. target="_blank" opens in a new tab. -->
  </p>
</body>

What’s new here:

<ul>: An unordered list (shows bullet points).
<li>: A list item (each bullet).
<a>: An anchor tag, which creates a link.
href="...": The attribute that tells the link where to go.
target="_blank": Optional attribute to open the link in a new tab.

Try it yourself:

Add another hobby as a new <li>.
Change the Wikipedia link to your favorite site.
Add a second link on a new line.

Adding an image (Example 4)

Let’s make your page more visual by adding an image.

Find a small image you like (for example, photo.jpg).
Save it in the same folder as your index.html file.

Now, add this section to your <body>:

  <h2>My Photo</h2>
  <img src="photo.jpg" alt="A photo of me" width="200" />
  <!-- src is the file name; alt describes the image; width sets the size in pixels -->

What this does:

<img> is a self-closing tag (no separate closing tag).
src is the path to your image file.
alt is text shown if the image can’t load and helps with accessibility.
width controls how wide the image appears (here, 200 pixels).

If your file name is different, replace photo.jpg with the correct name (including the extension like .png or .jpeg).

Try it yourself:

Change the width value to 300 or 100 and refresh.
Change the alt text to something more descriptive.

Common beginner tips and mistakes

As you practice, keep these in mind:

Always close your tags: If you open <p>, remember </p>.
Nested tags must be in order: Don’t overlap like <p><strong>text</p></strong>.
Save, then refresh: Your changes won’t show until the file is saved.
Check file names: Photo.jpg and photo.jpg can be different on some systems.

It’s completely normal to make mistakes. If something looks broken, check your tags carefully. A single missing > can cause strange results.

What’s next after this?

You’ve already learned a lot:

What HTML is and why it matters
How to create a basic HTML page
How to use headings, paragraphs, line breaks
How to create lists, links, and images

From here, you can explore:

More HTML tags: tables, forms, videos, and more
CSS (Cascading Style Sheets): to style your pages with colors, fonts, and layouts
JavaScript: to make your pages interactive

For now, celebrate the fact that you’ve built a real web page from scratch. That’s a big step.

Quick recap

HTML is the structure of a web page, made of tags and elements.
Every page has a basic layout: <!DOCTYPE html>, <html>, <head>, and <body>.
You can add content with tags like <h1>, <p>, <ul>, <li>, <a>, and <img>.
Small experiments—changing text, adding a list, inserting an image—are the best way to learn.

Keep your index.html file and keep playing with it. Each small change you make is another step toward feeling confident with code.

Mudzinga