HTML5: <a>

Tổng quan

Thẻ <a> (Anchor) dùng để thiết lập siêu liên kết (HyperLink). Việc thiết lập các siêu liên kết thông qua thuộc tính href.

Nhóm nội dung: Flow, Phrasing, Interactive, Palpable.

Nội dung được phép: Flow, Phrasing, Transparent.

Tính thiếu sót: Bắt buộc phải có thẻ mở <a> và thẻ đóng </a>.

Phần tử cha được phép: Bất kỳ phần tử nào chấp nhận nhóm nội dung Flow và Phrasing.

Giao diện DOM: HTMLAnchorElement.

Thuộc tính

<a> bao gồm Các thuộc tính Global.

href

Đây là thuộc tính cốt lõi của <a>, nếu không sử dụng thì thẻ <a> không còn tác dụng tạo siêu liên kết, mà chỉ có tác dụng tạo liên kết giữ chỗ (placeholder). href sẽ chỉ ra đích của liên kết, có thể là một URL (liên kết ngoài) hoặc một đoạn (fragment) URL (liên kết trong). Đoạn URL bắt đầu bằng dấu (#)  dùng để xác định vị trí đích trong trang web hiện thời (trên, giữa hoặc phần dưới cùng của trang web); URL có thể áp dụng cho bất kỳ giao thức nào mà được trình duyệt hỗ trợ (http, https, ftp, mailto, ...).

target

Dùng để xác định nơi hiển thị tài nguyên được liên kết. Trong HTML4 giá trị của target là tên hay từ khóa của một frame; còn trong HTML5 thì giá trị của target là tên hoặc từ khóa ứng với ngữ cảnh duyệt web (tab, cửa sổ (window) , frame nội tuyến). Dưới đây là những từ khóa của target:

_blank : Nạp tài nguên được liên kết vào một tab mới hoặc một cửa sổ mới không có tên.

_parent : Nạp tài nguyên vào frameset cha của frame hiện thời; nếu không có cha thì _parent tương ứng với _self.

_self : Nạp tài nguyên vào cùng một frame (HTML4) hoặc cùng một ngữ cảnh duyệt web (HTML5: tab hoặc window hoặc frame hiện thời).

_top : Trong HTML4, nạp tài nguyên vào tab hoặc window, hủy bỏ tất cả các frame khác; còn trong HTML5, nạp tài nguyên vào ngữ cảnh duyệt web ở cấp cao nhất (tab, window hay frame đầu tiên khi duyệt web); nếu không có điều này thì _top tương ứng với _self.

Chú ý rằng thuộc tính target chỉ có ý nghĩa khi thuộc tính href được sử dụng.

download

Thuộc tính download (HTML5) nếu được sử dụng sẽ chỉ ra rằng có thể sử dụng siêu liên kết để tải một tài nguyên, khi đó nếu người dùng nhấp vào siêu liên kết thì sẽ được nhắc nhở lưu trữ tài nguyên dưới dạng file vào thiết bị lưu trữ.

hreflang

Thuộc tính này dùng để xác định ngôn ngữ của tài nguyên được liên kết. Các giá trị của thuộc tính này được xác định tại BCP47 (đối với HTML5) hoặc RFC1766 (đối với HTML4). hreflang dùng kèm với thuộc tính href.

media

Thuộc tính này sẽ xác định loại phương tiện truyền thông (media) sẽ nạp cho tài nguyên được liên kết, giá trị của thuộc tính này phải là một truy vấn media. media chủ yếu là hữu ích khi liên kết tới tập tin CSS bằng cách cho phép người dùng chọn một tập tin CSS đáp ứng tốt nhất cho thiết bị chạy trên tài nguyên được liên kết. Các giá trị có thể có của media gồm: all, aural, braille, handheld, print, projection, screen, tty và tv.

ping

Thuộc tính ping (HTML5) nếu được sử dụng sẽ gửi tới các URL của các tài nguyên một thông báo/ping nếu người dùng follow các siêu liên kết.

rel

Khi được dùng cùng với thuộc tính href thì rel có tác dụng xác định mối quan hệ giữa đối tượng đích và đối tượng liên kết. 

charset

Dùng để xác định mã ký tự của tài nguyên được liên kết. Giá trị của thuộc tính này là một danh sách các bộ ký tự phân cách nhau bằng ký tự dấu cách (space) hoặc dấu (;) và các bộ ký tự này được định nghĩa trong RFC 2045; giá trị mặc định là ISO-8859-1.

Lưu ý: charset đã bị lỗi thời trong HTML5, bạn nên sử dụng header HTTP Content-Type trong tài nguyên được liên kết.

Cách sử dụng

Liên kết ngoài

Tức là liên kết tới một trang web khác hoặc liên kết email.

Cú pháp:

, trong đó, Điểm_liên_kết có thể là một chuỗi, một hình ảnh hoặc một đối tượng bất kỳ.

Trong trường hợp bạn muốn siêu liên kết được mở ở Tab hay cửa sổ mới bạn sử dụng thuộc tính target="_blank" .

Ví dụ:

Demo

Mặc định điểm liên kết sẽ được gạch chân và có font chữ màu blue, nếu bạn muốn bỏ gạch chân hay đổi màu cho điểm liên kết bạn sử dụng CSS như sau:

Liên kết trong

Là liên kết tới một vị trí nào đó (trên, giữa, dưới, ...) trong trang web hiện tại.

Cú pháp:

Demo

Khả năng tương thích trình duyệt

Desktop

Mobile