Understanding HTML Tags and Elements

Every website you see on the internet has a structure.
That structure is created using HTML.

Before CSS makes things beautiful and JavaScript makes them interactive,
HTML builds the basic skeleton of a webpage.

Let’s understand HTML from the very beginning.

What is HTML and Why Do We Use It?

HTML stands for HyperText Markup Language.

HTML is used to:

• Structure content

• Tell the browser what is a heading, paragraph, image, or button

• Organize text and elements on a webpage

You can think of HTML as the bones of a body.
Without bones, nothing stands properly.

What is an HTML Tag?

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

Tags tell the browser what kind of content it is dealing with.

Example:

Here:

• <p> tells the browser this is a paragraph

Think of a tag like a label on a box that explains what’s inside.

Opening Tag, Closing Tag, and Content

Most HTML tags have three parts:

1. Opening tag

2. Content

3. Closing tag

Example:

<h1>Welcome to My Website</h1>

• <h1> → Opening tag

• Welcome to My Website → Content

• </h1> → Closing tag

The closing tag has a slash / to show where the content ends

What is HTML Element?

This is where beginners often get confused.

A HTML element is the complete thing:

• Opening tag

• Content

• Closing tag

So this whole line is one HTML element:

<p>Hello World</p>

📌 Important difference

• Tag → <p> or </p>

• Element → <p>Hello World</p>

Self-Closing (Void) Elements

Some HTML elements do not have closing tags.

These are called self-closing or void elements.

Examples:

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

These elements:

• Don’t wrap content

• Perform a single action (line break, image, input field)

Think of them like single tools, not containers.

Block-Level vs Inline Elements

HTML elements behave differently on the page.

Block-Level Elements

• Start on a new line

• Take full width

Examples:

<div></div>
<p></p>
<h1></h1>

Think of block elements like boxes stacked vertically.

---

Inline Elements

• Stay in the same line

• Take only required space

Examples:

<span></span>
<a></a>
<strong></strong>

Think of inline elements like words inside a sentence.

Commonly Used HTML Tags (Beginner List)

Here are some tags you will use very often:

<h1> to <h6>  → Headings
<p>           → Paragraph
<div>         → Container
<span>        → Inline text
<a>           → Link
<img>         → Image
<ul>, <li>    → Lists
<button>      → Button

You don’t need to memorize everything at once — practice makes it natural.

---

Try Inspecting HTML in the Browser

One of the best ways to learn HTML is by inspecting websites.

Steps:

1. Right-click on any webpage

2. Click Inspect

3. Explore the HTML structure

You’ll start recognizing tags and elements everywhere.

Final Thoughts

HTML is simple, but very powerful.

If you remember just this:

• Tags describe content

• Elements are complete structures

• HTML builds the skeleton of the web

You are already on the right path.

Every advanced frontend developer started here.