Thẻ HTML <a>

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 LinkCSS 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ínhGiá trịMô tả
downloadfilenameChỉ đị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
hrefURLChỉ định URL của trang mà liên kết chuyển đến
hreflanglanguage_codeChỉ định ngôn ngữ của tài liệu được liên kết
mediamedia_queryChỉ đị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
pinglist_of_URLsChỉ đị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.
referrerpolicyno-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
relalternate
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
typemedia_typeChỉ đị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 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:

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:[email protected]">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ứ Ba, 02/08/2022 11:05
516 👨 291
0 Bình luận
Sắp xếp theo