# Understanding HTML Tags and Elements

## **What Is HTML and Why Do We Use It?**

HTML stands for **HyperText Markup Language**.

But instead of focusing on the long name, here’s the easiest way to think about it:

> 🦴 **HTML is the skeleton of a webpage.**

Just like a human skeleton gives structure to the body, HTML gives structure to a website:

* Headings
    
* Paragraphs
    
* Images
    
* Buttons
    
* Links
    

Without HTML, a browser wouldn’t know *what* content exists on a page or *how* it’s organized.

## **What Is an HTML Tag?**

An **HTML tag** is a keyword wrapped in angle brackets (`< >`) that tells the browser what kind of content it’s dealing with.

`<p>`

This tag tells the browser:

> “Hey, the content here is a paragraph.”

## **Opening Tag, Closing Tag, and Content**

Most HTML tags come in pairs:

`<p>Hello World</p>`

Let’s break it down:

* `<p>` → **Opening tag**
    
* `Hello World` → **Content**
    
* `</p>` → **Closing tag**
    

Think of it like a box:

* Opening tag = opening the box
    
* Content = what’s inside
    
* Closing tag = closing the box
    

## **What’s an HTML Element?**

This is where many beginners get confused.

An **HTML element** includes:

* Opening tag
    
* Content
    
* Closing tag
    

So this entire thing is **one HTML element**:

`<p>Hello World</p>`

### Key Difference

* **Tag** → `<p>`
    
* **Element** → `<p>Hello World</p>`
    

You don’t write “HTML tags” on a page - you build pages using **HTML elements**.

## **Self-Closing (Void) Elements**

Some elements **don’t have content**, so they don’t need a closing tag.

These are called **self-closing** or **void elements**.

`<img>`

`<br>`

`<input>`

Why?  
Because there’s nothing to wrap inside them.

An image doesn’t contain text  
A line break doesn’t wrap content

So one tag is enough.

## **Block-Level vs Inline Elements**

HTML elements behave differently on the page. The two most important categories are:

### Block-Level Elements

* Start on a new line
    
* Take up full width
    
    `<h1>Heading</h1>`
    
    `<p>Paragraph</p>`
    
    `<div>Container</div>`
    

Think of them as **big blocks stacked vertically**.

### Inline Elements

* Stay in the same line
    
* Take only as much space as needed
    
    `<span>Text</span>`
    
    `<a>Link</a>`
    
    `<strong>Bold</strong>`
    

They behave like **words inside a sentence**.

## **Commonly Used HTML Tags (Beginner Set)**

Here are some tags you’ll use *all the time*:

`<h1> to <h6> <!-- Headings -->`

`<p> <!-- Paragraph -->`

`<div> <!-- Block container -->`

`<span> <!-- Inline container -->`

`<img> <!-- Image -->`

`<a> <!-- Link -->`