वेब मानक में लिंक (<a> टैग) और शीर्षकों (<h1> टैग) को कैसे मिलाएं?

95

वेब मानकों के अनुसार शीर्ष 1 के साथ लिंक बनाने के लिए सही कोड क्या है?

क्या यह

<h1><a href="http://stackoverflow.com"> stackoverflow </a></h1>

या

<a href="http://stackoverflow.com"><h1> stackoverflow </h1></a>

धन्यवाद

html web-standards

— अहमद
स्रोत

143

वेब मानकों के अनुसार आपको इनलाइन तत्वों में ब्लॉक तत्वों को डालने की अनुमति नहीं है।

जैसा h1कि एक ब्लॉक एलिमेंट है और aइनलाइन एलिमेंट है सही तरीका है:

<h1><a href="#">This is a title</a></h1>

यहां एक लिंक दिया गया है ताकि आप अधिक जान सकें: w3 विज़ुअल फॉर्मेटिंग मॉडल

हालांकि, एक अपवाद है कि HTML5 में एंकर टैग में ब्लॉक-स्तरीय तत्वों (जैसे div, pया h*) को लपेटना मान्य है । एंकर के अलावा इनलाइन तत्वों में ब्लॉक-स्तरीय तत्वों को लपेटना अभी भी मानकों के खिलाफ जाता है।

— डार्को जेड
स्रोत

19

HTLM5 में यह बदल गया है। दोनों उदाहरण मान्य होंगे - validator.w3.org ।

— आत्मज

अच्छा है। यह बनाने के लिए एक आसान गलती है, और जबकि दोनों अपने तार्किक को मान्य करेंगे कि स्वाभाविक रूप से इनलाइन तत्व ब्लॉक स्तर के तत्वों के वंशज होने चाहिए।

— bigmadwolf

@pushplaybang - मैं कहूंगा कि हेडर को किसी लिंक में लपेटना अधिक अर्थिक है जब तक कि हेडर का केवल एक भाग क्लिक करने योग्य न हो (मैं उसके लिए उपयोग-केस के बारे में सोच भी नहीं सकता)। भले ही, यह अच्छा है दोनों html5 में समर्थित हैं।

— आमा

47

एचटीएमएल 5 इस विषय को अद्यतन करता है: ए के साथ ब्लॉक-स्तरीय तत्वों को लपेटना अब ठीक है, जैसा कि एक अन्य प्रश्न के तहत कहा गया है: https://stackoverflow.com/a/9782054/674965 और यहाँ: http://davidwalsh.name/html5 तत्वों-लिंक

— f055
स्रोत

8

यह उत्तर अब स्वीकृत उत्तर की तुलना में बहुत अधिक प्रासंगिक है

— जोश डेवनपोर्ट

@JoshDavenport स्वीकार किए गए उत्तर को प्रतिबिंबित करने के लिए अपडेट किया गया है कि

— dan-klasson

2

जहां तक मैं समझता हूं कि HTML5 आपको लिंक टैग में ब्लॉक स्तर के तत्वों को लपेटने की अनुमति देता है। हालाँकि, पुराने ब्राउज़र में बग दिखाई दे सकते हैं। मैंने फ़ायरफ़ॉक्स 3.6.18 के साथ इसका सामना किया और moz-rs-heading = "" अपने कोड में डाला। इस प्रकार मेरी शैली टूट गई। यदि आप किसी काम के बारे में परवाह करते हैं, तो आप div में लिंक टैग लपेट सकते हैं। अतिरिक्त कोड http://oli.jp/2009/html5-block-level-links/ क्यों काम करता है, इसका एक बेहतर विवरण निम्नलिखित है

— किप कर्म
स्रोत

1

a > h1 पाठ का चयन करने में कठिनाई का कारण होगा

चूंकि दोनों HTML5 में पूरी तरह से मान्य हैं, इसलिए इसका उपयोग करना बेहतर है h1 > a

— अभिषेक
स्रोत