Getting Started with HTML

Welcome to your first HTML lesson.

Today we begin from zero.

No frameworks.

No JavaScript.

No complicated build tools.

Just one simple HTML file and a browser.

Beautiful.

Suspiciously simple.

What You’ll Learn

In this lesson, you’ll learn:

what HTML is;
what an HTML file looks like;
how to create your first web page;
how to open it in a browser;
how headings and paragraphs work;
why HTML is the structure of every website.

What Is HTML?

HTML means:

HyperText Markup Language

That sounds very serious.

But the idea is simple:

HTML describes the structure of a web page.

It tells the browser what each part of the page means.

For example:

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

HTML is not about making things beautiful.

That is mostly CSS.

HTML is not about making things interactive.

That is mostly JavaScript.

HTML is the skeleton.

Without it, the web page has no structure.

And a website without structure is like a cupboard assembled at midnight without instructions.

Possible, but dangerous.

Create a Practice Folder

Open your terminal and create a folder for HTML practice:

mkdir -p ~/html-practice
cd ~/html-practice

Now create a file called index.html:

touch index.html

Open it with your editor.

For example, if you use VS Code:

code index.html

Or use any editor you like.

The important thing is that the file is called:

index.html

This is a common name for the main page of a website.

Your First HTML Page

Add this code to index.html:

<!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>

Save the file.

Congratulations.

You have written your first HTML page.

No fireworks.

But the browser is ready.

Open the Page in a Browser

You can open the file directly in your browser.

Find the file and open it.

Or from the terminal, if your system supports it, you can try:

xdg-open index.html

You should see:

Hello, HTML!
This is my first web page.

The browser reads your HTML and turns it into a web page.

That is the basic magic.

Not dark magic.

Just browser magic.

Understanding the Code

Let’s look at the page piece by piece.

This line tells the browser that this is an HTML document:

<!DOCTYPE html>

This opens the HTML document:

<html lang="en">

This part contains information about the page:

<head>
  <meta charset="UTF-8">
  <title>My First HTML Page</title>
</head>

The title appears in the browser tab.

This part contains the visible content:

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

Everything inside body is what the user sees on the page.

Headings and Paragraphs

The h1 tag creates the main heading:

<h1>Hello, HTML!</h1>

The p tag creates a paragraph:

<p>This is my first web page.</p>

HTML tags usually come in pairs:

<p>Opening tag, content, closing tag.</p>

The opening tag is:

<p>

The closing tag is:

</p>

The slash / means the element ends.

HTML likes closing things properly.

Unlike some people with browser tabs.

Change the Content

Now change your page:

<body>
  <h1>My First Website</h1>
  <p>Hello! I am learning HTML step by step.</p>
  <p>This page is simple, but it is real.</p>
</body>

Save the file.

Refresh the browser.

You should see the new text.

This is the basic workflow:

edit file
save file
refresh browser
see result

Simple.

Honest.

No mysterious build error from another planet.

Optional: Serve the Page with Caddy

Opening the file directly is fine.

But you can also serve the folder like a small local website.

If you have Caddy installed, run this inside ~/html-practice:

caddy file-server --listen :8080

Then open:

http://localhost:8080

This is useful because it feels closer to how real websites work.

Your computer becomes a tiny web server.

Very tiny.

Very proud.

Common Mistakes

Forgetting to Save

If you change the file but the browser does not change, save the file first.

The browser cannot read your thoughts.

Neither can HTML.

Wrong File Extension

This is correct:

index.html

This is not the same:

index.txt
index.html.txt

The file should end with .html.

Missing Closing Tags

This is better:

<p>Hello world.</p>

This is messy:

<p>Hello world.

Browsers are forgiving, but do not abuse their kindness.

A forgiving browser is not an excuse for chaotic HTML.

Practice

Create a page with:

one main heading;
two paragraphs;
your name or nickname;
one sentence about why you want to learn HTML.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About Me</title>
</head>
<body>
  <h1>About Me</h1>
  <p>Hello, my name is Viktor.</p>
  <p>I am learning HTML because I want to build websites.</p>
</body>
</html>

Change the text to your own.

Do not just copy.

HTML learns better when your fingers suffer a little.

Mini Challenge

Create a new file:

touch about.html

Inside it, create a second page with:

a title in the browser tab;
an h1 heading;
three paragraphs;
one sentence that says: “This is my second HTML page.”

Open it in the browser.

You have now created more than one HTML page.

Dangerous progress.

Summary

Today you learned:

HTML means HyperText Markup Language;
HTML describes the structure of a web page;
an HTML file usually ends with .html;
index.html is commonly the main page;
head contains information about the page;
body contains visible content;
h1 creates a main heading;
p creates a paragraph;
the basic workflow is edit, save, refresh.

You have created your first web page.

Small page.

Big beginning.

Next Lesson

In the next lesson, we’ll study the HTML document structure more carefully.

We’ll understand DOCTYPE, html, head, body, meta, and why browsers appreciate good structure.