वेब मानक गतिविधिको एक महत्त्वपूर्ण सिद्धान्त जुन हामीले आज भएको उद्योगको लागि उत्तरदायी छ जुन एचटीएमएल तत्वहरू प्रयोग गर्ने विचार हो जुन तिनीहरू तिनीहरूका ब्राउजरमा पूर्वनिर्धारित रूपमा कसरी देखा पर्न बरु छन्। यसलाई Semantic एचटीटीएल प्रयोग गरी भनिन्छ।
Semantic HTML के हो?
सेमीन्टिक एचटीएमएल वा सेन्टिकल मार्कअप एचटीएमएल हो जसले प्रस्तुतीकरणको सट्टा वेब पेजको अर्थलाई परिचय दिन्छ। उदाहरणका लागि, एउटा
ट्यागले सङ्केत गरिएको पाठ अनुच्छेद हो भनेर संकेत गर्दछ।
यो दुवै मौलिक र प्रस्तुतिकरण हो, किनभने मानिसहरूले अनुच्छेदहरू के हुन् थाहा पाउँछन् र ब्राउजरहरू कसरी उनीहरूले प्रदर्शन गर्न जान्दछन्।
यस समीकरणको फ्लिप पक्षमा, ट्यागहरू जस्तै र क्रमिक छैन, किनकि उनीहरूले कसरी व्याख्या गर्नु पर्ने पाठ (बोल्ड वा इटालियन) परिभाषित गर्दछ र मार्कअपको लागि कुनै अतिरिक्त अर्थ प्रदान गर्दैन।
सेमीन्टाइल एचटीएमएल ट्यागका उदाहरणहरू हेडर ट्यागहरू
मार्फत , , र समावेश गर्दछ। त्यहाँ धेरै अर्धिक HTML ट्यागहरू छन् जुन तपाईले मानक-अनुपालन वेबसाइट निर्माण गरेमा प्रयोग गर्न सकिन्छ।
किन तपाईं सिमेन्टिक्सको बारेमा हेरचाह गर्नुपर्छ
सेन्टन्टिक एचटीटीटी लेखनको फाइदा कुनै पनि वेब पेजको ड्राइभिङ लक्ष्य - संवाद गर्न चाहानुहुन्छ के हो। तपाईंको कागजातमा सेन्टमेन्ट ट्यागहरू थप्दा, तपाइँ त्यस कागजातको बारेमा अतिरिक्त जानकारी प्रदान गर्दछ, जुन सम्पर्कमा एड्स हुन्छ। विशेष गरी, शास्त्रीय ट्यागले ब्राउजरलाई स्पष्ट पार्छ जुन पृष्ठको अर्थ र यसको सामग्री हो।
त्यो स्पष्टता खोजी इन्जिनसँग पनि कुराकानी गरिएको छ, पक्का सही प्रश्नहरूको लागि दायाँ पानाहरू डेलिभर गरिन्छन्।
सेमीन्टिक एचटीएमएल ट्यागले ती ट्यागहरूको सामग्रीहरूको बारे जानकारी प्रदान गर्दछ जुन बाहिर पृष्ठमा जान्छ कि कसरी बाहिर जान्छ। पाठ जो कोड ट्यागमा तुरुन्त ब्राउजर द्वारा केही प्रकारको कोडिङ भाषाको रुपमा पहिचान गरिएको छ।
त्यस कोड सट्टा गर्न प्रयास गर्नुको सट्टा, ब्राउजरले तपाईंलाई पाठ वा उदाहरणको उद्देश्यका लागि कोडको उदाहरण वा केही प्रकारको अनलाइन ट्यूटोरियलको रूपमा प्रयोग गर्दै जान्छ।
सेन्टटिक ट्यागहरू प्रयोग गर्दै तपाईंलाई तपाईंको सामग्री स्टाइलको लागि धेरै अधिक हक्स दिन्छ। सायद आज तपाईका कोड नमूनाहरू पूर्वनिर्धारित ब्राउजर शैलीमा प्रदर्शन गर्न मनपर्छ, तर भोलि, तपाइँ तिनीहरूलाई खैरो पृष्ठभूमिको रंगमा कल गर्न चाहानुहुन्छ, र पछि तपाइँका लागि प्रयोग गर्न सटीक मोनो-स्पेस फन्ट परिवार वा फन्ट स्ट्याकलाई परिभाषित गर्न चाहानुहुन्छ। तिम्रो नमूनाहरू। तपाईं सामरिक मार्कअप प्रयोग गरेर स्मार्टफोनले सीएसएस प्रयोग गरी यी सबै चीजहरू सजिलै संग गर्न सक्नुहुनेछ।
सही तरिकाले सेमीटिक ट्यागहरू प्रयोग गर्नुहोस्
जब तपाइँ प्रस्तुति उद्देश्यका लागि अर्थ सार्नको लागि सेमीन्ट ट्यागहरू प्रयोग गर्न चाहानुहुन्छ, तपाईंलाई सावधान रहनु आवश्यक छ कि तपाइँ तिनीहरूलाई सामान्य प्रदर्शन गुणहरूको लागि गलत प्रयोग नगर्नुहोस्। केहि सामान्यतया दुर्व्यवहार सेमेन्ट ट्यागहरू समावेश छन्:
- ब्लकक्टेट - केही व्यक्तिले पाठको इन्डेन्टिंगको लागि ट्याग प्रयोग गर्दछ जुन एक उद्धरण छैन। यो कारण हो किनभने ब्लकक्वोटहरू पूर्वनिर्धारितद्वारा इन्डेन्टेड छन्। यदि तपाइँ मात्र इन्डेन्टेसनको फाईदाहरू चाहानुहुन्छ भने, तर पाठ ब्लककुटो छैन, यसको सट्टा CSS मार्जिन प्रयोग गर्नुहोस्।
- p - केहि वेब सम्पादकहरू
& nbsp; (एक paragraphoph मा निहित गैर-ब्रेकिंग स्पेस प्रयोग गर्दछ) पृष्ठको तत्वको बीचमा अतिरिक्त स्पेस थप्न को लागी, वास्तविक पृष्ठ अनुच्छेदको लागि वास्तविक अनुच्छेद परिभाषित गर्नु। पहिले उल्लेख गरिएको इन्डेन्टिंग उदाहरणको रूपमा, तपाइँले स्पेस थप्नको लागि मार्जिन वा प्याडिङ शैली गुण प्रयोग गर्नुपर्छ।
- ul - blockquote जस्तै,
ट्याग इन्डेन्ट भित्र टेक्स्ट संलग्न गर्नुहोस् जुन अधिकांश ब्राउजरहरूमा पाठ। यो दुवै semantically गलत र अमान्य एचटीएमएल हो, किनकि केवल - ट्याग एक
ट्याग भित्र वैध छ। फेरि, इन्डेन्टमा मार्जिन वा प्याडिङ शैली प्रयोग गर्नुहोस्।
- h1-h6 - हेडिंग ट्याग फन्टहरू ठूलो बनाउन र बोल्डर गर्न प्रयोग गर्न सकिन्छ, तर यदि पाठ शीर्षक होइन, यो हेडिंग ट्याग भित्र हुनुपर्दैन। यदि तपाईं आफ्नो पृष्ठमा विशिष्ट पाठको साइज वा वजन परिवर्तन गर्न चाहनु भएको बट्टा फन्ट-वजन र फन्ट साइज गुणहरू प्रयोग गर्नुहोस्।
एचटीएमएल ट्यागहरू प्रयोग गरेर अर्थ राख्नु भएको छ, तपाईले पृष्ठहरू सिर्जना गर्नुहुने छ जुन थप जानकारी प्रदान गर्दछ जुन
ट्यागहरूसँगको वरपरको वरपरको वरपरको तुलनामा।
कुन HTML ट्याग Semantic?
जबकि लगभग प्रत्येक एचटीएमएल 4 ट्याग र सबै एचटीएमएल 5 ट्यागहरू एक अर्थपूर्ण अर्थ छ, केहि ट्यागहरू मुख्य रूपमा अर्थशास्त्रमा हुन्छन्।
उदाहरणका लागि, HTML5 ले र ट्यागहरू अर्थपूर्ण बनाउन अर्थलाई परिभाषित गरेको छ। ट्यागले थप महत्त्व बुझ्दैन, तर सामान्यतया पाठ बोल्डमा गाईएको छ। ट्यागले पनि थप महत्त्व वा जोड दिदैन, तर सामान्यतया इटालिकमा प्रदान गरिएको पाठलाई परिभाषित गर्दछ।
सेन्टिकल एचटीएमएल ट्यागहरू
संक्षिप्त <परिवर्णी> अंग्रेजी
लामो उद्धरण परिभाषा <ठेगाना> कागजातको लेखक (हरू) को ठेगाना उद्धरण कोड सन्दर्भ टेलेट टाइप पाठ तार्किक विभाजन सामान्य इनलाइन शैली कन्टेनर मेटाईएको पाठ सम्मिलित पाठ जोड बलियो जोड
पहिलो स्तर शीर्षक
दोस्रो स्तर शीर्षक
तेस्रो-स्तर शीर्षक
चौथो-स्तर शीर्षक
पाँचौं स्तरको शीर्षक
छैट-स्तर शीर्षक
थ्योटिक ब्रेक प्रयोगकर्ता द्वारा प्रविष्ट गरिएको पाठ
पूर्व-ढाँचा पाठ
छोटो इनलाइन उद्धरण नमूना उत्पादन <उप> सब्सक्रिप्ट Superscript चल वा प्रयोगकर्ता परिभाषित पाठ
, र समावेश गर्दछ। त्यहाँ धेरै अर्धिक HTML ट्यागहरू छन् जुन तपाईले मानक-अनुपालन वेबसाइट निर्माण गरेमा प्रयोग गर्न सकिन्छ।
किन तपाईं सिमेन्टिक्सको बारेमा हेरचाह गर्नुपर्छ
सेन्टन्टिक एचटीटीटी लेखनको फाइदा कुनै पनि वेब पेजको ड्राइभिङ लक्ष्य - संवाद गर्न चाहानुहुन्छ के हो। तपाईंको कागजातमा सेन्टमेन्ट ट्यागहरू थप्दा, तपाइँ त्यस कागजातको बारेमा अतिरिक्त जानकारी प्रदान गर्दछ, जुन सम्पर्कमा एड्स हुन्छ। विशेष गरी, शास्त्रीय ट्यागले ब्राउजरलाई स्पष्ट पार्छ जुन पृष्ठको अर्थ र यसको सामग्री हो।
त्यो स्पष्टता खोजी इन्जिनसँग पनि कुराकानी गरिएको छ, पक्का सही प्रश्नहरूको लागि दायाँ पानाहरू डेलिभर गरिन्छन्।
सेमीन्टिक एचटीएमएल ट्यागले ती ट्यागहरूको सामग्रीहरूको बारे जानकारी प्रदान गर्दछ जुन बाहिर पृष्ठमा जान्छ कि कसरी बाहिर जान्छ। पाठ जो कोड ट्यागमा तुरुन्त ब्राउजर द्वारा केही प्रकारको कोडिङ भाषाको रुपमा पहिचान गरिएको छ।
त्यस कोड सट्टा गर्न प्रयास गर्नुको सट्टा, ब्राउजरले तपाईंलाई पाठ वा उदाहरणको उद्देश्यका लागि कोडको उदाहरण वा केही प्रकारको अनलाइन ट्यूटोरियलको रूपमा प्रयोग गर्दै जान्छ।
सेन्टटिक ट्यागहरू प्रयोग गर्दै तपाईंलाई तपाईंको सामग्री स्टाइलको लागि धेरै अधिक हक्स दिन्छ। सायद आज तपाईका कोड नमूनाहरू पूर्वनिर्धारित ब्राउजर शैलीमा प्रदर्शन गर्न मनपर्छ, तर भोलि, तपाइँ तिनीहरूलाई खैरो पृष्ठभूमिको रंगमा कल गर्न चाहानुहुन्छ, र पछि तपाइँका लागि प्रयोग गर्न सटीक मोनो-स्पेस फन्ट परिवार वा फन्ट स्ट्याकलाई परिभाषित गर्न चाहानुहुन्छ। तिम्रो नमूनाहरू। तपाईं सामरिक मार्कअप प्रयोग गरेर स्मार्टफोनले सीएसएस प्रयोग गरी यी सबै चीजहरू सजिलै संग गर्न सक्नुहुनेछ।
सही तरिकाले सेमीटिक ट्यागहरू प्रयोग गर्नुहोस्
जब तपाइँ प्रस्तुति उद्देश्यका लागि अर्थ सार्नको लागि सेमीन्ट ट्यागहरू प्रयोग गर्न चाहानुहुन्छ, तपाईंलाई सावधान रहनु आवश्यक छ कि तपाइँ तिनीहरूलाई सामान्य प्रदर्शन गुणहरूको लागि गलत प्रयोग नगर्नुहोस्। केहि सामान्यतया दुर्व्यवहार सेमेन्ट ट्यागहरू समावेश छन्:
- ब्लकक्टेट - केही व्यक्तिले पाठको इन्डेन्टिंगको लागि ट्याग प्रयोग गर्दछ जुन एक उद्धरण छैन। यो कारण हो किनभने ब्लकक्वोटहरू पूर्वनिर्धारितद्वारा इन्डेन्टेड छन्। यदि तपाइँ मात्र इन्डेन्टेसनको फाईदाहरू चाहानुहुन्छ भने, तर पाठ ब्लककुटो छैन, यसको सट्टा CSS मार्जिन प्रयोग गर्नुहोस्।
- p - केहि वेब सम्पादकहरू
& nbsp; (एक paragraphoph मा निहित गैर-ब्रेकिंग स्पेस प्रयोग गर्दछ) पृष्ठको तत्वको बीचमा अतिरिक्त स्पेस थप्न को लागी, वास्तविक पृष्ठ अनुच्छेदको लागि वास्तविक अनुच्छेद परिभाषित गर्नु। पहिले उल्लेख गरिएको इन्डेन्टिंग उदाहरणको रूपमा, तपाइँले स्पेस थप्नको लागि मार्जिन वा प्याडिङ शैली गुण प्रयोग गर्नुपर्छ।
- ul - blockquote जस्तै,
ट्याग इन्डेन्ट भित्र टेक्स्ट संलग्न गर्नुहोस् जुन अधिकांश ब्राउजरहरूमा पाठ। यो दुवै semantically गलत र अमान्य एचटीएमएल हो, किनकि केवल - ट्याग एक
ट्याग भित्र वैध छ। फेरि, इन्डेन्टमा मार्जिन वा प्याडिङ शैली प्रयोग गर्नुहोस्।
- h1-h6 - हेडिंग ट्याग फन्टहरू ठूलो बनाउन र बोल्डर गर्न प्रयोग गर्न सकिन्छ, तर यदि पाठ शीर्षक होइन, यो हेडिंग ट्याग भित्र हुनुपर्दैन। यदि तपाईं आफ्नो पृष्ठमा विशिष्ट पाठको साइज वा वजन परिवर्तन गर्न चाहनु भएको बट्टा फन्ट-वजन र फन्ट साइज गुणहरू प्रयोग गर्नुहोस्।
एचटीएमएल ट्यागहरू प्रयोग गरेर अर्थ राख्नु भएको छ, तपाईले पृष्ठहरू सिर्जना गर्नुहुने छ जुन थप जानकारी प्रदान गर्दछ जुन
ट्यागहरूसँगको वरपरको वरपरको वरपरको तुलनामा।
कुन HTML ट्याग Semantic?
जबकि लगभग प्रत्येक एचटीएमएल 4 ट्याग र सबै एचटीएमएल 5 ट्यागहरू एक अर्थपूर्ण अर्थ छ, केहि ट्यागहरू मुख्य रूपमा अर्थशास्त्रमा हुन्छन्।
उदाहरणका लागि, HTML5 ले र ट्यागहरू अर्थपूर्ण बनाउन अर्थलाई परिभाषित गरेको छ। ट्यागले थप महत्त्व बुझ्दैन, तर सामान्यतया पाठ बोल्डमा गाईएको छ। ट्यागले पनि थप महत्त्व वा जोड दिदैन, तर सामान्यतया इटालिकमा प्रदान गरिएको पाठलाई परिभाषित गर्दछ।
सेन्टिकल एचटीएमएल ट्यागहरू
संक्षिप्त <परिवर्णी> अंग्रेजी
लामो उद्धरण परिभाषा <ठेगाना> कागजातको लेखक (हरू) को ठेगाना उद्धरण कोड सन्दर्भ टेलेट टाइप पाठ तार्किक विभाजन सामान्य इनलाइन शैली कन्टेनर मेटाईएको पाठ सम्मिलित पाठ जोड बलियो जोड
पहिलो स्तर शीर्षक
दोस्रो स्तर शीर्षक
तेस्रो-स्तर शीर्षक
चौथो-स्तर शीर्षक
पाँचौं स्तरको शीर्षक
छैट-स्तर शीर्षक
थ्योटिक ब्रेक प्रयोगकर्ता द्वारा प्रविष्ट गरिएको पाठ
पूर्व-ढाँचा पाठ
छोटो इनलाइन उद्धरण नमूना उत्पादन <उप> सब्सक्रिप्ट Superscript चल वा प्रयोगकर्ता परिभाषित पाठ