Computer >> Máy Tính >  >> Lập trình >> HTML

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

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

Sự khác biệt giữa liên kết và URL không thành vấn đề nếu bạn chỉ đang trò chuyện thông thường về việc tìm đường dẫn trực tiếp đến một số nội dung trên trang web. Thích nếu bạn đang chia sẻ một bài viết hay với một trong những người bạn của mình.

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

Trực quan, một liên kết có thể được biểu thị bằng phần tử văn bản, hình ảnh, nút hoặc các phần tử giao diện người dùng khác - tất cả đều được xác định bằng mã HTML (sẽ tìm hiểu thêm về điều đó sau).

Nếu nó có thể nhấp được và có URL phía sau bề mặt, thì đó là một liên kết.

Cả công nghệ và không công nghệ đều sử dụng liên kết cụm từ và URL thay thế cho nhau, giống như cách mà mọi người đề cập đến kiểu chữ và phông chữ giống nhau (mặc dù chúng không giống nhau, về mặt kỹ thuật. ). Tuy nhiên, có sự khác biệt giữa URL và liên kết khi bạn bắt đầu chia nhỏ về mặt kỹ thuật.

Được rồi, chúng ta hãy tìm hiểu kỹ hơn một chút.

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

Một URL thường bao gồm các phần tử sau, một giao thức, một tên miền, một miền cấp cao nhất và một slug. Hãy sử dụng URL của một trong các hướng dẫn về kiểu chữ 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à con sên

Btw, URL là viết tắt của Universal Resource Locator.

Nói một cách thông thường, phần trên thường được gọi là một liên kết. Từ góc độ phi kỹ thuật, điều đó không sai. Tuy nhiên, về mặt kỹ thuật, URL chỉ là một phần về những gì tạo nên một liên kết. Để làm cho URL phía trên một liên kết tương tác, có thể nhấp được, chúng tôi cần kết hợp URL đó với một phần tử khác và đó là mục đích của HTML.

Cách HTML định nghĩa liên kết / URL

Thông thường, khi bạn nhìn thấy một liên kết trên một trang web, bạn sẽ xem nó như một phần được đánh dấu của câu. Giống như văn bản này dẫn đến trang đầu của TechStacker.

  • Về mặt trực quan, văn bản được đánh dấu ở trên xuất hiện dưới dạng một liên kết có thể nhấp được.
  • Bên dưới bề mặt trực quan, có một URL với vị trí

Cả văn bản liên kết và URL đều được xác định trong phần tử liên kết HTML <a> .

Phần tử liên kết HTML chứa href với một giá trị làm nguồn của nó - và giá trị là URL đưa người nhấp vào nó đến đích mà bạn đã xác định.

Đây là mã HTML cho đoạn có liên kết đến trang chính của 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>

Bạn có thể sử dụng các phần tử giao diện người dùng khác ngoài văn bản để tạo liên kết

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

Vì vậy, hãy lấy phần tử neo từ ví dụ HTML ở trên:

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

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

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

Bây giờ chỉ cần thay thế this text với phần tử hình ảnh của bạn như thế này:

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

Và kết quả là một hình ảnh hoạt động như một liên kết:

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

Hãy thử di chuột qua hình ảnh và bạn sẽ thấy URL đến trang web này được hiển thị ở góc dưới cùng bên trái của trình duyệt.

Nếu bạn nhấp vào hình ảnh, bạn sẽ được đưa đến trang đầu vì URL được chỉ định trong phần tử liên kết. Để mở liên kết trong tab trình duyệt mới, hãy giữ CMD (Mac) hoặc CTRL (Windows) khi bạn nhấp vào liên kết đó.

Nếu bạn hỏi hầu hết mọi người, công nghệ hay không công nghệ:

  • “Vui lòng cung cấp cho tôi URL của trang web về X”
  • “Vui lòng cung cấp cho tôi liên kết đến trang web về X”

Người ở đầu bên kia thường sẽ truy cập vào thanh địa chỉ trình duyệt của họ và sao chép-dán URL cho bạn. Những gì họ đang cung cấp cho bạn là về mặt kỹ thuật một URL, nhưng nếu bạn gọi nó là một liên kết thì không có hại gì cả, kết quả vẫn như vậy.

Tuy nhiên, nếu bạn được yêu cầu chèn một liên kết vào một bài đăng blog, có thể có một số điều ngoài URL có liên quan để bạn xem xét:

  • Liên kết có mở ra một tab trình duyệt mới khi bạn nhấp vào nó không?
  • Đó nên là một liên kết theo dõi hay không theo dõi (liên quan đến SEO)?
  • Liên kết nên bao quanh loại nội dung nào? Bản văn? Một hình ảnh?
  • Vv.

Vì vậy, có, khi bạn bắt đầu nói về cách một liên kết sẽ hoạt động, các kỹ thuật trở nên phù hợp và không còn đủ nếu chỉ nói về việc cung cấp URL hoặc liên kết. Bạn cũng phải hiểu bối cảnh về cách bạn đang sử dụng và trình bày đường dẫn đến vị trí mà bạn muốn người dùng đến.