HTML5 Course in Roman Hindi/Urdu - Lecture 5: Semantic HTML5 Elements aur Multimedia - Fully Detailed
Semantic HTML5 Elements (header, nav, section, article, footer, etc.) - Har Element Ki Full Details
HTML5 mein semantic elements content ko meaningful structure dete hain, sirf div jaise generic nahi. Yeh browser, search engines aur screen readers ko samajh aata hai ki content kya hai (jaise header top section). Yeh SEO, accessibility aur maintainability badhaate hain. Semantic tags block-level hote hain, andar koi bhi content daal sakte ho.
Key Benefit: Code self-documenting hota hai – "header" se pata chalta hai yeh page ka top part hai.
header Element
Purpose: Introductory content ya page/group ka heading area, jaise logo, title, nav. Multiple use kar sakte ho per page.
Attributes: Global (id, class, style). Hidden attribute ke saath invisible bana sakte ho.
Kab use karein: Page top ya article ke shuru mein.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Example - Lecture 5</title>
</head>
<body>
<header id="main-header" class="site-header">
<h1>Website Title</h1>
<p>Tagline yahan.</p>
</header>
<header> <!-- Article header -->
<h2>Article Title</h2>
</header>
</body>
</html>Main header site-wide, doosra article-specific. Semantic se outline algorithm kaam karta hai.
nav Element
Purpose: Navigation links ka container, jaise menu bar. Sirf major navigation ke liye, sidebar links ke liye nahi.
Attributes: Global. Multiple nav per page allowed.
Kab use karein: Main menu, footer links.
<nav id="main-nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>Yeh screen readers ko batata hai ki yeh navigation section hai.
section Element
Purpose: Thematic grouping, jaise chapters. Hamesha heading (h1-h6) ke saath use karo.
Attributes: Global, aria-labelledby for accessibility.
Kab use karein: Page ko sections mein baanto, jaise "Introduction", "Conclusion".
<section id="intro-section">
<h2>Introduction</h2>
<p>Yeh section ka content.</p>
</section>article Element
Purpose: Independent, reusable content, jaise blog post, news story. Standalone ho sakta hai.
Attributes: Global. Pubdate attribute deprecated, time tag use.
Kab use karein: Forum posts, comments, magazine articles.
<article>
<header>
<h1>Article Title</h1>
<p>Published on <time datetime="2025-11-10">Nov 10, 2025</time></p>
</header>
<p>Article body.</p>
</article>footer Element
Purpose: Footer info, jaise copyright, author, links. Page, section ya article ke liye.
Attributes: Global.
Kab use karein: Page bottom, article end.
<footer id="page-footer">
<p>© 2025 My Site. All rights reserved.</p>
<nav>
<a href="#privacy">Privacy</a> | <a href="#terms">Terms</a>
</nav>
</footer>Other Semantic Elements
aside: Sidebar content, jaise ads, related links. Main flow se alag.
main: Page ka primary content, sirf ek per page.
figure aur figcaption: Media with caption, jaise image with description.
<main>
<article>
<aside>Related Posts</aside>
<figure>
<img src="image.jpg" alt="Example">
<figcaption>Image Caption</figcaption>
</figure>
</article>
</main>
<footer>...</footer>Yeh full semantic layout banayega.
Tip: Outline algorithm test karo browser dev tools mein – sections sahi outline banaye.
Multimedia Elements (audio, video, source, track) - Har Element Ki Full Details
HTML5 native multimedia support deta hai bina plugins ke. <audio> sound, <video> videos ke liye. Responsive aur cross-browser.
audio Element
Purpose: Audio playback, formats: MP3, OGG, WAV.
Attributes: src (single file), controls (play buttons), autoplay (auto play, lekin browser restrict), loop, muted, preload ("auto/metadata/none").
Multiple Sources: <source> se browser best choose kare.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Example - Lecture 5</title>
</head>
<body>
<audio controls loop preload="metadata">
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>Controls dikhega, loop repeat karega. Fallback text agar support na ho.
video Element
Purpose: Video playback, formats: MP4, WebM, OGG.
Attributes: src/poster (thumbnail), width/height, controls, autoplay, loop, muted, playsinline (iOS ke liye).
Tracks: <track> subtitles ke liye, kind="subtitles/captions", srclang, label, default.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Example - Lecture 5</title>
</head>
<body>
<video width="400" controls poster="thumbnail.jpg" preload="metadata">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<track src="subtitles.vtt" kind="subtitles" srclang="hi" label="Hindi" default>
Your browser does not support the video tag.
</video>
</body>
</html>Poster image pehle dikhega, tracks subtitles add karega. Responsive ke liye CSS width:100%.
Embeds aur Iframes
<embed>: External content embed, jaise PDF (src, type, width/height).
<object>: Plugins ke liye (data, type, fallback).
<iframe>: Inline frame, doosri page embed (src, width/height, sandbox security, allowfullscreen).
<iframe src="https://www.youtube.com/embed/video-id" width="560" height="315" title="YouTube Video" allowfullscreen sandbox="allow-scripts"></iframe>Iframe YouTube video embed karega, sandbox secure banayega.
Tip: Autoplay muted rakho, browser policies ke wajah se. Accessibility ke liye title attributes daalo.
Practice Tasks (Detailed with Steps)
- Semantic Practice: "semantic-detail.html" banao. Full page layout: header, nav, main (andar section, article, aside), footer. Har ek mein appropriate content daalo.
- Multimedia Basic Practice: "audio-video.html" mein audio tag add karo multiple sources ke saath. Controls aur loop use karo. Ek sample MP3 file assume karo.
- Advanced Multimedia Practice: "embeds.html" mein video with tracks, iframe for map (jaise Google Maps), embed for PDF. Poster aur title attributes daalo.
- Combined: Ek blog page banao semantic elements ke saath, andar article mein video embed. Outline check karo dev tools mein. 30 minutes mein complete karo.
FAQ (Common Doubts with Details)
- Q: Semantic vs div – kab semantic use?
- A: Jab content ka meaning ho (header for top), div sirf grouping ke liye bina meaning ke.
- Q: Multiple header/nav/footer allowed?
- A: Haan, page aur sections dono ke liye, lekin context sahi rakho.
- Q: Audio/video formats kaun se best?
- A: Multiple sources daalo: MP4/WebM for video, MP3/OGG for audio – browser compatibility.
- Q: Iframe security?
- A: Sandbox attribute use karo scripts restrict karne ke liye, allowfullscreen videos ke liye.
Next Lecture Teaser
Lecture 6: Advanced Forms (select, textarea, validation) aur Lists Advanced (dl, nested) – Input enhancements aur data display.
Yeh lecture complete. Ab aap semantic structure aur multimedia master kar chuke ho.
