Introduction to HTML: Structure of a Webpage
Harshal ChaudhariWhat is HTML?
HTML stands for HyperText Markup Language, and no—it’s not a programming language, it’s a markup language. Think of it as the skeleton of any website. Just like your gym body needs bones to flex those biceps, a webpage needs HTML to hold its structure.
How Does HTML Work?
When you open a website, your browser reads the HTML code and displays it in a nice, structured way. HTML uses something called “tags” to define parts of a page like headings, paragraphs, images, and more.
Let’s look at the basic structure of any HTML webpage.
1. Doctype: The Declaration
<!DOCTYPE html>
This tag tells the browser, that this is an HTML5 document. Always comes first.
2. <html>: The Root Element
<html>
<!-- All your HTML code goes here -->
</html>
The root tag. All other tags go inside this.
3. <head>: The Brain of the Page
<head>
<title>My First Webpage</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
</head>
Title is the name that appears on the browser tab like in our case its “My First Webpage “.
Contains info about the webpage (like the title, links to CSS, etc). Not visible on the screen.
4. <body>: The Visible Part
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
This is where the actual visible content goes – headers, images, buttons, text, images, links, etc. This is what people see.
Basic Tags to Know (as beginner):
<h1>to<h6>: Headings<p>: Paragraphs<a href="">: Links<img src="">: Images<ul>,<ol>,<li>: Lists<div>and<span>: Layout and inline elements
💡 Mini Project Ideas for Practice
My Bio Page
- Show your name, photo, and a few lines about yourself.
Simple Resume
- Use headings and lists to show your education and skills.
My Favorite Links
- A page with links to your favorite websites.
Portfolio Homepage
- Add a header, some text, and a few project links.
Conclusion
HTML is just the structure of a webpage — like bones for a body. We learned the basic layout and a few must-know tags. That’s all you need to start building. More cool stuff coming soon! 😎💻
This is my first article, and hopefully the starting point for many beginners out there. I kept things intentionally simple — I didn’t dive into every single HTML tag, because honestly, throwing too much at you in the beginning can feel overwhelming. But don't worry — as we grow together, we'll unlock the advanced stuff step by step.
Subscribe to my newsletter
Read articles from Harshal Chaudhari directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Harshal Chaudhari
Harshal Chaudhari
Computer Engineering Student , Developer , Freelancer 🚀Building clean & scalable stuff. ⚙️Currently grinding through: AI + Full Stack Projects.