जो अधिक सही है: <h1> <a>… </a> </ h1> या <a> <h1>… </ h1> </a>

Question

दोनों <h1><a ...> ... </a></h1>और <a ...><h1> ... </h1></a>मान्य HTML हैं, या केवल एक ही सही है? यदि वे दोनों सही हैं, तो क्या वे अर्थ में भिन्न हैं?

Answer 1

दोनों संस्करण सही हैं। उनके बीच सबसे बड़ा अंतर यह है कि <h1><a>..</a></h1>शीर्षक में केवल पाठ के मामले में क्लिक करने योग्य होगा।

यदि आप <a>चारों ओर डालते हैं <h1>और सीएसएस displayसंपत्ति है block(जो कि डिफ़ॉल्ट रूप से है) पूरे ब्लॉक ( <h1>और कंटेनर की चौड़ाई की 100% की चौड़ाई <h1>) में क्लिक करने योग्य होगा।

ऐतिहासिक रूप से आप एक इनलाइन तत्व के अंदर एक ब्लॉक एलिमेंट नहीं डाल सकते हैं, लेकिन HTML5 के साथ ऐसा नहीं है। मुझे लगता है कि <h1><a>..</a></h1>दृष्टिकोण अधिक पारंपरिक है।

इस मामले में जहां आप शीर्षक पर एक लंगर डालना चाहते में, तुलना में एक बेहतर दृष्टिकोण <a id="my-anchor"><h1>..</h1></a>का उपयोग या तो होगा idया nameइस तरह विशेषता: <h1 id="my-anchor">..</h1>या<h1 name="my-anchor">..</h1>

Comments

यहाँ और अधिक संदर्भ: stackoverflow.com/questions/6061869/…

— थोरान

<a> <h1> .. </ h1> </a> HTML 5 के लिए बेहतर ध्वनि है क्योंकि यह स्पर्श डिवाइस उपयोगकर्ताओं को एक बड़ा क्लिक लक्ष्य देता है, है ना?

— Acyra

जब एक शीर्षक और उपशाखा दोनों एक ही सामग्री से लिंक करते हैं, तो यह नेत्रहीन रूप से दोनों को एक ही में लपेटने के लिए अधिक आकर्षक होता है <a>ताकि वे एक मंडराना स्थिति साझा करें: jsfiddle.net/jjyLemq2

— स्लैम

Answer 2

पूर्व HTML 5 में यह एक

<a><h1>..</h1></a>

मान्य नहीं होगा। आप इसे HTML 5 में उपयोग कर सकते हैं। हालाँकि, मैं इसका उपयोग करूंगा:

<h1><a>..</a></h1>

जब तक आपको <a> के अंदर <h1> से अधिक जोड़ने की आवश्यकता न हो

Answer 3

<a><h1></h1></a>W3C मान्य नहीं है ... मूल रूप से, आप इनलाइन तत्वों के अंदर ब्लॉक तत्व नहीं डाल सकते हैं

Comments

यह HTML 5 में वैध है

— vaidas

हाँ .. लेकिन किसी तरह मुझे लगता है कि एक लिंक के अंदर ब्लॉक तत्व डालने थोड़े मैला (व्यक्तिगत राय) है, जैसे टैग को बंद नहीं करना (एचटीएमएल 5 में मान्य) .. लेकिन हे! .. शायद यह एसईओ पर प्रभाव

— डालता है

Answer 4

<h1><a>..</a></h1>और <a><h1>..</h1></a>हमेशा लगभग एक ही व्यवहार किया है, जब शैली की चादरें प्रतिपादन को प्रभावित नहीं करती हैं। लगभग, लेकिन काफी नहीं। यदि आप टैब कुंजी का उपयोग करके नेविगेट करते हैं या किसी लिंक पर ध्यान केंद्रित करते हैं, तो अधिकांश ब्राउज़र में लिंक के चारों ओर "फोकस आयत" दिखाई देता है। इसके लिए <h1><a>..</a></h1>, यह आयत केवल लिंक पाठ के आसपास है। के लिए <a><h1>..</h1></a>, आयत उपलब्ध क्षैतिज स्थान में फैली हुई है, क्योंकि मार्कअप aतत्व को रेंडर करने में एक ब्लॉक तत्व बनाता है , जो डिफ़ॉल्ट रूप से 100% चौड़ाई पर कब्जा कर लेता है ।

निम्नलिखित दिखाता है कि <a href=foo><h1>link</h1></a>क्रोम द्वारा कैसे ध्यान केंद्रित किया गया है:

इसका तात्पर्य यह है कि यदि आप लिंक के लिए पृष्ठभूमि रंग सेट करके तत्वों को शैली देते हैं, तो प्रभाव समान तरीके से भिन्न होते हैं।

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

एक शीर्षक में एक शीर्षक या पाठ बनाने के लिए एक अच्छा कारण है। (यह प्रयोज्यता के लिए अधिकांशतः अतार्किक और बुरा है।) लेकिन एक ऐसा ही सवाल अक्सर उठता रहा है जब किसी शीर्षक के लिए एक संभावित गंतव्य शीर्षक (या शीर्षक में पाठ) का उपयोग करते हुए, उदाहरण के लिए <h2><a name=foo>...</a></h2>बनाम <a name=foo><h2>...</h2></a>। इसी तरह के विचार इस पर लागू होते हैं (दोनों काम करते हैं, अंतर हो सकता है क्योंकि उत्तरार्द्ध aतत्व को एक ब्लॉक बनाता है , और एचटीएमएल 5 से पहले, केवल पूर्व को औपचारिक रूप से अनुमति दी जाती है)। लेकिन इसके अलावा, दोनों तरीके पुराने हैं, और idशीर्षक तत्व पर सीधे विशेषता का उपयोग करना अब अनुशंसित है <h2 id=foo>...</h2>:।

Comments

"There is seldom a good reason to make a heading or text in a heading a link"-> मुझे उस पर असहमत होना चाहिए। हेडिंग को लिंक बनाने के वास्तव में बहुत अच्छे कारण हैं। उदाहरण दिया गया: ब्लॉग पोस्ट की एक सूची, जहाँ प्रत्येक शीर्षक एक लिंक भी है। या स्वयं SOUT चेकआउट करें: फ्रंटपेज पर सभी प्रश्न h3तत्व हैं, और एक लिंक भी। वैसे भी, अच्छी व्याख्या;)

— जियोर्जियो

@giorgio, उदाहरण के लिए आपके द्वारा उल्लिखित SO लिंक प्रयोज्य के लिए खराब हैं: पेज को संदर्भित करने के लिए लिंक बनाना व्यर्थ और भ्रमित करने वाला है।

— जुक्का के। कोर्पेला

खैर, मेरा मतलब है कि होमपेज पर एसओ लिंक, जो उपयोगकर्ता को किसी अन्य पेज, विशेष रूप से प्रश्न पृष्ठ पर निर्देशित करते हैं। और हाँ, प्रश्न पृष्ठ पर हैडर में लिंक (पूरी तरह से) बेकार है, लेकिन यह प्रयोज्य के लिए आवश्यक रूप से खराब नहीं करता है। मुख्य कारण एसईओ है (हालांकि प्रश्न पृष्ठ पर)।

— जियोर्जियो

उस लूपबैक h1 एसईओ बात प्रयोज्य के लिए कुछ बुरा है। एक पृष्ठ (h1) के शीर्षक ने एक स्क्रीनरीडर को कहीं और लिंक देने की घोषणा क्यों की? यह बहुत भ्रामक है। और इसी कारण से, सब-हेडिंग में एक लिंक होने से भ्रम होता है, जब किसी चीज़ को पेज के भीतर एक सेक्शन का शीर्षक और दूसरे पेज का शीर्षक भी होता है।

— एडम

Answer 5

एच 1 तत्व ब्लॉक स्तर के तत्व हैं, और एंकर इनलाइन तत्व हैं। आपको एक ब्लॉक स्तर तत्व के भीतर एक इनलाइन तत्व रखने की अनुमति है, लेकिन दूसरे तरीके के आसपास नहीं। जब आप बॉक्स मॉडल और HTML कल्पना पर विचार करते हैं तो यह समझ में आता है।

तो निष्कर्ष में सबसे अच्छा तरीका है:

<h1><a href="#">Link</a></h1>

Comments

"यह समझ में आता है" , आप किसी भी स्पष्टीकरण के बिना गुप्त रूप से क्यों कहते हैं, लेकिन एक इनलाइन तत्व के भीतर एक ब्लॉक-स्तरीय तत्व का व्यवहार निर्दिष्ट है । इनलाइन तत्वों के अंदर ब्लॉक-स्तरीय तत्वों का होना कभी गलत नहीं रहा है। क्या अधिक है, HTML 5 कल्पना और HTML लिविंग स्टैंडर्ड एंकर के अंदर शीर्षकों के साथ पूरी तरह से ठीक हैं। यह उत्तर केवल गलत है।

— मार्क अमेरी

Answer 6

क्या आप हाइपरलिंक का उपयोग करना चाहते हैं <a href="…">/ a:linkया क्या आप अपने शीर्षक में एक एंकर जोड़ना चाहते हैं? यदि आप एक लंगर जोड़ना चाहते हैं, तो आप बस एक आईडी असाइन कर सकते हैं <h1 id="heading">। आप तब इसे लिंक कर सकते हैं page.htm#heading।

आप शीर्षक क्लिक करने योग्य (एक लिंक) करना चाहते हैं, का उपयोग करें <h1><a></a></h1>/ h1 > a- पहली blocklevel तत्वों, और इनलाइन तत्वों के अंदर

Answer 7

इसके अलावा, शैली पदानुक्रम अंतर है। यदि आपके पास यह है <h1><a href="#">Heading here</a></h1>, तो एंकर की शैली एच 1 तत्व की शैलियों को खत्म कर देगी। उदाहरण:

a {color:red;font-size:30px;line-height:30px;}

कभी भी मिल जाएगा

h1 {color:blue;font-size:40px;line-height:40px;}

Comments

-1 क्योंकि यह सवाल (जिनमें से अधिक सही है) को बिल्कुल भी संबोधित नहीं करता है।

— मार्क अमेरी