home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

Link vs URL: ต่างกันอย่างไร?

Link และ URL ต่างกันอย่างไร และมันสำคัญไหม?

ความแตกต่างระหว่าง link และ URL ไม่สำคัญหากคุณแค่พูดคุยกันอย่าง casual เกี่ยวกับ direct path ไปยังเนื้อหาบน web page เช่นแชร์บทความดีๆ ให้เพื่อน

จากมุมมอง high-level (non-technical) link หมายถึง clickable user interface ที่นำคุณไปยัง specific location location นั้นถูกกำหนดโดย URL

Visually link อาจ represented โดย text element, image, button, หรือ UI elements อื่นๆ — ทั้งหมดถูกกำหนดโดย HTML code (รายละเอียดในภายหลัง)

ถ้ามัน clickable และมี URL ข้างหลัง มันคือ link

Techies และ non-techies ใช้คำว่า link และ URL แทนกันไปได้ เหมือนกับที่คนเรียก typefaces และ fonts ว่าเหมือนกัน (แม้ technically จะไม่เหมือน) แต่ technically มีความแตกต่างระหว่าง URLs และ links

โอเค มา technical 一点

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

URL ปกติประกอบด้วย elements ต่อไปนี้: protocol, domain name, top-level domain, และ slug มาใช้ URL ของ typography tutorial ของผมเป็นตัวอย่าง:

https:/techstacker.com/typography-italic-vs-bold
  • https:// คือ protocol
  • techstacker คือ domain name
  • .com คือ top-level domain
  • typography-italic-vs-bold คือ slug

Btw, URL ย่อมาจาก Universal Resource Locator

ในภาษาพูดปกติ ข้างต้นมักเรียกว่า link จากมุมมอง non-technical ไม่ผิด แต่ว่าด้วย technical URL เป็นแค่ หนึ่งส่วน ของสิ่งที่ทำให้ link เป็น link เพื่อทำให้ URL ข้างต้นเป็น interactive clickable link เราต้องรวมกับ element อีกตัว และนั่นคือ HTML

HTML กำหนด link/URL ยังไง?

ปกติเวลาเห็น link บนเว็บไซต์ คุณเห็นมันเป็น highlighted part ของประโยค เช่น text นี้ที่นำไป TechStacker front page

  • Visually highlighted text ด้านบนปรากฏเป็น clickable link
  • ใต้ visual surface มี URL พร้อม location

ทั้ง link text และ URL ถูกกำหนดภายใน HTML anchor element <a>

HTML anchor element มี href attribute พร้อม value as source — และ value คือ URL ที่พา person ที่ click ไปยัง destination ที่คุณกำหนด

HTML code สำหรับ paragraph ที่มี link ไป TechStacker front page:

<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 elements อื่นนอกจาก text สร้าง links ได้

สมมติคุณต้องการให้ image ทำงานเป็น link นำ user ไปยัง location เมื่อ click เพื่อทำได้ ให้เอา image element <img> wrap ไว้ใน anchor element

เอา anchor element จาก HTML example ข้างต้น:

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

และ image element นี้:

<img src="https://th.wsxdn.com/UploadFiles_2907/202203/2022033109302583.png" width="150" height="150" alt="Eric Cartman" />

ตอนนี้แทนที่ this text ด้วย image element:

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

ผลลัพธ์: image ที่ทำงานเป็น link:

Link vs URL: ต่างกันอย่างไร?

ลองเลื่อนเมาส์เหนือ image จะเห็น URL ของเว็บไซต์แสดงที่มุมซ้ายล่างของ browser

ถ้าคลิกที่ image จะไป front page เพราะ URL ที่ระบุใน anchor element หากต้องการเปิดใน tab ใหม่ กด CMD (Mac) หรือ CTRL (Windows) ค้างไว้ขณะคลิก

ถ้าถามคนส่วนใหญ่ techies หรือ non-techies:

  • "Please give me the URL the website about X"
  • "Please give me the link to the website about X"

ฝ่ายตรงข้ามมักจะไป copy-paste URL จาก browser address bar ให้คุณ สิ่งที่ให้คือ technically URL แต่ถ้าคุณเรียกว่า link ไม่มี harm ผลลัพธ์เหมือนกัน

แต่ถ้าถูกขอ insert link ใน blog post อาจมีหลายสิ่ง นอกจาก URL ที่ relevant สำหรับคุณพิจารณา:

  • Link ควรเปิด browser tab ใหม่เมื่อคลิกไหม?
  • ควรเป็น follow หรือ no-follow link (SEO related)?
  • Link ควร wrap เนื้อหาประเภทไหน? Text? Image?
  • etc.

ใช่แล้ว เมื่อเริ่มพูดถึงพฤติกรรมของ link (how a link should behave) technicalities กลายเป็น relevant และไม่พอที่จะพูดแค่ให้ URL หรือ link คุณต้องเข้าใจ context ของการใช้และ present path ไปยัง location ที่ต้องการให้ user ไป