If you’ve ever wondered how websites are built, HTML is a great place to start. It’s like the skeleton of a webpage — giving structure and meaning to the content we see online.

📚 Table of Contents

What is HTML?
What are HTML Tags and Elements?
Skeleton of an HTML Page
Understanding HTML Tags
- Common HTML Tags
- Semantic vs Non-Semantic Tags
Good Practices
Diagram: Basic HTML Structure
Wrapping Up

🧱 What is HTML?

HTML stands for HyperText Markup Language. It’s the basic language used to create webpages.

Think of a webpage as a house, and HTML as the blueprint. Just like a house needs walls, doors, and rooms, a webpage needs text, images, headings, and links. HTML tells the browser how to organize and display all of that.

🔖 What are HTML Tags and Elements?

HTML is made up of tags. Tags are like instructions for the browser. Most tags come in pairs: an opening tag and a closing tag.

Here’s an example:

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

<p> is the opening tag.
</p> is the closing tag.
Everything between them is the content of the tag.

Together, this is called an HTML element.

🏗️ The Skeleton of an HTML Page

Every HTML page starts with a basic structure. Here’s what it looks like:

Basic HTML Structure Explained

Let’s break it down:

Part	Purpose
`<!DOCTYPE html>`	Tells the browser this is an HTML5 document
`<html>`	The root of the webpage
`<head>`	Contains meta info (like the title, styles, etc.)
`<body>`	Contains everything that shows up on the screen

HTML Tags : Explained in Detail

🏷️ Understanding HTML Tags

HTML tags are the building blocks of a webpage. They tell the browser how to display content. Most tags come in pairs — an opening tag and a closing tag — and surround the content they affect.

📦 Syntax of an HTML Tag

<tagname>Content goes here</tagname>

<tagname> – Opening tag
</tagname> – Closing tag (notice the /)
Content – The actual content you want to display

🔤 Common HTML Tags

Here’s a table with some commonly used HTML tags and what they do:

Tag	Description	Example
`<h1>` to `<h6>`	Headings (from largest to smallest)	`<h1>Main Title</h1>`
`<p>`	Paragraph	`<p>This is a paragraph.</p>`
`<a>`	Anchor (link)	`<a href="https://example.com">Visit</a>`
`<img>`	Image	`<img src="image.jpg" alt="Image">`
`<ul>`	Unordered list	`<ul><li>Item</li></ul>`
`<ol>`	Ordered list	`<ol><li>Item</li></ol>`
`<li>`	List item	`<li>Item</li>`
`<div>`	Generic block container	`<div>Block content</div>`
`<span>`	Generic inline container	`<span>Inline text</span>`
`<br>`	Line break (no closing tag)	`Line 1<br>Line 2`
`<strong>`	Bold text (semantic)	`<strong>Important</strong>`
`<em>`	Italic text (semantic)	`<em>Emphasized</em>`

🧠 Pro Tip: Self-Closing Tags

Some tags don’t have a closing pair, called self-closing tags. Examples:

<br>     <!-- Line break -->
<hr>     <!-- Horizontal rule -->
<img src="..." alt="...">   <!-- Image -->

🎯 Semantic vs Non-Semantic Tags

Semantic Tags	Meaningful and descriptive
`<header>`	Top section of your page
`<footer>`	Bottom section
`<nav>`	Navigation links
`<article>`	Independent content

Non-Semantic Tags	Don’t give meaning, only structure
`<div>`	Generic container
`<span>`	Inline container

Use semantic tags when possible – they make your code easier to read and improve accessibility.

🧠 Good Practices to Follow

✅ Always close your tags.
Example: Use </p> after <p>, or it might not work as expected.

✅ Nest tags properly.
Correct:

  <p><strong>Hello</strong>, world!</p>

Incorrect:

  <p><strong>Hello</p></strong>

✅ Use semantic tags like <header>, <footer>, <article>, and <section> to describe your content more clearly. This improves readability and helps search engines understand your page better.

Basic HTML Structure Diagram

🚀 Wrapping Up

HTML is the first step in your web development journey. Once you understand how to structure a webpage, you’ll be ready to style it with CSS and make it interactive with JavaScript.

So go ahead — open your code editor and build your first page! 🧑‍💻

HTML for Beginners: Building the Skeleton of a Webpage