HTML Attributes provide additional information about HTML elements.
They help control how elements behave, display, or store extra data.
In this tutorial, you will learn what HTML attributes are, how to use them, and see examples with output.
Table of Contents:
What Are HTML Attributes
HTML attributes are special properties added to HTML tags to provide extra information.
Attributes are always written inside the opening tag.
Syntax of HTML Attributes
Example
<tagname attribute="value">Content</tagname>
Explanation
| Part | Meaning |
|---|---|
attribute | Name of the attribute |
"value" | Value assigned to attribute |
HTML attributes, HTML attribute examples, HTML syntax, learn HTML attributes, HTML basics
Simple HTML Attribute Example
Example Code
<a href="https://example.com">Visit Website</a>
Explanation
hrefis an attribute- It defines the link destination
Output
Visit Website (clickable link)
Common HTML Attributes
List of Common Attributes
| Attribute | Description |
|---|---|
href | Defines link URL |
src | Specifies image source |
alt | Alternative text for images |
style | Adds inline CSS |
title | Tooltip text |
id | Unique identifier |
class | Group elements |
href Attribute Example
Example Code
<a href="https://google.com">Go to Google</a>
Output
Go to Google
src Attribute Example
Example Code
<img src="image.jpg" alt="Sample Image">
Explanation
srcdefines image locationaltshows text if image is not found
Output
[Image displayed here]
style Attribute Example
Example Code
<p style="color: blue;">This is blue text.</p>
Output
This is blue text. (in blue color)
title Attribute Example
Example Code
<p title="This is a tooltip">Hover over this text</p>
Output
Hover over this text
(Shows tooltip when mouse hovers)
id and class Attributes
Example Code
<p id="para1" class="text">This is a paragraph.</p>
Explanation
| Attribute | Purpose |
|---|---|
id | Unique element identifier |
class | Used for grouping elements |
Rules for Using HTML Attributes
Important Rules
| Rule | Description |
|---|---|
| Use Quotes | Always wrap values in quotes |
| Lowercase | Use lowercase for attributes |
| Inside Opening Tag | Attributes go only in opening tag |
| Unique ID | id must be unique |
Multiple Attributes Example
Example Code
<a href="https://example.com" title="Go to site" style="color:red;">
Click Here
</a>
Output
Click Here (red color with tooltip)
HTML Attributes Summary Table
| Feature | Description |
|---|---|
| Location | Inside opening tag |
| Purpose | Add extra information |
| Format | name=”value” |
| Multiple Allowed | Yes |
Common Mistakes with HTML Attributes
| Mistake | Problem |
|---|---|
| Missing quotes | Invalid HTML |
| Wrong attribute name | No effect |
| Using uppercase | Not recommended |
| Duplicate IDs | Errors in CSS/JS |
Frequently Asked Questions (FAQ)
1. What is an HTML attribute?
An HTML attribute provides extra information about an element.
2. Where are attributes written?
Inside the opening tag.
3. Can an element have multiple attributes?
Yes, an element can have multiple attributes.
4. Are quotes required in attributes?
Yes, it is best practice to use quotes.
5. What is the most common attribute?
href and src are commonly used attributes.