Understanding HTML Tags and Elements

A Beginner-Friendly Guide to the Building Blocks of the Web

When you open a website, you see text, images, buttons, and layouts. But behind all that visual beauty is something very simple and powerful: HTML.

Think of HTML as the skeleton of a webpage. Just like a human skeleton gives shape and structure to the body, HTML gives structure to web content. Without HTML, a webpage has no form.

Let’s break it down step by step.

What Is HTML and Why Do We Use It?

HTML (HyperText Markup Language) is the standard language used to create webpages.

HTML is used to:

• Structure content (headings, paragraphs, images)
• Tell the browser what each piece of content is
• Create the foundation on which CSS adds style and JavaScript adds behavior

👉 HTML does not control design or logic.
It only defines structure and meaning.

What Is an HTML Tag?

An HTML tag is a keyword wrapped inside angle brackets (< >) that tells the browser how to treat the content.

Example:

<p>Hello World</p>

Here, <p> tells the browser:

“This content is a paragraph.”

Think of a Tag Like a Label

Imagine a box with a label:

• The label tells what’s inside
• HTML tags label content for the browser

Opening Tag, Closing Tag, and Content

Most HTML tags come in pairs:

<tagname> content </tagname>

Example:

<h1>Welcome</h1>

Breakdown:

• <h1> → Opening tag
• Welcome → Content
• </h1> → Closing tag

📌 The closing tag always has a /.

What Is an HTML Element?

This is where beginners often get confused.

👉 An HTML element is the complete package:

• Opening tag
• Content
• Closing tag

Example:

<p>This is a paragraph</p>

✔ This entire line is one HTML element

Tag vs Element (Important Difference)

📦 Tag = box label
📦 Element = full box with content

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.

Get Raghav Vasdeva’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Examples:

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

Why no closing tag?
👉 Because there’s nothing inside them.

For example:

• <img> displays an image
• <br> adds a line break

Block-Level vs Inline Elements

HTML elements behave differently in layout. The two main types are:

Block-Level Elements

• Take full width of the page
• Start on a new line

Examples:

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

Inline Elements

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

Examples:

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

👉 div is block
👉 span is inline

This is why div is used for layout and span for small text styling.

Commonly Used HTML Tags (Beginner Level)

Here are some tags you’ll use every day:

<h1>Heading</h1>
<p>Paragraph</p>
<div>Container</div>
<span>Inline text</span>
<img src="image.jpg" />
<a href="https://example.com">Link</a>
<ul>
  <li>Item</li>
</ul>

Keep it simple at first. You don’t need to learn every tag to build websites.

Learn by Inspecting HTML in the Browser

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

Steps:

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

You’ll see real HTML in action:

• Tags
• Elements
• Nesting
• Structure

🧠 This builds intuition faster than memorizing

Final Thoughts

HTML is not hard — it’s descriptive.

Once you understand:

• What a tag is
• What an element is
• How elements behave on a page

You’ve already learned the core of web development.

Everything else — CSS, JavaScript, frameworks — builds on this foundation.

Thank you for reading:

🔔 Follow me on LinkedIn | Twitter