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

<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:

<p>

This tag tells the browser:

“This is a paragraph.”

Some common tags:

<h1>
<p>
<div>
<span>

Opening Tag, Closing Tag, and Content

Most HTML tags have:

• an opening tag

• content

• a closing tag

Example:

<p>Hello World</p>

Breakdown:

• <p> → opening tag

• Hello World → content

• </p> → closing tag

Think of it like a box:

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

What Is an HTML Element?

This is very important

HTML element = opening tag + content + closing tag

Example:

<h1>This is a heading</h1>

• <h1> → tag

• </h1> → tag

• Whole line → HTML element

Tag ≠ Element

Self-Closing (Void) Elements

Some elements do not have content.

Example:

<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:

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

They appear like this:

[ Heading          ]
[ Paragraph        ]
[ Div              ]

Inline Elements

Inline elements:

• Stay in the same line

• Take only required space

Example:

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

Inline elements behave like words in a sentence.

Commonly Used HTML Tags (Beginner-Friendly)

<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:

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

---

Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn