Getting to Know HTML Tags, Elements, and Attributes for Beginners
Tag, element and attribute: three HTML words beginners often mix up. Here's what each one means, explained simply with examples.
RazakTerra- Reading time
- 2 min read
- Comments
- Discussion
On this page
What is a Tag?
A tag is the basic building block of HTML. It’s written using angle brackets < >. There are two types:
Opening tag → <p>
Closing tag → </p>
Some tags are self closing (also called empty tags), like:
<br />
<img />
<input />Think of tags as the labels that tell the browser what kind of content you’re adding.
What is an Element?
An element is the complete package. It includes:
The opening tag The content inside The closing tag
Example:
<p>This is a paragraph.</p>Here, the whole thing (<p>This is a paragraph.</p>) is called a paragraph element.
So remember:
Tag = just the <p> or </p>
Element = the full thing with content inside
What is an Attribute?
An attribute gives extra information about an element. It always goes inside the opening tag and usually comes in a name value pair. Basic format:
<tag attribute="value"></tag>Common examples:
<!-- The src attribute tells the browser where the image is -->
<img src="photo.jpg" alt="A cute cat" />
<!-- The href attribute is the link destination -->
<a href="https://example.com">Visit Example</a>
<!-- The class attribute is used for styling or JavaScript -->
<p class="highlight">This text is special</p>
<!-- The id attribute gives a unique name to an element -->
<h1 id="main-title">Welcome</h1>Quick Comparison
| Term | What it is | Kegunaan |
|---|---|---|
| Tag | The label in angle brackets | <p>, </p>, <img> |
| Element | Tag + content + closing tag | <p>Hello</p> |
| Attribute | Extra info inside the opening tag | src=“photo.jpg”, class=“box” |
Putting It All Together
Here’s a small example that uses all three:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tags, Elements & Attributes</title>
</head>
<body>
<h1 id="title">Hello World</h1>
<p class="intro">This is a <strong>paragraph</strong> element.</p>
<img src="cat.jpg" alt="A sleeping cat" width="300" />
<a href="https://google.com" target="_blank">Go to Google</a>
</body>
</html>In this code:
<h1>, <p>, <img>, <a> are tags
The full <h1 id="title">Hello World</h1> is an element
id=“title”, class=“intro”, src=“cat.jpg”, href=“…”, target=“_blank” are attributes
Quick Tips for Beginners
Always close your tags (unless they’re self closing). Attribute values should usually be wrapped in quotes (” “). You can have multiple attributes in one tag, just separate them with spaces. Not every element needs attributes only add them when you need extra info.
Once you understand the difference between tags, elements, and attributes, reading and writing HTML becomes way easier. These three concepts are the foundation of almost everything you’ll do in HTML.
Written by
Razak
Writes about the web, slowly, and builds small tools on the side.
Keep reading
Read next
1 minBest Practices for Writing Clean and Valid HTML
A collection of HTML best practices including proper indentation, naming, W3C validation, and common beginner mistakes you should avoid.
Read article
2 minGetting to Know HTML Iframe: How to Embed YouTube and Google Maps
How to use the HTML <iframe> tag to embed content from other sites, like a YouTube video or a Google Map, inside your own page.
Read article
1 minHow to Create Forms in HTML for Beginners
A beginner's guide to HTML forms: how the <form> tag sends data for logins, sign-ups and contact messages, starting from the basics.
Read article
Discussion
Comments
Loading comments…