Intro to HTML: Build Your First Page

Learning outcomes

By the end of this guide, you will be able to:

Understand what HTML is responsible for
Avoid common beginner mistakes
Build a simple but correct web page
Read and write basic HTML confidently

This guide focuses on fundamentals only.
No frameworks. No shortcuts. No buzzwords.

Why HTML exists (and why you can’t skip it)

Before learning how to write HTML, it is important to understand why it exists.

HTML is not a programming language.
HTML is a markup language.

Its purpose is to describe structure, not logic or behavior.

Think of HTML as the skeleton of a website.

Without a skeleton, a body collapses
Without HTML, a website does not exist

Each technology in web development has a clear role:

HTML defines structure
CSS controls appearance
JavaScript adds behavior

Trying to skip HTML is like trying to build a house starting with paint.

What exactly is HTML?

HTML stands for HyperText Markup Language.

HyperText

Text that links to other text or resources.

Markup

Tags that describe meaning and structure.

Language

A standardized system that browsers understand.

HTML tells the browser what each piece of content represents.

This is a heading
This is a paragraph
This is a link
This is an image

Without HTML, the browser sees only unstructured text.

Creating your first HTML file

HTML does not require any installation or internet connection.

What you need

A text editor (any editor will work)
A modern web browser

Creating the file

Create a new file named:

index.html

The .html extension is required.

Basic HTML document structure

Every HTML document follows the same basic structure.

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

This structure is not optional.
It is the foundation of every HTML page.

Understanding the structure

DOCTYPE

The <!DOCTYPE html> declaration tells the browser to use modern HTML standards.

html element

The <html> tag wraps the entire document.

The lang attribute helps accessibility tools and search engines.

head element

The <head> section contains metadata such as:

Character encoding
Page title
Metadata for browsers and search engines

body element

The <body> contains everything visible on the page.

Text, images, links, and buttons all belong here.

Headings

Headings define the structure of your content.

<h1>Main title</h1>
<h2>Section title</h2>
<h3>Subsection title</h3>

Rules for headings:

Use only one <h1> per page
Do not skip heading levels
Do not use headings to change font size

Paragraphs

Paragraphs are created using the <p> tag.

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

Do not use <br> tags to create paragraphs.

Lists

Lists are used to group related items.

Unordered list

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered list

<ol>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
  <li>Practice daily</li>
</ol>

Links

Links are created using the anchor tag.

<a href="https://example.com">Visit Example</a>

Without the href attribute, the link will not work.

Images

Images are added using the <img> tag.

<img src="image.jpg" alt="Description of the image">

The alt attribute is required for accessibility.

Comments

Comments are ignored by the browser.

<!-- This is a comment -->

Use comments to explain why something exists.

Common beginner mistakes

Beginners often make the same mistakes.

Forgetting to close tags
Incorrect nesting of elements
Using <br> instead of paragraphs
Using headings for styling
Copying code without understanding it

Mistakes are part of learning.

Exercises

Change the page title
Add your name using <h1>
Create an unordered list of hobbies
Add one external link
Add one image with a proper alt attribute

Next steps

After learning HTML, continue with:

CSS for layout and styling
JavaScript for interactivity
Building and publishing a simple website

HTML is the foundation of the web.