การวาง div ในสมอถูกต้องหรือไม่?

ฉันได้ยินมาว่าการวางองค์ประกอบบล็อกไว้ในองค์ประกอบอินไลน์เป็นบาป 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 ด้วยวิธีนี้

ไม่มีใครมีเคล็ดลับเพิ่มเติมเกี่ยวกับปัญหานี้หรือไม่?

ขึ้นอยู่กับรุ่นของ HTML ที่คุณใช้:

• HTML 5ระบุว่า<a>องค์ประกอบ "อาจล้อมรอบทั้งย่อหน้ารายการตารางและอื่น ๆ แม้แต่ส่วนทั้งหมดตราบใดที่ไม่มีเนื้อหาแบบโต้ตอบภายใน (เช่นปุ่มหรือลิงก์อื่น ๆ )"

• HTML 4.01ระบุว่า<a>องค์ประกอบอาจมีองค์ประกอบแบบอินไลน์เท่านั้น <div>เป็นบล็อกองค์ประกอบ<a>ดังนั้นจึงอาจไม่ปรากฏภายใน

  แน่นอนว่าคุณมีอิสระในการจัดองค์ประกอบองค์ประกอบแบบอินไลน์เพื่อให้ดูเหมือนเป็นบล็อกหรือกำหนดลักษณะของบล็อกเพื่อให้มีการแสดงผลแบบอินไลน์ การใช้คำinlineและblockใน HTML หมายถึงความสัมพันธ์ขององค์ประกอบกับโครงสร้างความหมายของเอกสารในขณะที่คำเดียวกันใน CSS นั้นเกี่ยวข้องกับการจัดแต่งทรงผมขององค์ประกอบ หากคุณสร้างองค์ประกอบแบบอินไลน์แสดงในลักษณะที่บล็อกก็ไม่เป็นไร

  อย่างไรก็ตามคุณควรตรวจสอบให้แน่ใจว่าโครงสร้างของเอกสารยังคงสมเหตุสมผลเมื่อไม่มี CSS เช่นเมื่อเข้าถึงผ่านเทคโนโลยีช่วยเหลือเช่นโปรแกรมอ่านหน้าจอหรือเมื่อตรวจสอบโดย Googlebot อันทรงพลัง

ไม่มันจะไม่ตรวจสอบ แต่ใช่โดยทั่วไปจะทำงานในเบราว์เซอร์ที่ทันสมัย ที่ถูกกล่าวว่าใช้ช่วงในสมอของคุณและตั้งdisplay: blockไว้เช่นกันที่จะทำงานได้ทุกที่และจะตรวจสอบ!

เอกสาร W3C ไม่ได้ใช้แนวคิดเช่นผิดและบาปแต่มันก็ไม่ใช้คนที่เป็นเหมือนให้หมายถึง , อาจจะเหมาะสมและท้อแท้

ที่จริงแล้วในย่อหน้าที่สองของส่วนที่ 4นั้น 4.01 ระบุรายละเอียดของคำดังต่อไปนี้

คำสำคัญ "ต้อง", "ต้องไม่", "ต้อง", "จะ", "ไม่ควร", "ไม่ควร", "ไม่ควร", "แนะนำ", "อาจ" และ "ตัวเลือก" ในเอกสารนี้ ที่จะตีความตามที่อธิบายไว้ใน [RFC2119] อย่างไรก็ตามเพื่อความสะดวกในการอ่านคำเหล่านี้จะไม่ปรากฏในตัวอักษรตัวพิมพ์ใหญ่ทั้งหมดในข้อกำหนดนี้

โดยที่ในใจฉันเชื่อว่าคำแถลงที่ชัดเจนอยู่ใน7.5.3 องค์ประกอบระดับบล็อกและอินไลน์ซึ่งมันบอกว่า

โดยทั่วไปองค์ประกอบแบบอินไลน์อาจมีเพียงข้อมูลและองค์ประกอบแบบอินไลน์อื่น ๆ

เงื่อนไข "โดยทั่วไป" ปรากฏขึ้นเพื่อแนะนำความกำกวมพอที่จะกล่าวได้ว่า HTML 4.01 อนุญาตให้องค์ประกอบแบบอินไลน์มีองค์ประกอบบล็อก

แน่นอน CSS2 มีค่าคุณสมบัติการแสดงผลแบบอินไลน์บล็อกที่ดูเหมือนจะเหมาะกับวัตถุประสงค์ที่คุณอธิบาย ฉันไม่แน่ใจว่าจะได้รับการสนับสนุนอย่างกว้างขวางหรือไม่ แต่ดูเหมือนว่ามีคนคาดหวังว่าจะต้องมีพฤติกรรมเช่นนั้น

DTD ดูเหมือนจะให้อภัยน้อยลงที่นี่ แต่ข้อความของ DTDเลื่อนไปที่ข้อมูลจำเพาะ:

ข้อมูลจำเพาะ HTML 4.01 รวมถึงข้อ จำกัด ทางไวยากรณ์เพิ่มเติมที่ไม่สามารถแสดงใน DTD ได้

ในความคิดเห็นอื่นคุณแนะนำให้คุณต้องการให้บล็อกใช้งานได้โดยการห่อในสมอ ฉันไม่เชื่อว่า HTML ห้ามสิ่งนั้นและ CSS อนุญาตอย่างชัดเจน ดังนั้นเพื่อตอบคำถามชื่อเรื่องเกี่ยวกับว่ามันถูกต้องหรือไม่ฉันตอบว่าใช่ ตามมาตรฐานบางครั้งก็ถูกต้อง

ด้วยข้อกำหนด HTML5 ... ตอนนี้คุณสามารถวางองค์ประกอบระดับบล็อกไว้ในองค์ประกอบอินไลน์ได้ ดังนั้นตอนนี้จึงเหมาะสมอย่างยิ่งที่จะใส่ 'div' หรือ 'h1' ไว้ในองค์ประกอบ 'a'

คุณไม่สามารถใส่<div>ข้างใน<a>- มันไม่ถูกต้อง (X) HTML

แม้ว่าคุณจะมีสไตล์เป็นจอแสดงผล: บล็อกคุณยังคงไม่สามารถใส่องค์ประกอบระดับบล็อกไว้ในนั้นได้: (X) HTML ยังคงต้องปฏิบัติตาม (X) HTML DTD (ไม่ว่าคุณจะใช้รูปแบบใดก็ตาม) ไม่ว่า CSS จะเป็นอย่างไร เปลี่ยนแปลงสิ่งต่าง ๆ

เบราว์เซอร์อาจแสดงผลตามที่คุณต้องการ แต่มันไม่ถูกต้อง

มี DTD สำหรับ HTML 4 ในhttp://www.w3.org/TR/REC-html40/sgml/dtd.html 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 แต่ฉันจะไม่ดำเนินการต่อไปเนื่องจากไม่ใช่หัวข้อของคำถาม

องค์ประกอบระดับบล็อกเช่น<div>สามารถห่อด้วย<a>แท็กใน HTML5 แม้ว่า<div>จะถือเป็นภาชนะ / เสื้อคลุมสำหรับเนื้อหาการไหลและ<a>'s มีการพิจารณาเนื้อหาไหลตามMDN อาจเป็นการดีกว่าที่จะสร้างองค์ประกอบอินไลน์ที่ทำหน้าที่เป็นองค์ประกอบระดับบล็อก

หากคุณต้องการหลีกเลี่ยงปัญหาความหมายของการวาง div ภายในแท็ก anchor เพียงวางแท็ก anchor ในระดับเดียวกับ divs ห่อมันทั้งหมดด้วยคอนเทนเนอร์ที่มีตำแหน่ง: สัมพัทธ์ทำให้ตำแหน่งแท็ก anchor ของคุณ: สัมบูรณ์และขยายเป็น เติมภาชนะ นอกจากนี้หากยังไม่ได้อยู่ในส่วนท้ายของการไหลของเนื้อหาให้แน่ใจว่าคุณทิ้งดัชนี z ไว้ที่นั่นเพื่อวางไว้เหนือเนื้อหา

ตามที่แนะนำฉันได้เพิ่มรหัสมาร์กอัป:

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

และ CSS:

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

หากคุณกำลังจะไปสู่ความพยายามในการสร้าง<a>บล็อกทำไมไม่ใส่<a>ใน div เป็นองค์ประกอบบล็อกมันจะให้ผลเหมือนกัน

หากคุณเปลี่ยนเป็นองค์ประกอบแบบบล็อกแล้วไม่มันไม่ใช่ 'ผิด' อีกต่อไป แต่อาจไม่สามารถตรวจสอบ แต่มันก็ไม่สมเหตุสมผลเลยที่จะทำสิ่งที่คุณทำ คุณควรเก็บแท็กจุดยึดไว้เป็นองค์ประกอบระดับบล็อกโดยไม่มี div ภายในหรือวาง div ไว้ด้านนอก

มันผิด. ใช้ช่วง

ฉันคิดว่าส่วนใหญ่เวลาที่ผู้คนถามคำถามนี้พวกเขาได้สร้างเว็บไซต์ที่มี div เท่านั้นและตอนนี้ div หนึ่งต้องการลิงก์

ฉันเห็นใครบางคนใช้ภาพว่างเปล่าแบบโปร่งใส PNG ภายในสมอแท็กเพื่อสร้างลิงก์ภายใน div และภาพมีขนาดเท่ากันกับ div

น่าเศร้าที่จริงแล้ว ... แต่มันใช้งานได้ ...

คุณสามารถทำได้โดยการเพิ่ม ":: ก่อน" องค์ประกอบ Pseudo

เคล็ดลับ CSS บริสุทธิ์)

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>

เช่นเดียวกับ FYI

หากเป้าหมายของคุณคือทำให้ div ของคุณสามารถคลิกได้คุณสามารถใช้ jQuery / Java Script

กำหนด 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>

สิ่งนี้จะใช้ได้กับหลาย divs - ตามความคิดเห็นของ Tom ในหัวข้อนี้