📘 DAY 5: HTML ATTRIBUTES 

---

1️⃣ What is an HTML Attribute?

An HTML attribute provides additional information about an HTML element.

👉 Attributes modify the behavior or appearance of elements.

Example:

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

Here:

• href → attribute

• "https://google.com" → attribute value

---

2️⃣ Where Are Attributes Written?

Attributes are always written:

• Inside the opening tag

• After the tag name

Syntax:

<tagname attribute="value">Content</tagname>

---

3️⃣ Why Do We Use HTML Attributes?

Attributes are used to:

• Link pages

• Add images

• Set styles

• Give unique identification

• Provide extra information

Without attributes, HTML elements are very limited.

---

4️⃣ Basic Example of HTML Attributes

<img src="photo.jpg" alt="My Photo">

• src → source of image

• alt → alternative text

---

5️⃣ Common HTML Attributes (Most Used)

🔹 href Attribute

Used with <a> tag to define link address.

<a href="https://example.com">Visit Site</a>

---

🔹 src Attribute

Used with <img> to define image source.

<img src="image.jpg">

---

🔹 alt Attribute

Provides alternate text for image.

<img src="logo.png" alt="Company Logo">

👉 Very important for SEO & accessibility

---

🔹 title Attribute

Displays tooltip when mouse hovers.

<p title="This is a paragraph">Hover me</p>

---

6️⃣ The style Attribute

Used to apply inline CSS.

<p style="color:red; font-size:20px;">
  This is styled text
</p>

👉 Not recommended for large projects
👉 Used for quick styling

---

7️⃣ The id Attribute

Used to uniquely identify an element.

<h1 id="mainHeading">Welcome</h1>

Rules:

• Must be unique

• One id per element

---

8️⃣ The class Attribute

Used to group multiple elements.

<p class="info">Paragraph 1</p>
<p class="info">Paragraph 2</p>

👉 Used heavily with CSS & JavaScript

---

9️⃣ Difference Between id and class

id	class
Unique	Reusable
One per page	Multiple allowed
#id in CSS	.class in CSS

---

🔟 Global Attributes

Global attributes can be used with any HTML element.

Examples:

• id

• class

• style

• title

• hidden

<p hidden>This text is hidden</p>

---

1️⃣1️⃣ Attribute Quotes (Important Rule)

Attribute values should be written inside quotes.

✅ Correct:

<img src="image.jpg">

❌ Incorrect:

<img src=image.jpg>

---

1️⃣2️⃣ Multiple Attributes in One Element

You can use more than one attribute.

<img src="pic.jpg" alt="My Pic" width="200">

Order does not matter, but clarity matters.

---

1️⃣3️⃣ HTML Attributes Are Case-Insensitive

These both work:

<P TITLE="Text">Hello</P>
<p title="Text">Hello</p>

✔ Best practice → lowercase

---

1️⃣4️⃣ Common Beginner Mistakes

❌ Writing attributes outside opening tag
❌ Forgetting quotes
❌ Using same id multiple times
❌ Confusing class and id

---

1️⃣5️⃣ Practice Examples

Example 1:

<a href="https://google.com" title="Search Engine">
  Google
</a>

Example 2:

<p class="note" style="color:blue;">
  HTML Attributes Example
</p>

---

1️⃣6️⃣ Interview / Viva Questions

1. What is an HTML attribute?

2. Where are attributes written?

3. Difference between id and class?

4. What is a global attribute?

5. Why is alt attribute important?

---

1️⃣7️⃣ Summary

• Attributes give extra information to elements

• Written in opening tag

• href, src, alt are common attributes

• id and class are very important

• Attributes improve functionality & accessibility