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

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

अर्थपूर्ण HTML

जब यह वर्णन करने की बात आती है कि 'सिमेंटिक HTML' का क्या अर्थ है, तो हम अपनी मदद के लिए सीधे 'सिमेंटिक्स' शब्द की परिभाषा पर जा सकते हैं। मरियम-वेबस्टर के अनुसार, शब्दार्थ किसी संकेत के अर्थ या अर्थ का अध्ययन है। इसलिए जब हम सिमेंटिक HTML लिख रहे होते हैं, तो हम एक HTML कोड बना रहे होते हैं, जिसका अर्थ है कि टैग का क्या अर्थ है।

हम सिमेंटिक मार्कअप का उपयोग करते हैं ताकि हम अपने वेब पेजों की संरचना का एक मानक तरीके से वर्णन कर सकें:यह स्क्रीन रीडर्स और वॉयस असिस्टेंट को हमारे HTML तत्वों को स्कैन करने और उपयोगकर्ता द्वारा अनुरोध किए जाने पर प्रासंगिक जानकारी वापस करने की अनुमति देता है।

अर्थपूर्ण तत्व

जब 2014 में HTML5 विनिर्देश जारी किया गया था, तो यह वेब पेज की संरचना को बेहतर ढंग से इंगित करने के लिए अतिरिक्त सिमेंटिक तत्वों के साथ आया था। यहां कुछ ऐसे टैग दिए गए हैं जिन्हें सिमेंटिक टैग माना जाएगा:

<हेडर>

हेडर मुख्य रूप से कंटेनर तत्व होते हैं जो अनुभागीय अर्थपूर्ण HTML तत्वों के रूप में कार्य करते हैं। उनमें आमतौर पर लोगो होता है, <nav> और एक <h1> जो वेबसाइट का ही वर्णन करता है। यह आमतौर पर आपकी साइट के सभी पृष्ठों पर एक जैसा होता है।

ए <nav> तत्व एक नेविगेशनल तत्व के लिए छोटा है। इसमें ऐसे लिंक होते हैं जो उपयोगकर्ताओं को आपकी साइट के अन्य भागों में ले जाते हैं:

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <style>
    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;
   }
 
    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>
   <div class="logo-container">
     <img src="https://www.placekitten.com/200/50" alt="placeholder-kitty"/>
     <h1>Kit Kat Logo</h1>
   </div>
     <nav class="navigation-links-container">
       <a href="about-us.html">About Us</a>
       <a href="contact-us.html">Contact Us</a>
       <a href="services.html">Services</a>
       <a href="login.html">Login/Register</a>
     </nav>
   </header>
   <script src="script.js"></script>
 </body>
</html>

नेविगेशन तत्वों में लिंक, मेनू और सबमेनस हो सकते हैं। हालांकि, तत्वों में अन्य <nav> . नहीं हो सकते हैं तत्व ऊपर के उदाहरण में, मेरे पास एक <img> . है जो लोगो और <nav> . के लिए प्लेसहोल्डर के रूप में कार्य करता है जिसमें हमारे एंकर () तत्व होते हैं। ये सभी <header> . के अंदर नेस्टेड हैं .

<मुख्य>, <अनुभाग>,

-

<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>Kit Kat Logo</h1>
   </div>
     <nav class="navigation-links-container">
       <a href="about-us.html">About Us</a>
       <a href="contact-us.html">Contact Us</a>
       <a href="services.html">Services</a>
       <a href="login.html">Login/Register</a>
     </nav>
   </header>
   <body>
<main>
 <header>
   <h2>
       I'm an h2 -- Semantic Elements -- Describes purpose of main content
   </h2>
 </header>
  <section>
    <header>
      <h3> I'm a h3 -- Layout Semantic Elements -- Describes purpose of section content</h3>
    </header>
   <div>Content and More stuff and things that pertain to h3 </div>
   <h4> I'm an h4 -- Even less important heading </h4>
   <div>More content that pertains to h4</div>
 </section>
  <section>
    <header>
      <h3> We can go back up to h3 even though we used h4</h3>
    </header>
    <div>More stuff and things that pertain to h3 </div>
    <h6>No h6 until h4 and h5</h6>
    <h4> This can't be h6, unless h4</h4>
    <div>More content that pertains to h4</div>
 
    <h5> and h5 are used first. </h5>
    <div>More content that pertains to h5</div>
    <h6 class="ok">Now h6 can be used!</h6>
 
   </section>
  </main>
  <footer>
	
  </footer>
  <script src="script.js"></script>
 </body>
</html>

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

निष्कर्ष

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