# Understanding HTML Tags and Elements

## Introduction

Every website you see on the internet starts with HTML.

HTML is like the **skeleton of a webpage**. Just like a human skeleton gives shape to the body, HTML gives structure to web pages. It defines headings, paragraphs, images, buttons, and many other parts you see in a browser.

If you are new to web development, one of the first things you must understand is **HTML tags and elements**. These are the basic building blocks of every webpage.

In this article, you will learn:

*   What HTML is and why we use it
    
*   What an HTML tag is
    
*   Opening tag, closing tag, and content
    
*   What an HTML element means
    
*   Self-closing (void) elements
    
*   Block-level vs inline elements
    
*   Commonly used HTML tags
    

All examples are kept simple and beginner friendly.

* * *

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

HTML stands for **HyperText Markup Language**.

HTML is used to:

*   Create the structure of web pages
    
*   Organize content like text, images, and links
    
*   Tell the browser what each part of the page means
    

HTML does not add design or logic by itself. Its main job is **structure**.

You can think of:

*   HTML → Structure
    
*   CSS → Design
    
*   JavaScript → Behavior
    

In this article, we focus only on HTML.

* * *

## What Is an HTML Tag?

An HTML **tag** tells the browser what type of content you are writing.

Tags are written inside angle brackets:

```xml
<p>
```

Most tags come in pairs:

*   Opening tag
    
*   Closing tag
    

Example:

```xml
<p>Hello World</p>
```

Here:

*   `<p>` is the opening tag
    
*   `</p>` is the closing tag
    

You can imagine a tag like a box label. It tells the browser, “The content inside this box is a paragraph.”

* * *

## Opening Tag, Closing Tag, and Content

Let’s look at a simple example:

```xml
<h1>Welcome</h1>
```

This has three parts:

*   `<h1>` → opening tag
    
*   `Welcome` → content
    
*   `</h1>` → closing tag
    

Together, they form one complete unit.

### HTML Tag vs HTML Element

* * *

## What Is an HTML Element?

An HTML **element** includes:

*   Opening tag
    
*   Content
    
*   Closing tag
    

Example:

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

This whole line is called an **HTML element**.

So remember:

*   A **tag** is just `<p>` or `</p>`
    
*   An **element** is `<p>This is a paragraph.</p>`
    

This difference is important for beginners.

* * *

## Self-Closing (Void) Elements

Some HTML elements do not need a closing tag. These are called **self-closing** or **void elements**.

Examples:

```xml
<img src="photo.jpg">
<br>
<hr>
<input>
```

These elements:

*   Do not wrap content
    
*   Do not have closing tags
    

They are complete by themselves.

For example:

```xml
<img src="logo.png">
```

This single line already represents a full element.

* * *

## Block-Level vs Inline Elements

HTML elements are mainly grouped into two types:

*   Block-level elements
    
*   Inline elements
    

Understanding this helps you control layout.

* * *

### Block-Level Elements

Block elements:

*   Start on a new line
    
*   Take full width by default
    

Common block elements:

```xml
<div>
<p>
<h1>
<section>
```

Example:

```xml
<div>Box 1</div>
<div>Box 2</div>
```

Each `div` appears on its own line.

* * *

### Inline Elements

Inline elements:

*   Stay on the same line
    
*   Take only as much space as needed
    

Common inline elements:

```xml
<span>
<a>
<strong>
```

Example:

```xml
<span>Hello</span>
<span>World</span>
```

These appear on the same line.

* * *

### Block vs Inline Layout Visualization

![https://miro.medium.com/1%2A8RH99a28L6LCFA04FJ25VQ.jpeg](https://miro.medium.com/1%2A8RH99a28L6LCFA04FJ25VQ.jpeg align="left")

![https://media2.dev.to/dynamic/image/width%3D1600%2Cheight%3D900%2Cfit%3Dcover%2Cgravity%3Dauto%2Cformat%3Dauto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Ft6vbjui1jm8q52osgfcj.png](https://media2.dev.to/dynamic/image/width%3D1600%2Cheight%3D900%2Cfit%3Dcover%2Cgravity%3Dauto%2Cformat%3Dauto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Ft6vbjui1jm8q52osgfcj.png align="left")

* * *

## Commonly Used HTML Tags

Here are some tags you will use almost every day:

### Headings

```xml
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
```

Used for titles and section headings.

* * *

### Paragraph

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

Used for normal text.

* * *

### Division (`div`)

```xml
<div>Content here</div>
```

Used as a container to group elements.

* * *

### Span

```xml
<span>Small text</span>
```

Used for inline text styling or grouping.

* * *

### Image

```xml
<img src="image.jpg">
```

Displays an image.

* * *

### Link

```xml
<a href="#">Click here</a>
```

Creates a hyperlink.

* * *

## Simple Example Putting Everything Together

```xml
<div>
  <h1>My Website</h1>
  <p>Welcome to my page.</p>
  <span>Thank you</span>
</div>
```

Here:

*   `div` is a block container
    
*   `h1` is a heading
    
*   `p` is a paragraph
    
*   `span` is inline text
    

Each line is an element made from tags.

* * *

## Tip for Beginners: Inspect HTML in the Browser

A great way to learn HTML is by inspecting real websites.

Right-click on any webpage and choose **Inspect**.

You will see:

*   Tags
    
*   Elements
    
*   Nesting structure
    

This helps you understand how real pages are built.

Try this often while learning.

* * *

## Conclusion

HTML is the foundation of every webpage. Understanding tags and elements is your first big step in web development.

To summarize:

*   HTML gives structure to webpages
    
*   Tags define content type
    
*   Elements include opening tag, content, and closing tag
    
*   Some elements are self-closing
    
*   Block elements start on new lines
    
*   Inline elements stay on the same line
    

Start with simple tags like `h1`, `p`, `div`, and `span`. Practice writing small pages and inspecting them in the browser.

Once you are comfortable with these basics, learning CSS and layouts becomes much easier.