HTML Tags
📌 Key Takeaways
- HTML Tags
- What Are HTML Tags
- Syntax of HTML Tags
- Simple HTML Tag Example
- Types of HTML Tags
- Paired Tags (Container Tags)
Table of Contents:
HTML Tags are the basic units used to create HTML elements.
They define how content is displayed in a web browser.
In this tutorial, you will learn what HTML tags are, types of tags, and see examples with output.
HTML tags, HTML tag examples, HTML basics, learn HTML tags, HTML syntax
What Are HTML Tags
HTML tags are keywords enclosed in angle brackets used to define elements.
They tell the browser:
- How to display content
- What type of content it is
Syntax of HTML Tags
Example
<tagname>Content</tagname>
Explanation
| Part | Description |
|---|---|
<tagname> | Opening tag |
</tagname> | Closing tag |
| Content | Text inside the tag |
Simple HTML Tag Example
Example Code
<h1>This is a heading</h1>
<p>This is a paragraph</p>
Output
This is a heading
This is a paragraph
Types of HTML Tags
HTML tags are mainly divided into two types.
Types of Tags
| Type | Description |
|---|---|
| Paired Tags | Have opening and closing tags |
| Unpaired Tags | Do not have closing tags |
Paired Tags (Container Tags)
These tags have both opening and closing parts.
Example
<p>This is a paragraph</p>
Output
This is a paragraph
Unpaired Tags (Empty Tags)
These tags do not have a closing tag.
Example
<br>
<hr>
Explanation
<br>creates a line break<hr>creates a horizontal line
Output
Line 1
Line 2
Nested HTML Tags
Tags can be placed inside other tags.
Example Code
<p>This is <b>bold</b> text.</p>
Explanation
<b>is inside<p>- This is called nesting
Output
This is bold text.
Common HTML Tags
Frequently Used Tags
| Tag | Purpose |
|---|---|
<h1> to <h6> | Headings |
<p> | Paragraph |
<a> | Link |
<img> | Image |
<br> | Line break |
<hr> | Horizontal line |
HTML Tags Are Not Case Sensitive
Example
<H1>Hello</H1>
<h1>Hello</h1>
Output
Hello
Hello
Both are correct, but lowercase is recommended.
HTML Tags vs HTML Elements
Comparison Table
| Feature | Tag | Element |
|---|---|---|
| Definition | Keyword | Complete structure |
| Includes Content | No | Yes |
| Example | <p> | <p>Text</p> |
Rules for Using HTML Tags
Important Rules
| Rule | Description |
|---|---|
| Proper Closing | Close tags correctly |
| Correct Nesting | Avoid overlapping tags |
| Use Lowercase | Best practice |
| Use Quotes | For attributes |
Common Mistakes with HTML Tags
| Mistake | Result |
|---|---|
| Missing closing tag | Broken layout |
| Incorrect nesting | Errors in display |
| Typing errors | Tag not recognized |
| Using wrong tags | Unexpected output |
HTML Tags Example with Multiple Elements
Example Code
<h1>HTML Tags Example</h1>
<p>This is a <i>simple</i> paragraph.</p>
<hr>
Output
HTML Tags Example
This is a simple paragraph.
Frequently Asked Questions (FAQ)
1. What are HTML tags?
HTML tags are keywords used to define elements.
2. What is a paired tag?
A tag with both opening and closing parts.
3. What is an unpaired tag?
A tag without a closing part.
4. Are HTML tags case-sensitive?
No, but lowercase is recommended.
5. What is the difference between tag and element?
A tag is part of an element, while an element is the complete structure.