INTRODUCTION TO HTML5

HTML5, HTML (HyperText Markup Language) का modern और widely used version है।

HTML5 में नए elements, attributes और features introduce किए गए हैं, जिनकी सहायता से ज्यादा interactive, multimedia-rich और structured web pages बनाए जा सकते हैं।

HTML5 की मुख्य बातें

• HTML5, HTML का modern version है।

• यह HTML और XHTML syntax को support करता है।

• इसमें कई नए elements, attributes और behaviors introduce किए गए हैं।

• इसकी सहायता से ज्यादा powerful और interactive web applications बनाई जा सकती हैं।

• HTML5 में ऐसी technologies का बड़ा set शामिल है जो web pages को ज्यादा interactive और multimedia-rich बनाती हैं।

🔹 FEATURES OF HTML5

1. New Semantic Elements

HTML5 में कई नए Semantic Elements introduce किए गए हैं।

Semantic elements ऐसे HTML elements हैं जो अपने content का meaning और purpose स्पष्ट करते हैं।

कुछ प्रमुख semantic elements हैं:

<header>
<footer>
<article>
<section>
<nav>
<figure>

इनका उपयोग webpage की structure को ज्यादा meaningful और organized बनाने के लिए किया जाता है।

2. Improved Forms

HTML5 में Forms को बेहतर बनाने के लिए नए input types और attributes introduce किए गए हैं।

उदाहरण:

<input type="email">
<input type="url">
<input type="date">

इसके अलावा:

placeholder

जैसे attributes भी Forms को ज्यादा user-friendly बनाने में मदद करते हैं।

3. Multimedia Support

HTML5 में multimedia content को directly webpage में add करने के लिए नए elements दिए गए हैं।

मुख्य elements:

<audio>
<video>
<canvas>
<svg>

उदाहरण:

• <audio> → Audio add करने के लिए

• <video> → Video add करने के लिए

• <canvas> → Graphics और drawings के लिए

• <svg> → Scalable Vector Graphics के लिए

4. Simplified DOCTYPE Declaration

HTML5 में DOCTYPE declaration को बहुत simple बनाया गया है।

Syntax:

<!DOCTYPE html>

यह browser को बताता है कि document HTML5 document है।

5. Character Encoding Support

HTML5 में character encoding specify करने के लिए निम्न syntax का उपयोग किया जाता है:

<meta charset="utf-8">

UTF-8 की सहायता से विभिन्न languages के characters और special symbols को support किया जा सकता है।

🔹 ADVANTAGES OF HTML5

HTML5 के प्रमुख advantages निम्नलिखित हैं:

• यह modern web browsers द्वारा widely supported है।

• यह device-friendly है और mobiles, tablets तथा desktops पर काम करता है।

• इसे समझना और implement करना relatively easy है।

• यह CSS, JavaScript और अन्य scripting technologies के साथ आसानी से integrate किया जा सकता है।

• इसकी सहायता से beautiful, responsive और interactive websites बनाई जा सकती हैं।

• इसमें audio और video जैसे multimedia elements के लिए built-in support है।

• Semantic elements webpage की structure को ज्यादा clear और meaningful बनाते हैं।

🔹 DISADVANTAGES OF HTML5

HTML5 की कुछ limitations भी हैं:

• कुछ पुराने browsers HTML5 के सभी features को पूरी तरह support नहीं करते।

• बड़े और complex webpages के लिए HTML code काफी long और time-consuming हो सकता है।

• कुछ HTML5 features पुराने browsers में properly work नहीं कर सकते।

🔹 BASIC STRUCTURE OF AN HTML5 DOCUMENT

HTML5 document का basic structure इस प्रकार होता है:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>HTML5 Example</title>

</head>

<body>

    <header>
        Header content here
    </header>

    <nav>
        Navigation links here
    </nav>

    <article>

        <section>
            Section 1 content
        </section>

        <section>
            Section 2 content
        </section>

    </article>

    <aside>
        Sidebar or additional information
    </aside>

    <footer>
        Footer content here
    </footer>

</body>

</html>

🔹 EXPLANATION OF NEW HTML5 TAGS

1. <header>

<header> tag webpage या किसी particular section के header part को define करता है।

इसमें सामान्यतः निम्न information हो सकती है:

• Website title

• Logo

• Introduction

• Heading

Example:

<header>
    <h1>My Website</h1>
</header>

2. <nav>

<nav> tag webpage के navigation section को define करता है।

इसका उपयोग मुख्यतः navigation links या main menu बनाने के लिए किया जाता है।

Example:

<nav>

    <a href="home.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>

</nav>

3. <article>

<article> tag ऐसे independent और self-contained content को represent करता है जिसे अलग से समझा या distribute किया जा सकता है।

उदाहरण:

• Blog Post

• News Article

• User Comment

Example:

<article>

    <h2>HTML5</h2>

    <p>
        HTML5 is the modern version of HTML.
    </p>

</article>

एक webpage में multiple <article> elements भी हो सकते हैं।

4. <section>

<section> tag webpage या article के अंदर किसी specific section को define करता है।

इसका उपयोग related content को एक group में रखने के लिए किया जाता है।

Example:

<article>

    <section>
        <h2>Introduction</h2>
        <p>Introduction content.</p>
    </section>

    <section>
        <h2>Features</h2>
        <p>Features content.</p>
    </section>

</article>

यहाँ दो अलग-अलग sections बनाए गए हैं:

• Introduction

• Features

5. <aside>

<aside> tag का उपयोग ऐसे content के लिए किया जाता है जो main content से related लेकिन additional होता है।

उदाहरण:

• Additional Information

• Related Links

• Notes

• Advertisements

• Sidebar Content

Example:

<aside>

    <h3>Related Links</h3>

    <a href="#">HTML Notes</a>

</aside>

<aside> को CSS की सहायता से webpage के left या right side में place किया जा सकता है।

6. <footer>

<footer> tag webpage या किसी article के footer section को define करता है।

इसमें सामान्यतः निम्न information दी जा सकती है:

• Copyright information

• Contact information

• Navigation links

• Social Media Links

Example:

<footer>

    <p>Copyright © 2026 My Website</p>

</footer>

⭐ QUICK REVISION

याद रखने का आसान तरीका:

<header>  → Header
<nav>     → Navigation
<article> → Main independent content
<section> → Content section
<aside>   → Additional / Sidebar content
<footer>  → Footer