HTML Attributes
id, class, title, style — Attributes समजून घ्या
HTML Attributes म्हणजे HTML elements ची extra characteristics define करणे. Attributes opening tag मध्येच लिहितात आणि name="value" format असतो.
Attributes चे प्रकार
- ▸Core Attributes: id, class, style, title — सगळ्यात जास्त वापरले जातात
- ▸Internationalization Attributes: lang, dir — भाषा आणि direction साठी
- ▸Generic Attributes: data-* — custom data store करण्यासाठी
id Attribute
id attribute एका element ला unique identity देतो. एका page वर दोन elements ला same id असणार नाही — जसे प्रत्येक माणसाला unique Aadhaar number असतो.
id Attribute — उदाहरण
<p id="html-tutorial">हा HTML tutorial चा paragraph आहे</p>
<p id="python-tutorial">हा Python tutorial चा paragraph आहे</p>
<!-- CSS मध्ये id वापरणे: #html-tutorial { ... } -->
<!-- JavaScript मध्ये: document.getElementById("html-tutorial") -->class Attribute
class attribute id सारखाच असतो पण unique नसतो. Multiple elements ला same class असू शकतो — CSS styling साठी group करण्यासाठी वापरतात.
class Attribute — उदाहरण
<!-- Multiple elements ला same class -->
<p class="highlight">हा highlighted paragraph आहे</p>
<p class="highlight">हा पण highlighted paragraph आहे</p>
<h2 class="highlight">हे पण highlighted आहे</h2>
<!-- CSS मध्ये: .highlight { background: yellow; } -->title Attribute
title attribute element बद्दल extra information देतो. Mouse hover केल्यावर tooltip म्हणून दिसतो.
title Attribute — उदाहरण
<h4 title="हे एक शुभेच्छा आहे">Title Attribute</h4>
<!-- Mouse hover केल्यावर tooltip दिसतो -->
<a href="https://google.com" title="Google वर जा">Google</a>style Attribute
style attribute HTML elements ला inline CSS styling देतो. Directly element मध्येच styling लिहिता येते — पण हे best practice नाही, external CSS prefer करा.
style Attribute — उदाहरण
<p style="color: orange; font-size: 18px;">
हा paragraph orange color मध्ये आहे
</p>
<h1 style="text-align: center; color: blue;">
Centered Blue Heading
</h1>HTML standard case-insensitive आहे — title आणि TITLE दोन्ही चालतात. पण W3C recommendations नुसार lowercase attributes लिहणे best practice आहे.
✅ Key Points — लक्षात ठेवा
- ▸Attributes = elements ची extra information — opening tag मध्ये
- ▸Format: attributename="value"
- ▸id = unique identifier (एका page वर unique)
- ▸class = non-unique, multiple elements share करू शकतात
- ▸title = tooltip text | style = inline CSS styling