Cách mở liên kết trong tab mới bằng HTML (target _b…

Q: Làm sao để liên kết mở trong tab mới bằng HTML?

Thêm target="blank" vào thẻ : Example . Trình duyệt mở trang trong tab mới và giữ nguyên trang hiện tại.

Q: Có còn cần rel="noopener" khi dùng target="_blank" không?

Chrome, Firefox và Safari hiện nay tự động áp dụng noopener cho liên kết target="_blank", nên trang mới không thể truy cập ngược lại trang của bạn qua window.opener. Viết rel="noopener" không tốn gì và bảo vệ người truy cập dùng trình duyệt cũ, nên phần lớn các hướng dẫn viết code vẫn yêu cầu nó.

Q: noopener và noreferrer khác nhau thế nào?

noopener cắt liên hệ giữa hai tab (window.opener là null ở tab mới). noreferrer làm điều đó và còn ngăn trình duyệt gửi URL trang của bạn làm referrer, nên công cụ phân tích của trang kia thấy lượt truy cập là trực tiếp.

Q: HTML có thể buộc liên kết mở trong cửa sổ mới thay vì tab không?

Không. target="_blank" yêu cầu một ngữ cảnh duyệt web mới, còn trình duyệt và cài đặt của người dùng quyết định đó là tab hay cửa sổ. Các trình duyệt hiện nay mở tab.

Q: Làm sao mở mọi liên kết trên trang trong tab mới?

Đặt trong . Khi đó mọi liên kết không có target riêng sẽ mở trong tab mới. Nó cũng ảnh hưởng tới form, nên chỉ dùng trên những trang mà bạn thật sự muốn như vậy.

Cách mở liên kết trong tab mới bằng HTML (target _blank)

Thêm target="_blank" vào liên kết để mở nó trong tab mới. Trang này giải thích rel="noopener" và noreferrer, cách báo cho người dùng biết liên kết mở tab mới, các giá trị target khác và cách làm điều đó bằng JavaScript.

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

Mở liên kết trong tab mới với target="_blank"

Thêm target="_blank" vào liên kết. Trình duyệt mở trang đích trong tab mới và giữ nguyên trang của bạn.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab</title>
</head>
<body>
  <p>
    <a href="https://developer.mozilla.org/" target="_blank" rel="noopener">
      MDN web docs
    </a>
    opens in a new tab.
  </p>
</body>
</html>

Toàn bộ kỹ thuật chỉ có vậy: target="_blank" trên thẻ <a>, cộng với rel="noopener", được giải thích ngay sau đây. Người đọc cũng có thể tự mở bất kỳ liên kết nào trong tab mới bằng Ctrl+click (Cmd+click trên Mac) hoặc nhấp chuột giữa, nên chỉ dùng target="_blank" khi việc rời trang sẽ khiến họ mất gì đó, như một form điền dở hay một video đang phát.

Các bản xem trước trên trang này mở mọi liên kết ra ngoài trong tab mới, dù có target hay không, vì khung ví dụ không bao giờ được chuyển sang trang khác. Để thấy sự khác biệt mà target tạo ra, hãy lưu ví dụ thành tệp và mở nó trong trình duyệt.

rel="noopener" và rel="noreferrer"

Trước đây, một trang được mở bằng target="_blank" nhận được tham chiếu ngược lại trang của bạn qua window.opener, và có thể dùng nó để chuyển tab của bạn sang URL khác (ví dụ một trang đăng nhập giả). rel="noopener" xóa tham chiếu đó.

Giá trị `rel`	`window.opener` trong tab mới	Gửi referrer cho trang mới
không có (trình duyệt cũ)	Trang của bạn	Có
không có (trình duyệt hiện nay)	`null`	Có
`noopener`	`null`	Có
`noreferrer`	`null`	Không
`opener`	Trang của bạn	Có

Các phiên bản hiện tại của Chrome, Firefox và Safari coi mọi liên kết target="_blank" là noopener trừ khi bạn viết rel="opener". Dù vậy, viết rel="noopener" vẫn bảo vệ người truy cập dùng trình duyệt cũ và thể hiện rõ ý định trong code.

noreferrer còn ngăn trình duyệt gửi referrer, nên trang bạn liên kết tới không biết người truy cập đến từ trang nào. Đó là lựa chọn về quyền riêng tư, không phải về bảo mật: dùng nó khi URL của bạn cần giữ kín, và bỏ nó đi với các đối tác cần thấy lượng truy cập từ bạn.

<!-- Safe, the other site still sees the referral -->
<a href="https://example.com" target="_blank" rel="noopener">Example</a>

<!-- Safe, and the other site does not see where the visit came from -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

rel nhận nhiều giá trị ngăn cách bằng khoảng trắng, nên noopener kết hợp được với các giá trị SEO: rel="noopener sponsored" cho liên kết trả phí, rel="noopener nofollow" cho liên kết bạn không bảo chứng.

Báo cho người dùng biết liên kết mở tab mới

Một tab mới mở ra không báo trước gây mất phương hướng, nhất là với người dùng trình đọc màn hình, những người có thể không nhận ra trang đã thay đổi. Hãy nói rõ điều đó trong liên kết. Một biểu tượng nhỏ cho người nhìn thấy biết; văn bản ẩn báo cho người dùng trình đọc màn hình:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab hint</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    a[target="_blank"]::after {
      content: " \2197";
      font-size: 0.85em;
    }
  </style>
</head>
<body>
  <p>
    Read the
    <a href="https://www.w3.org/WAI/" target="_blank" rel="noopener">
      accessibility guidelines<span class="visually-hidden"> (opens in a new tab)</span></a>
    before you start.
  </p>
</body>
</html>

Selector a[target="_blank"] tự động thêm mũi tên cho mọi liên kết mở tab mới, nên bạn không bao giờ bỏ sót. Span ẩn được đọc như một phần tên liên kết, "accessibility guidelines (opens in a new tab)", nhưng không chiếm chỗ trên màn hình.

Tự động đánh dấu mọi liên kết ra ngoài

Selector thuộc tính có thể định dạng liên kết theo href của chúng. Ở đây mọi liên kết bắt đầu bằng http đều có mũi tên, còn các liên kết trong trang web thì không:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>External links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    a[href^="http"]::after {
      content: " \2197";
      color: #2563eb;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="/pricing">Pricing</a> (same site)</li>
    <li><a href="/docs">Docs</a> (same site)</li>
    <li><a href="https://github.com/" target="_blank" rel="noopener">GitHub</a></li>
    <li><a href="https://www.w3.org/" target="_blank" rel="noopener">W3C</a></li>
  </ul>
</body>
</html>

^= nghĩa là "bắt đầu bằng". Selector chỉ định dạng liên kết: các thuộc tính target và rel vẫn phải có trong HTML.

Các giá trị của target

target cho biết liên kết mở ở đâu. Có bốn từ khóa, và mọi giá trị khác đều là một cái tên:

`target`	Mở liên kết trong
`_self`	Cùng tab hoặc frame. Đây là giá trị mặc định.
`_blank`	Một tab mới, không có tên
`_parent`	Frame cha của frame hiện tại (giống `_self` khi không có frame)
`_top`	Toàn bộ tab, thoát khỏi mọi frame
bất kỳ tên nào, ví dụ `help`	Tab hoặc frame có tên đó, được tạo mới nếu chưa có

Một target có tên sẽ được dùng lại. Mọi liên kết có target="help" đều mở trong cùng một tab, nên người đọc nhấp vào năm liên kết trợ giúp sẽ chỉ có một tab, không phải năm. _top là giá trị nên dùng bên trong <iframe> khi một liên kết cần thay thế cả trang chứ không chỉ frame.

Mở mọi liên kết trong tab mới với phần tử base

<base target="_blank"> trong <head> đặt target mặc định cho mọi liên kết và form trên trang:

<head>
  <base target="_blank">
</head>
<body>
  <a href="https://example.com">Opens in a new tab</a>
  <a href="/about" target="_self">Opens in this tab</a>
</body>

target riêng của liên kết được ưu tiên hơn <base>. Hãy hạn chế dùng cách này: một trang mà liên kết nào cũng mở tab mới rất khó chịu khi dùng.

Mở tab mới bằng JavaScript

window.open(url, '_blank') mở một tab từ script. Truyền 'noopener' làm đối số thứ ba để có cùng mức bảo vệ như thuộc tính rel. Khi đó, window.open trả về null thay vì tham chiếu tới tab mới:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>window.open</title>
</head>
<body>
  <button type="button" id="open">Open example.com</button>
  <p id="out"></p>

  <script>
    document.querySelector('#open').addEventListener('click', () => {
      const win = window.open('https://example.com/', '_blank', 'noopener');
      document.querySelector('#out').textContent = 'window.open returned: ' + win;
    });
  </script>
</body>
</html>

Trình duyệt chặn window.open trừ khi nó chạy để phản hồi một cú nhấp hoặc lần nhấn phím, nên hãy gọi nó trong một trình xử lý sự kiện, không phải khi tải trang hay sau một bộ hẹn giờ. Nếu đích đến là một URL người đọc có thể thấy trước, một liên kết với target="_blank" đơn giản hơn và chạy được mà không cần JavaScript. Bản thân liên kết được giới thiệu trong thẻ a trong HTML.

Lỗi thường gặp

target="blank" thiếu dấu gạch dưới. Đó là một cái tên, không phải từ khóa. Lần đầu nó vẫn mở tab mới, sau đó dùng lại tab đó cho mọi liên kết khác cùng tên.
target="_new". Cũng chỉ là một cái tên, với cùng hiệu ứng: một tab được dùng lại.
Đặt target cho mọi liên kết. Liên kết nội bộ nên mở trong cùng tab. Người đọc muốn tab mới đều biết cách mở.
Không báo hiệu rằng liên kết mở tab mới. Thêm một biểu tượng và văn bản ẩn.
Thêm noreferrer vào liên kết đối tác hoặc liên kết affiliate rồi thắc mắc vì sao đối tác không thấy lượt giới thiệu nào.

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

Làm sao để liên kết mở trong tab mới bằng HTML?

Thêm target="_blank" vào thẻ <a>: <a href="https://example.com" target="_blank" rel="noopener">Example</a>. Trình duyệt mở trang trong tab mới và giữ nguyên trang hiện tại.

Có còn cần rel="noopener" khi dùng target="_blank" không?

Chrome, Firefox và Safari hiện nay tự động áp dụng noopener cho liên kết target="_blank", nên trang mới không thể truy cập ngược lại trang của bạn qua window.opener. Viết rel="noopener" không tốn gì và bảo vệ người truy cập dùng trình duyệt cũ, nên phần lớn các hướng dẫn viết code vẫn yêu cầu nó.

noopener và noreferrer khác nhau thế nào?

noopener cắt liên hệ giữa hai tab (window.opener là null ở tab mới). noreferrer làm điều đó và còn ngăn trình duyệt gửi URL trang của bạn làm referrer, nên công cụ phân tích của trang kia thấy lượt truy cập là trực tiếp.

HTML có thể buộc liên kết mở trong cửa sổ mới thay vì tab không?

Không. target="_blank" yêu cầu một ngữ cảnh duyệt web mới, còn trình duyệt và cài đặt của người dùng quyết định đó là tab hay cửa sổ. Các trình duyệt hiện nay mở tab.

Làm sao mở mọi liên kết trên trang trong tab mới?

Đặt <base target="_blank"> trong <head>. Khi đó mọi liên kết không có target riêng sẽ mở trong tab mới. Nó cũng ảnh hưởng tới form, nên chỉ dùng trên những trang mà bạn thật sự muốn như vậy.

Khái niệm liên quan