Introduction

When learning how websites work, one of the most important building blocks is HTML (HyperText Markup Language). HTML defines the structure of a web page, such as headings, paragraphs, images, and links. In this article, we’ll walk beginners through the basics of HTML step by step.

Environment: Windows 11 / macOS (latest), Google Chrome browser, and Visual Studio Code editor assumed.

Step-by-Step Learning

To efficiently understand HTML, follow these steps:

Learn how to create an HTML file
Understand the basic structure (doctype declaration, head, body)
Study common tags (headings, paragraphs, links, images, etc.)
Display your file in a browser and check the result

The Basic HTML Structure

Let’s look at the skeleton of an HTML document.

Here is the code (basic HTML structure):

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

My First HTML

Hello, HTML!

This is my first web page.

Key Points

<!DOCTYPE html> declares the document as HTML5.
<html> wraps the entire page.
<head> contains metadata (title, charset, etc.).
<body> contains the visible content.

Commonly Used Tags

Headings

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Small Heading</h3>

Main Heading

Subheading

Small Heading

Paragraph

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

This is a paragraph of text.

Links

<a href="https://www.example.com">Go to Example</a>

Go to Example

Images

<img src="sample.jpg" alt="Sample Image">

Testing and Practical Usage

Copy the code into a text editor and save as index.html.
Open the file in Chrome (or any browser).
Edit tags and refresh the browser to see changes instantly.

Practical Use Cases

Build a personal introduction page
Create a simple portfolio with links and images
Combine HTML with CSS and JavaScript for stylish, functional sites

Conclusion

We’ve introduced the basics of HTML and key tags for beginners. HTML is the foundation of web development. By practicing these elements, you’ll be ready to expand your skills with CSS and JavaScript. Start small by experimenting with headings, paragraphs, and links.

If you want to try the code in practice, start here ↓
Online HTML/CSS/JS Editor

Introduction to HTML‐A Beginner’s Guide