लोगो लोगो के लिए लोगो तत्व के लिए किस टैग का उपयोग किया जाना चाहिए?

मैंने पढ़ा है कि <h1> टैग is inappropriate for a logo। लेकिन अगर आपका लोगो सादा पाठ है, तो आपको क्या उपयोग करना चाहिए? मुझे लगता है कि <p> और <span> भी अनुपयुक्त हैं। यहां एक नमूना है:लोगो लोगो के लिए लोगो तत्व के लिए किस टैग का उपयोग किया जाना चाहिए?

<header> 
    <nav> 
    <a id="logo" href="."> 
     <span>Company Name</span> 
    </a> 
    <a id="linkOne" href="#thingOne"> 
     <img src="…"> 
    </a> 
    <a id="linkTwo" href="#thingTwo"> 
     <img src="…"> 
    </a> 
    <a id="linkThree" href="#thingThree"> 
     <img src="…"> 
    </a> 
    </nav> 
</header>

धन्यवाद!

स्रोत

2016-02-12 Mike

अपने मार्कअप उदाहरण देखते हुए, आप nav तत्व में एक लिंक के बारे में पूछने लगते हैं। यदि ऐसा है, तो आपको इसके लिए एक शीर्षक तत्व का उपयोग नहीं करना चाहिए, क्योंकि शीर्षक तत्व nav सेक्शन लेबल करेगा (संभवतः यह नहीं है कि आप क्या व्यक्त करना चाहते हैं; यदि आपके पास nav में शीर्षक होगा, तो शायद यह " पथ प्रदर्शन")। यदि आप साइट नाम है कि हो जाता है के बारे में बात

<header> 
    <nav> 
    <ul> 
     <li><a id="logo" href="." rel="home">Company Name</a></li> 
     <li><a id="linkOne" href="#thingOne"><img src="…" alt="…"></a></li> 
     <li><a id="linkTwo" href="#thingTwo"><img src="…" alt="…"></a></li> 
     <li><a id="linkThree" href="#thingThree"><img src="…" alt="…"></a></li> 
    </ul> 
    </nav> 
</header>

हालांकि,:

उस मामले में, आप बिल्कुल एक विशेष तत्व की जरूरत नहीं होगी, बस nav में लिंक की सूची (आदर्श एक ul अंदर), (आमतौर पर) h1 का उपयोग करते हुए प्रत्येक पृष्ठ पर साइट-व्यापी बैनर/हेडर में दिखाया गया है, क्योंकि यह साइट का प्रतिनिधित्व करता है, जिसमें पृष्ठ के सभी वर्गों का दायरा होना चाहिए (उदाहरण के लिए, साइट-व्यापी नेविगेशन), और यह दस्तावेज़ को एक शीर्ष-स्तरीय लेबल की रूपरेखा देता है (जिसे अन्यथा निर्दिष्ट नहीं किया जाएगा)। उस स्थिति में यह nav का हिस्सा नहीं होना चाहिए; इसका निकटतम खंड body खंडन रूट होना चाहिए।

अर्थात्, साइट नाम/लोगो छवि या टेक्स्ट के रूप में दिखाया गया है, तो इससे कोई फर्क नहीं पड़ता।किसी छवि के मामले में, alt विशेषता पाठ के समान समकक्ष सामग्री प्रदान करती है।

तो एक साइट के लोगो के लिए आप हो सकता है:

<body> 
    <header> 
    <h1><a href="/" rel="home"><img src="…" alt="ACME Inc."></a></h1> 
    </header> 
</body>

और एक साइट का नाम के लिए आप हो सकता है:

<body> 
    <header> 
    <h1><a href="/" rel="home">ACME Inc.</a></h1> 
    </header> 
</body>

स्रोत

2016-02-13 01:38:30 unor

मेरा मानना है कि टैग अधिकतर आपके ऊपर होगा।

मुझे नहीं लगता कि यह एच 1 क्यों नहीं होना चाहिए, यह सादा पाठ दिया गया है।

लेकिन आपके मामले का विश्लेषण, यह वही है जो मैं करूँगा।

विकल्प 1. एच 1 का उपयोग करें और इसे लोगो को प्रदर्शित करने के लिए उपयोग किए जाने वाले टैग के रूप में निर्धारित करें। कभी भी यह डोम में इस्तेमाल नहीं किया जाना चाहिए।

विकल्प 2. लोगो के लिए एक नया टैग बनाएं, जैसे कि। इन्हें "कस्टम तत्व" कहा जाता है। इसे इस तरह कुछ जाना चाहिए:

var logo = document.registerElement('com-logo', { 
    prototype: Object.create(HTMLElement.prototype) 
});

फिर आपको लोगो को सीएसएस के साथ प्रारूपित करना होगा।

this पढ़ें कस्टम तत्वों के बारे में थोड़ा और अधिक जानने के लिए! :)

स्रोत

2016-02-12 20:23:42

मैं अपने खुद के तत्व बनाने के बारे में यकीन नहीं है। मैं इसे सीधे एक टैग में छोड़ने का लुत्फ उठा रहा हूं। लेकिन जहां मैंने इसे एच 1 टैग के बारे में पढ़ा है: http://www.fastcompany.com/3016894/should-your-tag-be-your-logo – Mike

नहीं "अर्थ" जिस तरह से (अर्थात वाक्य रचना), HTML में एक लोगो मार्कअप करने के लिए तो एक बुनियादी स्तर पर कोई सही या गलत तरीका है नहीं है। उस ने कहा, मैं लोगो के लिए <h1> का उपयोग नहीं करता, क्योंकि शीर्षक-टैग को आपके HTML को ढांचा बनाना चाहिए।

मैं आमतौर पर एक पृष्ठभूमि छवि के रूप में लोगो के साथ एक सरल <div> या <a> उपयोग करें, क्योंकि मुझे लगता है कि सबसे अच्छा तरीका है कि स्क्रीन रीडर्स से छिपाना है। स्पष्ट रूप से मुझे के रूप में लोगो को <section> में डालने का अधिक महत्व नहीं दिख रहा है क्योंकि किसी अनुभाग में सामग्री के विषयगत समूह को शामिल करना चाहिए।

आपके मामले में, मैं आपके <a> को inline-block के रूप में प्रारूपित करता हूं और लोगो को पृष्ठभूमि छवि के रूप में सेट करता हूं।

स्रोत

2016-02-12 20:37:30

लोगो सादा पाठ है, छवि नहीं। – Mike

फिर क्यों न केवल -tag का उपयोग करें? –

यही वह है जो मैंने कर दिया। सरल, सही? मैं सिर्फ यह जांच कर रहा था कि यह सबसे अच्छा अर्थपूर्ण विकल्प था या नहीं। शायद यह एक मूर्ख सवाल था। – Mike

लोगो लोगो के लिए लोगो तत्व के लिए किस टैग का उपयोग किया जाना चाहिए?

उत्तर

संबंधित मुद्दे