HTML5 Course in Roman Hindi/Urdu - Lecture 14: Advanced Semantic Elements aur Microdata - Fully Detailed
HTML5 Advanced Semantic Elements (dialog, picture, figure) - Modern Structure
HTML5 ke advanced semantic elements content ko aur behtar organize karte hain, jaise modals, responsive images, aur captioned media. Yeh accessibility aur SEO badhaate hain. Focus on dialog for popups, picture for responsive media, figure/figcaption for illustrations.
Key Benefit: Native support bina JS ke, semantic meaning add karta hai.
dialog Element - Native Modals aur Popups
Purpose: Dialog boxes, confirmations, modals bina extra libs ke. Open attribute se show/hide.
Attributes: open (boolean, visible banata hai), form (associate with form).
Methods: showModal() (centered modal), show() (inline), close(). Backdrop click par close.
Kab use karein: Alerts, forms.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dialog Example - Lecture 14</title>
</head>
<body>
<h1>Dialog Modal Demo</h1>
<button onclick="openDialog()">Open Modal</button>
<dialog id="myDialog" open> <!-- Initially open for demo -->
<p>Yeh ek dialog hai. Confirmation message.</p>
<form method="dialog">
<button value="cancel">Cancel</button>
<button value="confirm">Confirm</button>
</form>
</dialog>
<script>
function openDialog() {
document.getElementById('myDialog').showModal();
}
</script>
</body>
</html>ShowModal() centered overlay banayega, form method="dialog" values return karega close par.
picture Element - Responsive Images
Purpose: Different sources per device, jaise art-direction (crop) ya density (retina).
Structure: .
Attributes: media (CSS queries), srcset (comma-separated URLs with descriptors like 2x).
Kab use karein: Mobile/desktop images optimize.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Picture Example - Lecture 14</title>
</head>
<body>
<h1>Responsive Image Demo</h1>
<picture>
<source srcset="wide-landscape.jpg" media="(min-width: 800px)">
<source srcset="portrait.jpg" media="(max-width: 799px)">
<source srcset="high-res.jpg" srcset="high-res-2x.jpg 2x">
<img src="fallback.jpg" alt="Responsive landscape" style="width:100%;">
</picture>
</body>
</html>Browser screen size ke hisab se source choose karega, srcset density handle karega.
figure aur figcaption Elements - Captioned Media
Purpose: Media (images, code, videos) with caption, jaise book figure.
Structure:
Attributes: Global. Multiple figcaption allowed.
Kab use karein: Articles, blogs.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Figure Example - Lecture 14</title>
</head>
<body>
<h1>Figure with Caption</h1>
<figure>
<img src="photo.jpg" alt="Nature scene">
<figcaption>Figure 1: Beautiful mountain landscape in Himalayas. Source: Photographer XYZ.</figcaption>
</figure>
<figure>
<pre><code>function hello() { return "Namaste"; }</code></pre>
<figcaption>Listing 1: Simple JS function with Hindi greeting.</figcaption>
</figure>
</body>
</html>Figcaption associated rahega media se, semantic flow banayega.
Tip: Dialog polyfill old browsers ke liye, picture srcset descriptors (w, h) use for bandwidth.
Microdata (Schema.org) - Structured Data for SEO
Purpose: HTML mein machine-readable data add, search engines ko rich snippets dene ke liye (stars, prices).
Syntax: Attributes: itemscope (scope), itemtype (schema URL), itemprop (property).
Kab use karein: Products, articles, events – Google rich results ke liye.
Basic Microdata Structure
Vocab: Schema.org types jaise Person, Article, Product.
Example: itemscope itemtype="https://schema.org/Person".
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Microdata Example - Lecture 14</title>
</head>
<body>
<h1>Structured Data Demo</h1>
<!-- Person -->
<div itemscope itemtype="https://schema.org/Person">
<h2 itemprop="name">Ali Khan</h2>
<p itemprop="jobTitle">Web Developer</p>
<p itemprop="email"><a href="mailto:ali@example.com">ali@example.com</a></p>
</div>
<!-- Article -->
<article itemscope itemtype="https://schema.org/Article">
<h2 itemprop="headline">HTML5 Tutorial</h2>
<p itemprop="author" itemscope itemtype="https://schema.org/Person">
By <span itemprop="name">Ali Khan</span>
</p>
<time itemprop="datePublished" datetime="2025-11-10">November 10, 2025</time>
<div itemprop="articleBody">
<p>Article content here.</p>
</div>
</article>
</body>
</html>Nested itemscope properties define karega, Google search mein rich cards dikhega.
Advanced Microdata: JSON-LD Alternative
Purpose: Script type="application/ld+json" mein JSON embed, easier for complex data.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "HTML5 Book",
"image": "book.jpg",
"description": "Complete HTML5 Guide",
"brand": {
"@type": "Brand",
"name": "xAI Press"
},
"offers": {
"@type": "Offer",
"priceCurrency": "INR",
"price": "500",
"availability": "https://schema.org/InStock"
}
}
</script>JSON-LD head mein, microdata se alag, both use kar sakte ho.
Tip: Google's Structured Data Testing Tool se validate. Common schemas: Recipe, Event, LocalBusiness.
Practice Tasks (Detailed with Steps)
- Dialog Practice: "dialog-modal.html" banao. Button se dialog open, form inside with confirm/cancel.
- Picture Practice: "responsive-pic.html" mein picture tag use karo 2 sources (mobile/desktop), srcset with 2x.
- Figure Practice: "figure-caption.html" mein 2 figures banao (image + code snippet), figcaption add.
- Microdata Practice: "microdata-seo.html" mein article with schema.org/Article, nested Person.
- Combined: Ek blog post banao figure/picture ke saath, dialog for comments, microdata for SEO. 35 minutes mein complete karo.
FAQ (Common Doubts with Details)
- Q: Dialog backdrop styling?
- A: ::backdrop pseudo-element CSS se, jaise dialog::backdrop { background: rgba(0,0,0,0.5); }.
- Q: Picture vs srcset in img?
- A: Picture sources change (formats), img srcset sizes/density.
- Q: Figure outside article?
- A: Haan, lekin contextually related rakho, flow mein fit.
- Q: Microdata vs JSON-LD?
- A: Microdata inline HTML, JSON-LD script mein (easier for dynamic).
Next Lecture Teaser
Lecture 15: HTML5 Best Practices, Validation, aur Full Project (Resume Page) – Wrap-up aur hands-on.
Yeh lecture complete. Ab aap advanced semantics aur microdata master kar chuke ho.
