<a>: The Anchor element

Try it

<p>You can reach Michael at:</p>

<ul>
  <li><a href="https://example.com">Website</a></li>
  <li><a href="mailto:m.bluth@example.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

li {
  margin-bottom: 0.5rem;
}

Thuộc tính

Các thuộc tính của phần tử này bao gồm các thuộc tính toàn cục.

attributionsrc Deprecated

Chỉ định rằng bạn muốn trình duyệt gửi tiêu đề Attribution-Reporting-Eligible. Phía máy chủ sẽ sử dụng điều này để kích hoạt việc gửi tiêu đề Attribution-Reporting-Register-Source trong phản hồi, nhằm đăng ký một nguồn phân bổ dựa trên điều hướng.

Trình duyệt lưu dữ liệu nguồn liên quan đến nguồn phân bổ dựa trên điều hướng (như được cung cấp trong tiêu đề phản hồi Attribution-Reporting-Register-Source) khi người dùng nhấp vào liên kết. Xem Attribution Reporting API để biết thêm chi tiết.

Có hai phiên bản của thuộc tính này bạn có thể đặt:

• Boolean, tức là chỉ có tên attributionsrc. Điều này chỉ định rằng bạn muốn tiêu đề Attribution-Reporting-Eligible được gửi đến cùng máy chủ mà thuộc tính href trỏ đến. Điều này ổn khi bạn xử lý việc đăng ký nguồn phân bổ trên cùng một máy chủ.

• Giá trị chứa một hoặc nhiều URL, ví dụ:

  html

  attributionsrc="https://a.example/register-source
  https://b.example/register-source"
  

  Điều này hữu ích trong trường hợp tài nguyên được yêu cầu không nằm trên máy chủ bạn kiểm soát, hoặc bạn chỉ muốn xử lý việc đăng ký nguồn phân bổ trên một máy chủ khác. Trong trường hợp này, bạn có thể chỉ định một hoặc nhiều URL làm giá trị của attributionsrc. Khi yêu cầu tài nguyên xảy ra, tiêu đề Attribution-Reporting-Eligible sẽ được gửi đến (các) URL được chỉ định trong attributionsrc ngoài nguồn gốc tài nguyên. Các URL này sau đó có thể phản hồi với Attribution-Reporting-Register-Source để hoàn tất việc đăng ký.

  Note: Chỉ định nhiều URL có nghĩa là nhiều nguồn phân bổ có thể được đăng ký trên cùng một tính năng. Bạn có thể ví dụ có các chiến dịch khác nhau mà bạn đang cố gắng đo lường mức độ thành công, liên quan đến việc tạo báo cáo khác nhau trên các dữ liệu khác nhau.

Các phần tử <a> không thể được sử dụng làm bộ kích hoạt phân bổ, chỉ là nguồn.

download

Khiến trình duyệt xử lý URL được liên kết như một tệp tải xuống. Có thể sử dụng có hoặc không có giá trị filename:

• Không có giá trị, trình duyệt sẽ đề xuất tên tệp/phần mở rộng, được tạo từ nhiều nguồn:

  • Tiêu đề HTTP Content-Disposition
  • Đoạn cuối trong đường dẫn URL
  • Kiểu media (từ tiêu đề Content-Type, phần đầu của URL data:, hoặc Blob.type cho URL blob:)

• filename: định nghĩa giá trị đề xuất làm tên tệp. Các ký tự / và \ được chuyển đổi thành dấu gạch dưới (_). Hệ thống tệp có thể cấm các ký tự khác trong tên tệp, vì vậy trình duyệt sẽ điều chỉnh tên đề xuất nếu cần.

Note:

• download chỉ hoạt động với URL cùng nguồn gốc, hoặc các lược đồ blob: và data:.
• Cách trình duyệt xử lý tải xuống khác nhau tùy trình duyệt, cài đặt người dùng và các yếu tố khác. Người dùng có thể được nhắc trước khi tải xuống bắt đầu, hoặc tệp có thể được lưu tự động, hoặc có thể mở tự động, trong ứng dụng bên ngoài hoặc trong trình duyệt.
• Nếu tiêu đề Content-Disposition có thông tin khác với thuộc tính download, hành vi kết quả có thể khác nhau:
  • Nếu tiêu đề chỉ định filename, nó sẽ ưu tiên hơn tên tệp được chỉ định trong thuộc tính download.
  • Nếu tiêu đề chỉ định một sắp xếp inline, Chrome và Firefox ưu tiên thuộc tính và xử lý nó như một tải xuống. Các phiên bản Firefox cũ (trước 82) ưu tiên tiêu đề và sẽ hiển thị nội dung inline.

href

URL mà siêu liên kết trỏ đến. Các liên kết không bị giới hạn ở URL dựa trên HTTP — chúng có thể sử dụng bất kỳ lược đồ URL nào được trình duyệt hỗ trợ:

• Số điện thoại với URL tel:
• Địa chỉ email với URL mailto:
• Tin nhắn SMS với URL sms:
• Mã thực thi với URL javascript:
• Trong khi trình duyệt web có thể không hỗ trợ các lược đồ URL khác, các trang web có thể với registerProtocolHandler()

Ngoài ra, các tính năng URL khác có thể định vị các phần cụ thể của tài nguyên, bao gồm:

• Các phần của trang với các đoạn tài liệu
• Các phần văn bản cụ thể với đoạn văn bản
• Các đoạn của tệp phương tiện với các đoạn phương tiện

hreflang

Gợi ý ngôn ngữ của con người về URL được liên kết. Không có chức năng tích hợp. Các giá trị được phép giống với thuộc tính toàn cục lang.

interestfor Experimental Non-standard

Xác định phần tử <a> như là invoker quan tâm. Giá trị của nó là id của phần tử đích, sẽ bị ảnh hưởng theo một cách nào đó (thường là hiển thị hoặc ẩn) khi sự quan tâm được thể hiện hoặc mất đi trên phần tử invoker (ví dụ, bằng cách di chuột vào/ra hoặc tập trung/mất tập trung vào nó). Xem Sử dụng interest invokers để biết thêm chi tiết và ví dụ.

ping

Danh sách URL phân tách bằng dấu cách. Khi liên kết được theo dõi, trình duyệt sẽ gửi các yêu cầu POST với nội dung PING đến các URL. Thường dùng để theo dõi.

referrerpolicy

Bao nhiêu referrer cần gửi khi theo dõi liên kết.

• no-referrer: Tiêu đề Referer sẽ không được gửi.
• no-referrer-when-downgrade: Tiêu đề Referer sẽ không được gửi đến các origin không có TLS (HTTPS).
• origin: Referrer được gửi sẽ bị giới hạn ở nguồn gốc của trang đang tham chiếu: lược đồ, host, và port của nó.
• origin-when-cross-origin: Referrer được gửi đến các nguồn gốc khác sẽ bị giới hạn ở lược đồ, host và port. Điều hướng trên cùng nguồn gốc vẫn bao gồm đường dẫn.
• same-origin: Một referrer sẽ được gửi cho cùng nguồn gốc, nhưng các yêu cầu cross-origin sẽ không chứa thông tin referrer.
• strict-origin: Chỉ gửi nguồn gốc của tài liệu như là referrer khi mức độ bảo mật giao thức giữ nguyên (HTTPS→HTTPS), nhưng không gửi đến đích kém an toàn hơn (HTTPS→HTTP).
• strict-origin-when-cross-origin (mặc định): Gửi URL đầy đủ khi thực hiện yêu cầu cùng nguồn gốc, chỉ gửi nguồn gốc khi mức độ bảo mật giao thức giữ nguyên (HTTPS→HTTPS), và không gửi tiêu đề đến đích kém an toàn hơn (HTTPS→HTTP).
• unsafe-url: Referrer sẽ bao gồm nguồn gốc và đường dẫn (nhưng không có đoạn, mật khẩu, hoặc tên người dùng). Giá trị này không an toàn, vì nó rò rỉ nguồn gốc và đường dẫn từ các tài nguyên được bảo vệ TLS đến các nguồn gốc không an toàn.

rel

Mối quan hệ của URL được liên kết dưới dạng các loại liên kết phân tách bằng dấu cách.

target

Nơi hiển thị URL được liên kết, là tên cho một ngữ cảnh duyệt (tab, cửa sổ, hoặc <iframe>). Các từ khóa sau có ý nghĩa đặc biệt về nơi tải URL:

• _self: Ngữ cảnh duyệt hiện tại. (Mặc định)
• _blank: Thường là tab mới, nhưng người dùng có thể cấu hình trình duyệt để mở cửa sổ mới thay thế.
• _parent: Ngữ cảnh duyệt cha của ngữ cảnh hiện tại. Nếu không có cha, hành xử như _self.
• _top: Ngữ cảnh duyệt trên cùng. Cụ thể, điều này có nghĩa là ngữ cảnh "cao nhất" là tổ tiên của ngữ cảnh hiện tại. Nếu không có tổ tiên, hành xử như _self.
• _unfencedTop: Cho phép các fenced frames nhúng điều hướng khung cấp cao nhất (tức là, đi qua root của fenced frame, không giống các đích được dành riêng khác). Lưu ý rằng điều hướng vẫn sẽ thành công nếu điều này được sử dụng bên ngoài ngữ cảnh fenced frame, nhưng nó sẽ không hoạt động như một từ khóa được dành riêng.

Note: Đặt target="_blank" trên các phần tử <a> ngầm cung cấp cùng hành vi rel như đặt rel="noopener" không đặt window.opener.

type

Gợi ý về định dạng của URL được liên kết với MIME type. Không có chức năng tích hợp.

Thuộc tính đã lỗi thời

charset Deprecated

Gợi ý về mã hóa ký tự của URL được liên kết.

Note: Thuộc tính này đã lỗi thời và không nên được sử dụng bởi tác giả. Sử dụng tiêu đề HTTP Content-Type trên URL được liên kết.

coords Deprecated

Được sử dụng với thuộc tính shape. Danh sách tọa độ phân tách bằng dấu phẩy.

name Deprecated

Cần thiết để xác định vị trí đích có thể trong một trang. Trong HTML 4.01, id và name đều có thể được sử dụng trên <a>, miễn là chúng có các giá trị giống nhau.

Note: Sử dụng thuộc tính toàn cục id thay thế.

rev Deprecated

Chỉ định liên kết ngược; đối lập với thuộc tính rel. Đã lỗi thời vì rất khó hiểu.

shape Deprecated

Hình dạng của vùng siêu liên kết trong bản đồ ảnh.

Note: Sử dụng phần tử <area> cho bản đồ ảnh thay thế.

Khả năng tiếp cận

Văn bản liên kết mạnh

Nội dung bên trong một liên kết phải cho biết liên kết dẫn đến đâu, kể cả ngoài ngữ cảnh.

Văn bản liên kết không thể tiếp cận, yếu

Một lỗi thường gặp đáng buồn là chỉ liên kết các từ "click here" hoặc "here":

<p>Learn more about our products <a href="/products">here</a>.</p>

Kết quả

Văn bản liên kết có thể tiếp cận, mạnh

May mắn thay, đây là một sửa chữa dễ dàng, và thực ra còn ngắn hơn phiên bản không thể tiếp cận!

<p>Learn more <a href="/products">about our products</a>.</p>

Kết quả

Phần mềm hỗ trợ có phím tắt để liệt kê tất cả các liên kết trên một trang. Tuy nhiên, văn bản liên kết mạnh có lợi cho tất cả người dùng — phím tắt "liệt kê tất cả liên kết" mô phỏng cách người dùng có thị giác nhanh chóng quét qua các trang.

Sự kiện onclick

Các phần tử neo thường bị lạm dụng như là các nút giả bằng cách đặt href của chúng thành # hoặc javascript:void(0) để ngăn trang tải lại, sau đó lắng nghe sự kiện click của chúng.

Các giá trị href giả mạo này gây ra hành vi không mong đợi khi sao chép/kéo các liên kết, mở liên kết trong tab/cửa sổ mới, đánh dấu trang, hoặc khi JavaScript đang tải, gặp lỗi, hoặc bị tắt. Chúng cũng truyền đạt ngữ nghĩa không chính xác đến các công nghệ hỗ trợ, như trình đọc màn hình.

Sử dụng một <button> thay thế. Nói chung, bạn chỉ nên sử dụng siêu liên kết để điều hướng đến URL thực.

Liên kết ngoài và liên kết đến tài nguyên không phải HTML

Các liên kết mở trong tab/cửa sổ mới qua target="_blank", hoặc các liên kết trỏ đến tệp tải xuống nên chỉ ra điều gì sẽ xảy ra khi liên kết được theo dõi.

Những người có tầm nhìn thấp, điều hướng bằng công nghệ đọc màn hình, hoặc có mối quan tâm nhận thức có thể bị nhầm lẫn khi một tab, cửa sổ, hoặc ứng dụng mở ra bất ngờ. Phần mềm đọc màn hình cũ hơn thậm chí có thể không thông báo hành vi.

Liên kết mở tab/cửa sổ mới

<a target="_blank" href="https://www.wikipedia.org">
  Wikipedia (opens in new tab)
</a>

Kết quả

Liên kết đến tài nguyên không phải HTML

Nếu một biểu tượng được sử dụng để chỉ ra hành vi liên kết, đảm bảo nó có thuộc tính alt để mô tả mục đích của nó. Trong trường hợp biểu tượng bị thiếu, nội dung của thuộc tính alt vẫn truyền đạt hành vi của liên kết.

<p>
  <a href="https://www.wikipedia.org/" target="_blank">
    Wikipedia
    <img src="new-tab.svg" width="14" alt="(Opens in new tab)" />
  </a>
  <br />
  <a href="2017-annual-report.ppt">
    2017 annual report
    <img src="powerpoint.svg" width="14" alt="(PowerPoint file)" />
  </a>
</p>
<p>
  <a href="https://www.wikipedia.org/" target="_blank">
    Wikipedia
    <img src="missing-icon.svg" width="14" alt="(Opens in new tab)" />
  </a>
  <br />
  <a href="2017-annual-report.ppt">
    2017 annual report
    <img src="missing-icon.svg" width="14" alt="(PowerPoint file)" />
  </a>
</p>

Kết quả

• WebAIM: Links and Hypertext - Hypertext Links
• MDN / Understanding WCAG, Guideline 3.2
• G200: Opening new windows and tabs from a link only when necessary
• G201: Giving users advanced warning when opening a new window

Liên kết bỏ qua

Một liên kết bỏ qua là một liên kết được đặt càng sớm càng tốt trong nội dung <body> trỏ đến đầu nội dung chính của trang. Thông thường, CSS ẩn liên kết bỏ qua ngoài màn hình cho đến khi được tập trung.

<body>
  <a href="#content" class="skip-link">Skip to main content</a>

  <header>…</header>

  <!-- The skip link jumps to here -->
  <main id="content"></main>
</body>

.skip-link {
  position: absolute;
  top: -3em;
  background: white;
}
.skip-link:focus {
  top: 0;
}

Kết quả

Các liên kết bỏ qua cho phép người dùng bàn phím bỏ qua nội dung lặp lại trên nhiều trang, chẳng hạn như điều hướng tiêu đề.

Liên kết bỏ qua đặc biệt hữu ích cho những người điều hướng với sự trợ giúp của công nghệ hỗ trợ như điều khiển chuyển đổi, lệnh giọng nói, hoặc que miệng/gậy đầu, nơi hành động di chuyển qua các liên kết lặp lại có thể tốn nhiều công sức.

• WebAIM: "Skip Navigation" Links
• How-to: Use Skip Navigation links
• MDN / Understanding WCAG, Guideline 2.4 explanations
• Understanding Success Criterion 2.4.1

Kích thước và vị trí gần nhau

Kích thước

Các phần tử tương tác, như liên kết, nên cung cấp một vùng đủ lớn để dễ dàng kích hoạt chúng. Điều này giúp nhiều người khác nhau, bao gồm những người có vấn đề kiểm soát vận động và những người sử dụng các đầu vào không chính xác như màn hình cảm ứng. Kích thước tối thiểu 44×44 CSS pixels được khuyến nghị.

Các liên kết chỉ có văn bản trong nội dung văn xuôi được miễn yêu cầu này, nhưng vẫn là ý kiến hay để đảm bảo đủ văn bản được siêu liên kết để dễ dàng kích hoạt.

• Understanding Success Criterion 2.5.5: Target Size
• Target Size and 2.5.5
• Quick test: Large touch targets

Khoảng cách gần nhau

Các phần tử tương tác, như liên kết, được đặt gần nhau về mặt trực quan nên có khoảng cách phân tách chúng. Khoảng cách giúp những người có vấn đề kiểm soát vận động, những người có thể vô tình kích hoạt nội dung tương tác sai.

Khoảng cách có thể được tạo bằng cách sử dụng các thuộc tính CSS như margin.

• Hand tremors and the giant-button-problem

Ví dụ

Liên kết đến URL tuyệt đối

HTML

<a href="https://www.mozilla.com">Mozilla</a>

Kết quả

Liên kết đến URL tương đối

HTML

<a href="//example.com">Scheme-relative URL</a>
<a href="/vi/docs/Web/HTML">Origin-relative URL</a>
<a href="p">Directory-relative URL</a>
<a href="./p">Directory-relative URL</a>
<a href="../p">Parent-directory-relative URL</a>

a {
  display: block;
  margin-bottom: 0.5em;
}

Kết quả

Liên kết đến một phần tử trong cùng trang

<!-- <a> element links to the section below -->
<p><a href="#Section_further_down">Jump to the heading below</a></p>

<!-- Heading to link to -->
<h2 id="Section_further_down">Section further down</h2>

Kết quả

Liên kết đến địa chỉ email

Để tạo liên kết mở trong chương trình email của người dùng để cho phép họ gửi tin nhắn mới, sử dụng lược đồ mailto::

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

Kết quả

Để biết chi tiết về URL mailto:, chẳng hạn như bao gồm tiêu đề hoặc nội dung, xem Liên kết email hoặc RFC 6068.

Liên kết đến số điện thoại

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>

Kết quả

Hành vi liên kết tel: thay đổi theo khả năng của thiết bị:

• Thiết bị di động tự quay số.
• Hầu hết hệ điều hành có chương trình có thể thực hiện cuộc gọi, như Skype hoặc FaceTime.
• Các trang web có thể thực hiện cuộc gọi điện thoại với registerProtocolHandler, chẳng hạn như web.skype.com.
• Các hành vi khác bao gồm lưu số vào danh bạ, hoặc gửi số đến thiết bị khác.

Xem RFC 3966 để biết cú pháp, các tính năng bổ sung và các chi tiết khác về lược đồ URL tel:.

Sử dụng thuộc tính download để lưu <canvas> dưới dạng PNG

Để lưu nội dung của phần tử <canvas> dưới dạng hình ảnh, bạn có thể tạo một liên kết trong đó href là dữ liệu canvas dưới dạng URL data: được tạo bằng JavaScript và thuộc tính download cung cấp tên tệp cho tệp PNG được tải xuống:

Ứng dụng vẽ mẫu với liên kết lưu

HTML

<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my painting</a>
</p>

<canvas width="300" height="300"></canvas>

CSS

html {
  font-family: sans-serif;
}
canvas {
  background: white;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #6699cc;
  color: white;
  padding: 5px 10px;
}

JavaScript

const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
c.fillStyle = "hotpink";
let isDrawing;

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI * 2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener("mousemove", (event) =>
  draw(event.offsetX, event.offsetY),
);
canvas.addEventListener("mousedown", () => (isDrawing = true));
canvas.addEventListener("mouseup", () => (isDrawing = false));

document
  .querySelector("a")
  .addEventListener(
    "click",
    (event) => (event.target.href = canvas.toDataURL()),
  );

Kết quả

Bảo mật và quyền riêng tư

Các phần tử <a> có thể gây ra hậu quả cho bảo mật và quyền riêng tư của người dùng. Xem Referer header: privacy and security concerns để biết thông tin.

Sử dụng target="_blank" mà không có rel="noreferrer" và rel="noopener" khiến trang web dễ bị tấn công khai thác API window.opener, mặc dù lưu ý rằng, trong các phiên bản trình duyệt mới hơn, đặt target="_blank" ngầm cung cấp cùng sự bảo vệ như đặt rel="noopener". Xem khả năng tương thích trình duyệt để biết chi tiết.

Tóm tắt kỹ thuật

Thông số kỹ thuật

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

Xem thêm

• <link> tương tự <a>, nhưng dành cho các siêu liên kết metadata ẩn với người dùng.
• :link là lớp giả CSS sẽ khớp với các phần tử <a> có URL trong thuộc tính href mà người dùng chưa truy cập.
• :visited là lớp giả CSS sẽ khớp với các phần tử <a> có URL trong thuộc tính href mà người dùng đã truy cập trước đây.
• :any-link là lớp giả CSS sẽ khớp với các phần tử <a> có thuộc tính href.
• Đoạn văn bản là hướng dẫn của user-agent được thêm vào URL cho phép tác giả nội dung liên kết đến văn bản cụ thể trên một trang, mà không cần ID.