HTML Basics Explained (Tags, Elements, and Structure)

Introduction: What is HTML and why do we use it?

• HTML stands for HyperText Markup Language

• HTML is the skeleton of a webpage

• It defines:

  • What content exists on a page

  • How content is structured

Simple idea:

• HTML is like the frame of a building

• CSS is the paint

• JavaScript is the behavior

Without HTML, there is no webpage.

---

What is an HTML Tag?

• An HTML tag is a keyword wrapped in angle brackets

Example:

<p>

What a tag does:

• It tells the browser what type of content it is dealing with

Analogy:

• Tag = label on a box

---

Opening Tag, Closing Tag, and Content

Most HTML tags come in pairs:

<p>This is a paragraph</p>

• <p> → Opening tag

• </p> → Closing tag

• This is a paragraph → Content

Analogy:

• Opening tag = opening a box

• Content = item inside the box

• Closing tag = closing the box

---

What is an HTML Element?

• An HTML element includes:

  • Opening tag

  • Content

  • Closing tag

Example:

<h1>Hello World</h1>

Important clarification:

• Tag ≠ Element

• Tag is a part

• Element is the complete unit

---

Self-Closing (Void) Elements

Some HTML elements do not have closing tags.

These are called self-closing or void elements.

Common examples:

<img />
<br />
<hr />
<input />

Key idea:

• These elements do not wrap content

---

Block-Level vs Inline Elements

Block-Level Elements

• Start on a new line

• Take full width

Examples:

• <div>

• <p>

• <h1> to <h6>

Visual idea:

• Block = full row

---

Inline Elements

• Stay in the same line

• Take only required space

Examples:

• <span>

• <a>

• <strong>

Visual idea:

• Inline = word inside a sentence

---

Commonly Used HTML Tags (Beginner-Friendly)

Text-related tags

• <h1> → Main heading

• <p> → Paragraph

• <span> → Inline container

---

Layout-related tags

• <div> → Block container

• <section> → Section of content

---

Media and links

• <img> → Image

• <a> → Link

---

Simple HTML Example

<h1>My First Webpage</h1>
<p>This is a paragraph.</p>
<span>Inline text</span>

---

Encouragement: Inspect HTML in the Browser

• Right-click on any webpage

• Click Inspect or View Page Source

• You will see real HTML used by professionals

Learning tip:

• Browsers are your best HTML teacher

---

Diagram Ideas (For Visualization)

1. HTML Tag vs Element

<p>Content</p>
│   │      │
│   │      └─ Closing tag
│   └─ Content
└─ Opening tag

2. Block vs Inline Layout

[ Block Element ]

Text <span>Inline</span> Text

---

Conclusion

• HTML defines structure, not style

• Tags describe content

• Elements are complete building blocks

• Block and inline elements behave differently

Once HTML basics are clear, learning CSS and JavaScript becomes much easier.

---

HTML is simple — and that’s its power. 🧱