प्रोजेक्ट्स में सेमेंटिक HTML का उपयोग: एक परिचय

<main>, <section>, <h2> – <h6>

<main> टैग हमें प्रारंभिक <header> के बाहर साइट की मुख्य सामग्री बताता है। इसमें <section> टैग्स हो सकते हैं जिनके अपने <header> और <h2>–<h6> एलिमेंट्स हो सकते हैं। 

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद वे अपनी टेक जॉब संभावनाओं के बारे में अधिक आश्वस्त महसूस करते हैं। आज ही बूटकैंप से जुड़ें।

औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी पाने तक।

हेडिंग टैग्स के बारे में सामान्य नियम यह है कि प्रति पेज केवल एक <h1> एलिमेंट होता है जो पेज को दिए गए शीर्षक से मेल खाता है। इसके अलावा, आप उच्च-संख्या वाली हेडिंग का उपयोग नहीं कर सकते, जब तक कि आप निचली-संख्या वाली हेडिंग का उपयोग न करें। हालांकि, आपके पास उच्च-संख्या वाली हेडिंग से निचली-संख्या वाली हेडिंग पर क्रम से बाहर जाने की क्षमता है। यह मूल रूप से उस संरचना का अनुसरण करता है जो एक वेब पेज की होनी चाहिए: 

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <style> header.main-header { height: 100px; background: lightblue; display: flex; align-items: center; } .logo-container { display: flex; flex-flow: column wrap; justify-content: flex-start; padding: 0px 20px; } h1 { font-size: 1rem; margin: 0; padding: 0; align-self: center; } h6 { text-decoration: line-through; } h6.ok { text-decoration: none; } img { width: 200px; height: 50px; } nav.navigation-links-container { width: calc(100% - 200px); display: flex; justify-content: space-around; } nav.navigation-links-container a { color: black; text-decoration: none; } nav.navigation-links-container a:hover { color: darkgoldenrod; text-decoration: underline; } </style> </head> <body> <header class="main-header"> <div class="logo-container"> <img src="https://www.placekitten.com/200/50" alt="placeholder-kitty"/> <h1>किट कैट लोगो</h1> </div> <nav class="navigation-links-container"> <a href="about-us.html">हमारे बारे में</a> <a href="contact-us.html">संपर्क करें</a> <a href="services.html">सेवाएं</a> <a href="login.html">लॉगिन/रजिस्टर</a> </nav> </header> <body> <main> <header> <h2> मैं एक h2 हूँ -- सेमेंटिक एलिमेंट्स -- मुख्य सामग्री के उद्देश्य का वर्णन करता है </h2> </header> <section> <header> <h3> मैं एक h3 हूँ -- लेआउट सेमेंटिक एलिमेंट्स -- सेक्शन सामग्री के उद्देश्य का वर्णन करता है</h3> </header> <div>सामग्री और अधिक चीजें और वस्तुएं जो h3 से संबंधित हैं </div> <h4> मैं एक h4 हूँ -- और भी कम महत्वपूर्ण हेडिंग </h4> <div>अधिक सामग्री जो h4 से संबंधित है</div> </section> <section> <header> <h3> हम h3 पर वापस जा सकते हैं भले ही हमने h4 का उपयोग किया हो</h3> </header> <div>अधिक चीजें और वस्तुएं जो h3 से संबंधित हैं </div> <h6>h4 और h5 तक कोई h6 नहीं</h6> <h4> यह h6 नहीं हो सकता, जब तक h4</h4> <div>अधिक सामग्री जो h4 से संबंधित है</div> <h5> और h5 पहले उपयोग किए जाते हैं। </h5> <div>अधिक सामग्री जो h5 से संबंधित है</div> <h6 class="ok">अब h6 का उपयोग किया जा सकता है!</h6> </section> </main> <footer> </footer> <script src="script.js"></script> </body> </html>

याद रखें कि भले ही हम हेडिंग टैग्स को क्रम से बाहर उपयोग कर सकते हैं, लेकिन ऐसा करना सर्वोत्तम अभ्यास नहीं है। उचित पदानुक्रम बेहतर एक्सेसिबिलिटी की ओर ले जाता है।

निष्कर्ष

सेमेंटिक HTML के उपयोग के लिए बहुत सारी संभावनाएं हैं। सेमेंटिक HTML के उपयोग के लिए दस्तावेज़ MDN वेबसाइट के साथ-साथ W3C साइट पर स्थित है। अन्य टैग्स जो उनके इरादे का वर्णन करते हैं, दोनों साइट्स पर सूचीबद्ध हैं। दस्तावेज़ को कैसे देखना है यह जानना सुनिश्चित करें और महसूस करें कि HTML प्रोसेसर्स सेमांटिक्स का उपयोग यूजर्स को अतिरिक्त पदानुक्रम जानकारी देने के लिए करते हैं यदि आवश्यक हो।