Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Sự khác biệt giữa Liên kết (Links) và URL là gì?

Sự khác biệt giữa liên kết (link) và URL là gì, và nó có quan trọng không?

Sự khác biệt giữa link và URL không quan trọng nếu bạn chỉ trò chuyện thoáng qua về đường dẫn trực tiếp đến nội dung trên trang web. Như khi bạn chia sẻ bài viết hay với bạn bè.

Từ góc độ cao (phi kỹ thuật), link đề cập đến giao diện người dùng có thể nhấp sẽ đưa bạn đến vị trí cụ thể. Vị trí được định nghĩa bởi URL.

Về mặt trực quan, link có thể được biểu diễn bằng phần tử văn bản, hình ảnh, nút bấm, hoặc các yếu tố UI khác — tất cả được định nghĩa bằng mã HTML (sẽ nói sau).

Nếu nó có thể nhấp và có URL phía sau bề mặt, nó là một link.

Cả kỹ sư và phi kỹ sư dùng thuật ngữ link và URL thay thế cho nhau, rất giống cách mọi người gọi typefaces và fonts là cùng một thứ (dù kỹ thuật không). Tuy nhiên có sự khác biệt giữa URL và link khi bạn phân tích kỹ thuật.

Ối, hãy đi sâu một chút kỹ thuật.

Cấu trúc kỹ thuật của URL

URL thường bao gồm các yếu tố sau: giao thức, tên miền, miền cấp cao nhất, và slug. Hãy dùng URL đến một hướng dẫn typography của tôi làm ví dụ:

https:/techstacker.com/typography-italic-vs-bold
  • https:// là giao thức
  • techstacker là tên miền
  • .com là miền cấp cao nhất
  • typography-italic-vs-bold là slug

Btw, URL là viết tắt của Universal Resource Locator (Bộ định vị tài nguyên phổ quát).

Trong ngôn ngữ bình thường, trên thường được gọi là link. Từ góc độ phi kỹ thuật, không sai. Kỹ thuật, tuy nhiên, URL chỉ là một phần của những gì cấu thành link. Để làm cho URL trên thành link tương tác, có thể nhấp, chúng ta cần kết hợp nó với yếu tố khác, và đó là việc của HTML.

HTML định nghĩa link/URL như thế nào

Thường khi bạn thấy link trên trang web, bạn thấy nó như phần được highlight trong câu. Như văn bản này dẫn đến trang chủ TechStacker.

  • Về mặt trực quan, văn bản highlight trên xuất hiện như link có thể nhấp.
  • Dưới bề mặt trực quan, có URL với vị trí

Cả văn bản link và URL được định nghĩa trong phần tử anchor HTML <a>.

Phần tử anchor HTML chứa thuộc tính href với giá trị làm nguồn — và giá trị là URL đưa người nhấp đến đích bạn định nghĩa.

Đây là mã HTML cho đoạn văn với link đến trang chủ TechStacker:

<p> Thường khi mọi người nói về link, họ chỉ phần highlight của câu, như <a href="https://techstacker.com">văn bản này</a> dẫn đến trang chủ TechStacker. </p>

Giả sử bạn muốn làm hình ảnh hoạt động như link, dẫn người dùng đến vị trí nào đó khi họ nhấp. Để làm đó, bạn chỉ cần lấy phần tử hình ảnh <img> và bọc nó bên trong phần tử anchor.

Vậy lấy phần tử anchor từ ví dụ HTML trên:

<a href="https://techstacker.com">văn bản này</a>

Và phần tử hình ảnh này:

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

Bây giờ chỉ cần thay văn bản này bằng phần tử hình ảnh như sau:

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

Và kết quả, hình ảnh hoạt động như link:

Sự khác biệt giữa Liên kết (Links) và URL là gì?

Thử di chuột qua hình ảnh, bạn sẽ thấy URL trang web hiển thị ở góc dưới bên trái trình duyệt.

Nếu nhấp vào hình ảnh, bạn sẽ đến trang chủ, vì URL được chỉ định trong phần tử anchor. Để mở link trong tab mới, giữ CMD (Mac) hoặc CTRL (Windows) khi nhấp.

Nếu bạn hỏi hầu hết mọi người, kỹ sư hoặc không:

  • "Cho tôi URL trang web về X"
  • "Cho tôi link trang web về X"

Người kia thường sẽ vào thanh địa chỉ trình duyệt và copy-paste URL cho bạn. Điều họ cung cấp về mặt kỹ thuật là URL, nhưng nếu bạn gọi nó là link, không hại gì, kết quả giống nhau.

Tuy nhiên nếu bạn được yêu cầu chèn link trong bài blog, có thể có một số thứ bên cạnh URL liên quan để bạn cân nhắc:

  • Link có nên mở tab mới khi nhấp?
  • Nó có nên là follow hay no-follow (liên quan SEO)?
  • Loại nội dung nào link nên bọc quanh? Văn bản? Hình ảnh?
  • V.v.

Vậy đúng, khi bạn bắt đầu nói về cách link nên hành xử, các chi tiết kỹ thuật trở nên liên quan, và không còn đủ chỉ nói về cung cấp URL hay link. Bạn cũng phải hiểu ngữ cảnh bạn đang dùng và trình bày đường dẫn đến vị trí bạn muốn người dùng đến.