Learn About HTML Tags in Detail

Winner We

📝 Learn About HTML Tags in Detail: Complete Guide with Examples for Beginners

📌 HTML Tags Explained with Examples | Beginner’s Guide to HTML | Learn About HTML Tags in Detail

🧩 What Are HTML Tags?

HTML tags are the building blocks of web pages. They are used to structure content and tell the browser how to display it.

📌 Syntax of a Tag:

html
<tagname>Content goes here</tagname>

✅ Most HTML tags come in pairs:

  • Opening tag: <p>

  • Closing tag: </p>

Example:

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

🧱 Categories of HTML Tags

HTML tags can be divided into several categories based on their purpose. Let’s explore them one by one:

1️⃣ Text Formatting Tags

Used to format or emphasize text on a webpage.

Tag Purpose Example
<h1> to <h6> Headings (from biggest to smallest) <h1>Title</h1>
<p> Paragraph <p>This is a paragraph.</p>
<br> Line break Line 1<br>Line 2
<hr> Horizontal line <hr>
<strong> Bold text <strong>Important!</strong>
<em> Italic text <em>Emphasized</em>
<u> Underline text <u>Underlined</u>

2️⃣ Hyperlink Tag

Used to create clickable links.

html
<a href="https://www.google.com">Visit Google</a>
Attribute Purpose
href URL of the page to link to
target="_blank" Opens link in a new tab

3️⃣ Image Tag

Used to display images.

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

 

Attribute Purpose
src File path of the image
alt Alternative text (for screen readers or if image fails to load)
width, height To resize the image (optional)

4️⃣ List Tags

✅ Unordered List:

html
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>

✅ Ordered List:

html
<ol>
<li>First</li>
<li>Second</li>
</ol>
Tag  Purpose
<ul> Unordered (bulleted) list
<ol> Ordered (numbered) list
<li> List item

5️⃣ Table Tags

Tables help organize data in rows and columns.

html
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Achintya</td>
<td>25</td>
</tr>
</table>
Tag Purpose
<table> Defines a table
<tr> Table row
<th> Table header
<td> Table data/cell

6️⃣ Form Tags

Used to take input from users.

html
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
Tag Purpose
<form> Creates the form
<input> Takes user input
<label> Label for the input
<textarea> Multiline input
<button> Button inside the form

7️⃣ Media Tags

Tag Purpose Example
<img> Display image <img src="pic.jpg">
<audio> Embed audio <audio controls><source src="song.mp3"></audio>
<video> Embed video <video controls><source src="movie.mp4"></video>

8️⃣ Container Tags (Div & Span)

Used to group or style HTML content.

html
<div class="container">
<p>This is inside a div.</p>
</div>
<span style="color:red;">Red Text</span>  
Tag Purpose
<div> Block-level container
<span> Inline container

🛑 Self-Closing Tags in HTML

Some HTML tags don’t need a closing tag. These are called self-closing or void elements.

Examples:

html
<br> <hr> <img> <input> <meta> <link>

📌 Best Practices for Using Tags

  • ✅ Use semantic tags like <header>, <footer>, <article> for cleaner HTML5 code.

  • ✅ Always close your tags properly.

  • ✅ Keep code indented and readable.

  • ✅ Use alt attributes for images.

  • ✅ Nest elements properly (never put a <div> inside <p>).

✅ Summary Table: Most Used HTML Tags

Tag Use
<html>, <head>, <body> Page structure
<h1> to <h6> Headings
<p> Paragraph
<a> Hyperlink
<img> Image
<ul>, <ol>, <li> Lists
<table>, <tr>, <td> Tables
<form>, <input> Forms
<div>, <span> Containers

🧭 Missed Step 1?
👉 Learn HTML for Beginners: Step-by-Step Guide to Start Web Development

🎯 What’s Next?

In the next blog post, we’ll cover:

🌐 “Creating a Simple Webpage: Putting HTML Tags into Practice”
You’ll learn how to combine all these tags to create your first complete webpage.

Learn HTML 

Leave a Reply

Your email address will not be published. Required fields are marked *