Chapter 13HTML Tutorial~2 min read

Semantic HTML Tags

header, nav, main, section, article, footer

Semantic tags म्हणजे meaningful tags — browser आणि developer दोघांना सांगतात की हा content कशासाठी आहे. <div> सारखे non-semantic tags काहीही सांगत नाहीत — semantic tags meaning घेऊन येतात.

Semantic Tags का वापरायचे?

▸SEO: Google semantic tags वाचतो आणि page चा content समजतो — ranking improve होते
▸Accessibility: Screen readers (blind users साठी) semantic tags वापरून content navigate करतात
▸Readability: Code वाचणे सोपे होते — दुसऱ्या developer ला लगेच कळते

Marathi Analogy

🏠 Analogy: घरात "Room 1", "Room 2" ऐवजी "Kitchen", "Bedroom", "Bathroom" असे नाव दिले तर सगळ्यांना कळते. Semantic tags पण तेच करतात — Google आणि browser ला webpage चा structure कळतो.

Key Semantic Tags आणि त्यांचे काम

▸<header> — Website/section चा top भाग — logo, navigation, headings
▸<nav> — Navigation menu — links साठी
▸<main> — Page चा main content area (एका page वर एकच)
▸<section> — Related content चा group — thematic grouping
▸<article> — Self-contained content — blog post, news article
▸<aside> — Side content — sidebar, related links, ads
▸<footer> — Page चा bottom — copyright, contact info
▸<figure> + <figcaption> — Image/diagram + caption
▸<time> — Date/time information

Semantic HTML — Complete Example

html

<!DOCTYPE html>
<html lang="mr">
<head>
    <title>मराठी Tech</title>
</head>
<body>

    <header>
        <h1>मराठी Tech</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/tutorials">Tutorials</a></li>
                <li><a href="/about">About</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>Featured Tutorials</h2>
            <article>
                <h3>HTML Tutorial</h3>
                <p>HTML मराठीत शिका — beginners साठी...</p>
            </article>
            <article>
                <h3>CSS Tutorial</h3>
                <p>CSS मराठीत — styling शिका...</p>
            </article>
        </section>

        <aside>
            <h3>Popular Topics</h3>
            <ul>
                <li>Networking</li>
                <li>SQL</li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>© 2024 मराठी Tech. सर्व हक्क राखीव.</p>
    </footer>

</body>
</html>

Figure + Figcaption

html

<figure>
    <img src="networking-diagram.png" alt="Network Diagram">
    <figcaption>Computer Network चे diagram — LAN, WAN, Internet</figcaption>
</figure>

📌

<div> आणि <span> non-semantic आहेत — ते काहीही meaning देत नाहीत. Structure साठी semantic tags वापरा. Styling/JavaScript साठी <div> ठीक आहे.

✅ Key Points — लक्षात ठेवा

▸Semantic = meaningful tags — browser आणि Google दोघांना content समजते
▸<header>, <nav>, <main>, <footer> — page level structure
▸<section> (group), <article> (standalone), <aside> (side content)
▸SEO + Accessibility साठी semantic tags important
▸<div> non-semantic — CSS/JS साठी वापरा, structure साठी नाही

0/13 chapters पूर्ण

मागे — Previous

HTML Forms

अभिनंदन! 🎉

Tutorial Complete!