# Understanding HTML Tags and Elements

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

**HTML (HyperText Markup Language)** is used to **create the structure of a webpage**.

When you open a website, the browser first reads **HTML code** to know:

* What text to show
    
* What is a heading
    
* What is a paragraph
    
* Where images and links are placed
    

Think of HTML as the **skeleton** of a webpage.

## HTML = Skeleton of a Webpage

```html
<h1>My Website</h1>
<p>Welcome to my page</p>
```

Without HTML, the browser has **nothing to display**.

## What Is an HTML Tag?

An **HTML tag** is written inside angle brackets `< >`.

Example:

```html
<p>
```

This tag tells the browser:

> “This is a paragraph.”

Some common tags:

```html
<h1>
<p>
<div>
<span>
```

## Opening Tag, Closing Tag, and Content

Most HTML tags have:

* an **opening tag**
    
* **content**
    
* a **closing tag**
    

Example:

```html
<p>Hello World</p>
```

Breakdown:

* `<p>` → opening tag
    
* `Hello World` → content
    
* `</p>` → closing tag
    

Think of it like a **box**:

```text
<p>        ← open
Hello World
</p>       ← close
```

## What Is an HTML Element?

*This is very important*

**HTML element = opening tag + content + closing tag**

Example:

```html
<h1>This is a heading</h1>
```

* `<h1>` → tag
    
* `</h1>` → tag
    
* Whole line → **HTML element**
    

**Tag ≠ Element**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769779076781/0cbf3e4b-24d9-44ed-aabf-b703d6dc6ddb.png align="center")

## Self-Closing (Void) Elements

Some elements **do not have content**.

Example:

```html
<img src="photo.jpg" />
<br />
<input type="text" />
```

These are called **self-closing (void) elements**.

**They:**

* Don’t wrap text
    
* Don’t need closing tags
    

## Block-Level Elements

Block elements:

* Start on a new line
    
* Take full width
    

Example:

```html
<h1>Heading</h1>
<p>This is a paragraph</p>
<div>This is a div</div>
```

They appear like this:

```text
[ Heading          ]
[ Paragraph        ]
[ Div              ]
```

## Inline Elements

Inline elements:

* Stay in the same line
    
* Take only required space
    

Example:

```html
<p>
  This is <span>inline text</span> inside a paragraph.
</p>
```

Inline elements behave like **words in a sentence**.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769778863216/fd4ca0e2-dc05-42f7-8130-8819c3761110.png align="center")

## Commonly Used HTML Tags (Beginner-Friendly)

```html
<h1>Main heading</h1>
<h2>Sub heading</h2>

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

<div>
  <p>Paragraph inside div</p>
</div>

<span>Small inline text</span>

<a href="https://blog.prakashtsx.me">Visit my blog</a>

<img src="image.png" alt="My image" />
```

*These tags are more than enough to start.*

## Inspect HTML in the Browser (Must Try)

1. Open any website
    
2. Right-click → **Inspect**
    
3. Look at the **Elements** tab
    

You’ll see real HTML like:

```xml
<div>
  <h1>Title</h1>
  <p>Text</p>
</div>
```

---

### **Want More…?**

I write articles on [**blog.prakashtsx.com**](https://blog.prakashtsx.me/) and also post development-related content on the following platforms:

* [**Twitter/X**](https://x.com/prakashtsx)
    
* [**LinkedIn**](https://www.linkedin.com/in/prakashtsx)