HTML5 Course in Roman Hindi/Urdu - Lecture 7: Global Attributes aur Meta Elements - Fully Detailed
HTML5 Global Attributes (id, class, data-*, style, title, etc.) - Har Attribute Ki Full Details
Global attributes har HTML element par use ho sakte hain, sirf specific tags tak limited nahi. Yeh consistency laate hain code mein, jaise styling, scripting, accessibility. HTML5 mein naye jaise data-* custom data store ke liye. Yeh sab tags par valid hain, lekin kuch (jaise style) overuse avoid karo.
Key Point: Attributes hamesha quoted hote hain, jaise id="main". Boolean attributes (jaise disabled) sirf value ke bina.
id Attribute - Unique Identifier
Purpose: Element ko unique naam dena, CSS selectors (#id) ya JS (getElementById) ke liye. Per page sirf ek id same naam ka.
Rules: No spaces, start with letter, case-sensitive. Valid chars: letters, digits, hyphen, underscore.
Kab use karein: Anchor links (href="#id"), styling specific elements.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID Example - Lecture 7</title>
</head>
<body>
<h1 id="page-title">Main Title</h1>
<p>Link to title: <a href="#page-title">Go to Top</a></p>
<div id="content-area">Yeh unique section hai.</div>
</body>
</html>Click par #page-title par scroll karega. Duplicate id invalid hai validation mein.
class Attribute - Multiple Styling Groups
Purpose: Elements ko groups mein classify, CSS (.class) ya JS (getElementsByClassName) ke liye. Multiple classes space-separated, jaise class="red important".
Rules: Same as id, lekin multiple elements same class share kar sakte hain.
Kab use karein: Reusable styles, jaise .button for all buttons.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Example - Lecture 7</title>
<style> .highlight { background: yellow; } </style>
</head>
<body>
<p class="highlight important">Highlighted text.</p>
<p class="highlight">Doosra highlighted.</p>
<button class="btn primary">Primary Button</button>
<button class="btn secondary">Secondary Button</button>
</body>
</html>Highlight class yellow background dega, multiple classes combine honge.
data-* Attributes - Custom Data Storage
Purpose: Private data store JS ke liye, bina DOM pollute kiye. Format: data-name="value", jaise data-user-id="123".
Access: JS mein dataset.name (camelCase). Unlimited custom, jaise data-role="admin".
Kab use karein: Dynamic content, jaise toggle states, API IDs.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Attributes Example - Lecture 7</title>
</head>
<body>
<ul id="menu">
<li data-item-id="1" data-price="10">Item 1</li>
<li data-item-id="2" data-price="20">Item 2</li>
</ul>
<script>
// JS Example: document.querySelector('li').dataset.itemId; // "1"
</script>
</body>
</html>Data-* JS se accessible hoga, CSS mein bhi select ([data-price="10"]).
Other Important Global Attributes
style: Inline CSS, jaise style="color: red;" – avoid overuse, external CSS better.
title: Tooltip on hover, jaise title="Help text" – accessibility ke liye.
lang: Element ki language, jaise lang="en" – global lekin mostly html tag par.
dir: Text direction, "ltr/rtl/auto" – Urdu ke liye rtl.
hidden: Boolean, element hide (CSS display:none jaise), JS se toggle.
tabindex: Keyboard navigation order, 0 (natural), positive/negative numbers.
accesskey: Keyboard shortcut, jaise accesskey="s" (Alt+S).
<p style="font-size: 18px;" title="Tooltip here" lang="en" dir="ltr" hidden tabindex="1">Styled paragraph.</p>Yeh sab combine kar sakte ho ek tag par.
Tip: Global attributes validation mein check karo, ARIA (role, aria-label) accessibility ke liye add karo.
Meta Elements (Basic Meta, Open Graph, Twitter Cards) - Har Type Ki Full Details
Meta tags head mein metadata provide karte hain, jaise charset, SEO, social sharing. HTML5 mein property attribute Open Graph (OG) ke liye. Yeh page ko browsers, search engines, social media ko describe karte hain.
Basic Meta Tags
Purpose: Document info, jaise encoding, refresh.
Common: charset="UTF-8" (must), viewport (responsive), description/keywords (SEO).
Others: http-equiv="refresh" content="5;url=newpage.html" (redirect), author, robots (noindex).
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML5 Global Attributes Lecture">
<meta name="keywords" content="html5, attributes, meta">
<meta name="author" content="Tutor Name">
<meta http-equiv="refresh" content="3;url=https://example.com">
<title>Basic Meta - Lecture 7</title>
</head>
<body>...</body>
</html>3 seconds baad redirect hoga, description Google snippet mein dikhega.
Open Graph (OG) Meta Tags - Social Sharing
Purpose: Facebook, LinkedIn jaise platforms par rich previews (title, image, description).
Namespace: Add <meta property="og:site_name" content="My Site">.
Core OG Tags: og:title, og:description, og:image (URL, min 1200x630), og:url, og:type ("website/article"), og:locale ("hi_IN").
<head>
<meta property="og:title" content="HTML5 Lecture 7">
<meta property="og:description" content="Global Attributes aur Meta Details">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://mysite.com/lecture7">
<meta property="og:type" content="article">
<meta property="og:locale" content="hi_IN">
</head>Share par Facebook rich card dikhega image ke saath.
Twitter Cards Meta Tags
Purpose: Twitter par previews, similar to OG lekin twitter: prefix.
Core: twitter:card ("summary/summary_large_image"), twitter:site (@username), twitter:title, twitter:description, twitter:image.
Validator: Twitter Card Validator tool se test.
<head>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@MyTwitterHandle">
<meta name="twitter:title" content="Lecture 7: Attributes">
<meta name="twitter:description" content="Learn HTML5 Meta Tags">
<meta name="twitter:image" content="https://example.com/twitter-image.jpg">
</head>Tweet par large image card dikhega.
Tip: Images optimized rakho (under 5MB), OG aur Twitter combine karo compatibility ke liye. Tools jaise Facebook Debugger use karo test.
Practice Tasks (Detailed with Steps)
- Global Attributes Practice: "attributes-detail.html" banao. 5 elements mein id, class, data-* (jaise data-color="red") daalo. Inline style aur title add karo ek par. JS snippet add karo data access ke liye.
- Meta Basic Practice: "meta-basic.html" mein viewport, description, keywords, aur refresh meta add karo. Page ko 5 seconds mein doosri file par redirect karo.
- Social Meta Practice: "social-meta.html" mein full OG aur Twitter cards tags add karo (sample image URL use). Title aur description change karo test ke liye.
- Combined: Ek complete page banao global attributes ke saath (classes for styling), aur meta tags for SEO/social. Hidden attribute use karo ek element par. 25 minutes mein complete karo.
FAQ (Common Doubts with Details)
- Q: Id vs class – kab kaun sa?
- A: Id unique/single element ke liye, class multiple/reusable ke liye.
- Q: Data-* attributes visible hote hain?
- A: Nahi, sirf source code mein; JS/CSS access ke liye private data.
- Q: Meta description kitni lambi?
- A: 150-160 chars ideal, Google truncate karta hai zyada par.
- Q: OG image requirements?
- A: Min 1200x630 px, JPG/PNG, secure HTTPS URL.
Next Lecture Teaser
Lecture 8: HTML5 APIs (Geolocation, Drag-Drop, LocalStorage) aur Canvas Basics – Interactive features bina external libs ke.
Yeh lecture complete. Ab aap global attributes aur meta master kar chuke ho.
