🟢 Foundation · Lesson 05

HTML Attributes

What is an Attribute?

A tag says WHAT an element is; an attribute adds extra settings to it — always written inside the opening tag in the pattern name="value". Analogy: <img> is "a photo frame"; attributes are the instructions on it — which photo (src), what to say if the photo is missing (alt), how wide (width).

<img  src="school.jpg"  alt="School building"  width="300">
 │      │                 │                       │
tag    attribute 1       attribute 2            attribute 3
       (name="value")    (name="value")         (name="value")

The Big 7 — attributes you will use daily

Attribute	Used on	Purpose	Example
`href`	<a>, <link>	Where the link goes	`<a href="about.html">`
`src`	<img>, <video>, <script>	Which file to load	`<img src="logo.png">`
`alt`	<img>	Text if image fails; read by screen readers and Google	`alt="School gate photo"`
`id`	Any	UNIQUE name — one per page	`id="admission-form"`
`class`	Any	Group name — reusable on many elements	`class="btn red"`
`style`	Any	Inline CSS (quick tests only)	`style="color:red"`
`title`	Any	Tooltip on hover	`title="Click to open"`

href full form: hypertext reference. src: source. alt: alternative text. These three full-forms are asked in almost every viva.

Global Attributes — allowed on EVERY element

Some attributes work on any tag: id, class, style, title, lang, hidden, data-* (your own custom data). Tag-specific ones like href (links only) or src (media only) are not global.

<p hidden>This paragraph is invisible</p>
<div data-roll="101" data-class="10A">Aman</div>   <!-- custom data for JS later -->

hidden shows another pattern: a boolean attribute — its presence alone means "yes"; it needs no value.

Quoting Rules — small thing, big bugs

<a href="about.html">        ✅ double quotes - the standard
<a href='about.html'>        ✅ single quotes - also valid
<a href=about.html>          ⚠ works ONLY if value has no spaces
<img alt=School building>    ❌ breaks! browser reads alt="School"
                                and thinks building is a new attribute

Rule: ALWAYS use quotes (prefer double). The no-quotes shortcut works right up until a value contains a space - then it breaks silently.

Exam Corner

Q: Difference between id and class? id is unique — one element per page; class is reusable — many elements can share it, and one element can have many classes (class="btn red big"). Full chapter on this later.

Q: Why is alt important if the image loads fine? Three reasons: screen readers speak it to blind users, Google reads it to understand the image (SEO), and it shows if the image ever fails to load.

Q: Where are attributes written — opening or closing tag? ONLY in the opening tag. </p class="x"> is invalid.

Attribute क्या है?

Tag बताता है element KYA है; attribute उसमें extra settings जोड़ता है — हमेशा opening tag के अंदर, name="value" pattern में. Analogy: <img> है "एक photo frame"; attributes उस पर लगे निर्देश हैं — कौन-सी photo (src), photo न मिले तो क्या कहना है (alt), कितनी चौड़ी (width).

<img  src="school.jpg"  alt="School building"  width="300">
 │      │                 │                       │
tag    attribute 1       attribute 2            attribute 3
       (name="value")    (name="value")         (name="value")

Big 7 — जो attributes रोज़ use होंगे

Attribute	किस पर	काम	Example
`href`	<a>, <link>	Link कहां जाए	`<a href="about.html">`
`src`	<img>, <video>, <script>	कौन-सी file load हो	`<img src="logo.png">`
`alt`	<img>	Image fail हो तो text; screen readers और Google पढ़ते हैं	`alt="School gate photo"`
`id`	कोई भी	UNIQUE नाम — page में एक	`id="admission-form"`
`class`	कोई भी	Group का नाम — कई elements पर reusable	`class="btn red"`
`style`	कोई भी	Inline CSS (सिर्फ quick tests)	`style="color:red"`
`title`	कोई भी	Hover पर tooltip	`title="Click to open"`

href full form: hypertext reference. src: source. alt: alternative text. ये तीन full-forms लगभग हर viva में पूछे जाते हैं.

Global Attributes — HAR element पर allowed

कुछ attributes किसी भी tag पर चलते हैं: id, class, style, title, lang, hidden, data-* (आपका अपना custom data). Tag-specific वाले जैसे href (सिर्फ links) या src (सिर्फ media) global नहीं हैं.

<p hidden>यह paragraph invisible है</p>
<div data-roll="101" data-class="10A">Aman</div>   <!-- बाद में JS के लिए custom data -->

hidden एक और pattern दिखाता है: boolean attribute — इसकी मौजूदगी ही "हां" है; value की ज़रूरत नहीं.

Quotes के Rules — छोटी चीज़, बड़े bugs

<a href="about.html">        ✅ double quotes - standard
<a href='about.html'>        ✅ single quotes - यह भी valid
<a href=about.html>          ⚠ तभी चलता है जब value में space न हो
<img alt=School building>    ❌ टूट गया! browser पढ़ता है alt="School"
                                और building को नया attribute समझता है

Rule: HAMESHA quotes लगाइए (double बेहतर). Bina-quotes वाला shortcut तब तक चलता है जब तक value में space न आए - फिर चुपचाप टूटता है.

Exam Corner

Q: id और class में अंतर? id unique है — page में एक element पर; class reusable है — कई elements share कर सकते हैं, और एक element की कई classes हो सकती हैं (class="btn red big"). इस पर पूरा chapter आगे है.

Q: Image ठीक load हो तो alt क्यों ज़रूरी? तीन वजहें: screen readers इसे blind users को बोलकर सुनाते हैं, Google image समझने के लिए पढ़ता है (SEO), और image कभी fail हो तो यही दिखता है.

Q: Attributes कहां लिखे जाते हैं — opening या closing tag? सिर्फ opening tag में. </p class="x"> invalid है.

← Back to HTML Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.