ลิงก์

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

แท็ก Anchor <a> และแอตทริบิวต์ href จะสร้างไฮเปอร์ลิงก์ ลิงก์เป็นหัวใจสำคัญของอินเทอร์เน็ต หน้าเว็บแรกมีลิงก์ 25 ลิงก์ เขียนว่า "ข้อมูลออนไลน์เกี่ยวกับ W3 ทั้งหมดมีการลิงก์กับเอกสารนี้โดยตรงหรือโดยอ้อม" แน่นอนว่าข้อมูลทุกอย่างที่มีเกี่ยวกับ W3 ทางออนไลน์ก็จะมีการเชื่อมโยงจากเอกสารนี้โดยตรงหรือโดยอ้อมด้วย

พลังของเว็บและแท็ก <a> เพิ่มขึ้นอย่างมากนับตั้งแต่ Tim Berners-Lee เผยแพร่คำอธิบายแรกนี้ในเดือนสิงหาคมปี 1991 ลิงก์ต่างๆ จะแสดงความเชื่อมโยงระหว่างทรัพยากร 2 รายการ ซึ่งหนึ่งในนั้นคือเอกสารปัจจุบัน คุณสร้างลิงก์ได้โดย <a>, <area>, <form> และ <link> เมื่อคุณได้เรียนรู้เกี่ยวกับ <link> แล้ว และจะเห็นแบบฟอร์มในส่วนที่แยกต่างหาก นอกจากนี้ยังมีส่วนการเรียนรู้แบบฟอร์มทั้งหมดด้วย ในเซสชันนี้ คุณจะได้ดูข้อมูลเกี่ยวกับแท็ก <a> แบบตัวอักษรเดี่ยวที่ไม่ซับซ้อนมากนัก

แอตทริบิวต์ href

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

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

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

URL สัมพัทธ์จะไม่มีโปรโตคอลหรือชื่อโดเมน ซึ่ง "สัมพันธ์" กับไฟล์ปัจจุบัน MLW เป็นเว็บไซต์แบบหน้าเดียว แต่ซีรีส์ HTML นี้มีหลายส่วน ระบบจะใช้ URL แบบสัมพัทธ์ <a href="../attributes/">Attributes</a> เพื่อลิงก์จากหน้านี้ไปยังบทเรียนแอตทริบิวต์

ลิงก์ที่ 2 เป็นเพียงตัวระบุส่วนย่อยของลิงก์และจะลิงก์กับองค์ประกอบด้วย id="teachers", หากมี ในหน้าปัจจุบัน เบราว์เซอร์ยังรองรับลิงก์ "ด้านบนของหน้า" 2 ลิงก์ด้วย นั่นคือ การคลิก <a href="#top">Top</a> (ไม่คำนึงถึงตัวพิมพ์เล็กหรือใหญ่) หรือเพียงแค่ <a href="#">Top</a> จะเลื่อนผู้ใช้ไปที่ด้านบนสุดของหน้า เว้นแต่จะมีองค์ประกอบที่มีรหัส top อยู่ในตัวพิมพ์เล็ก/ใหญ่แบบตัวอักษรเดียวกัน

MLW เป็นเอกสารที่ยาวพอสมควร หากต้องการบันทึกการเลื่อน คุณสามารถเพิ่มลิงก์กลับไปด้านบนจากด้านล่างของส่วน #teachers ดังนี้

<a href="#top">Go to top.</a>

ลิงก์ที่ 3 จะรวมค่า 2 ค่าเข้าด้วยกัน กล่าวคือประกอบด้วย URL ที่สมบูรณ์ตามด้วยส่วนลิงก์ ซึ่งจะเปิดใช้การลิงก์โดยตรงกับส่วนใน URL ที่กำหนดไว้ ซึ่งในกรณีนี้คือส่วน #teachers ของหน้าแรกของ MLW ระบบจะโหลดหน้า MLW จากนั้นเบราว์เซอร์จะเลื่อนไปที่ส่วนครูโดยไม่ส่งส่วนย่อยในคำขอ HTTP

แอตทริบิวต์ href อาจขึ้นต้นด้วย mailto: หรือ tel: เพื่อส่งอีเมลหรือโทรออก โดยต้องจัดการลิงก์โดยขึ้นอยู่กับอุปกรณ์ ระบบปฏิบัติการ และแอปพลิเคชันที่ติดตั้งไว้

ลิงก์ mailto ไม่จำเป็นต้องมีอีเมล แต่จะรวมข้อความ cc, bcc, subject และ body เพื่อเติมข้อมูลอีเมลไว้ล่วงหน้าได้ โดยค่าเริ่มต้น โปรแกรมรับส่งอีเมลจะเปิดขึ้น คุณสามารถป้อนข้อมูลหัวเรื่องและเนื้อหาของอีเมลไว้ล่วงหน้าโดยไม่มีที่อยู่อีเมล เพื่อให้ผู้เข้าชมเว็บไซต์เชิญเพื่อนของตนเอง ในลิงก์ของเรา ในส่วนท้ายของเอกสารจะมีการใส่ URL ไปยังการจดทะเบียน ดังนี้

<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

เครื่องหมายคำถาม (?) จะแยก mailto: และอีเมล (หากมี) ออกจากข้อความค้นหา ภายในการค้นหา เครื่องหมาย "และ" (&) จะแยกช่องต่างๆ และเครื่องหมายเท่ากับ (=) จะถือว่าชื่อช่องแต่ละช่องด้วยค่า สตริงทั้งหมดมีการเข้ารหัสด้วยเปอร์เซ็นต์ ซึ่งจำเป็นจริงๆ หากไม่ได้ใส่เครื่องหมายคำพูดในค่า href หรือค่ามีเครื่องหมายคำพูด

แอปใดที่เปิดขึ้นเมื่อผู้ใช้คลิก แตะ หรือกด Enter ที่ลิงก์ tel จะขึ้นอยู่กับระบบปฏิบัติการ แอปพลิเคชันที่ติดตั้ง และการตั้งค่าที่ผู้ใช้มีในอุปกรณ์ iPhone อาจเปิด FaceTime, แอปโทรศัพท์ หรือรายชื่อติดต่อ เดสก์ท็อป Windows อาจเปิด Skype ได้หากติดตั้งไว้

มี URL ประเภทอื่นๆ อีกหลายประเภท เช่น blobs และ URL ข้อมูล (ดูตัวอย่างในการพูดถึงแอตทริบิวต์ของ download) สำหรับเว็บไซต์ที่ปลอดภัย (ที่ให้บริการผ่าน https) คุณจะสร้างและเรียกใช้โปรโตคอลเฉพาะแอปได้โดยใช้ registerProtocolHandler()

ควรแจ้งให้ผู้ใช้ทราบเมื่อใส่ลิงก์ที่มีแนวโน้มว่าจะเปิดแอปพลิเคชันอื่นๆ ที่ติดตั้งไว้ด้วย ตรวจสอบว่าข้อความระหว่างแท็กเปิดและแท็กปิดบอกให้ผู้ใช้ทราบว่ากำลังจะเปิดใช้งานลิงก์ประเภทใด คุณสามารถใช้ตัวเลือกแอตทริบิวต์ CSS เช่น [href^="mailto:"], [href^="tel:"] และ [href$=".pdf"] เพื่อกำหนดเป้าหมายสไตล์ตามประเภทแอปพลิเคชันได้

แหล่งข้อมูลที่ดาวน์โหลดได้

คุณควรระบุแอตทริบิวต์ download เมื่อ href ชี้ไปยังทรัพยากรที่ดาวน์โหลดได้ ค่าของแอตทริบิวต์ดาวน์โหลดคือชื่อไฟล์ที่แนะนำสำหรับบันทึกทรัพยากรในระบบไฟล์ในเครื่องของผู้ใช้ SVGOMG ซึ่งเป็นเครื่องมือเพิ่มประสิทธิภาพ SVG ใช้แอตทริบิวต์ download เพื่อแนะนำชื่อไฟล์ของ BLOB ที่ดาวน์โหลดได้ซึ่งเครื่องมือเพิ่มประสิทธิภาพสร้างขึ้น เมื่อเพิ่มประสิทธิภาพ hal.svg แท็กเปิดลิงก์ดาวน์โหลดของ SVGOMG จะมีลักษณะดังต่อไปนี้

<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

นอกจากนี้ยังมีการสาธิต <canvas> ที่สร้าง URL ข้อมูล PNG ที่ดาวน์โหลดได้

หากต้องการลิงก์ไปยังทรัพยากรที่ดาวน์โหลดได้ ให้ใส่ URL ของเนื้อหาเป็นค่าของแอตทริบิวต์ href และชื่อไฟล์ที่แนะนำที่สามารถใช้ในระบบไฟล์ของผู้ใช้เป็นค่าของแอตทริบิวต์ download

บริบทการท่องเว็บ

แอตทริบิวต์ target ช่วยในการกำหนดบริบทการเรียกดูสำหรับการนำทางลิงก์ (และการส่งแบบฟอร์ม คีย์เวิร์ด 4 คำที่ไม่คำนึงถึงตัวพิมพ์เล็กหรือใหญ่และมีเครื่องหมายขีดล่างเป็น 3 คำที่ใช้กับองค์ประกอบ <base> ค่าเริ่มต้นจะมี _self เริ่มต้น ซึ่งเป็นหน้าต่างปัจจุบัน _blank ที่เปิดลิงก์ในแท็บใหม่ชื่อ _parent ซึ่งเป็นระดับบนสุดหากลิงก์ปัจจุบันซ้อนอยู่ในออบเจ็กต์หรือ iframe และ _top ซึ่งเป็นระดับบนสุด มีประโยชน์อย่างยิ่งหากลิงก์ปัจจุบันซ้อนกันหลายระดับ _top และ _parent เหมือนกับ _self หากการลิงก์ไม่ได้ซ้อนกัน แอตทริบิวต์ target ไม่ได้จำกัดเฉพาะคำสำคัญ 4 คำนี้ นั่นคือ คำใดก็ได้

บริบทการเรียกดูทั้งหมด (โดยพื้นฐานแล้ว แท็บเบราว์เซอร์ทุกแท็บจะมีชื่อบริบทในการท่องเว็บ) ลิงก์สามารถเปิดลิงก์ในแท็บปัจจุบัน แท็บใหม่ที่ไม่มีชื่อ หรือแท็บใหม่หรือชื่อที่มีอยู่ โดยค่าเริ่มต้น ชื่อจะเป็นสตริงว่างเปล่า หากต้องการเปิดลิงก์ในแท็บใหม่ ผู้ใช้สามารถคลิกขวาแล้วเลือก "เปิดในแท็บใหม่" นักพัฒนาแอปสามารถบังคับให้มีการดำเนินการนี้โดยใส่ target="_blank"

ลิงก์ที่มี target="_blank" จะเปิดในแท็บใหม่ที่มีชื่อ "null" ซึ่งเป็นการเปิดแท็บใหม่ที่ไม่มีชื่อทุกครั้งที่คลิกลิงก์ ซึ่งจะสร้างแท็บใหม่จำนวนมาก แท็บมากเกินไป เช่น หากผู้ใช้คลิก <a href="registration.html" target="_blank">Register Now</a> 15 ครั้ง แบบฟอร์มการลงทะเบียนจะเปิดขึ้นในแท็บแยกกัน 15 แท็บ ปัญหานี้แก้ไขได้โดยการระบุชื่อบริบทของแท็บ เมื่อใส่แอตทริบิวต์ target ด้วยค่าที่พิจารณาตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ เช่น <a href="registration.html" target="reg">Register Now</a> การคลิกครั้งแรกที่ลิงก์นี้จะเปิดแบบฟอร์มการลงทะเบียนในแท็บ reg ใหม่ การคลิกลิงก์นี้อีก 15 ครั้งจะเป็นการโหลดการลงทะเบียนซ้ำในบริบทการท่องเว็บของ reg โดยไม่ต้องเปิดแท็บเพิ่มเติมใดๆ

แอตทริบิวต์ rel จะควบคุมประเภทของลิงก์ที่สร้างลิงก์ ซึ่งจะระบุความสัมพันธ์ระหว่างเอกสารปัจจุบันและทรัพยากรที่ลิงก์ไปในไฮเปอร์ลิงก์ ค่าแอตทริบิวต์ต้องเป็นรายการที่คั่นด้วยช่องว่างในคะแนนของค่าแอตทริบิวต์ rel อย่างน้อย 1 รายการที่แท็ก <a> รองรับ

คุณสามารถเพิ่มคีย์เวิร์ด nofollow ได้หากไม่ต้องการให้สไปเดอร์ติดตามลิงก์ เพิ่มค่า external ได้เพื่อระบุว่าลิงก์นั้นนำไปยัง URL ภายนอก และไม่ใช่หน้าภายในโดเมนปัจจุบัน คีย์เวิร์ด help บ่งบอกว่าไฮเปอร์ลิงก์จะให้ความช่วยเหลือตามบริบท การวางเมาส์เหนือลิงก์ที่มีค่า rel นี้จะแสดงเคอร์เซอร์ความช่วยเหลือแทนที่จะเป็นเคอร์เซอร์ตัวชี้ปกติ อย่าใช้ค่านี้เพียงเพื่อดูเคอร์เซอร์ความช่วยเหลือ ให้ใช้พร็อพเพอร์ตี้ cursor ของ CSS แทน ค่า prev และ next จะใช้ในลิงก์ที่ชี้ไปยังเอกสารก่อนหน้าและถัดไปในชุดได้

ความหมายของ <a rel="alternative"> ขึ้นอยู่กับแอตทริบิวต์อื่นๆ คล้ายกับ <link rel="alternative"> ทางเลือกของฟีด RSS จะรวม type="application/rss+xml" หรือ type="application/atom+xml ไว้ด้วย ส่วนรูปแบบอื่นๆ จะมีแอตทริบิวต์ type และคำแปลจะมีแอตทริบิวต์ hreflang หากเนื้อหาระหว่างแท็กเปิดและปิดเป็นภาษาอื่นที่ไม่ใช่ภาษาหลักของเอกสาร ให้ระบุแอตทริบิวต์ lang หากภาษาของเอกสารไฮเปอร์ลิงก์เป็นภาษาอื่น ให้ใส่แอตทริบิวต์ hreflang

ในตัวอย่างนี้ เรารวม URL ของหน้าที่แปลแล้วเป็นค่า href, rel="alternate" เพื่อระบุว่าเป็นเวอร์ชันทางเลือกของเว็บไซต์ แอตทริบิวต์ hreflang แสดงภาษาของคำแปล

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
<a href="/pt" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>

หากคำแปลภาษาฝรั่งเศสเป็น PDF คุณสามารถระบุแอตทริบิวต์ type ของ PDF ของทรัพยากรที่ลิงก์ได้ แม้ว่าประเภท MIME เป็นเพียงคำแนะนำเท่านั้น แต่การแจ้งผู้ใช้ว่าลิงก์จะเปิดเอกสารในรูปแบบอื่นก็เป็นความคิดที่ดี

<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>

การติดตามการคลิกลิงก์

วิธีหนึ่งในการติดตามการโต้ตอบของผู้ใช้คือการใช้คำสั่ง ping กับ URL เมื่อมีการคลิกลิงก์ หากมี แอตทริบิวต์ ping จะมีรายการ URL ที่ปลอดภัยที่คั่นด้วยช่องว่าง (ซึ่งขึ้นต้นด้วย https) ที่ควรได้รับแจ้งหรือใช้คำสั่ง ping หากผู้ใช้เปิดใช้งานไฮเปอร์ลิงก์ เบราว์เซอร์จะส่งคำขอ POST ที่มีเนื้อหา PING ไปยัง URL ที่ระบุไว้เป็นค่าของแอตทริบิวต์ ping

เคล็ดลับยกระดับประสบการณ์ของผู้ใช้

• โปรดคำนึงถึงประสบการณ์ของผู้ใช้เมื่อเขียน HTML เสมอ ลิงก์ควรมีข้อมูลเพียงพอเกี่ยวกับทรัพยากรที่ลิงก์ เพื่อให้ผู้ใช้ทราบว่าตนกำลังคลิกอะไรอยู่
• ภายในบล็อกข้อความ ให้ตรวจสอบว่าลักษณะของลิงก์แตกต่างจากข้อความรอบๆ มากพอ เพื่อให้ผู้ใช้ระบุลิงก์จากเนื้อหาที่เหลือได้โดยง่าย และตรวจสอบว่าสีเพียงอย่างเดียวไม่ใช่วิธีเดียวในการแยกแยะความแตกต่างระหว่างข้อความและเนื้อหาโดยรอบ
• ใส่รูปแบบการโฟกัสไว้เสมอ เพื่อให้ตัวนำทางแป้นพิมพ์รู้ว่าตนเองอยู่ที่ไหนเมื่อแตะเนื้อหา
• เนื้อหาระหว่าง <a> เปิดและปิด </a> เป็นชื่อที่เข้าถึงได้เริ่มต้นของลิงก์และควรแจ้งให้ผู้ใช้ทราบปลายทางหรือวัตถุประสงค์ของลิงก์ หากเนื้อหาของลิงก์เป็นรูปภาพ คำอธิบาย alt จะเป็นชื่อที่เข้าถึงได้ ไม่ว่าชื่อที่เข้าถึงได้มาจากแอตทริบิวต์ alt หรือเป็นส่วนย่อยของคำภายในบล็อกข้อความ ให้ตรวจสอบว่าชื่อดังกล่าวให้ข้อมูลเกี่ยวกับปลายทางของลิงก์ ข้อความลิงก์ควรสื่อความหมายมากกว่า "คลิกที่นี่" หรือ "ข้อมูลเพิ่มเติม" เป็นสิ่งสำคัญสำหรับผู้ใช้โปรแกรมอ่านหน้าจอและผลการค้นหาในเครื่องมือค้นหา
• อย่าใส่เนื้อหาแบบอินเทอร์แอกทีฟ เช่น <button> หรือ <input> ไว้ในลิงก์ อย่าซ้อนลิงก์ภายใน <button> หรือ <label> เช่นกัน แม้ว่าหน้า HTML จะยังคงแสดงผลอยู่ แต่การซ้อนองค์ประกอบที่โฟกัสได้และคลิกได้ในองค์ประกอบแบบอินเทอร์แอกทีฟจะทำให้ประสบการณ์ของผู้ใช้แย่ลง
• หากมีแอตทริบิวต์ href การกดปุ่ม Enter ในขณะที่โฟกัสอยู่ที่องค์ประกอบ <a> จะเป็นการเปิดใช้งานแอตทริบิวต์
• ลิงก์ไม่จำกัดอยู่แค่ HTML องค์ประกอบ a ยังใช้ภายใน SVG ได้ด้วย โดยสร้างลิงก์ด้วยแอตทริบิวต์ "href" หรือ "xlink:href"

ลิงก์และ JavaScript

แอตทริบิวต์ links แสดงผล HTMLCollection ที่ตรงกับ a และองค์ประกอบ area ที่มีแอตทริบิวต์ href

let a = document.links[0]; // obtain the first link in the document

a.href = 'newpage.html'; // change the destination URL of the link
a.protocol = 'ftp'; // change just the scheme part of the URL
a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly

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

ตรวจสอบความเข้าใจของคุณ

ทดสอบความรู้ของคุณเกี่ยวกับลิงก์