HTML for Absolute Beginners: Build Your First Web Page in 30 Minutes
The easiest tutorial to start your web development journey
Web development begins with HTML. Whether you want to build websites, learn front-end frameworks like React/Vue, or become a full-stack developer—HTML is your starting point. It defines the structure of every web page on the internet.
In this beginner-friendly guide, you’ll learn:
-
What HTML is and how it works
-
Basic structure of an HTML page
-
Most common HTML tags every developer must know
-
How to create your first web page from scratch
-
How to open it in a browser and see the result
By the end of this tutorial, you’ll have your first working website file. Let’s begin!
What Is HTML?
HTML stands for HyperText Markup Language.
It is used to structure content on a web page—such as headings, paragraphs, images, buttons, forms, and links.
HTML is not a programming language, but a markup language used to tell the browser what to display and how elements are arranged.
Example: If your webpage were a human body,
-
HTML = the skeleton
-
CSS = the skin & design
-
JavaScript = the brain & movement
Tools You Need to Start
You need only two things:
-
A text editor (VS Code recommended, but Notepad also works)
-
A browser (Chrome, Firefox, Edge, or Safari)
No installation or setup complexity.
Basic Structure of an HTML Page
Here is the minimum structure used in every HTML file:
Explanation
| Part | Meaning |
|---|---|
<!DOCTYPE html> |
Declares HTML version |
<html> |
Root of the page |
<head> |
Page settings (not visible on the screen) |
<title> |
Text shown on browser tab |
<body> |
Visible content of the page |
Most Common HTML Tags Every Beginner Must Know
| Tag | Meaning | Example |
|---|---|---|
<h1> to <h6> |
Headings | <h1>Main Title</h1> |
<p> |
Paragraph | <p>This is a paragraph.</p> |
<a> |
Link | <a href="https://google.com">Open Google</a> |
<img> |
Image | <img src="image.jpg" alt="photo"> |
<ul> & <li> |
List | <ul><li>Item</li></ul> |
<br> |
Line break | <br> |
<button> |
Button | <button>Click Me</button> |
<strong> |
Bold text | <strong>Important</strong> |
<div> |
Content block container | Wraps sections |
Let’s Build a Simple Website
Follow these steps:
Step 1 — Create a new file
Open VS Code or Notepad
Save a file named:
Step 2 — Paste this code inside
Step 3 — Open in the browser
Right-click the file → Open With → Chrome
Congratulations! You created your first web page.
Add Styling (Sneak Peek of CSS)
Add this inside <head> before closing it:
Refresh the browser and see the change — now your page looks modern!
