Tài liệu HTML chạy trực tiếp: Liên kết (a href)

Q: Làm sao tạo liên kết trong HTML?

Dùng phần tử anchor: Example . href là đích đến, còn văn bản giữa hai thẻ là phần người đọc nhấp vào.

Q: Làm sao liên kết tới một phần cụ thể của trang?

Gán id cho phần tử đích, rồi liên kết tới nó bằng dấu thăng: FAQ và FAQ . Từ một trang khác, thêm dấu thăng vào URL: .

Q: Vì sao liên kết đi sai trang khi tôi viết www?

Không có https://, trình duyệt coi www.example.com là một đường dẫn tương đối trên chính trang web của bạn, nên liên kết đi tới kiểu như yoursite.com/www.example.com. Luôn viết scheme cho liên kết ra ngoài: href="https://www.example.com".

Q: Thẻ a có chứa được div không?

Có. Trong HTML5, có thể bọc nội dung dạng khối như , một tiêu đề và một đoạn văn, đây là cách tạo liên kết cho cả một card. Nó không được chứa một liên kết khác, một nút hay bất kỳ phần tử tương tác nào khác.

Thẻ a trong HTML: cách tạo liên kết với a href

Cách phần tử <a> tạo liên kết: thuộc tính href, URL tuyệt đối và tương đối, nhảy tới một phần của trang bằng #id, liên kết tải xuống, thẻ card làm liên kết, và những lỗi làm hỏng liên kết.

Trang này có trình soạn thảo chạy trực tiếp. Sửa, chạy và xem đầu ra ngay lập tức.

Bởi Kevin Spektor, Đồng sáng lập và CTO

Đăng ngày Sep 24, 2026

Cách tạo liên kết trong HTML

Một liên kết là phần tử anchor, <a>, có thuộc tính href. href là nơi liên kết dẫn tới; nội dung giữa hai thẻ là phần người đọc nhấp vào.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Links</title>
</head>
<body>
  <p>
    Read the <a href="https://developer.mozilla.org/">MDN web docs</a>
    or go back to the <a href="/">home page</a>.
  </p>
  <p>This is <a>an anchor with no href</a>: it is not a link.</p>
</body>
</html>

Trình duyệt hiển thị liên kết màu xanh, có gạch chân và đổi con trỏ thành hình bàn tay. Dòng cuối cho thấy vì sao href quan trọng: thiếu nó, <a> chỉ là văn bản thường. Nó không nhận focus, không nhấp được và không được định dạng như một liên kết.

URL tuyệt đối và tương đối

Giá trị của href quyết định liên kết đi đâu. Các dạng chính:

`href`	Đi tới
`https://example.com/page`	Một URL tuyệt đối: đúng địa chỉ đó
`/about`	`about` ở thư mục gốc của trang web hiện tại
`about.html`	`about.html` trong cùng thư mục với trang hiện tại
`../index.html`	`index.html` ở thư mục cha
`#pricing`	Phần tử có `id="pricing"` trên trang này
`/help#faq`	Phần `faq` của một trang khác trên trang web này
`mailto:hi@example.com`	Một email mới trong ứng dụng thư của người đọc
`tel:+15551234567`	Một cuộc gọi, trên thiết bị có thể gọi điện

Dùng URL tuyệt đối cho các trang web khác và đường dẫn tính từ gốc (/about) bên trong trang web của bạn: chúng vẫn chạy đúng khi trang chứa chúng được chuyển sang thư mục khác.

<a href="https://www.wikipedia.org/">Wikipedia</a>  <!-- another site -->
<a href="/pricing">Pricing</a>                     <!-- same site, from the root -->
<a href="www.wikipedia.org">Broken</a>              <!-- relative path, not a site! -->

Dòng cuối là lỗi liên kết phổ biến nhất. Không có https://, trình duyệt đọc www.wikipedia.org như tên một tệp trong thư mục hiện tại.

Liên kết email và số điện thoại có trang riêng: liên kết email trong HTML.

Liên kết tới một phần của trang

Mọi phần tử có id đều có thể làm đích. Liên kết tới nó bằng # theo sau là id, và trình duyệt sẽ cuộn tới đó. Nhấp vào các liên kết trong bản xem trước:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Anchor links</title>
  <style>
    section { min-height: 220px; padding: 8px; border-top: 2px solid #e5e7eb; }
    :target { background: #fef3c7; }
  </style>
</head>
<body>
  <nav>
    <a href="#install">Install</a> |
    <a href="#usage">Usage</a> |
    <a href="#faq">FAQ</a>
  </nav>

  <section id="install"><h2>Install</h2></section>
  <section id="usage"><h2>Usage</h2></section>
  <section id="faq">
    <h2>FAQ</h2>
    <a href="#top">Back to top</a>
  </section>
</body>
</html>

Vài chi tiết:

Id phải khớp chính xác, kể cả chữ hoa chữ thường. href="#FAQ" không tìm thấy id="faq".
href="#top" và href="#" cuộn lên đầu trang ngay cả khi không có phần tử nào có id top.
Selector :target định dạng phần mà URL hiện đang trỏ tới. Trên một trang thật, phần đó sẽ được tô sáng; bản xem trước cuộn mà không đổi địa chỉ nên không thấy hiệu ứng tô sáng.
Để liên kết tới một phần của trang khác, thêm dấu thăng vào URL của trang đó: <a href="/docs/html/table#caption">.

Liên kết neo dưới header cố định

Một header dạng sticky hoặc fixed sẽ che phần đầu của mục bạn nhảy tới. scroll-margin-top trên các phần tử đích chừa chỗ cho header, và scroll-behavior: smooth tạo hiệu ứng cuộn mượt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: system-ui, sans-serif; }
    header {
      position: sticky;
      top: 0;
      padding: 12px 16px;
      background: #111827;
    }
    header a { color: #fff; margin-inline-end: 12px; }
    h2 { scroll-margin-top: 60px; margin: 0; padding: 8px 16px; background: #e5e7eb; }
    p { height: 320px; margin: 0; padding: 16px; }
  </style>
</head>
<body>
  <header>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
  </header>
  <h2 id="one">Section one</h2>
  <p>Content</p>
  <h2 id="two">Section two</h2>
  <p>Content</p>
  <h2 id="three">Section three</h2>
  <p>Content</p>
</body>
</html>

Xóa dòng scroll-margin-top rồi nhấp lại vào Two: tiêu đề bị che khuất sau header màu tối.

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

Thuộc tính download yêu cầu trình duyệt lưu tệp thay vì mở nó. Giá trị của nó, nếu có, là tên tệp được gợi ý:

<a href="/files/report-2026.pdf" download>Download the report</a>
<a href="/files/r-8f2a.pdf" download="report.pdf">Download (saved as report.pdf)</a>

download chỉ hoạt động với tệp cùng origin với trang (cùng scheme, host và cổng) và với URL data: và blob:. Với tệp ở origin khác, kể cả subdomain, trình duyệt bỏ qua nó và mở tệp như một liên kết bình thường. Máy chủ có thể buộc tải xuống bất kỳ tệp nào bằng header Content-Disposition: attachment.

Chữ liên kết rõ nghĩa

Người dùng trình đọc màn hình thường di chuyển trong trang theo từng liên kết, chỉ nghe chữ của liên kết. "Nhấp vào đây" hay "Đọc thêm" không cho họ biết gì cả.

<!-- Vague: -->
To see our prices, <a href="/pricing">click here</a>.

<!-- Clear: -->
See the <a href="/pricing">pricing plans</a>.

Thuộc tính title hiện tooltip khi rê chuột nhưng không hiện trên màn hình cảm ứng hay với phần lớn người dùng bàn phím, nên đừng đặt thông tin quan trọng vào đó.

Biến cả một card thành liên kết

<a> có thể bọc nội dung dạng khối: một tiêu đề, một ảnh và một đoạn văn đều có thể là một liên kết. Đây là cách tạo các card nhấp được.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .card {
      display: block;
      max-width: 280px;
      padding: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      color: #111827;
      text-decoration: none;
    }
    .card:hover { border-color: #2563eb; }
    .card h3 { margin: 0 0 6px; color: #2563eb; }
    .card p { margin: 0; }
  </style>
</head>
<body>
  <a class="card" href="https://developer.mozilla.org/">
    <h3>MDN web docs</h3>
    <p>Reference pages for HTML, CSS and JavaScript.</p>
  </a>
</body>
</html>

display: block làm cả khung nhấp được, không chỉ phần chữ. Giữ nội dung card ngắn gọn, vì trình đọc màn hình đọc toàn bộ nội dung đó làm tên liên kết. Và đừng bao giờ đặt một liên kết hay nút khác bên trong: các phần tử tương tác không được lồng trong <a>.

Các thuộc tính khác của thẻ a

Thuộc tính	Tác dụng
`href`	Đích đến. Thiếu nó, `<a>` không phải là liên kết
`target`	Mở ở đâu; `target="_blank"` mở tab mới, xem mở liên kết trong tab mới
`rel`	Quan hệ với trang đích: `noopener`, `nofollow`, `sponsored`, `ugc`
`download`	Lưu tệp thay vì mở
`hreflang`	Ngôn ngữ của trang được liên kết, dưới dạng gợi ý
`referrerpolicy`	Gửi bao nhiêu phần của URL hiện tại làm referrer

Lỗi thường gặp

URL bên ngoài thiếu scheme. href="www.site.com" là đường dẫn tương đối. Hãy viết https://.
Dùng <a href="#"> cho một hành động JavaScript. Nó cuộn lên đầu trang và thêm # vào URL. Nếu nhấp vào không dẫn đi đâu, hãy dùng <button>.
Liên kết trong liên kết, hoặc nút trong liên kết. Cả hai đều là HTML không hợp lệ: thẻ <a> thứ hai khiến trình phân tích đóng thẻ đầu tiên sớm, và một cú nhấp vào nút nằm trong liên kết không có đích rõ ràng.
Khoảng trắng trong tên tệp. href="my file.html" thường vẫn chạy vì trình duyệt mã hóa khoảng trắng, nhưng my-file.html tránh được hẳn vấn đề này.
Dùng "Nhấp vào đây" làm chữ liên kết. Hãy mô tả nơi liên kết dẫn tới.
Id lệch chữ hoa chữ thường. #Pricing và id="pricing" là khác nhau.

Câu hỏi thường gặp

Làm sao tạo liên kết trong HTML?

Dùng phần tử anchor: <a href="https://example.com">Example</a>. href là đích đến, còn văn bản giữa hai thẻ là phần người đọc nhấp vào.

href là viết tắt của gì?

Hypertext reference (tham chiếu siêu văn bản). Nó chứa URL mà liên kết trỏ tới: một địa chỉ đầy đủ, một đường dẫn trên cùng trang web như /about, một phần của trang như #pricing, hoặc một scheme như mailto:.

Làm sao liên kết tới một phần cụ thể của trang?

Gán id cho phần tử đích, rồi liên kết tới nó bằng dấu thăng: <h2 id="faq">FAQ</h2> và <a href="#faq">FAQ</a>. Từ một trang khác, thêm dấu thăng vào URL: <a href="/help#faq">.

Vì sao liên kết đi sai trang khi tôi viết www?

Không có https://, trình duyệt coi www.example.com là một đường dẫn tương đối trên chính trang web của bạn, nên liên kết đi tới kiểu như yoursite.com/www.example.com. Luôn viết scheme cho liên kết ra ngoài: href="https://www.example.com".

Thẻ a có chứa được div không?

Có. Trong HTML5, <a> có thể bọc nội dung dạng khối như <div>, một tiêu đề và một đoạn văn, đây là cách tạo liên kết cho cả một card. Nó không được chứa một liên kết khác, một nút hay bất kỳ phần tử tương tác nào khác.

Khái niệm liên quan