Attributes0%

Attributes

Beginner8 min read•Updated: 2026-09-30

HTML Attributes (Adding Superpowers to Tags)

Welcome to Topic 1.5! ⚡

In the previous lesson, you mastered HTML Elements—the basic building blocks of any webpage. Now, imagine you have a plain button or a link on your page. How do you tell the computer:

Where should this link take the user when clicked?
Which photo should be displayed inside an image tag?
What size should the image be?

The answer is: HTML Attributes! Attributes give tags extra information and superpowers.

What is an HTML Attribute?

An Attribute provides additional settings, properties, or behavior to an HTML element.

Let us understand this with a simple real-life example: Your School ID Card! 🪪

1🪪 THE SCHOOL ID CARD ANALOGY:
2 
3You are a student (an Element):         <student> Rohit </student>
4 
5Your ID Card contains your Attributes:
6- Roll Number: rollno="24"
7- Class:       class="10th"
8- House:       house="Red"
9- Blood Group: blood="B+"
10 
11Complete Element with Attributes:
12<student rollno="24" class="10th" house="Red"> Rohit </student>

Just like your ID card gives extra details about who you are, HTML attributes give extra instructions about how an element should behave.

The Golden Rules of HTML Attributes

Every beginner must remember these 4 simple rules:

1
Always in the Opening Tag: Attributes are ONLY written inside the opening tag (start tag). They are NEVER written in the closing tag!
2
Name and Value Pair: Attributes usually come in pairs: name="value".
3
Always Use Quotes: Always wrap the value in double quotation marks ("...").
4
Use Spaces, Not Commas: If you use multiple attributes in one tag, separate them with a simple space. Never put commas between them!

1<!-- Anatomy of an Attribute -->
2<a href="https://google.com" target="_blank">Visit Google</a>
3── ──────────┬────────────── ───────┬──────
4 │           │                      │
5Tag    Attribute 1             Attribute 2

The Most Common HTML Attributes You Must Know

Here are the most essential attributes every web developer uses every single day:

1. The `href` Attribute (For Links)

The <a> tag creates clickable hyperlinks. The href (Hypertext Reference) attribute tells the browser which web address (URL) to open when someone clicks the link:

1<a href="https://mskinstitute.in">Visit MSK Institute Website</a>

If you don't provide an href attribute, the link has nowhere to go!

2. The `src` Attribute (For Images)

The <img> tag displays a picture on your screen. The src (Source) attribute tells the browser where to find the image file:

1<img src="student-award.jpg" alt="Student receiving trophy">

src can be a file on your computer (like myphoto.png) or a link from the internet (like https://example.com/logo.png).

3. The `alt` Attribute (Alternate Description for Images)

The alt attribute provides a text description of the image.

Why is alt so important?

1
Broken Images: If the user's internet is slow or the image file cannot be found, the browser shows this text instead of an ugly broken icon.
2
Accessibility: Blind or visually impaired users use "Screen Reader" software that reads the alt text aloud to describe the picture!

1<!-- If the photo fails to load, users still read: "MSK Computer Lab" -->
2<img src="lab.jpg" alt="MSK Computer Lab with students coding">

4. The `width` and `height` Attributes (Setting Image Dimensions)

You can control the size of images using width and height (measured in pixels):

1<img src="school-logo.png" alt="School Logo" width="200" height="100">

5. The `title` Attribute (The Tooltip Helper)

When you add a title attribute to any element, a small floating text box (called a tooltip) appears whenever a user hovers their mouse cursor over that element!

1<p title="Click to read about our computer courses">
2  Hover your mouse over this paragraph!
3</p>

6. The `target` Attribute (Open in a New Tab)

By default, clicking a link replaces the current webpage. If you want the link to open in a fresh new browser tab, use target="_blank":

1<a href="https://youtube.com" target="_blank">Open YouTube in New Tab</a>

7. The `lang` Attribute (Declaring Page Language)

As you saw in the boilerplate lesson, the lang attribute is used inside the <html> root tag to tell search engines and translation tools the language of the page:

1<html lang="en"> <!-- English -->
2<html lang="hi"> <!-- Hindi -->

Summary Table of Key Attributes

Attribute	Used In Tags	What It Specifies	Example
`href`	`<a>`	Link destination URL	`<a href="https://google.com">`
`src`	`<img>`, `<video>`, `<script>`	Path or URL to the file	`<img src="pic.jpg">`
`alt`	`<img>`	Alternate description text	`<img alt="School Logo">`
`width` / `height`	`<img>`, `<video>`	Size dimensions in pixels	`<img width="300">`
`title`	Any tag	Mouse hover tooltip text	`<h1 title="Welcome!">`
`target`	`<a>`	Where to open the link	`<a target="_blank">`
`lang`	`<html>`	Document language	`<html lang="en">`

What are Boolean Attributes? (True / False Attributes)

Some special HTML attributes do not need a "value". Their mere presence inside a tag turns on that feature! These are called Boolean Attributes.

Common Examples:

1
disabled: Turns off an input field or button so users cannot click or type into it.

1   <button disabled>Button is Disabled</button>

1
required: Makes an input field mandatory in a form (user cannot submit without filling it).

1   <input type="text" required>

1
readonly: Users can read the text but cannot edit or change it.

1   <input type="text" value="Read only text" readonly>

Common Beginner Mistakes with Attributes

1
⚠️ Writing Attributes in Closing Tags:

Wrong: </p title="Hello">
Correct: <p title="Hello">

1
⚠️ Forgetting Quotation Marks:

Wrong: <a href=https://google.com>
Correct: <a href="https://google.com">

1
⚠️ Spelling Mistakes in Attribute Names:

Wrong: <img scr="photo.jpg"> (Many beginners type scr instead of src!)
Correct: <img src="photo.jpg">

1
⚠️ Using Commas Between Attributes:

Wrong: <img src="photo.jpg", alt="Photo", width="200">
Correct: <img src="photo.jpg" alt="Photo" width="200">

Quick Summary

Attributes provide extra information, settings, and instructions to HTML tags.
Attributes are always written inside the opening tag, never in the closing tag.
Attributes usually follow the format: name="value".
Always use double quotation marks around attribute values.
Use href for link destinations and src for image paths.
Use alt to describe images for screen readers and slow connections.
Use target="_blank" to open links in a new browser tab.
Boolean Attributes (like disabled and required) do not require values.

Interactive Quiz• Knowledge Check

Practice Quiz

Test your understanding with these multiple-choice questions:

Question 1

Where should an HTML attribute always be placed?

Question 2

Which attribute specifies the destination URL for a hyperlink (<a> tag)?

Question 3

Why is the alt attribute important for image tags?

Question 4

What type of attribute is disabled or required?

Question 5

What value of the target attribute opens a link in a fresh, new browser tab?

Practice Challenge (Try It Yourself)

1
Open your index.html file in VS Code.
2
Inside <body>, try adding:

A link to your favorite website with target="_blank" so it opens in a new tab:

1     <a href="https://wikipedia.org" target="_blank">Visit Wikipedia</a>

An image tag with src, alt, and width:

1     <img src="https://picsum.photos/300/200" alt="Sample picture" width="300">

A paragraph with a helpful hover message using the title attribute:

1     <p title="Tip: You are doing great in web development!">Hover over this tip!</p>

1
Save your file (Ctrl + S) and view your interactive webpage live with Live Server! 🚀

🚀 What's Next?

In the next lesson, we will continue your web development journey with HTML Headings (Heading & Paragraphs).

👉 Continue to Next Lesson: HTML Headings →

Next Lesson

HTML Headings

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Elements	HTML Headings

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext

MSK Institute • Shikohabad

Loading Page Content...

Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...

Connecting serverPlease wait...

💻 Practical Labs🚀 Free Demo📜 Verified Certificates

HTML Headings

Attributes

Beginner8 min read•Updated: 2026-09-30

Study Materials Cheatsheet

HTML Attributes (Adding Superpowers to Tags)

Welcome to Topic 1.5! ⚡

In the previous lesson, you mastered HTML Elements—the basic building blocks of any webpage. Now, imagine you have a plain button or a link on your page. How do you tell the computer:

Where should this link take the user when clicked?
Which photo should be displayed inside an image tag?
What size should the image be?

The answer is: HTML Attributes! Attributes give tags extra information and superpowers.

What is an HTML Attribute?

An Attribute provides additional settings, properties, or behavior to an HTML element.

Let us understand this with a simple real-life example: Your School ID Card! 🪪

1🪪 THE SCHOOL ID CARD ANALOGY:
2 
3You are a student (an Element):         <student> Rohit </student>
4 
5Your ID Card contains your Attributes:
6- Roll Number: rollno="24"
7- Class:       class="10th"
8- House:       house="Red"
9- Blood Group: blood="B+"
10 
11Complete Element with Attributes:
12<student rollno="24" class="10th" house="Red"> Rohit </student>

Just like your ID card gives extra details about who you are, HTML attributes give extra instructions about how an element should behave.

The Golden Rules of HTML Attributes

Every beginner must remember these 4 simple rules:

1
Always in the Opening Tag: Attributes are ONLY written inside the opening tag (start tag). They are NEVER written in the closing tag!
2
Name and Value Pair: Attributes usually come in pairs: name="value".
3
Always Use Quotes: Always wrap the value in double quotation marks ("...").
4
Use Spaces, Not Commas: If you use multiple attributes in one tag, separate them with a simple space. Never put commas between them!

1<!-- Anatomy of an Attribute -->
2<a href="https://google.com" target="_blank">Visit Google</a>
3── ──────────┬────────────── ───────┬──────
4 │           │                      │
5Tag    Attribute 1             Attribute 2

The Most Common HTML Attributes You Must Know

Here are the most essential attributes every web developer uses every single day:

1. The `href` Attribute (For Links)

The <a> tag creates clickable hyperlinks. The href (Hypertext Reference) attribute tells the browser which web address (URL) to open when someone clicks the link:

1<a href="https://mskinstitute.in">Visit MSK Institute Website</a>

If you don't provide an href attribute, the link has nowhere to go!

2. The `src` Attribute (For Images)

The <img> tag displays a picture on your screen. The src (Source) attribute tells the browser where to find the image file:

1<img src="student-award.jpg" alt="Student receiving trophy">

src can be a file on your computer (like myphoto.png) or a link from the internet (like https://example.com/logo.png).

3. The `alt` Attribute (Alternate Description for Images)

The alt attribute provides a text description of the image.

Why is alt so important?

1
Broken Images: If the user's internet is slow or the image file cannot be found, the browser shows this text instead of an ugly broken icon.
2
Accessibility: Blind or visually impaired users use "Screen Reader" software that reads the alt text aloud to describe the picture!

1<!-- If the photo fails to load, users still read: "MSK Computer Lab" -->
2<img src="lab.jpg" alt="MSK Computer Lab with students coding">

4. The `width` and `height` Attributes (Setting Image Dimensions)

You can control the size of images using width and height (measured in pixels):

1<img src="school-logo.png" alt="School Logo" width="200" height="100">

5. The `title` Attribute (The Tooltip Helper)

When you add a title attribute to any element, a small floating text box (called a tooltip) appears whenever a user hovers their mouse cursor over that element!

1<p title="Click to read about our computer courses">
2  Hover your mouse over this paragraph!
3</p>

6. The `target` Attribute (Open in a New Tab)

By default, clicking a link replaces the current webpage. If you want the link to open in a fresh new browser tab, use target="_blank":

1<a href="https://youtube.com" target="_blank">Open YouTube in New Tab</a>

7. The `lang` Attribute (Declaring Page Language)

As you saw in the boilerplate lesson, the lang attribute is used inside the <html> root tag to tell search engines and translation tools the language of the page:

1<html lang="en"> <!-- English -->
2<html lang="hi"> <!-- Hindi -->

Summary Table of Key Attributes

Attribute	Used In Tags	What It Specifies	Example
`href`	`<a>`	Link destination URL	`<a href="https://google.com">`
`src`	`<img>`, `<video>`, `<script>`	Path or URL to the file	`<img src="pic.jpg">`
`alt`	`<img>`	Alternate description text	`<img alt="School Logo">`
`width` / `height`	`<img>`, `<video>`	Size dimensions in pixels	`<img width="300">`
`title`	Any tag	Mouse hover tooltip text	`<h1 title="Welcome!">`
`target`	`<a>`	Where to open the link	`<a target="_blank">`
`lang`	`<html>`	Document language	`<html lang="en">`

What are Boolean Attributes? (True / False Attributes)

Some special HTML attributes do not need a "value". Their mere presence inside a tag turns on that feature! These are called Boolean Attributes.

Common Examples:

1
disabled: Turns off an input field or button so users cannot click or type into it.

1   <button disabled>Button is Disabled</button>

1
required: Makes an input field mandatory in a form (user cannot submit without filling it).

1   <input type="text" required>

1
readonly: Users can read the text but cannot edit or change it.

1   <input type="text" value="Read only text" readonly>

Common Beginner Mistakes with Attributes

1
⚠️ Writing Attributes in Closing Tags:

Wrong: </p title="Hello">
Correct: <p title="Hello">

1
⚠️ Forgetting Quotation Marks:

Wrong: <a href=https://google.com>
Correct: <a href="https://google.com">

1
⚠️ Spelling Mistakes in Attribute Names:

Wrong: <img scr="photo.jpg"> (Many beginners type scr instead of src!)
Correct: <img src="photo.jpg">

1
⚠️ Using Commas Between Attributes:

Wrong: <img src="photo.jpg", alt="Photo", width="200">
Correct: <img src="photo.jpg" alt="Photo" width="200">

Quick Summary

Attributes provide extra information, settings, and instructions to HTML tags.
Attributes are always written inside the opening tag, never in the closing tag.
Attributes usually follow the format: name="value".
Always use double quotation marks around attribute values.
Use href for link destinations and src for image paths.
Use alt to describe images for screen readers and slow connections.
Use target="_blank" to open links in a new browser tab.
Boolean Attributes (like disabled and required) do not require values.

Interactive Quiz• Knowledge Check

Practice Quiz

Test your understanding with these multiple-choice questions:

Question 1

Where should an HTML attribute always be placed?

Question 2

Which attribute specifies the destination URL for a hyperlink (<a> tag)?

Question 3

Why is the alt attribute important for image tags?

Question 4

What type of attribute is disabled or required?

Question 5

What value of the target attribute opens a link in a fresh, new browser tab?

Practice Challenge (Try It Yourself)

1
Open your index.html file in VS Code.
2
Inside <body>, try adding:

A link to your favorite website with target="_blank" so it opens in a new tab:

1     <a href="https://wikipedia.org" target="_blank">Visit Wikipedia</a>

An image tag with src, alt, and width:

1     <img src="https://picsum.photos/300/200" alt="Sample picture" width="300">

A paragraph with a helpful hover message using the title attribute:

1     <p title="Tip: You are doing great in web development!">Hover over this tip!</p>

1
Save your file (Ctrl + S) and view your interactive webpage live with Live Server! 🚀

🚀 What's Next?

In the next lesson, we will continue your web development journey with HTML Headings (Heading & Paragraphs).

👉 Continue to Next Lesson: HTML Headings →

Next Lesson

HTML Headings

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Elements	HTML Headings

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

HTML Attributes (Adding Superpowers to Tags)

What is an HTML Attribute?

The Golden Rules of HTML Attributes

The Most Common HTML Attributes You Must Know

1. The href Attribute (For Links)

2. The src Attribute (For Images)

3. The alt Attribute (Alternate Description for Images)

4. The width and height Attributes (Setting Image Dimensions)

5. The title Attribute (The Tooltip Helper)

6. The target Attribute (Open in a New Tab)

7. The lang Attribute (Declaring Page Language)

Summary Table of Key Attributes

What are Boolean Attributes? (True / False Attributes)

Common Examples:

Common Beginner Mistakes with Attributes

Quick Summary

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

HTML Headings

Related Lessons

Practice Quiz

Loading Page Content...

HTML Attributes (Adding Superpowers to Tags)

What is an HTML Attribute?

The Golden Rules of HTML Attributes

The Most Common HTML Attributes You Must Know

1. The href Attribute (For Links)

2. The src Attribute (For Images)

3. The alt Attribute (Alternate Description for Images)

4. The width and height Attributes (Setting Image Dimensions)

5. The title Attribute (The Tooltip Helper)

6. The target Attribute (Open in a New Tab)

7. The lang Attribute (Declaring Page Language)

Summary Table of Key Attributes

What are Boolean Attributes? (True / False Attributes)

Common Examples:

Common Beginner Mistakes with Attributes

Quick Summary

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

HTML Headings

Related Lessons

Practice Quiz

1. The `href` Attribute (For Links)

2. The `src` Attribute (For Images)

3. The `alt` Attribute (Alternate Description for Images)

4. The `width` and `height` Attributes (Setting Image Dimensions)

5. The `title` Attribute (The Tooltip Helper)

6. The `target` Attribute (Open in a New Tab)

7. The `lang` Attribute (Declaring Page Language)

1. The `href` Attribute (For Links)

2. The `src` Attribute (For Images)

3. The `alt` Attribute (Alternate Description for Images)

4. The `width` and `height` Attributes (Setting Image Dimensions)

5. The `title` Attribute (The Tooltip Helper)

6. The `target` Attribute (Open in a New Tab)

7. The `lang` Attribute (Declaring Page Language)