Understanding HTML Tags and Elements

Introduction: HTML as the Skeleton of a Webpage

When we open any website, what we see is text, images, buttons, and links.
Behind all of this, HTML is working quietly.

HTML (HyperText Markup Language) is the skeleton of a webpage.
Just like a human body needs bones for structure, a website needs HTML to organize content.

Why HTML Was Created (Connection Between HTTP and HTML)

Browsers use HTTP to transfer data over the internet.

HTTP stands for HyperText Transfer Protocol.
It is a set of rules that allows a browser (client) to request data from a server and receive it in response.

In the early days of the web, sending plain text over HTTP was possible, but plain text had a big problem:

• It had no structure

• No headings, paragraphs, or sections

• No way to create clickable links

Because of this, the text was not easy to read or navigate.

To solve this problem, HTML was introduced.

What HTML Does

HTML (HyperText Markup Language) is a structured language designed specifically to work with HTTP.

HTML allows:

• Structuring content (headings, paragraphs, lists)

• Creating hyperlinks (clickable connections between pages)

• Organizing information in a readable format for browsers

So in simple words:

HTTP is used to transfer data

HTML is used to structure and present that data

Together, they make the web readable, clickable, and usable.

HTML tells the browser:

• This is a heading

• This is a paragraph

• This is an image

• This is a link

Without HTML, a webpage would be just plain text with no structure.

What Is an HTML Tag?

An HTML tag is a keyword written inside angle brackets < >.

Example:<p>

Think of a tag like a label on a box
It tells the browser what type of content is inside.

Some common tags:

• <p> → paragraph

• <h1> → heading

• <div> → container

• <span> → inline text container

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

• Opening tag = opens the box

• Content = inside the box

• Closing tag = closes the box

What Is an HTML Element?

HTML Element = Opening tag + Content + Closing tag

Self-Closing (Void) Elements

Some HTML elements do not have content, so they don’t need a closing tag.

These are called self-closing or void elements.

Examples:

<br>
<img src="image.jpg">
<hr>

Why no closing tag?

Because there is nothing inside them.

• <br> → line break

• <img> → image

• <hr> → horizontal line

Block-Level vs Inline Elements

HTML elements behave differently on a webpage.

Block-Level Elements

• Start on a new line

• Take full width

Examples:

• <div>

• <p>

• <h1>

<h1>Title</h1>
<p>This is a paragraph</p>

Inline Elements

• Stay on the same line

• Take only required space

Examples:

• <span>

• <a>

• <strong>

<p>Hello <span>World</span></p>

Block vs Inline Table

Commonly Used HTML Tags

Here are some beginner-friendly tags :

Thank You : )

for reading! I hope this helped you understand HTML tags and elements clearly.