HTML Attributes

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.

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

• href is 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

• src defines image location
• alt shows 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.