A regular HTML element usually has two tags: one opening tag and one closing tag. For example, <p>Hello</p> contains an opening tag, <p>, and a closing tag, </p>. Attributes, such as class or href, belong inside the opening tag. They are not separate tags.
TLDR: A standard HTML element has two tags: an opening tag and a closing tag. In <a href="https://example.com">Visit</a>, there are two tags and one attribute. A small audit of 100 beginner HTML questions would likely show that over 60% of confusion comes from mixing up tags and attributes. If a junior developer is fixing a broken page, counting tags correctly can save 10 to 15 minutes of avoidable debugging.
What Counts as a Tag?
An HTML tag is the marked code that defines where an element begins or ends. Tags are written with angle brackets. The opening tag starts the element. The closing tag ends it.
- Opening tag:
<div> - Closing tag:
</div> - Complete element:
<div>Content</div>
The slash in the closing tag matters. It tells the browser, “this element is finished.” Without it, the browser may guess where the element should end. Sometimes the guess works. Sometimes it breaks the layout in a quiet, irritating way.
The Basic Structure of a Regular HTML Element
A regular HTML element has three main parts:
- The opening tag, such as
<section>. - The content, such as text, images, or other elements.
- The closing tag, such as
</section>.
Here is a simple example:
<h1>About Our Services</h1>
This example has two tags. The content is About Our Services. The full thing is called an element. This difference matters because people often use “tag” and “element” as if they mean the same thing. They do not.
It gets annoying when tutorials call everything a tag. That shortcut creates bad habits. A tag is only part of an element. An element is the complete structure, including its opening tag, content, and closing tag.
Where Do Attributes Fit?
Attributes give extra information about an element. They are placed inside the opening tag. They do not create extra tags.
Consider this link:
<a href="https://example.com" target="_blank">Read more</a>
This element includes:
- Opening tag:
<a href="https://example.com" target="_blank"> - Closing tag:
</a> - Attributes:
hrefandtarget - Content:
Read more
So how many tags are in that link element? Still two. The attributes do not change the tag count. They only add details to the opening tag.
Opening Tags Can Contain Many Attributes
An opening tag can be simple or crowded. Both versions still count as one opening tag.
Simple:
<button>Save</button>
With attributes:
<button type="submit" class="primary" id="saveButton">Save</button>
The second version has more information, but it does not have more tags. It has two tags: opening and closing. It has three attributes: type, class, and id.
Regular Elements Versus Void Elements
The phrase regular HTML element usually refers to an element that can contain content and has a closing tag. Common examples include:
<p>Text</p><div>Content</div><span>Label</span><strong>Warning</strong><article>Post content</article>
HTML also has void elements. These do not wrap content and do not need closing tags in HTML. Examples include:
<img src="photo.jpg" alt="Team photo"><br><hr><input type="email"><meta charset="UTF-8">
A void element normally has one tag. For example, <img> is not written as <img></img> in standard HTML. That closing tag is invalid.
Why the Confusion Happens
The confusion often starts with casual language. Someone says, “Add an image tag,” and they mean the whole image element. Someone else says, “Put a class tag on it,” when they mean a class attribute. The browser may still render the page, so the mistake can go unnoticed.
Honestly, it feels like browsers are too forgiving here. A missing closing tag might not break the page at once. Instead, it may push a style into the wrong area or nest elements in a weird way. You then spend 20 seconds checking CSS, then another minute blaming caching, only to find one missing </div>.
How Browsers Read Tags
Browsers parse HTML from top to bottom. When a browser sees an opening tag, it starts an element. When it sees the matching closing tag, it ends that element.
For example:
<em>This text is emphasized</em>
The browser applies emphasis only between the two tags. If the closing tag is missing, the browser has to decide where the emphasis should stop. Modern browsers are good at recovery, but recovery is not the same as correctness.
Clean markup reduces risk. It also helps screen readers, search engines, validators, and future developers who need to read your code.
Common Examples and Tag Counts
| HTML Example | Tag Count | Attribute Count |
|---|---|---|
<p>Hello</p> |
2 | 0 |
<div class="box">Hello</div> |
2 | 1 |
<a href="/contact">Contact</a> |
2 | 1 |
<img src="logo.png" alt="Logo"> |
1 | 2 |
How to Identify Tags Quickly
Use this simple checklist:
- Look for angle brackets. A tag starts with
<and ends with>. - Check for a slash. A closing tag begins with
</. - Ignore attributes when counting tags. They live inside the opening tag.
- Check whether the element is void. Void elements usually have one tag.
- Match pairs. Regular elements should have an opening and closing tag.
The Practical Answer
For a regular HTML element, the answer is simple: there are two tags. One starts the element. One ends it. Attributes can make the opening tag longer, but they do not increase the number of tags.
If you remember one rule, make it this: tags define structure, attributes define details. That distinction keeps your HTML cleaner, your debugging faster, and your explanations more accurate.