वेब डिज़ाइन में एक महत्वपूर्ण सिद्धांत यह है कि HTML तत्वों का उपयोग यह इंगित करने के लिए किया जाता है कि वे वास्तव में क्या हैं, बजाय इसके कि वे डिफ़ॉल्ट रूप से ब्राउज़र में कैसे दिखाई दे सकते हैं। इसे सिमेंटिक HTML का उपयोग करने के रूप में जाना जाता है।

सिमेंटिक एचटीएमएल क्या है?

सिमेंटिक एचटीएमएल या सिमेंटिक मार्कअप एचटीएमएल है जो सिर्फ प्रेजेंटेशन के बजाय वेब पेज पर अर्थ का परिचय देता है। उदाहरण के लिए, ए

 टैग इंगित करता है कि संलग्न पाठ एक अनुच्छेद है। यह शब्दार्थ और प्रस्तुतीकरण दोनों है क्योंकि लोग जानते हैं कि अनुच्छेद क्या हैं, और ब्राउज़र उन्हें प्रदर्शित करना जानते हैं।

इस समीकरण के फ्लिप पक्ष पर, जैसे टैग  तथा  अर्थपूर्ण नहीं हैं। वे केवल यह परिभाषित करते हैं कि टेक्स्ट कैसा दिखना चाहिए (बोल्ड या इटैलिक), और मार्कअप को कोई अतिरिक्त अर्थ प्रदान नहीं करते हैं।

सिमेंटिक HTML टैग्स के उदाहरणों में शामिल हैं:

• हैडर टैग

   के माध्यम से

जब आप एक मानक-अनुपालक वेबसाइट बनाते हैं तो उपयोग करने के लिए कई और अर्थपूर्ण HTML टैग होते हैं।

आपको शब्दार्थ की परवाह क्यों करनी चाहिए

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

सिमेंटिक HTML टैग्स उन टैग्स की सामग्री के बारे में जानकारी प्रदान करते हैं जो किसी पृष्ठ पर उनके दिखने के तरीके से परे होते हैं। पाठ जो में संलग्न है  टैग को ब्राउज़र द्वारा तुरंत किसी प्रकार की कोडिंग भाषा के रूप में पहचाना जाता है। उस कोड को प्रस्तुत करने का प्रयास करने के बजाय, ब्राउज़र समझता है कि आप उस पाठ का उपयोग किसी लेख या ऑनलाइन ट्यूटोरियल के प्रयोजनों के लिए कोड के उदाहरण के रूप में कर रहे हैं।

सिमेंटिक टैग का उपयोग करने से आपको अपनी सामग्री को स्टाइल करने के लिए और भी कई हुक मिलते हैं। शायद आज आप अपने कोड नमूने को डिफ़ॉल्ट ब्राउज़र शैली में प्रदर्शित करना पसंद करते हैं, लेकिन कल, आप उन्हें ग्रे पृष्ठभूमि रंग के साथ कॉल करना चाहेंगे; बाद में अभी भी, आप सटीक मोनो-स्पेस फ़ॉन्ट परिवार को परिभाषित करना चाह सकते हैं या फ़ॉन्ट स्टैक अपने नमूने के लिए उपयोग करने के लिए। सिमेंटिक मार्कअप और स्मार्टली एप्लाइड सीएसएस का उपयोग करके आप इन सभी चीजों को आसानी से कर सकते हैं।

सिमेंटिक टैग का सही इस्तेमाल करना

प्रस्तुति के उद्देश्यों के बजाय अर्थ को व्यक्त करने के लिए सिमेंटिक टैग का उपयोग करते समय, सावधान रहें कि आप उनका उपयोग केवल उनके सामान्य प्रदर्शन गुणों के लिए गलत तरीके से नहीं करते हैं। सबसे अधिक दुरुपयोग किए जाने वाले अर्थ टैग में से कुछ में शामिल हैं:

• ब्लॉककोट — कुछ लोग का उपयोग करते हैं इंडेंटिंग टेक्स्ट के लिए टैग जो कोटेशन नहीं है। ऐसा इसलिए है क्योंकि ब्लॉकक्वाट्स डिफ़ॉल्ट रूप से इंडेंट किए जाते हैं। यदि आप केवल उस टेक्स्ट को इंडेंट करना चाहते हैं जो ब्लॉकक्वाट नहीं है, तो इसके बजाय CSS मार्जिन का उपयोग करें।
• पी — कुछ वेब संपादक उपयोग करते हैं (एक पैराग्राफ में निहित एक गैर-ब्रेकिंग स्थान) पृष्ठ तत्वों के बीच अतिरिक्त स्थान जोड़ने के लिए, उस पृष्ठ के पाठ के लिए वास्तविक अनुच्छेदों को परिभाषित करने के बजाय। पिछले उदाहरण की तरह, आपको स्थान जोड़ने के बजाय मार्जिन या पैडिंग शैली संपत्ति का उपयोग करना चाहिए।
• यूएल - साथ ही

  , a. के अंदर पाठ संलग्न करना

   टैग इंडेंट करता है कि टेक्स्ट अधिकांश ब्राउज़रों में है। यह शब्दार्थ की दृष्टि से गलत और अमान्य HTML दोनों है, क्योंकि केवल
  •  टैग a. के भीतर मान्य हैं
    टैग। फिर से, टेक्स्ट को इंडेंट करने के लिए मार्जिन या पैडिंग स्टाइल का उपयोग करें।
  • एच1, एच2, एच3, एच4, एच5, और एच6 - आप फॉन्ट को बड़ा और बोल्ड बनाने के लिए हेडिंग टैग्स का इस्तेमाल कर सकते हैं, लेकिन अगर टेक्स्ट हेडिंग नहीं है, तो इसके बजाय फॉन्ट-वेट और फॉन्ट-साइज सीएसएस प्रॉपर्टीज का इस्तेमाल करें।

  अर्थपूर्ण HTML टैग्स का उपयोग करके, आप उन पृष्ठों की तुलना में अधिक जानकारी प्रदान करने वाले पृष्ठ बनाते हैं जो हर चीज़ को आसानी से घेर लेते हैं

   टैग।

  कौन से HTML टैग सिमेंटिक हैं?

  हालांकि लगभग हर HTML4 टैग और सभी एचटीएमएल 5 टैग के अर्थ अर्थ होते हैं, कुछ टैग हैं tags प्रमुख रूप से अर्थपूर्ण।

  उदाहरण के लिए, HTML5 ने के अर्थ को फिर से परिभाषित किया है  तथा  अर्थपूर्ण होने के लिए टैग।  टैग अतिरिक्त महत्व नहीं बताता है; बल्कि, टैग किया गया पाठ आमतौर पर बोल्ड में प्रस्तुत किया जाता है। इसी तरह,  टैग अतिरिक्त महत्व या जोर नहीं देता है; बल्कि, यह उस पाठ को परिभाषित करता है जिसे आमतौर पर इटैलिक में प्रस्तुत किया जाता है।

  सिमेंटिक एचटीएमएल टैग

  संक्षिप्त
  परिवर्णी शब्द
  लंबा उद्धरण
  परिभाषा
  दस्तावेज़ के लेखक (ओं) के लिए पता
  उद्धरण
  कोड संदर्भ
  टेलेटाइप टेक्स्ट
  तार्किक विभाजन
  जेनेरिक इनलाइन स्टाइल कंटेनर
  हटाया गया पाठ
  सम्मिलित पाठ
  ज़ोर
  जोरदार जोर
  प्रथम-स्तरीय शीर्षक
  दूसरे स्तर का शीर्षक
  तीसरे स्तर का शीर्षक
  चौथे स्तर का शीर्षक
  पांचवें स्तर का शीर्षक
  छठे स्तर का शीर्षक head
  	विषयगत विराम
  उपयोगकर्ता द्वारा दर्ज किया जाने वाला पाठ
  पूर्व-स्वरूपित पाठ
  लघु इनलाइन उद्धरण
  नमूना आउटपुट
  सबस्क्रिप्ट
  ऊपर की ओर लिखा हुआ
  चर या उपयोगकर्ता परिभाषित पाठ