11. Semantic HTML5 (The SEO Superpower)
Div tags ki disease (Divitis) khatam karein, aur apni webpage structure ko machine readable Semantic format mein design karein.
1. Meaning vs The Div Soup (Concept)
Basic: Pehle har jagah <div id="header"> aur <div id="footer"> use hota tha. HTML5 ne tag hi bana diye <header> aur <footer> jisse context samajh aane laga.
Pro: <div> aur <span> 'Non-semantic' elements hain. Ye purely CSS layout control ke khali dibbe hain jinka machine (Google) ke liye koi arth nahi. Semantic elements browser DOM, screen readers, aur web crawlers ko batate hain 'Main yahan kya information carry kar raha hu' bina koi Natural Language Processing AI chalaye. Isey better SEO ranking directly milti hai.
2. Main Structural Layout Semantics
- <header>: Kisi section ya page ki top boundary jisme banner, site logo ya primary navigation head hoti hai.
- <nav>: Major navigation blocks ke liye (jaise site header menu ya footer link grouping). Page ke har chhote link pe iska use mat karein.
- <main>: Ek valid HTML document mein strictly ek hi
<main>block hona chahiye. Yeh web page ki Central Body hai, sidebar aur header isse bahar hone chahiye. 'Skip to Main Content' a11y links isipar aate hain. - <footer>: Page ke bare mein author/copyright aur sitemap links ka container.
3. Content Categorization (The Trickiest Part)
Pro: Section, Article, Aside mein bohot debate rehti hai:
- <article>: Aisa widget/content block jiska apne aap mein mukammal (complete) wajood ho. Jaise Blog Post ya Ek Tweet. Agar aap us block ko copy karke RSS reader mein paste karein toh wo independent logic dega.
- <section>: Sirf related content ki logical grouping hai. Page ka 'Contact Info' section ya 'Testimonials' section. Isme ek heading
<h2>hona practically jaruri mana jata hai. - <aside>: Content surrounding main article. Jaise medium.com par side mein aane wale 'Related Posts' ya Author biography. Agar is block ko delete kar diya jaye toh Page ki Core story par farq nahi padega.
4. Micro-Semantics for Rich Text
Pro: HTML5 mein text ke level par context set karne ke tools:
<time datetime="2024-05-10T12:00Z">Aaj</time>: Frontend par 'Aaj' dikhega par machine datetime read karke calendar sync ya sorting event index karti hai.
<details> & <summary>: Native HTML Accordion. Pehle is dropdown click effect ke liye JS toggle likhni padti thi, ab HTML default collapse/expand feature handle karta hai.