क्या एंकर के अंदर तलाक देना कभी सही है?

Question

मैंने सुना है कि एक इनलाइन तत्व के अंदर एक ब्लॉक तत्व डालना एक HTML पाप है:

<a href="http://www.mydomain.com"><div>
What we have here is a problem. 
You see, an anchor element is an inline element,
and the div element is a block level element.
</div></a>

लेकिन क्या होगा अगर आप बाहरी एंकर को display:blockस्टाइलशीट में स्टाइल करते हैं ? क्या यह अभी भी गलत है? ब्लॉक स्तर और इनलाइन तत्वों पर HTML 4.01 कल्पना ऐसा लगता है:

शैली पत्रक मनमाने ढंग से तत्वों के प्रतिपादन को निर्दिष्ट करने के लिए साधन प्रदान करते हैं, जिसमें यह भी शामिल है कि कोई तत्व ब्लॉक या इनलाइन के रूप में प्रदान किया गया है या नहीं। कुछ मामलों में, जैसे सूची तत्वों के लिए एक इनलाइन शैली, यह उपयुक्त हो सकता है, लेकिन आम तौर पर बोलना, लेखकों को इस तरह से HTML तत्वों की पारंपरिक व्याख्या को ओवरराइड करने से हतोत्साहित किया जाता है।

किसी को भी इस मुद्दे के बारे में कोई और सुझाव है?

Comments

यह भी देखें: stackoverflow.com/questions/1091739/html-div-in-link-problem ।

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

@DisgruntledGoat - लिंक के लिए धन्यवाद - काश मैं जल्द ही देख लिया होता कि :-)

— टॉम

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

— बेकिम बकाज

बाकी सभी जो भविष्य में यहाँ जाँच करते हैं, कृपया ध्यान दें कि लंगर टैग एचटीएमएल 5 में ब्लॉक स्तर के तत्वों को समाहित करने में सक्षम हैं, लेकिन वे अन्य एंकर टैग वाले ब्लॉक स्तर के तत्व को शामिल नहीं कर सकते हैं! क्योंकि मूल रूप से, लंगर टैग उनके अंदर अन्य लंगर टैग नहीं हो सकते हैं। आप यहाँ पर और अधिक पढ़ सकते हैं: stackoverflow.com/questions/13052598/…

— aderchox

Answer 1

HTML के उस संस्करण के आधार पर:

• एचटीएमएल 5 बताता है कि<a>तत्व "संपूर्ण पैराग्राफ, सूचियों, तालिकाओं, और आगे, यहां तक ​​कि पूरे वर्गों के चारों ओर लपेटा जा सकता है, इसलिए जब तक कि भीतर कोई संवादात्मक सामग्री न हो (जैसे बटन या अन्य लिंक)"।

• HTML 4.01 निर्दिष्ट करता है कि<a>तत्वों में केवल इनलाइन तत्व शामिल हो सकते हैं । A<div>एक ब्लॉक एलिमेंट है , इसलिए यह a के अंदर नहीं दिखाई दे सकता है<a>।

  बेशक आप इनलाइन तत्व को स्टाइल करने के लिए स्वतंत्र हैं जैसे कि यह एक ब्लॉक प्रतीत होता है, या वास्तव में ब्लॉक को स्टाइल करता है ताकि यह इनलाइन प्रदान किया जाए। शब्दों का उपयोग inlineऔर blockHTML में तत्वों का संबंध दस्तावेज़ की शब्दार्थ संरचना से है, जबकि CSS में समान शब्द तत्वों की दृश्य शैली से संबंधित हैं। अगर आप इनलाइन एलिमेंट्स को ब्लॉकी तरीके से प्रदर्शित करते हैं, तो यह ठीक है।

  हालाँकि आपको यह सुनिश्चित करना चाहिए कि दस्तावेज़ की संरचना अभी भी समझ में आती है जब सीएसएस मौजूद नहीं है, उदाहरण के लिए जब एक सहायक तकनीक के माध्यम से पहुँचा जा सकता है जैसे कि स्क्रीन रीडर - या वास्तव में जब शक्तिशाली Googlebot द्वारा जांच की जाती है।

Comments

W3.org/TR/REC-html40/sgml/dtd.html पर 4.01 के लिए एक DTD है । A में% इनलाइन% हो सकता है; % इनलाइन% विभिन्न सामानों का एक गुच्छा है (आप लिंक का अनुसरण कर सकते हैं) लेकिन DIV उनमें से नहीं है। इस प्रकार, एक डीआईवी के साथ एक एक्सएमएल-वैध नहीं है। मुझे लगता है कि DTD समिति के इरादों को बहुत अच्छी तरह से व्यक्त करता है, इसलिए मैं कहूंगा: नहीं

— कार्ल स्मोत्रिकज़

@ ईवान: मेरे उत्तर की पहली कड़ी HTML 4.01 के संबंधित अनुभाग में है।

— NickFitz

जब तक मैं HTML5 के बारे में अंतिम पंक्ति नहीं पढ़ता, तब तक यह एक परियोजना में ऐसा करने की संभावना के बारे में था, यह जानना अच्छा है, धन्यवाद।

— ऐलेन मार्ले

मोज़िला डेवलपर नेटवर्क ( developer.mozilla.org/en-US/docs/Web/HTML/Element/a ) इस तथ्य को दर्शाता है कि HTML5 <a> तत्व अब <div>, <ul> या <table> जैसे प्रवाह सामग्री तत्वों का समर्थन करते हैं। ।

— एक्सपेफेक्ट

एचटीएमएल 5 के तहत, एक तत्व को पारदर्शी के रूप में वर्गीकृत किया गया है , जिसका अर्थ है कि इसमें प्रवाह तत्व शामिल हो सकते हैं ( डिफ़ॉल्ट = ब्लॉक पढ़ें ) केवल अगर किसी तत्व के माता-पिता में प्रवाह तत्व हो सकते हैं । अन्यथा, केवल phrasing तत्वों ( डिफ़ॉल्ट = इनलाइन पढ़ें ) की अनुमति है। इस प्रकार, यदि एक एक में है प्रपत्र या div , यह एक हो सकते हैं div , लेकिन एक के अंदर पी है, यह नहीं कर सकता। W3.org/TR/html-markup/terminology.html

— पतंजलि

Answer 2

नहीं, यह मान्य नहीं होगा, लेकिन हाँ यह आमतौर पर आधुनिक ब्राउज़रों में काम करेगा। कहा जा रहा है, अपने लंगर के अंदर एक स्पैन का उपयोग करें, और display: blockउस पर भी सेट करें, जो निश्चित रूप से हर जगह काम करेगा, और यह मान्य होगा!

Comments

यदि आप सेट करते हैं display: block, तो क्या यह तकनीकी रूप से ब्लॉक तत्व नहीं है?

— WhyNotHugo

@ ह्यूगो क्या यह तकनीकी रूप से मायने रखता है?

— एंडी चेस

खैर, HTML 4.01 निर्दिष्ट करता है कि aतत्वों में केवल इनलाइन तत्व शामिल हो सकते हैं। यदि आप एक spanतत्व को एक ब्लॉक तत्व बनाते हैं , तो यह तकनीकी रूप से, लंगर के अंदर नहीं होना चाहिए।

— WhyNotHugo

@ ह्यूगो: ऐसा प्रतीत होता है कि HTML4 में प्रतिबंध अर्थगत है, प्रस्तुतिकरण नहीं। शब्दार्थ, एक <div>ब्लॉक-स्तर है और एक <span>इनलाइन है, भले ही दस्तावेज़ के साथ सीएसएस अन्यथा निर्धारित करता है।

— रॉय टिंकर

जोड़ा गया शैली = "प्रदर्शन: ब्लॉक;" स्पैन टैग में और यह एक आकर्षण की तरह काम करता था। बस अपना वांछित परिणाम प्राप्त करने के लिए पैडिंग के साथ खेला गया

— हरिफ87

Answer 3

W3C डॉक गलत और पाप जैसी अवधारणाओं का उपयोग नहीं करता है , लेकिन यह उन जैसे साधनों का उपयोग करता है , उपयुक्त और हतोत्साहित हो सकते हैं ।

दरअसल, खंड 4 के दूसरे पैराग्राफ में , 4.01 कल्पना अपने शब्दों को निम्न प्रकार से आइटम करती है

इस दस्तावेज़ में "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALLULD", "SHOULD NOT", "RECOMMENDED", "MAY", और "OPTIONAL" प्रमुख शब्द हैं। [RFC2119] में वर्णित के रूप में व्याख्या की जाएगी। हालाँकि, पठनीयता के लिए, ये शब्द इस विनिर्देशन के सभी बड़े अक्षरों में दिखाई नहीं देते हैं।

इसे ध्यान में रखते हुए, मेरा मानना ​​है कि निश्चित कथन 7.5.3 ब्लॉक-स्तर और इनलाइन तत्वों में है , जहां यह कहता है

आम तौर पर, इनलाइन तत्वों में केवल डेटा और अन्य इनलाइन तत्व शामिल हो सकते हैं।

"आम तौर पर" स्थिति यह कहने के लिए पर्याप्त अस्पष्टता पेश करती है कि एचटीएमएल 4.01 इनलाइन तत्वों को ब्लॉक तत्वों को शामिल करने की अनुमति देता है।

निश्चित रूप से, CSS2 में एक डिस्प्ले प्रॉपर्टी वैल्यू, इनलाइन-ब्लॉक है , जो आपके द्वारा वर्णित उद्देश्य के अनुकूल प्रतीत होता है। मुझे यकीन नहीं है कि यह कभी व्यापक रूप से समर्थित था, लेकिन ऐसा लगता है कि किसी ने उस तरह के व्यवहार की आवश्यकता का अनुमान लगाया है।

डीटीडी यहां कम क्षमाशील प्रतीत होता है, लेकिन डीटीडी का पाठ युक्ति से विचलित होता है:

HTML 4.01 विनिर्देश में अतिरिक्त सिंटैक्टिक अवरोध शामिल हैं जिन्हें DTDs के भीतर व्यक्त नहीं किया जा सकता है।

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

Comments

जब तक आप सिद्धांत का उल्लेख करते हैं तब तक आप मेरे पास थे।

— रॉबर्ट हार्वे

Doctype नहीं, doctype.com

— इवान टोड

आप शायद सही हैं - मुझे doctype.com का उपयोग करना चाहिए था। विपक्ष - मैं अगली बार के आसपास याद करने की कोशिश करूंगा। PHP -> SO, HTML -> doctype.com

— Tom

मेरा टेक है "doctype.com पर विकल्प के रूप में बंद होने के लिए वोट नहीं" विकल्प (और न ही होना चाहिए)।

— रॉबर्ट हार्वे

मैं रोब से सहमत हूं - स्टैक ओवरफ्लो प्रोग्रामिंग के लिए है। HTML / CSS निश्चित रूप से मेरे विचार में प्रोग्रामिंग है।

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

Answer 4

HTML5 विनिर्देशन के साथ ... अब इनलाइन तत्व के अंदर एक ब्लॉक-स्तरीय तत्व डालना संभव है। इसलिए अब एक 'ए' तत्व के अंदर 'डिव' या 'एच 1' डालना पूरी तरह से उचित है।

Comments

केवल अंदर प्रवाह (डिफ़ॉल्ट = ब्लॉक ) तत्वों, या पारदर्शी तत्वों (जैसे एक ) माता-पिता की अनुमति के साथ प्रवाह तत्वों। उदाहरण के लिए, पी की अनुमति नहीं है प्रवाह तत्वों (जैसे div ), लेकिन केवल phrasing तत्वों (डिफ़ॉल्ट = इनलाइन ,) तो एक एक एक के अंदर पी एक नहीं हो सकते div । हालांकि, एक एक एक के अंदर div शामिल कर सकते हैं पी एस, div रों या किसी अन्य प्रवाह तत्व।

— पतंजलि

Answer 5

आप <div>अंदर नहीं डाल सकते <a>- यह मान्य (X) HTML नहीं है।

भले ही आप प्रदर्शन के साथ एक अवधि की शैली: ब्लॉक आप अभी भी इसके अंदर ब्लॉक-स्तरीय तत्व नहीं डाल सकते हैं: एक्स (एक्स) एचटीएमएल को अभी भी एक्स (एक्स) HTML डीटीडी (जो भी आप उपयोग करते हैं) का पालन करना होगा, चाहे कोई भी सीएसएस हो चीजों को बदल देता है।

ब्राउज़र शायद जैसा चाहे वैसा प्रदर्शित करेगा, लेकिन वह इसे सही नहीं बनाता है।

Answer 6

HTML 4 के लिए http://www.w3.org/TR/REC-html40/sgml/dtd.html पर एक DTD है । यह DTD कल्पना का मशीन-प्रक्रियात्मक रूप है, इस सीमा के साथ कि DTD XML और HTML 4 को नियंत्रित करता है, विशेष रूप से "क्षणिक" स्वाद, बहुत सारी चीजों की अनुमति देता है जो "कानूनी" XML नहीं हैं। फिर भी, मुझे लगता है कि यह विनिर्देशक के इरादे को संहिताबद्ध करने के करीब है।

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

<!ENTITY % fontstyle "TT | I | B | BIG | SMALL">

<!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >

<!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

मैं इस पदानुक्रम में सूचीबद्ध टैगों की व्याख्या करूँगा कि कुल टैग की अनुमति है।

हालांकि कल्पना "इनलाइन तत्वों" को कह सकती है, मुझे पूरा यकीन है कि यह इरादा नहीं है कि आप इनलाइन को ब्लॉक तत्व के प्रदर्शन प्रकार को इनलाइन घोषित करके इरादे के आसपास हो सकते हैं । इनलाइन टैग में अलग-अलग शब्दार्थ होते हैं, चाहे आप उन्हें कैसे भी गाली दें।

दूसरी ओर, मुझे यह पेचीदा लगता है कि शामिल करने से specialघोंसले के शिकार Aतत्वों को अनुमति मिलती है। इस कल्पना में शायद कुछ मजबूत शब्द है कि भले ही यह XML-syntactically सही हो, लेकिन मैं इसे आगे नहीं बढ़ाऊँगा क्योंकि यह सवाल का विषय नहीं है।

Comments

क्या आप जानते हैं - - इसका क्या मतलब है। मैंने एक स्पष्टीकरण खोजने की कोशिश की लेकिन मुझे एक नहीं मिला।

— इवान टोड

Answer 7

ब्लॉक स्तर के तत्वों को HTML5 में टैग <div>द्वारा लपेटा जा सकता है <a>। हालांकि एक <div>एक माना जाता है प्रवाह सामग्री के लिए कंटेनर / आवरण और <a>के विचार कर रहे हैं प्रवाह सामग्री के अनुसार MDN । शब्दशः इनलाइन तत्वों को बनाना बेहतर हो सकता है जो ब्लॉक स्तर के तत्वों के रूप में कार्य करते हैं।

Comments

के रूप में एक तत्व हैं पारदर्शी , की मूल तत्व ही अगर एक की अनुमति देता है प्रवाह (के रूप में डिफ़ॉल्ट ब्लॉक तत्व)।

— पतंजलि

Answer 8

यदि आप एंकर टैग के अंदर divs रखने की शब्दार्थिक परेशानी से बचना चाहते हैं, तो एंकर टैग को divs के समान स्तर पर रखें, उन सभी को स्थिति के साथ कंटेनर से लपेटें: सापेक्ष, अपने एंकर टैग की स्थिति बनाएं: निरपेक्ष और इसे विस्तारित करें कंटेनर भरें। इसके अलावा, अगर यह सामग्री प्रवाह के अंत में नहीं है, तो सुनिश्चित करें कि आप सामग्री के ऊपर रखने के लिए वहां एक z- इंडेक्स फेंकते हैं।

सुझाव के अनुसार मैंने एक मार्कअप कोड जोड़ा है:

<div class="div__container>
  <div class="div__one>
  </div>
  <div class="div__two">
  </div>
  <a href="#"></a>
</div>

और सीएसएस:

.div__container {
  position: relative; 
}
.div__container a {
  position: absolute;
  top: 0;
  bottom: 0;      
  left: 0;
  right: 0;
  z-index: 999;
}

Comments

हालांकि आपका उत्तर सही हो सकता है, यह मदद करेगा यदि आपने इसे मार्कअप के साथ चित्रित किया है।

— डेटशमैन

Answer 9

यदि आप <a>ब्लॉक बनाने के प्रयास में जाने वाले हैं , <a>तो आपको div के अंदर क्यों नहीं रखा जा रहा है, एक ब्लॉक तत्व होने के नाते यह आपको समान प्रभाव देगा।

Comments

क्योंकि मैं चाहता हूं कि एंकर कई डिवीजनों को शामिल कर सके।

— टॉम

Answer 10

यदि आप इसे ब्लॉक-शैली तत्व में बदलते हैं, तो नहीं, यह अब 'गलत' नहीं है, लेकिन यह शायद मान्य नहीं होगा। लेकिन यह बहुत मायने नहीं रखता है कि आप क्या कर रहे हैं। आपको या तो एंकर टैग को ब्लॉक स्तर के तत्व के रूप में रखना चाहिए जिसमें कोई आंतरिक div नहीं है, या div को बाहर की तरफ रखना चाहिए।

Answer 11

यह गलत है। एक स्पैन का उपयोग करें ।

Comments

Rofl एक div का उपयोग कर के रूप में एक ही बात है। मुझे लगता है कि मैंने blip.tv पर इसे (divs के साथ) देखा है, लेकिन जैसा कि दूसरों ने अटकल = ब्लॉक के अनुसार इसका गलत उल्लेख किया है अगर div या स्पान या जो भी इसकी एक ही है!

— जेम्स मिच

Answer 12

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

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

वास्तव में बहुत दुख की बात है ... लेकिन यह काम करता है ...

Answer 13

आप "छद्म तत्व" से पहले "::" जोड़कर इसे प्राप्त कर सकते हैं

शुद्ध सीएसएस ट्रिक;)

a:before{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0,0,0,0);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/250" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

Answer 14

जैसे एक FYI करें।

यदि आपका लक्ष्य आपके div क्लिक करने योग्य है तो आप jQuery / Java स्क्रिप्ट का उपयोग कर सकते हैं।

अपने div को परिभाषित करें जैसे:

<div class="clickableDiv" style="cursor:pointer">
  This is my div. Try clicking it!
</div>

आपका jQuery तब लागू किया जाएगा:

 <script type="text/javascript">

    $(document).ready(function () {

        $("div.clickableDiv").click(function () {
            alert("Peekaboo"); 
        });
    });
</script>

इस धागे में टॉम की टिप्पणी के अनुसार - यह कई विभाजनों के लिए भी काम करेगा

Comments

यह भयानक है, इसे कीबोर्ड के साथ इस्तेमाल नहीं किया जा सकता है, आप लिंक को ऑन-हॉवर नहीं देख सकते हैं। यह लगभग एक लिंक की तरह काम करता है, लेकिन एक वास्तविक लिंक नहीं है। आप इसे या तो बीच में क्लिक नहीं कर सकते, या इस पर लिंक के रूप में राइट क्लिक कर सकते हैं।

— WhyNotHugo

इसके उपयोग निश्चित रूप से हैं। आप डिव के अंदर एक एंकर रख सकते हैं और डिवैल क्लिक को चाइल्ड एंकर के स्थान पर पुनर्निर्देशित कर सकते हैं। Div पर कर्सर सेट करने के लिए आपको इस प्रकार एक एंकर का लुक और फील होता है, साथ ही जावास्क्रिप्ट के अंदर या एसेसिबिलिटी कारणों से अनुमति नहीं होने पर div के अंदर केवल एंकर के साथ एक वैध वापसी समाधान। आप शब्दार्थ और वाक्यविन्यास को सही ढंग से HTML प्राप्त करते हैं, और आपको प्रदर्शन शैली के संदिग्ध परिवर्तन के साथ फ़ेल्ड नहीं करना है।

— पेदरी

यदि आपके पास एक div है जिसमें एक लिंक होता है तो आप एक क्लिक हैंडलर को पकड़ सकते हैं, तो एंकर ढूंढें (सुनिश्चित करें कि केवल एक ही है) और फिर उसका उपयोग करें। सामान्य एंकर टैग के माध्यम से सुलभ। यह छवि और कैप्शन के साथ आंकड़े की एक बाल्टी होने की अनुमति देगा और उदाहरण के लिए "अधिक पढ़ें" लिंक -। विचार?

— जूलिक्स 3