HTML Tags: Complete Guide with Code & Explanation
HTML (HyperText Markup Language) is the foundation of web development. It provides the structure for webpages using tags. In this article, we will explore all essential HTML tags, their usage, and examples.
📌 What Are HTML Tags?
HTML tags are enclosed in angle brackets (<>) and define elements in a webpage.
🔹 Most HTML tags have an opening tag (<tag>), content, and closing tag (</tag>).
🔹 Some tags are self-closing, like <img> and <br>.
🔹 Tags help browsers understand the structure of a webpage.
📌 Basic HTML Structure
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First HTML Page</title></head><body> <h1>Welcome to My Website</h1> <p>This is a basic HTML structure.</p></body></html>
✅ Explanation:
<!DOCTYPE html>→ Declares the document as HTML5.<html>→ Root element of the page.<head>→ Contains metadata and title.<title>→ Sets the webpage title.<body>→ Contains visible content.
📌 Most Important HTML Tags with Examples
1️⃣ Heading Tags (<h1> to <h6>)
<h1>This is Heading 1</h1><h2>This is Heading 2</h2><h3>This is Heading 3</h3>✅ Use: Define headings, with <h1> being the most important.
2️⃣ Paragraph Tag (<p>)
<p>This is a paragraph of text.</p>✅ Use: Defines text paragraphs.
3️⃣ Bold, Italic & Underline (<b>, <i>, <u>)
<b>Bold Text</b><i>Italic Text</i><u>Underlined Text</u>✅ Use: Styles text to highlight content.
4️⃣ Links (<a>)
<a href="https://example.com">Visit Example</a>✅ Use: Creates clickable links.
5️⃣ Images (<img>)
<img src="image.jpg" alt="Example Image" width="300">✅ Use: Displays images.
🔹 alt="text" provides an alternative text if the image fails to load.
6️⃣ Lists (<ul>, <ol>, <li>)
<ul> <li>Item 1</li> <li>Item 2</li></ul><ol> <li>First Item</li> <li>Second Item</li></ol>✅ Use:
<ul>creates unordered lists (bullets).<ol>creates ordered lists (numbers).<li>defines list items.
7️⃣ Tables (<table>, <tr>, <td>, <th>)
<table border="1"> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>John</td> <td>25</td> </tr></table>✅ Use: Creates tables for structured data.
8️⃣ Forms (<form>, <input>, <button>)
<form action="/submit"> <input type="text" placeholder="Enter your name"> <button type="submit">Submit</button></form>✅ Use: Creates user input forms.
9️⃣ Div & Span (<div>, <span>)
<div style="background-color:lightblue;">This is a div</div><span style="color:red;">This is a span</span>✅ Use:
<div>→ Block-level container.<span>→ Inline container.
🔟 Comments in HTML (<!-- -->)
<!-- This is a comment -->✅ Use: Adds notes that are ignored by browsers.
📊 HTML Tags Cheat Sheet
| Tag | Description |
|---|---|
<h1> - <h6> |
Headings |
<p> |
Paragraph |
<a> |
Link |
<img> |
Image |
<ul>, <ol>, <li> |
Lists |
<table> |
Table |
<form> |
Form |
<input> |
Input Field |
<button> |
Button |
<div> |
Division |
<span> |
Inline Container |
<br> |
Line Break |
<hr> |
Horizontal Line |
🖼️ HTML Tags Infographic
Here’s an infographic to help you visualize important HTML tags:
🚀 Conclusion: Why Are HTML Tags Important?
HTML tags are the building blocks of web development. Understanding them is essential for:
✅ Creating structured content.
✅ Improving SEO & accessibility.
✅ Designing user-friendly webpages.
Post a Comment