Thẻ HTML <a>

Hà Nguyễn

Một trang web có thể chứa nhiều liên kết khác nhau đưa bạn đến các trang web khác, và thậm chí đưa bạn tới 1 vị trí nhất định trên trang. Các liên kết này được gọi là siêu liên kết (hyperlink).

Siêu liên kết cho phép khách truy cập điều hướng giữa các trang Web bằng cách nhấp vào các từ, cụm từ hoặc hình ảnh. Vì vậy, bạn có thể tạo siêu liên kết bằng cách sử dụng văn bản hoặc hình ảnh có sẵn trên trang web.

Định nghĩa thẻ a

Một liên kết được chỉ định bằng một thẻ <a> trong HTML. Thẻ này được gọi là thẻ liên kết và bất kỳ thứ gì nằm giữa thẻ mở <a> và thẻ đóng </a> đều chính là nội dung mà người dùng sẽ kích vào nó để truy cập liên kết.

Cách sử dụng thẻ a

Thuộc tính quan trọng nhất của phần tử <a> là thuộc tính href, cho biết điểm đến của liên kết. Cú pháp như sau:

<a href = "Đường dẫn">Nội dung hiển thị link</a>

Mặc định, các liên kết sẽ xuất hiện như sau trong tất cả các trình duyệt:

Một liên kết CHƯA truy cập thường có định dạng gạch chân và màu xanh lam
Một liên kết ĐÃ truy cập thường có định dạng gạch chân và màu tím
Một liên kết ĐANG hoạt động thường được gạch chân và có màu đỏ

Ví dụ:

<!DOCTYPE html>
<html>
   
   <head>
      <title>Ví dụ về Hyperlink</title>
   </head>
	
   <body>
      <p>Kích vào liên kết dưới đây:</p>
      <a href = "https://quantrimang.com" target = "_self">Truy cập trang QuanTriMang</a>
   </body>
	
</html>

Bạn sẽ thấy nội dung tương tự như sau:

Kích vào liên kết dưới đây:

Truy cập trang QuanTriMang

Mẹo và lưu ý

Nếu thẻ <a> không có thuộc tính href, nó chỉ là phần giữ chỗ cho hyperlink.
Trang sau khi mở liên kết thường mở ngay trong cửa sổ trình duyệt hiện tại, trừ khi bạn chỉ định một target khác.
Sử dụng CSS để tạo các định dạng liên kết: Tìm hiểu thêm hướng dẫn về tạo CSS Link và CSS Button tại đây.

Hỗ trợ trình duyệt

Thẻ <a> được hỗ trợ trên hầu hết các trình duyệt phổ biến:

Thuộc tính của thẻ a

Thuộc tính	Giá trị	Mô tả
download	filename	Chỉ định rằng mục tiêu sẽ được tải xuống khi người dùng nhấp vào siêu liên kết
href	URL	Chỉ định URL của trang mà liên kết chuyển đến
hreflang	language_code	Chỉ định ngôn ngữ của tài liệu được liên kết
media	media_query	Chỉ định phương tiện/thiết bị nào mà tài liệu được liên kết được tối ưu hóa cho
ping	list_of_URLs	Chỉ định danh sách URL được phân tách bằng dấu cách mà khi liên kết được theo sau, các yêu cầu post với body ping sẽ được gửi bởi trình duyệt (trong nền). Thường được sử dụng để theo dõi.
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url	Chỉ định thông tin liên kết giới thiệu nào sẽ gửi cùng với liên kết
rel	alternate author bookmark external help license next nofollow noreferrer noopener prev search tag	Chỉ định mối quan hệ giữa tài liệu hiện tại và tài liệu được liên kết
target	_blank _parent _self _top	Chỉ định nơi để mở tài liệu được liên kết
type	media_type	Chỉ định loại media của tài liệu được liên kết

Thuộc tính target

_blank: Mở tài liệu được liên kết trong một cửa sổ hoặc tab mới.
_self: Mở tài liệu được liên kết trong cùng một khung.
_parent: Mở tài liệu được liên kết trong khung chính.
_top: Mở tài liệu được liên kết trong toàn bộ phần nội dung của cửa sổ.
targetframe: Mở tài liệu được liên kết trong khung mục tiêu được đặt tên targetframe.

Hãy thử ví dụ sau để hiểu sự khác biệt cơ bản trong một số tùy chọn được cung cấp cho thuộc tính target.

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về Hyperlink </title>
      <base href = "https://quantrimang.com/">
   </head>
	
   <body>
      <p>Kích vào liên kết tương ứng dưới đây</p>
      <a href = "/html" target = "_blank">Mở với Blank (Tab mới)</a> |
      <a href = "/html" target = "_self">Mở với Self</a> |
      <a href = "/html" target = "_parent">Mở với Parent</a> |
      <a href = "/html" target = "_top">Mở với Body</a>
   </body>

</html>

Kết quả nhận được như sau:

Kích vào liên kết tương ứng dưới đây

Mở với Blank (Tab mới) | Mở với Self | Mở với Parent | Mở với Body

Sử dụng đường dẫn cơ sở (Base Path)

Khi bạn liên kết nhiều link liên quan đến cùng một trang web, sẽ không cần phải cung cấp URL đầy đủ cho mọi liên kết. Bạn có thể loại bỏ nó nếu sử dụng thẻ <base> trong phần head của file HTML.

Thẻ <base> được sử dụng để cung cấp một đường dẫn cơ sở cho tất cả các liên kết. Thông qua đó, trình duyệt sẽ nối đường dẫn tương đối trong nội dung với đường dẫn cơ sở này để tạo thành một URL hoàn chỉnh.

Nói dài dòng không bằng 1 ví dụ, bạn có thể xem chi tiết hơn ở ngay ví dụ trên, phần:

   <head>
      <title>Ví dụ về Hyperlink </title>
      <base href = "https://quantrimang.com/">
   </head>

Sau đó các đường dẫn bên dưới chỉ cần dùng:

      <a href = "/html" target = "_blank">Mở với Blank (Tab mới)</a> |
      <a href = "/html" target = "_self">Mở với Self</a> |
      <a href = "/html" target = "_parent">Mở với Parent</a> |
      <a href = "/html" target = "_top">Mở với Body</a>

Kết hợp 2 điều trên thì kết quả của bạn sau khi kích vào link là nó sẽ kết nối href của <base> + href của <a> trong nội dung. Kết quả sẽ thành liên kết đầy đủ: https://quantrimang.com/html

Liên kết đến 1 phần trên trang

Bạn có thể tạo liên kết tới một phần cụ thể trên trang web nhất định bằng cách sử dụng thuộc tính name (Lưu ý: Thuộc tính name không được dùng trên HTML5, thay vào đó hãy sử dụng thuộc tính id và title).

Quy trình để tạo liên kết tới 1 phần trên trang gồm 2 bước:

Bước 1: Tạo một liên kết, nơi mà bạn muốn sẽ giới thiệu link tới nó, đặt tên cho nó bằng thẻ <a> và thuộc tính name, cụ thể như sau:

<h2>Sử dụng đường dẫn cơ sở <a name = "basepath"></a></h2>

Bước 2: Tạo hyperlink để liên kết từ vị trí bất kì tới nơi mà bạn đã đặt tên, ví dụ:

<a href = "#basepath">Xem thêm về thẻ Base</a>

Thao tác này sẽ giúp bạn chuyển đến phần Base Path mà ở bên trên chúng tôi đã giới thiệu:

Xem thêm về thẻ Base

Liên kết tải xuống

Bạn có thể tạo liên kết vào văn bản để cho phép tải xuống các tệp PDF, DOC hay ZIP. Điều này rất đơn giản, bạn chỉ cần cung cấp URL đầy đủ tới file có thể tải xuống như sau:

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về Hyperlink trên QuanTriMang.com</title>
   </head>
	
   <body>
      <a href = "https://quantrimang.com/page.pdf">Tải file PDF</a>
   </body>
	
</html>

Các ví dụ khác

Cách sử dụng hình ảnh làm liên kết:

<a href="https://quantrimang.com">
<img border="0" alt="QuanTriMang" src="logo.png" width="100">
</a>

Cách liên kết đến một địa chỉ email:

<a href="mailto:info@quantrimang.com">Send email</a>

Cách liên kết với một số điện thoại:

<a href="tel:024 2242 6188">024 2242 6188</a>

Cách liên kết với một JavaScript:

<a href="javascript:alert('Hello World!');">Execute JavaScript</a>

Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị phần tử <a> với các giá trị mặc định sau:

a:link, a:visited {
  color: (internal value);
  text-decoration: underline;
  cursor: auto;
}

a:link:active, a:visited:active {
  color: (internal value);
}

Vậy là qua bài này, bạn chắc chắn đã có thể nắm được kiến thức cơ bản nhất và cần dùng nhất khi làm việc với thẻ <a> và các liên kết trên trang web rồi đó. Hãy tiếp tục theo dõi ở các loạt bài tiếp theo nhé!

Thứ Tư, 18/05/2022 09:08

5 ★ 16 👨 1.916