ฉันควรตั้งจุดยึด HTML ด้วย 'ชื่อ' หรือ 'id' หรือไม่

เมื่อต้องการอ้างถึงบางส่วนของหน้าเว็บด้วยhttp://example.com/#fooวิธีการ "" ควรใช้อย่างใดอย่างหนึ่ง

<h1><a name="foo"/>Foo Title</h1>

หรือ

<h1 id="foo">Foo Title</h1>

พวกเขาทั้งสองทำงาน แต่พวกเขาเท่ากันหรือมีความแตกต่างทางความหมาย?

ตามข้อกำหนด HTML 5, 5.9.8 การนำทางไปยังตัวระบุส่วน :

สำหรับเอกสาร HTML (และประเภทข้อความ / html MIME) จะต้องปฏิบัติตามรูปแบบการประมวลผลต่อไปนี้เพื่อกำหนดว่าส่วนที่ระบุของเอกสารคืออะไร

1. แยก URL และให้ Fragid เป็นส่วนประกอบ <fragment> ของ URL
2. หาก Fragid เป็นสตริงว่างส่วนที่ระบุของเอกสารจะอยู่ด้านบนของเอกสาร
3. หากมีองค์ประกอบใน DOM ที่มี ID เท่ากับ Fragid ดังนั้นองค์ประกอบแรกในลำดับต้นไม้คือส่วนที่ระบุของเอกสาร หยุดอัลกอริทึมที่นี่
4. หากมีเป็นองค์ประกอบใน DOM ที่มีแอตทริบิวต์ชื่อที่มีค่าเท่ากับ fragid แล้วองค์ประกอบดังกล่าวครั้งแรกในการสั่งซื้อต้นไม้เป็นส่วนที่ระบุของเอกสาร; หยุดอัลกอริทึมที่นี่
5. มิฉะนั้นจะไม่มีส่วนที่ระบุของเอกสาร

ดังนั้นมันจะมองหาid="foo"แล้วจะติดตามname="foo"

แก้ไข: ตามที่ระบุโดย @hsivonen ใน HTML5 aองค์ประกอบจะไม่มีแอตทริบิวต์ชื่อ อย่างไรก็ตามกฎข้างต้นยังคงใช้กับองค์ประกอบที่มีชื่ออื่น ๆ

คุณไม่ควรใช้<h1><a name="foo"/>Foo Title</h1>ในรสชาติของ HTML ใด ๆ ที่ทำหน้าที่เป็นtext/htmlเพราะ XML text/htmlไวยากรณ์องค์ประกอบที่ว่างเปล่าที่ไม่ได้รับการสนับสนุนใน อย่างไรก็ตาม<h1><a name="foo">Foo Title</a></h1>ตกลงใน HTML4 ไม่ถูกต้องใน HTML5 ตามที่ร่างไว้ในปัจจุบัน

<h1 id="foo">Foo Title</h1>ตกลงทั้งใน HTML4 และ HTML5 สิ่งนี้จะไม่ทำงานใน Netscape 4 แต่คุณอาจใช้คุณสมบัติอื่นอีกหลายโหลที่ไม่สามารถใช้งานได้ใน Netscape 4

ฉันต้องบอกว่าถ้าคุณกำลังจะเชื่อมโยงไปยังพื้นที่นั้นในหน้า ... เช่น page.html # foo และ Foo Title ไม่ใช่ลิงค์ที่คุณควรใช้:

<h1 id="foo">Foo Title</h1>

หากคุณใส่การ<a>อ้างอิงไว้รอบ ๆ หัวข้อของคุณจะได้รับอิทธิพลจาก<a>CSS เฉพาะภายในเว็บไซต์ของคุณ เป็นเพียงมาร์กอัปพิเศษและคุณไม่จำเป็นต้องใช้มัน ฉันขอแนะนำให้วางรหัสไว้บนพาดหัวไม่เพียง แต่จะมีรูปแบบที่ดีขึ้น แต่มันจะช่วยให้คุณสามารถระบุที่อยู่ของวัตถุนั้นใน Javascript หรือ CSS

Wikipedia ใช้คุณลักษณะนี้อย่างหนักเช่นนี้:

<a href="#History">[...]</a>
<span class="mw-headline" id="History">History</span>

และ Wikipedia ทำงานให้กับทุกคนดังนั้นฉันรู้สึกปลอดภัยที่จะเกาะติดกับแบบฟอร์มนี้

นอกจากนี้อย่าลืมว่าคุณสามารถใช้สิ่งนี้ไม่เพียง แต่จะมีช่วงขยาย แต่กับ divs หรือเซลล์ตารางแล้วคุณสามารถเข้าถึง: เป้าหมายหลอกระดับในองค์ประกอบ เพียงระวังไม่ให้เปลี่ยนความกว้างเช่นเดียวกับข้อความตัวหนาทำให้เกิดการย้ายเนื้อหาไปรอบ ๆ ซึ่งรบกวน

Anchors ที่มีชื่อ - การลงคะแนนของฉันคือการหลีกเลี่ยง:

• "Names and id อยู่ใน namespace เดียวกัน ... " - สองคุณสมบัติที่มี namespace เดียวกันนั้นบ้ามาก สมมติว่าเลิกใช้แล้ว
• "องค์ประกอบจุดยึดที่ไม่มี href atribute" - อีกครั้งธรรมชาติขององค์ประกอบ (การเชื่อมโยงหลายมิติหรือไม่) ถูกกำหนดโดยมีการแก้ไขหรือไม่! เพิ่มความบ้าคลั่งเป็นสองเท่า สามัญสำนึกพูดเพื่อหลีกเลี่ยงโดยสิ้นเชิง
• หากคุณมีสไตล์สมอเรือที่ไม่มีคลาสเทียมแบบนี้จะมีผลกับสไตล์ของคุณ ใน CSS3 คุณสามารถหลีกเลี่ยงสิ่งนี้ได้ด้วยตัวเลือกแอททริบิวต์ (หรือการใส่สไตล์เดียวกันสำหรับแต่ละนามแฝง) แต่ก็ยังคงเป็นวิธีแก้ปัญหา สิ่งนี้มักจะไม่เกิดขึ้นเพราะคุณเลือกสีต่อคลาสเทียมและขีดเส้นใต้ที่ปรากฏตามค่าเริ่มต้นจะทำให้รู้สึกลบได้เท่านั้นซึ่งทำให้เหมือนกับข้อความอื่น ๆ แต่คุณเคยตัดสินใจที่จะทำให้ลิงค์ของคุณเป็นตัวหนามันจะทำให้เกิดปัญหา
• Netscape 4 อาจไม่รองรับคุณสมบัติ id แต่ก็ยังมีแอตทริบิวต์ที่ไม่รู้จักซึ่งจะไม่ทำให้เกิดปัญหาใด ๆ นั่นคือสิ่งที่เรียกว่าความเข้ากันได้สำหรับฉัน

<h1 id="foo">Foo Title</h1>

คือสิ่งที่ควรใช้ อย่าใช้สมอถ้าคุณไม่ต้องการลิงค์

หัวขึ้นสำหรับผู้ใช้งาน JavaScript: รหัสทั้งหมดกลายเป็นตัวแปรทั่วโลกภายใต้หน้าต่าง

<h1 id="foo">Foo Title</h1>

เพิ่งสร้าง JS global:

window.foo

ค่าของwindow.fooจะเป็นสำหรับHTMLElementh1

หากคุณไม่สามารถรับประกันได้ว่าค่าทั้งหมดที่ใช้ในidแอตทริบิวต์นั้นปลอดภัยคุณอาจชอบname:

<h1 name="foo">Foo Title</h1>

ไม่มีความแตกต่างทางความหมาย แนวโน้มในมาตรฐานที่มีต่อการใช้มากกว่าid nameอย่างไรก็ตามมีความแตกต่างที่อาจทำให้คนชอบnameในบางกรณี ข้อมูลจำเพาะ HTML 4.01 เสนอคำแนะนำดังต่อไปนี้ :

ใช้idหรือname? ผู้เขียนควรพิจารณาปัญหาต่อไปนี้เมื่อตัดสินใจว่าจะใช้idหรือnameสำหรับชื่อจุดยึด:

• แอตทริบิวต์ id สามารถทำหน้าที่เป็นมากกว่าชื่อสมอ (เช่นตัวเลือกสไตล์ชีทตัวระบุการประมวลผล ฯลฯ )
• ตัวแทนผู้ใช้ที่มีอายุมากกว่าบางคนไม่สนับสนุนแองเคอร์ที่สร้างขึ้นด้วยแอตทริบิวต์ id
• คุณลักษณะชื่อช่วยให้ชื่อจุดยึดยิ่งขึ้น (กับหน่วยงาน)

วิธีการ ID จะไม่ทำงานบนเบราว์เซอร์รุ่นเก่าวิธีการยึดชื่อจะเลิกใช้ในรุ่น HTML ที่ใหม่กว่า ... ฉันจะไปด้วย id

ฉันมีหน้าเว็บที่ประกอบด้วย div div ที่เรียงซ้อนกันในแนวตั้งจำนวนเท่ากันในรูปแบบและต่างกันใน serial number เท่านั้น ฉันต้องการซ่อนสมอชื่อที่ด้านบนของแต่ละ div ดังนั้นทางออกที่ประหยัดที่สุดก็คือการรวมสมอเป็น id ภายในแท็ก div ที่เปิดเช่น

<div id="[serial number]" class="topic_wrapper">

เพียงการสังเกตเกี่ยวกับมาร์กอัปฟอร์มมาร์กอัปใน HTML เวอร์ชันก่อนหน้านี้เป็นจุดยึด รูปแบบมาร์กอัปใน HTML5 โดยใช้แอตทริบิวต์ id ในขณะที่ส่วนใหญ่เทียบเท่าต้องมีองค์ประกอบในการระบุซึ่งเกือบทั้งหมดคาดว่าจะมีเนื้อหา

ตัวอย่างเช่นสามารถใช้ span หรือ div ที่ว่างเปล่าได้ แต่การใช้งานนี้จะมีลักษณะและกลิ่นไม่ดี

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

ตัวอย่างที่สองกำหนด ID เฉพาะให้กับองค์ประกอบที่เป็นปัญหา องค์ประกอบนี้สามารถจัดการหรือเข้าถึงได้โดยใช้ DHTML

ในทางกลับกันการตั้งค่าที่ตั้งชื่อภายในเอกสารคล้ายกับที่คั่นหน้า ติดอยู่กับ "สมอ" มันสมเหตุสมผลดี

ใน html 5 id=""แอ็ตทริบิวต์จะกำหนดตัวระบุเฉพาะสำหรับองค์ประกอบซึ่งเป็นจุดยึดสำหรับลิงก์ส่วน ในมาตรฐาน html ก่อนหน้าname=""แอตทริบิวต์ของ<a>องค์ประกอบกำหนดสมอสำหรับการเชื่อมโยงส่วน ฉันแนะนำสิ่งที่ชอบ:
<a name="foo" id="foo"></a><h1>Foo Title</h1>
เพราะการสนับสนุนสำหรับid=""คุณลักษณะนั้นค่อนข้างขาด ๆ หาย ๆ (แม้ว่าเบราว์เซอร์รุ่นใหญ่ทั้งหมดจะรองรับการเผยแพร่รุ่นล่าสุด แต่การเผยแพร่ที่ไม่ได้มีอายุไม่เกินสองสามปี [และเป็นการดีที่สุดที่จะไม่ทำลายบางสิ่งบางอย่าง) หากไม่มีเหตุผลที่ดีในการ]) ใช้งานร่วมกันได้ & ไม่จัดวางองค์ประกอบใด ๆ ในองค์ประกอบลิงก์สำหรับการปิด </a> ยังคงอยู่นอกองค์ประกอบ แต่ยังคงใช้ได้ในมาตรฐานปัจจุบันทั้งหมด

ตรวจสอบให้แน่ใจว่าname=""และid=""คุณลักษณะของ<a>องค์ประกอบเหมือนกัน

วิธีการเกี่ยวกับการใช้แอตทริบิวต์ชื่อสำหรับเบราว์เซอร์เก่าและแอตทริบิวต์ id กับเบราว์เซอร์ใหม่ ตัวเลือกทั้งสองจะถูกนำมาใช้และวิธีการสำรองจะดำเนินการตามค่าเริ่มต้น !!!

แนวคิด "named anchor" ทั้งหมดใช้แอตทริบิวต์ name, ตามคำนิยาม คุณควรใช้ชื่อ แต่แอตทริบิวต์ ID อาจเป็นประโยชน์สำหรับสถานการณ์จาวาสคริปต์

ในความคิดเห็นคุณสามารถใช้ทั้งคู่เพื่อป้องกันการเดิมพันของคุณ