जब हम सीएसएस का उपयोग कर सकते हैं तो हमें पी, स्पान, एचएक्स टैग जैसे टैग का उपयोग क्यों करना चाहिए?

43

जब हम सीएसएस का उपयोग कर सकते हैं तो हमें पी, स्पान, एचएक्स टैग जैसे टैग का उपयोग क्यों करना चाहिए? क्या यह एसईओ दृष्टिकोण से महत्वपूर्ण है?

seo html css

— sangee
स्रोत

2

मैं देखता हूं कि आप एचएक्स टैग होने का नाटक करने के लिए सीएसएस को स्पैन या पी टैग के साथ कैसे उपयोग कर सकते हैं, लेकिन आप सीएसएस का उपयोग कैसे भी टेक्स्ट के बिना पी या स्पैन टैग के बिना कर सकते हैं?

— जोशाहेद्लुंड

एक आधा झपकी, आधा गंभीर प्रतिक्रिया है: उनके बिना करने की कोशिश करें। <span>सब कुछ के लिए उपयोग करें और देखें कि क्या आप अकेले सीएसएस के साथ जो चाहते हैं उसे पूरा कर सकते हैं। आप सही स्पैन को लक्षित करने और उन्हें अन्य तत्वों की तरह व्यवहार करने की कोशिश करने से बहुत कुछ सीखेंगे। (हालांकि सबसे अच्छा सबक यह है कि "ऐसा मत करो।")

— नाथन लॉन्ग

67

संक्षिप्त संस्करण यह है कि विभिन्न टैग और सीएसएस के अलग-अलग उद्देश्य हैं।

<h1>Whatever</h1>, उदाहरण के लिए, इसके उपयोग के साथ अर्थ की एक निश्चित राशि वहन करती है: "यह एक हेडर है, एक महत्वपूर्ण-प्रथम-स्तरीय एक" और इसी तरह। कुछ पार्सर दस्तावेज़ की संरचना की रूपरेखा तैयार करने के लिए hx टैग्स (और अन्य) का भी उपयोग करते हैं, जिनका उपयोग डेटा प्रोसेसिंग से एक्सेसिबिलिटी तक किसी भी चीज़ के लिए किया जा सकता है (उदाहरण के लिए, स्क्रीनसेवर अगले h3 पर स्किप करके वेबमास्टर्स होमपेज पर अगले प्रश्न पर जाएं)। ।

आप सीएसएस के साथ क्या कर सकते हैं और इसके विपरीत के आधार पर शब्दार्थ टैग को खारिज नहीं कर सकते।
आप सीएसएस को दूसरे टैग पर लागू कर सकते हैं ताकि यह h1 के समान दिख सके, जैसे: <span style="font-weight:bold;font-size:2em">Whatever</span>लेकिन फिर भी यह स्पैन टैग को फ़ंक्शन और शब्दार्थ के संदर्भ में वास्तविक शीर्षक नहीं बनाता है । इस मामले में, ऊपर बताई गई यह रूपरेखा मुझे बहुत असंभव लगेगी, क्योंकि वे स्पैन हेडर नहीं हैं, लेकिन सिर्फ कुछ टेक्स्ट जो आपने मनमाने ढंग से बड़े और बोल्ड किए हैं।

— र '
स्रोत

41

मार्कअप और प्रस्तुति अलग हैं

यह पूछना थोड़ा सा है "जब हमारे पास पेंट है तो हमें दीवारें क्यों होनी चाहिए?" :)

HTML टैग दर्शाता है कि आपकी सामग्री क्या है - यह एक शीर्षक है, यह एक सूची है, आदि।

सीएसएस दर्शाता है कि आपकी सामग्री कैसी दिखनी चाहिए - सुर्खियाँ नीली होनी चाहिए, सूचियाँ इस पर बहुत अधिक होनी चाहिए, मेनू बाईं ओर होना चाहिए, आदि।

जावास्क्रिप्ट बताता है कि आपके पृष्ठ को कैसे व्यवहार करना चाहिए - एनिमेशन, आदि।

तो, HTML सामग्री के बिना, सीएसएस और जावास्क्रिप्ट वास्तव में काम करने के लिए कुछ भी नहीं है।

ये श्रेणियां 100% काले और सफेद नहीं हैं - उदाहरण के लिए, CSS अब "बदलाव" निर्दिष्ट कर सकते हैं, जो एनिमेशन हैं - लेकिन वे मूल विचार हैं।

कृपया StackOverflow पर इस विषय पर पिछले चर्चाओं को देखने के लिए यहां और यहां ।

अच्छा मार्कअप प्रयास की एक टन बचाता है और बेहतर काम करता है

यदि आप एक लिंक की तरह व्यवहार करना चाहते हैं, तो आप <span class="mylink">सीएसएस और जेएस के एक गुच्छा का उपयोग और उपयोग कर सकते हैं ताकि यह सही दिखे और महसूस करे। या आप बस एक <a>तत्व का उपयोग कर सकते हैं और सभी को मुफ्त में डाउनलोड करने के लिए कोई अतिरिक्त कोड नहीं मिल सकता है, क्योंकि ब्राउज़र पहले से ही जानते हैं कि क्या करना है और तर्क को तेज, देशी कोड में लागू करना है। इसके अलावा स्क्रीन रीडर, मोबाइल ब्राउज़र, सर्च इंजन, एग्रीगेटर और आपके द्वारा उपयोग किए गए अन्य मामलों के लिए सही तरीके से काम करने की बहुत अधिक संभावना है।

यह भी है कि आपको <button>क्लिक करने योग्य कार्यों के लिए, ए <label>को लेबल करने के लिए <input>, और <main>आपके पृष्ठ के मुख्य अनुभाग के लिए उपयोग करना चाहिए ।

अच्छा मार्कअप एसईओ को कैसे प्रभावित करता है

मूल रूप से, एसईओ खोज इंजनों को समझाने के बारे में है कि आपकी सामग्री खोज शब्द के लिए सबसे अच्छा मेल है। जाहिर है, Google का कोई भी व्यक्ति व्यक्तिगत रूप से हर वेब पेज को नहीं पढ़ रहा है और न ही उसे रैंकिंग दे रहा है।

इसलिए, खोज इंजन के लिए यह जानने के लिए कि आपकी सामग्री क्या है, एक कार्यक्रम को इसे पार्स करना है।

और हे, देखो! हमारे पास यह पूरी भाषा है जिसे एचटीएमएल कहा जाता है जो आपकी सामग्री को इस तरह से लेबल करने के लिए है जिसे मशीनें समझ सकती हैं! :)

तो हाँ, स्पष्ट मार्कअप खोज इंजन को आपके पृष्ठों को बेहतर ढंग से अनुक्रमित करने में मदद करेगा।

एक चरम उदाहरण का उपयोग करने के लिए, यदि आपके पृष्ठ की शीर्षक वास्तव में एक तस्वीर थी जिसे आपने एक समाचार पत्र की शीर्षक के रूप में लिया था, तो यह दिलचस्प लग सकता है, और लोग इसे ठीक-ठीक पढ़ सकते हैं, लेकिन एक खोज इंजन के लिए, यह सिर्फ एक छवि होगी जिसका कोई अर्थ नहीं है । जबकि <h1>Turtle Groomer 5000</h1>खोज इंजन को स्पष्ट रूप से बताता है कि आपके पास एक उत्पाद है जो वृषण स्वच्छता की सुविधा देता है।

— नाथन लोंग
स्रोत

2

"हमारे पास पेंट होने पर दीवारें क्यों होनी चाहिए?" ~ यह एक अद्भुत सवाल है? धन्यवाद!

— एविक जेम्स

मुझे लगता है कि टैग नाम मार्कअप का भ्रामक हिस्सा हैं - एच 1, एच 2 आदि का उपयोग स्क्रीन रीडर के साथ-साथ इसे देखने वाले लोगों द्वारा भी किया जा सकता है। कि कहा है, दुनिया के 99% का पृष्ठ दिखाई देगा, और इसलिए के रूप में ज्यादा के रूप में यह एसईओ प्रेमियों विचलित, एच टैग कर रहे हैं जैसे, दृश्य मार्करों <b>मतलब बोल्ड एक बार।

— क्रिस एस

@ क्रिस - मुझे नहीं लगता कि यह भ्रामक है। टैग हमेशा मशीनों द्वारा पढ़ने के लिए होते हैं; जिसमें ब्राउज़र केवल स्क्रीन रीडर के रूप में शामिल हैं। और नहीं <h1>, वास्तव में एक दृश्य मार्कर नहीं है। अधिकांश ब्राउज़र इसे बड़े और बोल्ड प्रदर्शित करेंगे यदि उन्हें अन्यथा नहीं बताया गया है, लेकिन पृष्ठ की शैली, या उपयोगकर्ता की अपनी प्राथमिकताएं, इसे ओवरराइड कर सकती हैं। <h1>अर्थ का एक संकेतक है: 'यह मेरी मुख्य शीर्षक है।' यदि साइट या उपयोगकर्ता मुख्य सुर्खियों में छोटा और नारंगी होना चाहते हैं, तो वे यही देखेंगे।

— नाथन लॉन्ग

1

"जैसा <b> एक बार बोल्ड का मतलब था" - क्या किसी <b>ने मुझे बिना बताए अर्थ बदल दिया? यह अभी भी बोल्ड का मतलब यह नहीं है? बेशक, मैं शब्दार्थ टैग पसंद करता हूं, <em>और <strong>...

— ghoppe

13

कृपया किसी प्रकार की हानि वाले लोगों के बारे में भी सोचें, जिन्हें (उदाहरण के लिए) ब्रेल रीडर का उपयोग करना है। ऐसे मामलों में विज़ुअल सीएसएस स्टाइलिंग की तुलना में html टैग अधिक महत्वपूर्ण हैं।

— user899435
स्रोत

10

सु ने उत्तरार्थ भाग का उत्तर दिया। एसईओ के संबंध में, आप पाएंगे कि h1 तत्व को अन्य टैग की तुलना में खोज इंजन द्वारा अधिक भार दिया गया है। नियमित पाठ की तुलना में h2 / b / मजबूत टैग को थोड़ा अधिक वजन दिया जाता है।

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

— DisgruntledGoat
स्रोत

यह दिलचस्प है। क्या इसके लिए आपके पास स्रोत है?

— user606723

3

@ user606723 कौन सा भाग? पहला पैराग्राफ बुनियादी एसईओ ज्ञान है, और Google के अपने एसईओ गाइड (पीडीएफ) में उल्लेख किया गया है । मुझे नहीं पता कि तालिकाओं की बात कहीं भी दर्ज की गई है, लेकिन मैंने इसे खोज परिणामों में कुछ बार देखा है - वे लक्ष्य पृष्ठ पर एक तालिका से 2-4 पंक्तियों को सूचीबद्ध करते हैं।

— असंतुष्टगीतगोत्र

1

अपडेट: यहां एक पोस्ट है जिसमें SERPs में टेबल का उल्लेख किया गया है: googlesystem.blogspot.com/2011/11/…

— DisgruntledGoat

1

HTML5 के लिए, HTML5 में बोल्ड और इटैलिक देखें ।

सारांश:

का प्रयोग करें <b>जब आप पाठ प्रासंगिक महत्व के बिना एक अलग शैली है, लेकिन उपयोग करना चाहते हैं <strong>जब आप एक सामग्री या एसईओ के नजरिए से अतिरिक्त महत्व है के लिए पाठ चाहते हैं।

<i>पाठ के मूड को ऑफसेट करने के लिए उपयोग करें , लेकिन <em>पाठ को सशक्त बनाने के लिए उपयोग करें।

— मार्टिन
स्रोत

3

नंबर <b> और <i> पदावनत हैं। यदि आप चाहते हैं कि आपका पाठ बोल्ट / इटैलिक दिखे, तो CSS का उपयोग करें। यदि आप बोल्ड / इटैलिक टेक्स्ट का अर्थ बताना चाहते हैं, तो <strong> और <em> का उपयोग करें।

— मिरका चिरिया

4

@iconiK किसके द्वारा पदावनत किया गया? मेरी समझ यह भी थी कि यह एचटीएमएल 5 मानक में "डी-डिप्रेस्ड" था। और अच्छे कारण के लिए - जोर के अलावा अन्य इटैलिक्स के बहुत सारे पारंपरिक उपयोग हैं [उदाहरण के लिए, पुस्तक के शीर्षक या विदेशी शब्द] - स्पष्ट रूप से "इटैलिक" के लिए एक टैग होना [सिमेंटिक टैग के बजाय] सीधे राजधानियों में डालने से अलग नहीं है। और विराम चिह्न। यदि आप का उपयोग करना चाहते हैं <span class="proper-name"> <span class="question-sentence">, हालांकि ...

— Random832

1

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

— sod

3

@sod मैं यह नहीं पूछ रहा था कि यह पदावनत क्यों हुआ , मैं इस दावे को चुनौती दे रहा था कि यह बिल्कुल ही अलग है। और यह स्पष्ट नहीं है कि पूंजीगत पत्रों और विराम चिह्नों की तुलना में इटैलिक कोई "प्रस्तुति स्वरूपण" क्यों है। यह सामग्री का हिस्सा है।

— रैंडम 832

2

@iconiK, "व्यावहारिक रूप से पदावनत" का इस बात पर कोई असर नहीं पड़ता है कि कुछ घटाया गया है या नहीं। यह देखते हुए कि उन्हें एचटीएमएल 5 कल्पना में प्रदान किया गया है और किसी भी तरह से पदावनत के रूप में सूचीबद्ध नहीं किया गया है , मुझे लगता है कि वे पदावनत नहीं हैं ।

— zzzzBov

1

इसके अलावा: विकलांगता वाले उपयोगकर्ताओं के लिए शब्दार्थ के महत्व को न भूलें। स्क्रीनरीडर सॉफ्टवेयर अंधे लोगों को उनकी विकलांगता के कारण गायब होने वाले आवश्यक संदर्भ को प्रस्तुत करने के लिए इन शब्दार्थों पर निर्भर करता है।

— mlitn
स्रोत

1

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

अगला, जबकि स्टाइलशीट महान हैं, कुछ डिवाइस स्टाइलशीट को नजरअंदाज करेंगे और केवल HTML पर ध्यान केंद्रित करेंगे, जहां एक टैग जैसा <em>काम आता है। यदि स्टाइलशीट को अक्षम कर दिया गया था या इसे लोड करने में कोई समस्या थी (उदाहरण के लिए, इंटरनेट कनेक्शन की समस्याएं), तो पाठ अभी भी स्वरूपित दिखाई देता है। <em>यह भी बता सकते हैं कि शब्द पर जोर दिया जाना चाहिए, जबकि अकेले इटैलिक्स एक फिल्म शीर्षक से कुछ भी हो सकता है, बस एक छवि कैप्शन बनाने के लिए नियमित पाठ से भिन्न होता है। इसका उपयोग विकलांगता साधनों का उपयोग करने वालों द्वारा किया जा सकता है, जो आमतौर पर जोर पकड़ने में विफल होते हैं।

<span>दूसरी ओर, मोटे तौर पर <div>टैग का एक इनलाइन संस्करण है , और यदि कुछ भी है, तो यह आपको अतिरिक्त कक्षा में टाइप करने से बचा सकता है (इसके साथ ही कहा जा रहा है, क्या आप वास्तव में प्रत्येक इटैलिक उदाहरण के <span class="italic">बजाय उपयोग करना चाहते हैं <i>आपके पास है; यह कोड को पढ़ना कठिन बनाता है, कम मानकीकृत (व्यापक धारणा के तहत कि अधिकांश लोग पूर्व में उत्तरार्द्ध का उपयोग करेंगे), और किसी भी तरह से दस्तावेज़ को नहीं बढ़ाता है।

<p>विकलांग लोगों के लिए भी काम आता है, क्योंकि यह सुनिश्चित करता है कि पाठ को एक तरह से प्रबंधनीय पैराग्राफ में तोड़ा <br />जा सकता है।

यकीन है, हम कह सकते हैं कि HTML स्टाइल के लिए नहीं था, लेकिन डिजाइन और शैली के बीच एक नाजुक रेखा है; और स्पष्ट रूप से, मैं कहूंगा कि उपयोगकर्ता प्राथमिकता होना चाहिए। चाहे आप का उपयोग करें <i>या <span class="italic">, यह आपके ऊपर है, और एसईओ के लिए कोई फर्क नहीं पड़ेगा। आखिर, हमें सिर्फ एक ही काम करने का तरीका सीमित क्यों है? (जैसे हम जावास्क्रिप्ट में लाइनों के सिरों पर अर्धविराम का उपयोग कर सकते हैं या नहीं, यह मैं कैसे चुन सकता हूं - मैं हमेशा उनका उपयोग करता हूं, जबकि अन्य कभी भी उनका उपयोग नहीं करते हैं, और इससे कार्यक्षमता के लिए कोई फर्क नहीं पड़ता है।)

— माइक
स्रोत