HTML संरचना वेब पेज बनाने में महत्वपूर्ण भूमिका निभाती है। यह परिभाषित करता है कि किसी वेबपेज पर सामग्री को कैसे व्यवस्थित और प्रदर्शित किया जाता है। यहां मूल HTML संरचना का परिचय दिया गया है:
1. Doctype
Doctype(दस्तावेज़ प्रकार घोषणा) उस HTML संस्करण को परिभाषित करता है जिसका उपयोग वेबपेज कर रहा है। इसे HTML फ़ाइल की शुरुआत में रखा जाना चाहिए।
2. एचटीएमएल टैग
HTML टैग प्रत्येक HTML फ़ाइल का मूल तत्व है। यह वेबपेज की संपूर्ण सामग्री को समाहित करता है।
3. head टैग
हेड टैग में वेबपेज के बारे में जानकारी होती है जो सीधे ब्राउज़र पर प्रदर्शित नहीं होती है। यह वह जगह है जहां पृष्ठ का शीर्षक, मेटा टैग, सीएसएस और जावास्क्रिप्ट फ़ाइलों के लिंक और विभिन्न अन्य तत्वों को परिभाषित किया गया है।
4. body टैग
बॉडी टैग में वेबपेज पर प्रदर्शित सभी सामग्री शामिल होती है। यह वह जगह है जहां पाठ, चित्र, वीडियो, लिंक और अन्य उपयोगकर्ता इंटरफ़ेस घटकों जैसे तत्वों को परिभाषित किया गया है।
5. नेस्टेड टैग
HTML खोलने और बंद करने वाले टैग के साथ एक पदानुक्रमित संरचना का उपयोग करता है। चाइल्ड टैग को पैरेंट टैग के अंदर रखा जाता है। उदाहरण के लिए, पी टैग(पैराग्राफ) में स्पैन टैग(इनलाइन टेक्स्ट), मजबूत टैग(बोल्ड टेक्स्ट) और कई अन्य टैग शामिल हो सकते हैं।
6. सामान्य टैग
HTML सामग्री को फ़ॉर्मेट करने और प्रदर्शित करने के लिए टैग की एक श्रृंखला प्रदान करता है। उदाहरण के लिए, h1-h6 टैग(शीर्षक), p टैग(पैराग्राफ), img टैग(छवि), एक टैग(लिंक), और कई अन्य।
यहां संपूर्ण HTML पृष्ठ संरचना का एक उदाहरण दिया गया है:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Webpage</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<header>
<h1>Welcome to My Webpage</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>About Me</h2>
<p>I am a web developer passionate about creating amazing websites.</p>
</section>
<section>
<h2>My Projects</h2>
<ul>
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2022 My Webpage. All rights reserved.</p>
</footer>
</body>
</html>
उपरोक्त उदाहरण में, हमारे पास मुख्य तत्वों जैसे doctype, html टैग, head टैग और body टैग के साथ एक संपूर्ण HTML पृष्ठ है। मुख्य अनुभाग में, हम पृष्ठ शीर्षक, उपयोग की जाने वाली सीएसएस और जावास्क्रिप्ट फ़ाइलों को परिभाषित करते हैं। वेबपेज की सामग्री को प्रदर्शित करने के लिए बॉडी सेक्शन में हेडर, मेन और फ़ूटर जैसे तत्व होते हैं।
सही HTML संरचना का उपयोग करके, आप सुव्यवस्थित, पठनीय और इंटरैक्टिव वेब पेज बना सकते हैं।