Introduction to HTML: Structure of a Webpage
Harshal ChaudhariTable of contents
What 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, a webpage needs HTML to hold its structure.
How Does HTML Work?
When you open a website, the browser reads the HTML code, which is made up of something called “tags”. These tags tell the browser what each part of the page is for example, a heading, paragraph, image, link, etc. The browser doesn’t show the tags to you, but it uses them to organize and display the content in a clear.
Let’s look at the basic structure of HTML webpages.
Here, Image shows how code turns into a page.
🟥Red Box → Title
🟪Purple Box → Header Area
🟦Blue Box → Main Content Area
🟩Green Box → Heading
🟨Yellow Box → Paragraph
HTML Tags
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.
Tags you should Know as a beginner. :)
<h1>to<h6>: Headings<p>: Paragraphs<a href="">: Links<img src="">: Images<ul>,<ol>,<li>: Lists<div>and<span>: Layout and inline elements
Basic Project You Should Try !!
Try to create a School Id
Add you School Logo, Your Photo , Name, Class , Date of Birth , Contact ,etc
Conclusion
HTML is just the structure of a webpage like skelton for a body. We learned the basic layout and some must know tags. That’s all you need to start into web development. Stay curious.
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 | Technical Blogger | YouTuber | Freelancer| I write (about) code and keep interest in helping new startups.