आपको हर बार div टैग्स का उपयोग करने की आवश्यकता नहीं है। अपनी साइट को अधिक संरचित और सुलभ बनाने के लिए इन सिमेंटिक HTML टैग्स का उपयोग करें।
सिमेंटिक HTML की शुरुआत से पहले, डेवलपर्स सामग्री को व्यवस्थित करने के लिए divs का उपयोग करते थे। दैवी तत्वों का अपने आप में कोई अर्थ नहीं है। वे केवल शैलियों को लागू करने और सामग्री को व्यवस्थित करने का तरीका प्रदान करते हैं।
अर्थ शब्द का अर्थ है अर्थ संबंधी. सिमेंटिक HTML तत्व उनकी सामग्री के उद्देश्य का वर्णन करते हैं। वे डेवलपर, उपयोगकर्ता, खोज इंजन और सहायक तकनीकों को अर्थ प्रदान करते हैं। यहां लोकप्रिय सिमेंटिक HTML टैग्स की सूची दी गई है, जिनका उपयोग आप अपने अगले प्रोजेक्ट में कर सकते हैं।
डिव क्या हैं?
HTML में, div (डिवीजन) तत्व एक ब्लॉक-स्तरीय कंटेनर है। आप एक वेब पेज पर समूह में HTML तत्वों को अनुभागों में विभाजित करने के लिए एक div का उपयोग करते हैं। सिंटैक्स नीचे दिखाया गया है:
<डिव>
डिव>
Divs पर सिमेंटिक HTML तत्वों का उपयोग करने के लाभ
HTML5 ने कोड को पढ़ने में आसान बनाने के लिए सिमेंटिक HTML तत्वों को पेश किया। सिमेंटिक तत्व वेब सामग्री को अर्थ और संरचना प्रदान करते हैं।
वे आपके कोड को अन्य डेवलपर्स के लिए समझने योग्य बनाते हैं। वे खोज इंजनों के लिए आपकी सामग्री ढूंढना और आपकी साइट पर ट्रैफ़िक लाना भी आसान बनाते हैं। यहाँ कुछ सिमेंटिक तत्व दिए गए हैं जिनका आप अपने में उपयोग कर सकते हैं एचटीएमएल और सीएसएस परियोजनाएं.
1.
टैग दस्तावेज़ पर हेडर सेक्शन को परिभाषित करता है। आमतौर पर, इसमें साइट का लोगो, नेविगेशन और पेज का शीर्षक होता है। यह वह खंड है जो एक वेबपेज के शीर्ष पर दिखाई देता है। आप अपनी जरूरत के हिसाब से हेडर को कस्टमाइज कर सकते हैं। वाक्य रचना इस प्रकार है:
<शरीर><हैडर>
<एच 1> नमस्ते!एच 1>
<पी>मैं एक शीर्षलेख हूंपी>
हैडर>
शरीर>
2.
टैग में वेबसाइट के लिए नेविगेशन लिंक शामिल हैं। ये मेनू, सामग्री की तालिकाएँ या अनुक्रमित हो सकते हैं। यह आमतौर पर के भीतर रखा जाता है उपनाम। वाक्य रचना इस प्रकार है:
<हैडर><एनएवी>
<उल>
<ली>मेरी वेबसाइट लिंकली>
<ली><एhref="#"> घरए>ली>
<ली ><एhref="#"> हमारे बारे में ए>ली>
उल>
एनएवी>
<एच 1>उपरोक्त मेरी वेबसाइट का नेविगेशन हिस्सा है।एच 1>
हैडर>
ब्राउजर पर यह इस तरह दिखेगा:
आप सीएसएस लेआउट मॉडल जैसे उपयोग कर सकते हैं सीएसएस फ्लेक्सबॉक्स संरेखित करने के लिए
3.
टैग में वेब पेज की मुख्य सामग्री होती है। यह कंटेंट को हेडर, साइडबार और फुटर से अलग करता है। मुख्य की प्रमुख सामग्री का प्रतिनिधित्व करता है अनुभाग।
<शरीर><हैडर>
<शीर्षक> वेबसाइट तथ्य शीर्षक>
हैडर>
<मुख्य>
<पी> यह वेबसाइट एक संक्षिप्त प्रदर्शन है कि मुख्य टैग कैसे काम करता है।पी>
<पी> यह उपयोगी सामग्री के साथ वेबसाइट के हिस्से को घेरता है।पी>
मुख्य>
<FOOTER>
<h3> यह एक पाद लेख है h3>
FOOTER>
शरीर>
ऐसा प्रतीत होता है:
4.
उपयोग दस्तावेज़ या वेबसाइट में स्व-निहित अनुभागों को परिभाषित करने के लिए टैग। उदाहरण के लिए, आप उनका उपयोग ब्लॉग पोस्ट, पत्रिकाएँ, या उत्पाद कार्ड बनाने के लिए कर सकते हैं। तत्व अन्य लेखों, अनुभागों और शीर्षकों सहित अन्य तत्वों को संलग्न कर सकता है। संलग्न तत्व लेख के विषय से संबंधित होने चाहिए।
<लेख>
<एच 1>कल्पित कथा के बजाय अजनबीएच 1><लेख>
<h3>परिचयh3>
<पी>इस पुस्तक में वर्णित घटनाएं और व्यक्ति काल्पनिक हैं।पी>
लेख>
<लेख>
<h3>अध्याय एकh3>
<पी> दिन उज्ज्वल था और सूरज आसमान से मुस्कुरायापी>
लेख>
लेख>
ऐसा प्रतीत होता है:
5.
टैग में मुख्य सामग्री से संबंधित सामग्री होती है। उद्धरणों, टिप्पणियों, या शाउट-आउट्स के लिए साइडबार बनाने के लिए इस टैग का उपयोग करें। ऐसी जानकारी को हाइलाइट करता है जो पाठक को याद आ सकती है। यह बाकी सामग्री से अलग है।
एचटीएमएल><एचटीएमएल>
<शैली>
शरीर{
पृष्ठभूमि-रंग:#abdbe3;
}
एक तरफ {
चौड़ाई: 30%;
पैडिंग-लेफ्ट: 0.5रेम;
मार्जिन-लेफ्ट: 1रेम;
फ्लेक्स: बायां;
बॉक्स-शैडो: इनसेट 5px 0 5px -5px हरा;
फ़ॉन्ट-शैली: इटैलिक;
लाल रंग;
}
एक तरफ > पी {
मार्जिन: 0.5रेम;
शैली>
<शरीर>
<मुख्य>
<एच 1> वीवर पक्षीएच 1>
<पी>प्लोसिडे छोटे राहगीर पक्षियों का एक परिवार है। जिनमें से कई बुनकर, बुनकर पक्षी, बुनकर फिंच और बिशप कहलाते हैं।पी>
<अलग>
<पी>किंगडम: एनिमेलिया
संघ: कॉर्डेटापी>अलग>
<पी>हाल के वर्गीकरणों में, प्लोसिडे एक क्लैड है, जिसमें कुछ ऐसे पक्षी शामिल नहीं हैं जिन्हें ऐतिहासिक रूप से परिवार में रखा गया है। गौरैया में से कुछ, लेकिन इसमें मोनोटाइपिक सबफ़ैमिली एंबलीओस्पिज़िना शामिल है।पी>
मुख्य>
शरीर>
एचटीएमएल>
6.
तत्व में पृष्ठ का एक भाग होता है जिसमें कोई विशिष्ट शब्दार्थ तत्व नहीं होता है। सामग्री को प्रस्तुत करने और अन्य HTML तत्वों को संलग्न करने के लिए अनुभागों में एक शीर्षक हो सकता है। किसी पुस्तक या ब्लॉग में अध्याय जैसे वेबपृष्ठ के घटकों का प्रतिनिधित्व करता है।
एचटीएमएल><एचटीएमएल>
<शरीर>
<एच 1>बाइबलएच 1>
<अनुभाग>
<एच 2>परिचयएच 2>
<पी>बाइबिल ईसाई धर्म, यहूदी धर्म, सामरीवाद में पवित्र धार्मिक ग्रंथों का संग्रह है। बाइबिल एक संकलन है – विभिन्न रूपों के ग्रंथों का संकलन – मूल रूप से हिब्रू, अरामाईक और कोइन ग्रीक में लिखा गया था।पी>
अनुभाग>
<अनुभाग>
<एच 2>अध्याय एक: उत्पत्तिएच 2>
<पी>उत्पत्ति की पुस्तक हिब्रू बाइबिल और ईसाई पुराने नियम की पहली पुस्तक है। इसका हिब्रू नाम इसके पहले शब्द बेरेशिट के समान है। उत्पत्ति दुनिया के निर्माण, मानवता के प्रारंभिक इतिहास और इज़राइल के पूर्वजों और यहूदी लोगों की उत्पत्ति का लेखा-जोखा हैपी>
अनुभाग>शरीर>
एचटीएमएल>
ऐसा प्रतीत होता है:
7.
तत्व छवियों या आरेखों जैसे स्वयं निहित चित्रों को संलग्न करता है। ये चित्र मुख्य पृष्ठ पर सामग्री को संदर्भित करते हैं। आंकड़े द्वारा निर्दिष्ट कैप्शन के साथ आते हैं तत्व। बताता है कि छवि किस बारे में है।
एचटीएमएल><एचटीएमएल>
<शरीर>
<मुख्य>
<अनुभाग>
<एच 1>एक कंप्यूटर के भागएच 1>
<पी> एक कंप्यूटर बनाने के लिए कई भाग एक साथ काम करते हैंपी>
<आकृति>
<आईएमजीस्रोत="कुछ-url.jpg"alt="कम्प्यूटर का माउस">
<figcaption>यह एक कंप्यूटर माउस हैfigcaption>
आकृति>
अनुभाग>
मुख्य>
शरीर>
एचटीएमएल>
आप और आगे जाकर सीख सकते हैं उत्तरदायी छवियां कैसे बनाएं एचटीएमएल में।
HTML तत्व वेबपेज के निचले भाग में जानकारी संलग्न करता है। यह के विपरीत है तत्व। पृष्ठ के स्वामी के बारे में जानकारी हो सकती है। इसमें कॉपीराइट डेटा या साइट की अतिरिक्त जानकारी के लिंक शामिल हैं।
एचटीएमएल><एचटीएमएल>
<शरीर>
<मुख्य>
<अनुभाग>
<एच 1>एक कंप्यूटर के भागएच 1>
<आकृति>
<आईएमजीस्रोत="कुछ-url.jpg"alt="कम्प्यूटर का माउस">
<figcaption>यह एक कंप्यूटर माउस हैfigcaption>
आकृति>
अनुभाग>
मुख्य>
<FOOTER>
<पी> कंप्यूटरटेक द्वारा निर्मित © 2023पी>
FOOTER>
शरीर>
एचटीएमएल>
उपरोक्त कोड में एक पाद लेख जोड़ता है एक कंप्यूटर के भाग पृष्ठ जैसा कि निम्न छवि में दिखाया गया है।
सिमेंटिक HTML तत्वों का उपयोग क्यों करें?
सिमेंटिक HTML तत्वों का उपयोग कोड को संदर्भ देता है। कोड को देखने वाला कोई भी इसे आसानी से समझ सकता है। टैग तत्वों को शैलीबद्ध करना और परियोजनाओं पर सहयोग करना आसान बनाते हैं।
आप सिमेंटिक HTML का उपयोग फ्रंटएंड लाइब्रेरी और फ्रेमवर्क के साथ कर सकते हैं। अधिकांश आधुनिक वेब ब्राउज़र पारंपरिक तत्वों की तुलना में सिमेंटिक HTML तत्वों को पसंद करते हैं। सिमेंटिक HTML का उपयोग करना शुरू करें और अपने कोड को आधुनिक, पठनीय और प्रस्तुत करने योग्य देखें।