href ว่างเปล่าใช้ได้ไหม?

หนึ่งในนักพัฒนาเว็บของเราใช้ html ต่อไปนี้เป็นตัวยึดตำแหน่งสำหรับจัดแต่งทรงผมในรายการดรอปดาวน์

<a href="" class="arrow"></a>

สิ่งนี้ถือว่าเป็นแท็กสมอถูกต้องหรือไม่

เนื่องจากไม่มีค่า href ค่านี้จึงแสดงให้เห็นว่ารายงานการตรวจสอบลิงก์ของเราบางรายงานเสียหาย

แม้ว่าคำถามนี้จะได้รับคำตอบแล้ว ( tl; dr:ใช่hrefค่าว่างนั้นใช้ได้) แต่ไม่มีคำตอบใด ๆ ที่อ้างอิงข้อมูลจำเพาะที่เกี่ยวข้อง

สตริงว่างไม่สามารถเป็น URI ได้ อย่างไรก็ตามแอhrefททริบิวต์ไม่เพียง แต่ใช้ค่า URIs เป็นค่าเท่านั้น แต่ยังอ้างอิง URI ด้วย สตริงว่างอาจเป็นการอ้างอิง URI

HTML 4.01

HTML 4.01 ใช้ RFC 2396ซึ่งระบุไว้ในหัวข้อ4.2 เอกสารอ้างอิงเดียวกัน (เหมืองเน้นหนัก):

การอ้างอิง URI ที่ไม่มี URI เป็นการอ้างอิงไปยังเอกสารปัจจุบัน กล่าวอีกนัยหนึ่งการอ้างอิง URI ที่ว่างเปล่าภายในเอกสารจะถูกตีความเป็นการอ้างอิงถึงจุดเริ่มต้นของเอกสารนั้นและการอ้างอิงที่มีเพียงตัวระบุส่วนคือการอ้างอิงไปยังส่วนที่ระบุของเอกสารนั้น

RFC 2396 ไม่มีจำหน่ายแล้วโดยRFC 3986 (ซึ่งปัจจุบันเป็นมาตรฐาน IETF URI ของ ) ซึ่งเป็นหลักว่าเดียวกัน

HTML5

ใช้ HTML5 ( URL ที่ถูกต้องอาจล้อมรอบด้วยช่องว่าง → URL ที่ถูกต้อง ) ข้อมูลจำเพาะ URL ของ W3Cซึ่งถูกยกเลิก ควรใช้มาตรฐาน URL ของ WHATWGแทน (ดูในส่วนสุดท้าย)

HTML 5.1

HTML 5.1 ใช้ ( URL ที่ถูกต้องอาจล้อมรอบด้วยช่องว่าง → URL ที่ถูกต้อง ) มาตรฐาน URL ของ WHATWG (ดูหัวข้อถัดไป)

WHATWG HTML

WHATWG HTML ของใช้ ( URL ที่ถูกต้องที่อาจเกิดขึ้นล้อมรอบด้วยช่องว่าง ) นิยามของสตริง URL ที่ถูกต้องจากWHATWG URL ของมาตรฐานที่มันบอกว่ามันอาจจะเป็นสตริงญาติ URL ที่มีชิ้นส่วนซึ่งอย่างน้อยต้องเป็นสตริงญาติ URL , ซึ่งสามารถเป็นสตริงเส้นทางสัมพันธ์ญาติ - โครงการ - น้อย - URLซึ่งเป็นสตริงเส้นทางญาติสัมพันธ์ URLที่ไม่ได้เริ่มต้นด้วยสตริงโครงการตามด้วย:และความหมายของมันบอกว่า (เหมืองเน้นตัวหนา):

สตริงพา ธ สัมพัทธ์ URL จะต้องเป็นศูนย์หรือมากกว่าสตริงURL- เซ็กเมนต์แยกจากกันโดย U + 002F (/) และไม่ขึ้นต้นด้วย U + 002F (/)

มันถูกต้อง

แต่มาตรฐานการปฏิบัติคือการใช้หรือบางครั้งhref="#"href="javascript:;"

อย่างที่คนอื่นพูดแล้วมันถูกต้อง

มีข้อเสียบางอย่างสำหรับแต่ละวิธีแม้ว่า:

href="#" เพิ่มรายการพิเศษในประวัติเบราว์เซอร์ (ซึ่งน่ารำคาญเมื่อเช่นปุ่มย้อนกลับ)

href="" โหลดหน้าซ้ำ

href="javascript:;" ดูเหมือนจะไม่มีปัญหาใด ๆ (นอกจากดูยุ่งเหยิงและไร้ความหมาย) - ใครรู้บ้างไหม?

แม้ว่ามันอาจจะเป็น HTML ที่ถูกต้องอย่างสมบูรณ์ที่จะไม่รวม href โดยเฉพาะกับตัวจัดการ onclick แต่มีบางสิ่งที่ต้องพิจารณา: มันจะไม่สามารถโฟกัสได้โดยไม่ต้องใช้คีย์บอร์ดหากไม่มีชุด tabindex นอกจากนี้สิ่งนี้จะไม่สามารถเข้าถึงซอฟต์แวร์ตัวอ่านหน้าจอโดยใช้ Internet Explorer เนื่องจาก IE จะรายงานผ่านส่วนต่อการเข้าถึงที่องค์ประกอบตัวยึดใด ๆ ที่ไม่มีแอตทริบิวต์ href ที่ไม่สามารถโฟกัสได้ไม่ว่าแท็บจะถูกตั้งค่าหรือไม่

ดังนั้นในขณะที่สิ่งต่อไปนี้อาจใช้ได้อย่างสมบูรณ์:

<a class="arrow">Link content</a>

เป็นการดีกว่าที่จะเพิ่มแอตทริบิวต์ href ที่ไม่มีผลกระทบอย่างชัดเจน

<a href="javascript:void(0);" class="arrow">Link content</a>

เพื่อรองรับผู้ใช้ทุกคนอย่างเต็มที่หากคุณใช้คลาสที่มี CSS เพื่อแสดงภาพคุณควรรวมเนื้อหาข้อความเช่นแอตทริบิวต์ title เพื่อให้คำอธิบายเกี่ยวกับใจของสิ่งที่เกิดขึ้น

<a href="javascript:void(0);" class="arrow" title="Go to linked content">Link content</a>

HTML5 ฉบับร่างปัจจุบันยังอนุญาตให้ ommitting คุณลักษณะ href อย่างสมบูรณ์

หากองค์ประกอบนั้นไม่มีแอตทริบิวต์ href แสดงว่าองค์ประกอบนั้นเป็นตัวยึดตำแหน่งที่ลิงก์อาจถูกนำไปวางไว้หากมีความเกี่ยวข้อง

ในการตอบคำถามของคุณ: ใช่ถูกต้อง

แน่นอนคุณสามารถเว้นว่างไว้ได้ (ตัวตรวจสอบ W3 ไม่ได้บ่น)

นำแนวคิดนี้ไปอีกขั้นหนึ่ง: ทิ้งเครื่องหมาย "" ไว้ ข้อดีของการทำเช่นนี้คือลิงค์จะไม่ถือว่าเป็นจุดยึดกับหน้าปัจจุบัน

<a href>sth</a>

ในขณะที่เครื่องมือตรวจสอบความถูกต้องของ W3 อาจไม่บ่นเกี่ยวกับhrefแอตทริบิวต์ว่างเปล่าHTML5 Working Draft ปัจจุบันระบุ:

hrefแอตทริบิวต์บนaและareaองค์ประกอบที่จะต้องมีค่าที่มี URL ที่ถูกต้องที่อาจเกิดขึ้นล้อมรอบด้วยช่องว่าง

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

... ซึ่งหมายความว่าสตริงว่างไม่ใช่ URL ที่ถูกต้อง

อย่างไรก็ตามร่างการทำงาน HTML5 ยังคงดำเนินต่อไปเพื่อระบุ:

หมายเหตุ: แอตทริบิวต์บนและองค์ประกอบไม่จำเป็นต้อง ; เมื่อองค์ประกอบเหล่านั้นไม่มีแอตทริบิวต์พวกเขาจะไม่สร้างการเชื่อมโยงหลายมิติhrefaareahref

ซึ่งหมายความว่าเราสามารถละเว้นhrefคุณลักษณะทั้งหมดได้:

<a class="arrow"></a>

หากความตั้งใจของคุณคือองค์ประกอบที่ไม่มีสิ่งเหล่านี้ควรจะต้องมีการhrefแทรกaแป้นพิมพ์คุณจะต้องลงเส้นทางปกติของการกำหนดroleและtabindexข้างตัวจัดการการคลิก / คีย์ดาวน์ตามปกติ:

<a class="arrow" role="button" tab-index="0"></a>

คำเตือน:

จากประสบการณ์ของฉันการละเว้นแอhrefททริบิวทำให้เกิดปัญหาในการเข้าถึงเนื่องจากการนำทางคีย์บอร์ดจะไม่สนใจและจะไม่ให้ความสำคัญเหมือนเมื่อ href มีอยู่ ด้วยตนเองรวมถึงองค์ประกอบของคุณใน tabindex เป็นวิธีรอบที่

มันถูกต้อง แต่เหมือน UpTheCreek กล่าวว่า 'มีข้อเสียบางอย่างสำหรับแต่ละวิธี'

หากคุณกำลังโทรหา ajax ผ่านแท็กให้ปล่อย href = "" แบบนี้จะทำให้การโหลดหน้าเว็บซ้ำอีกครั้งและรหัส ajax จะไม่ถูกเรียก ...

เพิ่งได้รับความคิดนี้จะเป็นการดีที่จะแบ่งปัน

ลองทำ<a href="#" class="arrow">แทน (หมายเหตุ#ตัวละครที่คมชัด)