Complete HTML Guide for Beginners (Part 1)

Introduction

If you want to start your journey in web development, the first and most important step is learning HTML. Every website you see on the internet is built using HTML as its foundation.

In this guide, you’ll learn what HTML is, how it works, and how to create your very first webpage—even if you’re a complete beginner.

What is HTML?

HTML stands for HyperText Markup Language.

It is not a programming language—it’s a markup language used to structure content on the web. HTML tells the browser how to display text, images, links, and other elements.

Basic Structure of an HTML Page

Every HTML page follows a basic structure. Here’s a simple example:

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World</h1>
    <p>This is my first webpage.</p>
</body>
</html>

Explanation:

<!DOCTYPE html> → Defines the document type
<html> → Root element of the webpage
<head> → Contains meta information (title, links, etc.)
<title> → Title shown in browser tab
<body> → Visible content of the webpage

Common HTML Tags

Here are some of the most commonly used HTML tags:

<h1>This is a heading</h1>
<p>This is a paragraph</p>
<a href="https://example.com">Visit Website</a>
<img src="image.jpg" alt="Sample Image">

What they do:

<h1> → Main heading
<p> → Paragraph
<a> → Link to another page
<img> → Displays an image

Understanding HTML Elements

An HTML element usually has:

Opening tag → <p>
Content → Your text
Closing tag → </p>

Example:

<p>This is a paragraph</p>

Some tags (like <img>) don’t need closing tags.

Why HTML is Important

HTML is the backbone of every website. Without it:

No structure would exist
Browsers wouldn’t understand content
Websites couldn’t display text, images, or links

In simple words:
HTML builds the skeleton of a website

Your First Mini Project

Try this yourself:

Create a simple webpage using HTML:

Add your name as a heading
Write a short paragraph about yourself
Add one image
Add a link to your favorite website

Example:

<!DOCTYPE html>
<html>
<head>
    <title>My Profile</title>
</head>
<body>
    <h1>Aleeza</h1>
    <p>I am learning web development.</p>
    <img src="profile.jpg" alt="My Image">
    <br>
    <a href="https://google.com">Visit Google</a>
</body>
</html>