Siêu Liên Kết

Siêu liên kết trong ngôn ngữ HTML
Siêu liên kết trong ngôn ngữ HTML

Siêu liên kết là một chức năng quan trọng bậc nhất của ngôn ngữ HTML. Nếu các tìm hiểu về lịch sử thì có thể nhận thấy: “siêu liên kết” là một trong những động lực chính để ngôn ngữ HTML và web ra đời.

Siêu liên kết là gì?

Siêu liên kết là một tính năng của web ngay từ ngày đầu. Chúng cho phép chúng ta liên kết đến các tài liệu khác hoặc một phần trên chính tài liệu hiện tại. Hầu hết chúng ta đều quen thuộc và tiếp xúc khá nhiều với các trang web. Dễ dàng nhận thấy, một liên kết có thể dẫn đến:

  • Tài liệu HTML khác
  • File text
  • File hình ảnh
  • File video

Cấu tạo của một siêu liên kết

Xem ví dụ bên trên, chúng ta có thể dễ dàng nhận thấy. Phần tử a có có cấu trúc tiêu chuẩn của các phần tử HTML. Ngoài ra, phần tử a có 3 thuộc tính thông dụng

  • href: thuộc tính quan trọng nhất, cho biết liên kết này dẫn tới đâu
  • title: thuộc tính này mang ý nghĩa bổ trợ thông tin. Khi người dùng hover chuột trên liên kết, một tooltip sẽ mở lên, hiển thị thông tin ở thuộc tính này. Chúng ta có thể dùng thuộc tính này để thêm thông tin mô tả. Ngoài ra, còn tăng thêm tính ngữ nghĩa cho tài liệu HTML.
  • target: thuộc tính này sẽ mô tả cách mà trình duyệt web xử lý liên kết đích. Với ví dụ trên, mình muốn trình duyệt mở đường dẫn này trong một tab mới.

Sơ lược về URL và đường dẫn

Như phía trên mình có giới thiệu. Siêu liên kết có mục đích chính là liên kết đến 1 tài liệu khác. Vậy tài liệu này có thể nằm cùng hoặc không nằm cùng một máy chủ với tài liệu hiện tại của chúng ta.

  • Nếu tài liệu đích nằm cùng máy chủ, chúng ta có thể sử dụng đường dẫn của tài liệu (ví dụ: D://web/hinhanh/1.png) cho thuộc tính href.
  • Nếu tài liệu đích nằm khác máy chủ, chúng ta bắt buộc sử dụng URL để liên kết đến tài liệu đó.

Tính tương đối và tuyệt đối

Khi khao báo đích đến của liên kết, chúng ta có 2 lựa chọn. Sử dụng đường dẫn tương đối hoặc đường dẫn tuyệt đối.

Đường dẫn tuyệt đối:

  • Là đường dẫn tuyệt đối của file tài nguyên trên máy chủ (trong trường hợp tài liệu nguồn và đích cùng nằm trên một máy chủ mới có thể sử dụng cách này). Ví dụ: “D://web/hinhanh/1.png”
  • Là URL của tài nguyên: “https://hoadm.net/wp-content/uploads/2020/04/hyperlinks-blue.png”

Đường dẫn tương đối: Là vị trí tương đối giữa 2 tài liệu. Cách để xác định đường dẫn tương đối tương đối phức tạp. Có lẽ chúng ta cần một bài viết riêng biệt để bàn về cách xác định.

Document fragments

Ngoài ra, chúng ta còn có thể liên kết đến một đoạn cụ thể của tài liệu. Để làm được điều này, chúng ta caafn gán thuộc tính id cho đoạn tài liệu mà bạn muốn lên kết đến. Ví dụ, mình sẽ tạo một liên kết đến phần “Khái niệm” của bạn viết này.

Chúng ta sẽ có một liên kết như sau: Khái niệm siêu liên kết. Và khi bạn click vào liên kết này, trình duyệt sẽ đưa bạn lên đầu trang, vào đúng khu vực khái niệm.

Bạn cũng có thể tạo một liên kết đến một khu vực của tài liệu khác. Ví dụ:

Lúc này các bạn sẽ có một liên kết: Làm việc với bảng – Thêm tiêu đề

Một số lưu ý để sử dụng siêu liên kết tốt hơn

Sử dụng từ rõ nghĩa

Phần nội dung của phần tử a chúng ta cần mô tả càng rõ nghĩa càng tốt. Dựa vào đó, người dùng có thể đưa ra quyết định truy cập vào đường dẫn hay không.

Thứ hai là đảm bảo độ dài phần nội dung để người dùng có thể dễ dàng click vào.

Ưu tiên sử dụng các đường dẫn tương đối nếu có thể

Khi xây dựng trang web, chúng ta không thể đảm bảo những thay đổi trong tương lai. Do đó, việc sử dụng các đường dẫn tương đối đảm bảo tính ổn định cho hệ thống khi có những thay đổi phát sinh.

Mô tả chi tiết về đối tượng không phải một tài liệu HTML

Khi chúng ta liên kết đến một tài liệu HTML khác (một trang web). Thao tác này chỉ đơn thuần chuyển hướng người dùng. Nhưng khi chúng ta liên kết đến một file ảnh, file PDF, file MP4. Chúng có thể ảnh hướng đến dung lượng internet, trải nghiệm của người dùng. Do đó, nếu có thể các bạn nên thêm một chút mô tả để người dùng cân nhắc việc mở liên kết hay không

Sử dụng thuộc tính download

Khi sử tạo một liên kết đến một tài liệu và chúng ta mong muốn người dùng về, chúng ta có thể sử dụng thuộc tính download để đặt tên file khi người dùng tải về. Các bạn có thể xem ví dụ trên.

Nếu các bạn download trực tiếp, từ đường dẫn trên file tải về sẽ trùng tên với file trên máy chủ firefox. Nhưng với thuộc tính download, chúng ta có thể quy định được tên file khi tải về.

Email links

Ngoài liên kết đến một tài liệu, một tài nguyên hay một trang web khác. Bạn cũng có thể dễ dàng tạo một nút hay một đường dẫn mà khi người dùng click vào, hệ thống sẽ mở ứng dụng gửi mail mặc định.

Để tạo một liên kết như vậy, chúng ta sẽ sử dụng tiền tố mailto: vào giá trị của thuộc tính href của tag a. Với một đoạn code HTML bên dưới

Bạn sẽ nhận được đường dẫn giống vầy: Gửi thư cho mình nhé!

Mô tả chi tiết

Ngoài địa chỉ email, bạn cũng có thể cung cấp một số thông tin khác. Trong thực tế, bất kỳ trường tiêu đề tiêu chuẩn nào cũng có thể thêm vào URL mailto. Trong đó, các trường mà chúng ta thường dùng là “subject”, “cc” và “bcc”.

Một số mẫu mailto URLs chúng ta thường sử dụng:

  • mailto:hoadm.net@gmail.com
  • mailto:hoadm.net@gmail.com,hoadm.me@gmail.com
  • mailto: hoadm.net@gmail.com?cc=hoadm.me@gmail.com
  • mailto: hoadm.net@gmail.com?subject=This%20is%20the%20subject