ลิงค์และ URL ต่างกันอย่างไร

ลิงค์และ URL แตกต่างกันอย่างไร และมีความสำคัญอย่างไร

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

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

ทางสายตา ลิงก์สามารถแสดงด้วยองค์ประกอบข้อความ รูปภาพ ปุ่ม หรือองค์ประกอบ UI อื่นๆ ซึ่งกำหนดโดยโค้ด HTML ทั้งหมด (เพิ่มเติมในภายหลัง)

หากคลิกได้และมี URL อยู่ด้านหลัง แสดงว่าเป็นลิงก์

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

เอาล่ะ มาทำความเข้าใจกับเทคนิคกันสักหน่อย

โครงสร้างทางเทคนิคของ URL

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

https:/techstacker.com/typography-italic-vs-bold

• https:// เป็นโปรโตคอล
• techstacker เป็นชื่อโดเมน
• .com เป็นโดเมนระดับบนสุด
• typography-italic-vs-bold คือทาก

อย่างไรก็ตาม URL ย่อมาจาก Universal Resource Locator

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

วิธีที่ HTML กำหนดลิงก์/URL

โดยปกติ เมื่อคุณเห็นลิงก์บนเว็บไซต์ คุณจะเห็นลิงก์นั้นเป็นส่วนที่ไฮไลต์ของประโยค ชอบข้อความนี้ที่นำไปสู่หน้าแรกของ TechStacker

• มองเห็นข้อความที่ไฮไลต์ด้านบนปรากฏเป็น ลิงก์ที่คลิกได้
• ใต้พื้นผิวภาพ มี URL พร้อมตำแหน่ง

ทั้งข้อความลิงก์และ URL ถูกกำหนดไว้ในองค์ประกอบจุดยึด HTML <a> .

องค์ประกอบสมอ HTML มี href คุณลักษณะที่มีค่าเป็นแหล่งที่มา — และค่าคือ URL ที่นำบุคคลที่คลิกที่ค่านั้นไปยังปลายทางที่คุณกำหนดไว้

นี่คือโค้ด HTML สำหรับย่อหน้าที่มีลิงก์ไปยังหน้าแรกของ TechStacker:

<p>
  Usually when people talk about links, they refer to a highlighted part of a
  sentence, like <a href="https://techstacker.com">this text</a> that leads to
  TechStacker’s front page.
</p>

คุณสามารถใช้องค์ประกอบ UI อื่นที่ไม่ใช่ข้อความเพื่อสร้างลิงก์ได้

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

ดังนั้นให้นำองค์ประกอบสมอจากตัวอย่าง HTML ด้านบน:

<a href="https://techstacker.com">this text</a>

และองค์ประกอบรูปภาพนี้:

<img
  src="/article/uploadfiles/202203/2022033109302583.png"
  width="150"
  height="150"
  alt="Eric Cartman"
/>

ตอนนี้เพียงแค่แทนที่ this text ด้วยองค์ประกอบภาพของคุณดังนี้:

<a href="https://techstacker.com">
  <img
    src="/article/uploadfiles/202203/2022033109302583.png"
    width="150"
    height="150"
    alt="Eric Cartman"
  />
</a>

และผลลัพธ์ที่ได้คือรูปภาพที่ทำงานเป็นลิงค์:

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

หากคุณคลิกที่รูปภาพ คุณจะถูกนำไปที่หน้าแรก เนื่องจาก URL ที่ระบุภายในองค์ประกอบจุดยึด หากต้องการเปิดลิงก์ในแท็บเบราว์เซอร์ใหม่ ให้กด CMD (Mac) หรือ CTRL (Windows) ค้างไว้ขณะคลิก

เพื่อสรุปลิงก์กับ URL

หากคุณถามคนส่วนใหญ่ พวกสายเทคโนโลยี หรือพวกที่ไม่เกี่ยวกับเทคโนโลยี:

• “โปรดให้ URL เว็บไซต์เกี่ยวกับ X แก่ฉัน”
• “โปรดให้ลิงค์ไปยังเว็บไซต์เกี่ยวกับ X”

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

อย่างไรก็ตาม หากระบบขอให้คุณแทรกลิงก์ในโพสต์บล็อก อาจมีหลายอย่าง นอกเหนือจาก URL ที่เกี่ยวข้องเพื่อให้คุณพิจารณา:

• ลิงก์ควรเปิดแท็บเบราว์เซอร์ใหม่เมื่อคุณคลิกหรือไม่
• ควรเป็นลิงก์ติดตามหรือไม่ติดตาม (เกี่ยวกับ SEO)
• ลิงก์ควรล้อมรอบเนื้อหาประเภทใด ข้อความ? รูปภาพ?
• เป็นต้น

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