HTML Tags Explained with Examples (2026) – Complete Beginner's Guide

-

 

Figure 1: HTML tags are the building blocks of every webpage.

Introduction

After learning what HTML is, the next important step is understanding HTML tags. Every webpage you see on the internet is built using HTML tags that tell the browser how to display content.

Whether you want to create headings, paragraphs, images, tables, forms, or links, HTML tags are the building blocks that make it possible.

In this beginner-friendly guide, you'll learn what HTML tags are, why they are important, different types of HTML tags, and how to use them with practical examples.

New to HTML?
Read our previous guide:
What is HTML? A Complete Beginner's Guide (2026)

          https://codewithhasbi.blogspot.com/2026/07/what-is-html-beginners-guide-2026.html

What are HTML Tags?

HTML tags are special keywords enclosed within angle brackets (< >) that tell a web browser how to display content on a webpage.

For example, a heading is created using the <h1> tag, while a paragraph is created using the <p> tag.

Most HTML tags have two parts:

  • Opening tag
  • Closing tag

Example:

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

Here:

  • <p> is the opening tag.
  • </p> is the closing tag.
  • This is a paragraph. is the content displayed on the webpage.

HTML tags work together to organize and structure the content of a webpage, making it easier for browsers to understand and display information correctly.

Figure 2: Structure of an HTML tag with opening tag, content, and closing tag.

Why are HTML Tags Important?

HTML tags are important because they provide structure and meaning to the content on a webpage.

Without HTML tags, browsers would display plain text without any formatting or organization.

HTML tags help developers:

  • Create headings and paragraphs
  • Insert images and videos
  • Create hyperlinks between webpages
  • Design tables and forms
  • Improve website accessibility
  • Help search engines understand webpage content
  • Build responsive and well-structured websites

Every website on the internet depends on HTML tags to display information correctly.

Figure 3: HTML tags help browsers organize and display webpage content.

Types of HTML Tags

HTML tags are mainly divided into two types:

1. Paired (Container) Tags
2. Empty (Self-Closing) Tags

Understanding these two types is important because they are used differently while creating webpages.

1. Paired (Container) Tags

Paired tags consist of an opening tag and a closing tag. The content is placed between these two tags.

Syntax:

<tagname>Content</tagname>

Example:

<h1>Welcome to CodeWithHasbi</h1>

<p>This is my first HTML webpage.</p>

Explanation

In the above example:

• <h1> is the opening tag.

• </h1> is the closing tag.

• The text "Welcome to CodeWithHasbi" appears as a heading.

Similarly, the paragraph tag <p> displays the paragraph text.


Figure 4: Structured of paired HTML tags
2. Empty (Self-Closing) Tags
Some HTML tags do not require a closing tag because they do not contain any content. These are called empty tags or self-closing tags.

Examples include:

• <br>

• <hr>

• <img>

• <input>

These tags perform a specific task without enclosing any text.

Example

<p>Hello</p>

<br>

<p>Welcome to CodeWithHasbi</p>

<hr>

<img src="image.jpg" alt="HTML Image">
Explanation
In this example:

• <br> inserts a line break.

• <hr> creates a horizontal line.

• <img> displays an image on the webpage.


Figure 5: Examples of commonly used empty HTML tags.
 Commonly used HTML tags

Figure 6: Commonly used HTML tags.
HTML Tags vs HTML Elements
Many beginners use the terms HTML Tags and HTML Elements interchangeably. However, they are not exactly the same.
An HTML tag is the markup enclosed within angle brackets (< >) that tells the browser how to display content. For example, <p> and </p> are HTML tags.
An HTML element consists of the opening tag, the content inside it, and the closing tag.
Example
<p>Welcome to CodeWithHasbi</p>
In the above example:
  • <p> → Opening tag
  • Welcome to CodeWithHasbi → Content
  • </p> → Closing tag
  • Together, these three parts form an HTML element.


      Figure 7: Difference between an HTML tag and an HTML element.
Nesting HTML Tags
HTML allows one element to be placed inside another element. This is known as nesting.
Proper nesting helps browsers understand the webpage structure and display content correctly.
Example
<div>

<h1>Welcome to CodeWithHasbi</h1>

<p>This is an HTML tutorial.</p>

</div>
Explanation
In this example, the <h1> and <p> elements are placed inside the <div> element.
Always close nested tags in the correct order to avoid errors.
Best Practices
Following best practices makes HTML code cleaner, easier to maintain, and easier to understand.
Some recommended best practices include:
  • Write meaningful and well-structured HTML.

    • 

  • Close all paired tags properly.

    • 

  • Use lowercase letters for tag names.

    • 

  • Indent your code for better readability.

    • 

  • Add meaningful alt text to images.

    • 

  • Use semantic HTML elements whenever possible.

    • 

  • Validate your HTML code before publishing.

Following these practices improves readability, accessibility, and maintainability.
Common Mistakes


Beginners often make a few common mistakes while learning HTML.
Some of these include:
  • Forgetting to close paired tags.

    • 

  • Incorrect nesting of HTML elements.

    • 

  • Using uppercase tag names inconsistently.

    • 

  • Forgetting the alt attribute for images.

    • 

  • Using too many <br> tags instead of proper CSS spacing.

    • 

  • Writing unorganized HTML code.

Avoiding these mistakes helps create clean and professional webpages.
Advantages of HTML Tags


HTML tags provide several benefits for web developers.
Some advantages include:
  • Easy to learn and use.

    • 

  • Supported by all modern web browsers.

    • 

  • Provide proper structure to webpages.

    • 

  • Improve accessibility for users.

    • 

  • Help search engines understand webpage content.

    • 

  • Work seamlessly with CSS and JavaScript.

    • 

  • Essential for creating responsive websites.
Disadvantages of HTML Tags
Although HTML tags are very useful, they also have some limitations.
Some disadvantages include:
  • HTML alone cannot create dynamic webpages.
  • Additional technologies like CSS and JavaScript are required for styling and interactivity.
  • Managing very large HTML documents can become difficult.
  • HTML cannot perform logical operations or calculations.
  • Despite these limitations, HTML remains the foundation of web development.
Frequently Asked Questions (FAQs)
1. What are HTML tags?
HTML tags are keywords enclosed within angle brackets that tell a web browser how to display webpage content.
2. Are HTML tags and HTML elements the same?
No. HTML tags are the opening and closing markup, whereas an HTML element includes the opening tag, content, and closing tag.
3. Which HTML tag inserts an image?
The <img> tag is used to display images on a webpage.
Conclusion
HTML tags are the building blocks of every webpage. They define how content is structured and displayed in a web browser. Understanding HTML tags is essential for anyone beginning a career in web development.
By learning different types of HTML tags, following best practices, and avoiding common mistakes, beginners can create well-structured and user-friendly webpages. As you continue learning HTML, mastering tags will make it easier to build more advanced websites using CSS and JavaScript.

🚀 Continue Learning


📖 Previous Tutorial
➡️ What is HTML? A Complete Beginner's Guide (2026)



📖 Next Tutorial
➡️ HTML Elements Explained with Examples (Coming Soon)
After you publish Article 3, replace "Coming Soon" with its actual link.

Popular posts from this blog

What is HTML? A Complete Beginner's Guide (2026)

-
Image
  Introduction Have you ever wondered how websites like Google, YouTube, Amazon, or Facebook are created? Every website you visit is built using web technologies, and one of the most important of these is HTML . It provides the basic structure of every webpage by organizing content such as headings, paragraphs, images, links, tables, and forms. If you are planning to become a web developer, learning HTML is the first step in your journey. In this guide, you'll learn what HTML is, why it is important, how it works, and how you can start building your own webpages. Figure 1:Basic overview of HTML. What is HTML? HTML stands for HyperText Markup Language . It is the standard markup language used to create the structure of webpages. HTML is not a programming language because it does not perform calculations or make decisions. Instead, it tells a web browser how different parts of a webpage should be organized and displayed. Using HTML, developers can create: Headings Paragr...
Read more