सीएसएस के साथ लोगो प्रदर्शित करने का सही तरीका क्या है?

Question

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

यह अविश्वसनीय रूप से हैकिश और सुरुचिपूर्ण लगता है। ऐसा लगता है कि टेक्स्ट छिपाने के लिए सीएसएस का उपयोग करना एसईओ उद्देश्यों के लिए एक बड़ा नो-नो होगा (क्योंकि सीएसएस के माध्यम से छिपाने वाले पाठ को फेंक दिया गया है)।

मैंने यह भी पढ़ा है कि एक आईएमजी का उपयोग करने से बचा जाना चाहिए, क्योंकि लोगो स्वयं वास्तव में सामग्री नहीं है, इसलिए कोडिंग (यानी सीएसएस) के डिजाइन-पक्ष में इसे रेलेगेट किया जाना चाहिए।

इस पर वर्तमान सहमति क्या है?

Answer 1

लोगो प्रदर्शित करने का सही तरीका <img> तत्व के साथ है। यदि आपने logos and logotype का अध्ययन नहीं किया है, तो आपको शायद यह एहसास न हो कि लोगो का अपना अर्थशास्त्र है और इसे एक बहुत ही विशिष्ट तरीके से प्रस्तुत करने की आवश्यकता है। इसमें एक आवश्यक व्याख्या भी हो सकती है, जिसका उपयोग [alt] विशेषता में किया जाना चाहिए।

हैं कि आवश्यक व्याख्या वैध तरीके से पेज में एक शीर्षक है, यह एक <h#> तत्व में जोड़ने के लिए अर्थ की दृष्टि से सही होगा:

<h1> 
    <img src="logo.png" alt="Foo Co.: Where everyone can fizz the buzz" /> 
</h1> 

आमतौर पर लोगो के लिए एक कड़ी के रूप में प्रयोग किया जाता है, तो यह दिखाई देना सामान्य है :

<a href="/"> 
    <img src="logo.png"... /> 
</a> 

साथ ही लोगो पर जोर दिया जा सकता है (या तो या डिग्री के आधार पर हो सकता है):

<strong> 
    <a href="/"> 
     <img src="logo.png" ... /> 
    </a> 
</strong> 

---

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

से

Answer 2

मैं हमेशा सिर्फ एक छवि के चारों ओर एक लंगर टैग लपेट:

<a href=""><img src=""></a> 

या एक ब्लॉक के रूप में एंकर टैग बना सकते हैं और सेट एक पृष्ठभूमि छवि

<a class="logo" href="">Logo</a> 

.logo { background: url("/path") no-repeat; width: 100px; height: 100px; display: block; text-indent: -9999px;} 

Answer 3

मैं वास्तव में लगता है कि यह नहीं है मामला। ऐसा करने के कई अलग-अलग तरीके हैं, और वे सभी समर्थित हैं। वे सभी काम करते हैं। उनमें से ज्यादातर खोज इंजन के अनुकूल और पूरी तरह से सुलभ हैं।

मैं कुछ इस तरह करना होगा:

<h1><a href="/"><img src="rsc/logo.jpg" alt="Frobozz Company"></a></h1> 

खोज इंजन, पाठ-मोड ब्राउज़र और स्क्रीन रीडर वैकल्पिक पाठ, बाकी सब लोगो छवि देखता है देखते हैं।

Answer 4

अलग है तुम हमेशा लोगो प्रदर्शित करने img उपयोग करना चाहिए। h1 का उपयोग करना और पृष्ठभूमि के रूप में लोगो का उपयोग करना वास्तव में एक बुरा अभ्यास है और इससे बचा जाना चाहिए। आपका लोगो सामग्री है और h1 नहीं है।

हैरी रॉबर्ट्स स्पष्ट रूप से अपनी पोस्ट में यह स्पष्ट किया गया है - Your logo is an image, not a <h1>