Skip to main content

HTML Tags Tutorial – A Complete Beginner-Friendly Guide

HTML tags are the basic building blocks of every webpage. Whether you want to create a simple webpage or a full website, understanding HTML tags is the first and most important step. In this post, we’ll explore what HTML tags are, how they work, why they matter, and the most commonly used tags with examples.

Table of Contents

What Are HTML Tags?

HTML tags are keywords enclosed in angle brackets < > that tell the browser how to display content. Tags create elements such as headings, paragraphs, images, links, lists, buttons, forms, and much more.

Example of a simple tag:

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

How HTML Tags Work

Most HTML tags come in pairs:

<opening-tag>Content</closing-tag>

The opening tag starts the element, and the closing tag ends it.

Example:

<h1>Hello World</h1>

Types of HTML Tags

HTML tags fall into two main categories:

1. Paired Tags

Contain both opening and closing tags.

<div>Content</div>

2. Self-Closing Tags

Do not have a closing tag.

<img src="image.jpg" alt="Image">

Most Common HTML Tags

1. Heading Tags

Used for titles and headings.

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>

2. Paragraph Tag

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

3. Link Tag

<a href="https://example.com">Click Here</a>

4. Image Tag

<img src="photo.jpg" alt="Beautiful image">

5. List Tags

Unordered List:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Ordered List:

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

6. Button Tag

<button>Click Me</button>

7. Div Tag

<div>This is a container.</div>

8. Span Tag

<span>Inline text</span>

Self-Closing HTML Tags

These tags do not wrap content:

  • <img>
  • <br> (line break)
  • <hr> (horizontal line)
  • <input> (form input field)
  • <meta>

Nesting Tags

Tags can be placed inside other tags. This helps structure your webpage correctly.

<div>
  <h2>My Title</h2>
  <p>My paragraph inside a div.</p>
</div>

Important Rule: The inner tag must close before the outer tag closes.

Practical Examples

1. Simple Webpage Example

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>

  <h1>Welcome!</h1>
  <p>This is my first webpage.</p>

</body>
</html>

2. Using Multiple Tags Together

<h2>My Favorite Fruits</h2>
<ul>
  <li>Mango</li>
  <li>Apple</li>
  <li>Banana</li>
</ul>

Best Practices for Using HTML Tags

  • Use semantic tags like <header>, <main>, <section>, <footer>.
  • Always close your tags properly (except self-closing tags).
  • Use indentation to keep code readable.
  • Write lowercase tags (recommended by W3C).
  • Include alt text for images.
  • Avoid unnecessary <div> and <span> tags.

Conclusion

HTML tags are the foundation of every webpage. Once you understand how tags work, you can start building real web pages with structure, formatting, images, videos, links, and more. Keep practicing and experimenting to master them!

Comments

Post a Comment

Popular posts from this blog

HTML Tables Tutorial — Learn Tables with Examples Tables organize tabular data (rows & columns). They are great for schedules, price lists, spec sheets, comparison charts, and any data that fits a grid. This guide covers: Table basics: <table> , <tr> , <td> , <th> Headers, captions, and groups ( <caption> , <thead> , <tbody> , <tfoot> ) Colspan & rowspan Styling and responsive tables Accessibility and best practices Table of Contents Basic Structure Headers & Captions Colspan & Rowspan Grouping Rows: thead / tbody / tfoot Styling Tables Responsive Tables Accessibility Tips Practical Examples Best Practices 1. Basic Structure Minimal valid table: <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table> Elements: <table> — container for the table <tr> — table ...
Post a Comment
Read more
HTML Forms Tutorial HTML Forms Tutorial HTML Forms allow users to enter and submit data. They are used everywhere—login forms, signup forms, search boxes, feedback forms, etc. In this complete tutorial, you will learn all form elements with examples and demos. 1. What is an HTML Form? A form collects user input using different form elements like text fields, checkboxes, radio buttons, buttons, and more. <form> Form elements go here... </form> 2. Basic Form Structure <form action="#" method="post"> <input type="text" placeholder="Enter name"> <button>Submit</button> </form> Submit Attributes: action → URL where form data is sent method="POST" → Secure data sending method="GET" → Data shows in URL 3. Text Input Field <input type="text" placeholder="Your Name...
Post a Comment
Read more
What is HTML? A Beginner-Friendly Explanation If you want to become a web developer, HTML is the first language you should learn. It is the foundation of every website on the internet. In simple words: HTML (HyperText Markup Language) is used to create the structure and content of a webpage. Why HTML is important? Websites cannot exist without HTML It is simple and beginner-friendly Used with CSS and JavaScript Works on all browsers How does HTML work? HTML is made of tags . Tags tell the browser what type of content is being shown. Example of an HTML tag: <p>This is a paragraph.</p> Here: <p> is the opening tag </p> is the closing tag The text inside is the content Basic HTML Page Example Below is a simple webpage example you can try: <!DOCTYPE html> <html> <head> <title>My First Webpage</title> </head> <body> <h1>Hello World!</h1> <p>This is my...
Post a Comment
Read more