Home / Learn / HTML / Introduction to HTML

The Quick Start

Introduction to HTML

Written by Fahim ul Haq

Fahim ul Haq is the co-founder and CEO of Educative, the world's leading upskilling platform for and by developers. He is a former software engineer at Microsoft and Facebook with a deep passion for creating better, more efficient ways for developers to master in-demand skills.

HTML is the starting point for building anything on the web. It’s the “structure layer” that tells the browser what content exists and how that content is organized.

In this lesson, you’ll learn what HTML is, how it works, and how to write your first page. You’ll also build a small mini page step by step, so you can see how each tag changes what the browser displays.

HTML is the starting point for building anything on the web. It’s the “structure layer” that tells the browser what content exists and how that content is organized.

What HTML is (in plain language)

HTML stands for HyperText Markup Language. It’s a markup language, which means it uses tags to describe content.

HTML does not “run” like a program. Instead, it labels content so the browser knows what each part is. For example, HTML helps the browser understand “this is a heading” “this is a paragraph,” or “this is a link.”

Once you understand that idea, HTML becomes much less intimidating. You’re not learning complicated logic yet. You’re learning how to structure information in a way the browser understands.

How a browser reads HTML

When you open a web page, the browser reads the HTML from top to bottom. As it reads, it builds a structure of the page in memory and then displays it.

That’s why HTML order matters. If you write a heading first and a paragraph after it, the page will show the heading first and the paragraph after it. You’re literally describing the page in the order it should appear.

The anatomy of an HTML element

Most HTML is made of elements. An element usually has:

An opening tag
Some content
A closing tag

Here’s a simple example:

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

The <p> tag tells the browser “this is a paragraph.” The browser displays the text inside it as a paragraph. The closing tag </p> tells the browser where the paragraph ends.

Some HTML elements don’t wrap content and don’t need closing tags (you’ll meet these soon). But for now, assume most elements have opening and closing tags.

Create your first HTML file

To start, you need a file that ends with .html. The most common filename for the main page of a site is index.html.

Create a new file called index.html
Open it in any code editor (VS Code is popular, but anything works)
Add this starter HTML code:

				
					<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Hello, HTML!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Now save the file.

To view it, open the file in your browser. You can usually double-click the file, or right-click and choose “Open with” and pick your browser.

You should see a big heading and one paragraph on the page.

Understand what each part does

That first HTML file might look like a lot, but each piece has a job. Let’s break it down.

				
					<!DOCTYPE html>

This tells the browser you’re using modern HTML (HTML5). It’s not a tag that displays content. It’s more like a signal that says: “interpret this file as a standard HTML document.”

				
					<html lang="en">

This wraps the entire document. The lang="en" attribute tells browsers and accessibility tools that the page is in English.

				
					<head>

The head section contains information about the page. Most of it is not visible on the page itself.

				
					<meta charset="UTF-8" />

This tells the browser what character set to use so it can display text correctly (including symbols and non-English characters).

				
					<title>

This sets the text that appears in the browser tab.

				
					<body>

This is the visible part of the page. Anything you want users to see goes inside the body.

Add headings and paragraphs (practice)

Headings create structure, like section titles in a document. Paragraphs are for regular text.

Replace the content inside your <body> with this:

				
					<body>
  <h1>Welcome to my page</h1>
  <p>I’m learning HTML and building my first website.</p>

  <h2>Why I’m learning</h2>
  <p>I want to understand how websites are built from the ground up.</p>

  <h2>What I’ll learn next</h2>
  <p>After HTML, I’ll learn CSS for styling and JavaScript for interactivity.</p>
</body>

Save and refresh your browser. Notice how:

h1 is the biggest heading
h2 headings are smaller
paragraphs appear as regular text with spacing

This is one of the most important ideas in HTML: headings give your page a clear hierarchy.

Add a link (your first “hypertext”)

The “HyperText” in HTML refers to links that connect pages together.

Add this link below one of your paragraphs:

				
					<p>
  Visit <a href="https://www.how.dev">how.dev</a> to keep learning.
</p>

Save and refresh. Now you’ll see a clickable link.

The <a> tag creates a link. The href attribute tells the browser where the link should go.

Add an image

Images are added using the <img> tag. This is one of those tags that does not wrap content, so it does not have a closing tag.

Add this inside your body:

				
					<img decoding="async" src="https://via.placeholder.com/300" alt="A placeholder image" />

Save and refresh. You should see an image appear.

Two important attributes are used here:

src is the image URL
alt is alternative text, which helps accessibility and appears if the image can’t load

Even when you’re a beginner, getting used to writing alt text is a really good habit.

Create a list (clean, readable content)

Lists are common on websites because they make information easy to scan.

Add this:

				
					<h2>My learning goals</h2>
<ul>
  <li>Understand HTML structure</li>
  <li>Build small practice pages</li>
  <li>Learn CSS next</li>
</ul>

Save and refresh.

<ul> means “unordered list” (bullets). Each item is inside <li> tags.

Build a mini “About me” page (tutorial project)

Now let’s put it all together into one simple page. Replace everything inside <body> with the full mini project below:

				
					<body>
  <h1>Hi, I’m Sam</h1>
  <p>I’m learning HTML to build my first website from scratch.</p>

  <h2>What I’m practicing</h2>
  <p>
    Right now, I’m focusing on the basics: headings, paragraphs, links, images,
    and lists.
  </p>

  <h2>My favorite learning resources</h2>
  <ul>
    <li><a href="https://how.dev">how.dev</a></li>
    <li><a href="https://developer.mozilla.org/">MDN Web Docs</a></li>
  </ul>

  <h2>A small image</h2>
  <img decoding="async" src="https://via.placeholder.com/250" alt="A sample image preview" />

  <p>
    Thanks for visiting my page. This is only the beginning, but it already
    feels exciting.
  </p>
</body>

Save and refresh.

You just created a complete HTML page with structure, content, links, an image, and a list. That’s a real foundation.

Common mistakes (and how to fix them)

If something doesn’t show up the way you expected, don’t panic. HTML is usually forgiving, but mistakes can still cause confusing results.

A few things to check:

Did you forget a closing tag like </p> or </h2>?
Did you accidentally misspell a tag name?
Did you put content outside the <body>?
If an image doesn’t appear, is the src correct?

When in doubt, look at your HTML and make sure each opening tag has a matching closing tag (unless it’s a tag like <img>).

What’s next?

Now that you understand what HTML is and how a basic page is structured, you’re ready to learn the most important part of writing good HTML: document structure and semantic elements.

In the next lesson, you’ll go deeper into the core layout of an HTML document and learn why certain tags belong in the head, and others belong in the body. You’ll also start writing HTML that is not just “working,” but also clean and professional.

If you want to practice right now, try making a second page called about.html and linking to it from index.html. That small step teaches you one of the most important web ideas: pages connected by links.

On this page

In This Module

1. The Quick Start