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:

<p>

Most tags come in pairs:

• Opening tag

• Closing tag

Example:

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

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

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

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

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

<div>
<p>
<h1>
<section>

Example:

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

<span>
<a>
<strong>

Example:

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

These appear on the same line.

---

Block vs Inline Layout Visualization

---

Commonly Used HTML Tags

Here are some tags you will use almost every day:

Headings

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

Used for titles and section headings.

---

Paragraph

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

Used for normal text.

---

Division (div)

<div>Content here</div>

Used as a container to group elements.

---

Span

<span>Small text</span>

Used for inline text styling or grouping.

---

Image

<img src="image.jpg">

Displays an image.

---

Link

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

Creates a hyperlink.

---

Simple Example Putting Everything Together

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