HTML दस्तावेज़ कैसे बनाएं?

परिचय

एक HTML दस्तावेज़, HTML वेब पेज की संरचना को परिभाषित करता है। इसमें दो अलग-अलग भाग होते हैं: head (हेड) और body (बॉडी)। हेड में दस्तावेज़ के बारे में जानकारी होती है। बॉडी भाग में दस्तावेज़ की सामग्री होती है, जो प्रदर्शित होती है।

महत्वपूर्ण नोट्स

• हेड भाग को <head>...</head> टैग्स के अंदर उपयोग करना चाहिए
• बॉडी टैग को <body>...</body> टैग्स के अंदर उपयोग किया जाता है
• एक HTML दस्तावेज़ <!DOCTYPE html> घोषणा से शुरू होता है, जिसे DTD (Document Type Definition) के रूप में जाना जाता है। यह वेब ब्राउज़र को HTML दस्तावेज़ के प्रकार और संस्करण के बारे में सूचित करता है

उदाहरण

<!DOCTYPE html> <html> 
<head> 
    <title>HTML Document</title> 
</head> 
<body> 
    <p>कंटेंट यहाँ जोड़ा जाता है।</p> 
</body> 
</html>

आउटपुट

कंटेंट यहाँ जोड़ा जाता है।

पूर्ण HTML5 दस्तावेज़ संरचना

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="पेज का विवरण SEO के लिए">
    <meta name="keywords" content="HTML, ट्यूटोरियल, वेब विकास">
    <meta name="author" content="लेखक का नाम">
    <title>पेज शीर्षक - ब्राउज़र टैब में दिखता है</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico">
    <script src="script.js" defer></script>
</head>
<body>
    <header>
        <h1>साइट शीर्षक</h1>
        <nav><!-- नेविगेशन --></nav>
    </header>
    
    <main>
        <article>
            <h2>लेख शीर्षक</h2>
            <p>कंटेंट यहाँ...</p>
        </article>
    </main>
    
    <footer>
        <p>© 2024 कंपनी नाम</p>
    </footer>
</body>
</html>

प्रत्येक भाग का विवरण

HTML5 में नए सिमेंटिक एलिमेंट्स

• <header> - पेज/सेक्शन हेडर
• <nav> - नेविगेशन लिंक्स
• <main> - मुख्य कंटेंट (प्रति पेज एक)
• <article> - स्वतंत्र कंटेंट
• <section> - थीमेटिक ग्रुपिंग
• <aside> - साइड कंटेंट
• <footer> - पेज/सेक्शन फूटर

सत्यापन

अपना HTML मान्य करने के लिए W3C Validator का उपयोग करें।

सर्वोत्तम अभ्यास

1. हमेशा <!DOCTYPE html> से शुरू करें
2. lang एट्रिब्यूट सेट करें (lang="hi" हिंदी के लिए)
3. UTF-8 एन्कोडिंग उपयोग करें
4. व्यूपोर्ट मेटा टैग शामिल करें
5. विवरणात्मक शीर्षक लिखें (50-60 कैरेक्टर्स)
6. CSS को <head> में, JS को <body> के अंत में या defer के साथ रखें
7. सिमेंटिक HTML5 एलिमेंट्स उपयोग करें