สิ่งที่ถูกต้องมากขึ้น: <h1> <a> ... </a> </h1> หรือ <a> <h1> ... </h1> </a>

มีทั้ง<h1><a ...> ... </a></h1>และ<a ...><h1> ... </h1></a>HTML ที่ถูกต้องหรือเป็นเพียงหนึ่งที่ถูกต้อง? หากทั้งคู่ถูกต้องพวกเขาต่างกันในความหมายหรือไม่?

ทั้งสองเวอร์ชันนั้นถูกต้อง ความแตกต่างที่ใหญ่ที่สุดระหว่างพวกเขาคือในกรณีที่<h1><a>..</a></h1>มีเพียงข้อความในชื่อเรื่องจะสามารถคลิกได้

หากคุณใส่<a>ไปรอบ ๆ<h1>และแบบ CSS 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>

ก่อน HTML 5 อันนี้

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

จะไม่ตรวจสอบ คุณสามารถใช้มันใน HTML 5 อย่างไรก็ตามฉันจะใช้สิ่งนี้:

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

ยกเว้นว่าคุณต้องการเพิ่มมากกว่า <h1> ภายใน <a>

<a><h1></h1></a>ไม่ถูกต้อง W3C ... โดยทั่วไปคุณไม่สามารถใส่องค์ประกอบบล็อกไว้ในองค์ประกอบแบบอินไลน์

<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>Chrome ให้ความสำคัญกับการแสดงผลอย่างไร:

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

ในอดีต<a><h1>..</h1></a>มีการประกาศว่าไม่ถูกต้องใน HTML 2.0 และตามข้อกำหนดของ HTML ที่ตามมาเหมาะสม แต่ HTML5 เปลี่ยนแปลงสิ่งนี้และประกาศว่าถูกต้อง คำจำกัดความที่เป็นทางการไม่ได้ส่งผลกระทบต่อเบราว์เซอร์เพียงตัวตรวจสอบ อย่างไรก็ตามอาจเป็นไปได้ที่ตัวแทนผู้ใช้บางราย (อาจไม่ใช่เบราว์เซอร์ปกติ แต่เช่นตัวแสดง HTML พิเศษตัวแยกข้อมูลตัวแปลง ฯลฯ ) ไม่สามารถจัดการ <a><h1>..</h1></a>ได้อย่างถูกต้องเนื่องจากไม่ได้รับอนุญาตในข้อกำหนด

ไม่มีเหตุผลที่ดีที่จะสร้างหัวเรื่องหรือข้อความในลิงก์ของหัวเรื่อง (มันเป็นส่วนใหญ่ไร้เหตุผลและไม่ดีสำหรับการใช้งาน.) แต่คำถามที่คล้ายกันมักจะได้ arised เมื่อทำส่วนหัว (หรือข้อความในหัวข้อ) ที่มีศักยภาพปลายทางสำหรับการเชื่อมโยงโดยใช้เช่นเมื่อเทียบกับ<h2><a name=foo>...</a></h2> <a name=foo><h2>...</h2></a>ข้อพิจารณาที่คล้ายกันนี้นำไปใช้กับสิ่งนี้ (ทั้งสองงานอาจมีความแตกต่างกันเนื่องจากสิ่งหลังทำให้aองค์ประกอบเป็นบล็อกและก่อนหน้า HTML5 จะอนุญาตเฉพาะอดีตเท่านั้น) แต่ในนอกจากนี้ทั้งสองวิธีจะล้าสมัยและการใช้แอตทริบิวต์โดยตรงในองค์ประกอบส่วนหัวจะแนะนำขณะนี้:id<h2 id=foo>...</h2>

องค์ประกอบ H1 เป็นองค์ประกอบระดับบล็อกและจุดยึดเป็นองค์ประกอบแบบอินไลน์ คุณได้รับอนุญาตให้มีองค์ประกอบแบบอินไลน์ภายในองค์ประกอบระดับบล็อก แต่ไม่ใช่วิธีอื่น ๆ เมื่อคุณพิจารณาโมเดลของกล่องและข้อกำหนดของ HTML สิ่งนี้สมเหตุสมผล

ดังนั้นโดยสรุปวิธีที่ดีที่สุดคือ:

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

คุณต้องการใช้การเชื่อมโยงหลายมิติ<a href="…">/ a:linkหรือคุณต้องการเพิ่มจุดยึดในส่วนหัวของคุณหรือไม่? หากคุณต้องการเพิ่มจุดยึดคุณสามารถกำหนดรหัส<h1 id="heading">ได้ จากนั้นคุณสามารถลิงก์เป็นpage.htm#headingจากนั้นคุณสามารถเชื่อมโยงว่าเป็น

หากคุณต้องการให้หัวเรื่องคลิกได้ (ลิงก์) ให้ใช้องค์ประกอบ<h1><a></a></h1>/ h1 > a- blocklevel ก่อนและองค์ประกอบอินไลน์ภายใน

นอกจากนี้ยังมีความแตกต่างของลำดับชั้นสไตล์ หากคุณมีมัน<h1><a href="#">Heading here</a></h1>สไตล์ของสมอจะลบล้างรูปแบบขององค์ประกอบ h1 ตัวอย่าง:

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

จะดีกว่า

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