What are HTML Tags?
HTML tags are special keywords written inside angle brackets < >. They tell the browser what type of content it is dealing with and how that content fits into the webpage structure.
Imagine you have a box containing different things. You might put a label on each box: Books, Clothes, or Food.
HTML tags work in a similar way. They tell the browser: "This is a heading." or "This is a paragraph."
Your First HTML Tag
Here is a simple paragraph tag.
<p>Hello World!</p>
Here,
<p>
is the opening tag and
</p>
is the closing tag.
Together with the text, they create a
paragraph element.
Anatomy of an HTML Tag
A tag is made from a tag name surrounded by angle brackets.
<p>
│
└── Tag name: p<
Opening angle bracket
Marks the beginning of an HTML tag.
p
Tag name
Identifies what type of HTML tag is being used.
>
Closing angle bracket
Marks the end of the tag.
Common HTML Tags
These are some of the HTML tags you will use frequently as a beginner.
<h1>
Heading
Defines a main heading.
<p>
Paragraph
Defines a paragraph of text.
<a>
Link
Creates a hyperlink.
<img>
Image
Embeds an image into a webpage.
<ul>
Unordered List
Creates a bulleted list.
<li>
List Item
Defines an item inside a list.
<button>
Button
Creates an interactive button.
<div>
Container
Groups related content together.
Types of HTML Tags
HTML tags can be understood by how they are written and whether they contain content.
| Type | Example | Explanation |
|---|---|---|
| Paired Tags |
<p>Text</p>
| Have an opening tag and a closing tag. |
| Empty / Void Tags |
<br>
| Do not contain normal content and do not use a closing tag. |
| Nested Tags |
<p><strong>Hi</strong></p>
| One tag structure is placed inside another. |
HTML Tags Can Be Nested
You can place one HTML element inside another element.
<p>
This is
<strong>important</strong>
text.
</p>
The
<strong>
tag is inside the
<p>
element.
This relationship is called
nesting.
Empty or Void HTML Tags
Some HTML tags do not need a closing tag.
<br>
Line Break
Moves the following content to a new line.
<hr>
Horizontal Rule
Represents a thematic break.
<img src="photo.jpg" alt="Photo">
Image
Displays an image using the specified source.
<input type="text">
Input
Creates an input control for collecting user data.
HTML Tags vs HTML Elements
These terms are often used together, but they mean different things.
<p>Hello World!</p>Tags are the markup pieces:
<p>
and
</p>.
The complete structure
<p>Hello World!</p>
is the
HTML element.
Common HTML Tag Mistakes
Avoid these mistakes while writing HTML.
- Forgetting the closing tag when an element requires one.
- Writing tags with incorrect nesting.
- Using an element only because it looks a certain way instead of choosing it for its meaning.
- Using unnecessary tags when a simpler structure would work.
-
Forgetting important attributes such
as
altfor images.
Try HTML Tags Yourself
Edit the HTML and click Run to see the result.
HTML Tag Best Practices
Good HTML is simple, readable, and meaningful.