HTML Tutorial: HTML Attributes
Extra information inside tags + colorful examples + clear input & output
HTML Attributes provide extra information about an element.
Attributes are always written inside the opening tag.
Basic format:
<tagname attribute="value">
1️⃣ The href Attribute (Links)
INPUT (Colored Code):
<a
href="https://google.com"
>
Visit Google
</a>
OUTPUT (Browser Result):
Visit Google
✔️ href = link address ✔️ Clicking the text opens the website
2️⃣ The src Attribute (Images)
INPUT:
<img
src="https://via.placeholder.com/150"
alt="Sample Image"
>
OUTPUT:
✔️ src = image URL ✔️ alt = alternative text if image fails
3️⃣ The style Attribute (Inline CSS)
INPUT:
<p
style="color:blue; font-size:20px;"
>
Styled Text Example
</p>
OUTPUT:
Styled Text Example
✔️ style changes appearance ✔️ You can change color, size, background, etc.
4️⃣ The title Attribute (Tooltip)
INPUT:
<p
title="This appears when you hover"
>
Hover over this text
</p>
OUTPUT:
Hover over this text
✔️ title shows a tooltip when mouse hovers
5️⃣ Multiple Attributes Together
INPUT:
<a
href="https://example.com"
target="_blank"
style="color:red;"
>
Open Example
</a>
OUTPUT:
Open Example
✔️ href → link ✔️ target="_blank" → open in new tab ✔️ style → change design
🎯 Important Rules
- Attributes must be inside opening tag
- Always use quotes around values
- You can use multiple attributes
- Write attributes in lowercase
🚀 What’s Next?
Next lesson:
👉 HTML Headings
You will learn:
- h1 to h6 explained
- Heading importance for SEO
- Best heading structure practice
Master attributes to unlock the full power of HTML.