Liên kết và điều hướng

Thẻ liên kết <a>

Thẻ <a> (anchor) dùng để tạo liên kết. Thuộc tính bắt buộc là href — chứa địa chỉ đích.

<a href="https://example.com">Truy cập ví dụ</a>

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

Với URL tương đối, trình duyệt tính từ vị trí file hiện tại:

• page.html — cùng thư mục
• folder/page.html — vào thư mục con
• ../page.html — lùi lên một cấp thư mục

Các kiểu liên kết đặc biệt

Liên kết email — mailto:

<a href="mailto:lienhe@example.com">Gửi email cho tôi</a>

Khi nhấn, trình duyệt mở ứng dụng email mặc định với địa chỉ đã điền sẵn.

Liên kết điện thoại — tel:

<a href="tel:+84901234567">Gọi: 0901 234 567</a>

Đặc biệt hữu ích trên thiết bị di động.

Mở trong tab mới — target="_blank"

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Mở trong tab mới
</a>

Bảo mật: Khi dùng target="_blank", bắt buộc thêm rel="noopener noreferrer" để ngăn trang đích truy cập window.opener — một lỗ hổng bảo mật đã biết.

Liên kết neo (anchor navigation)

Dùng thuộc tính id để đánh dấu vị trí trên trang, sau đó liên kết đến bằng #id:

<!-- Đích đến -->
<h2 id="gioi-thieu">Giới thiệu</h2>

<!-- Liên kết đến đó -->
<a href="#gioi-thieu">Đến phần Giới thiệu</a>

Có thể kết hợp với URL: href="trang-khac.html#gioi-thieu".

Thẻ điều hướng <nav>

Dùng <nav> để nhóm các liên kết điều hướng chính:

<nav>
  <a href="/">Trang chủ</a>
  <a href="/bai-viet/">Bài viết</a>
  <a href="/lien-he/">Liên hệ</a>
</nav>

Tải file — thuộc tính download

<a href="/files/tai-lieu.pdf" download>Tải tài liệu PDF</a>
<!-- Đặt tên file khi tải về -->
<a href="/files/report.pdf" download="bao-cao-2024.pdf">Tải báo cáo</a>

Ví dụ tổng hợp

<h2>Các kiểu liên kết</h2>

<h3>Liên kết thông thường</h3>
<p>
  <a href="https://vi.wikipedia.org" target="_blank" rel="noopener noreferrer">
    Mở Wikipedia trong tab mới
  </a>
</p>

<h3>Liên kết email và điện thoại</h3>
<p>
  <a href="mailto:hoc@example.com">Gửi email: hoc@example.com</a>
</p>
<p>
  <a href="tel:+84901234567">Gọi: 0901 234 567</a>
</p>

<h3>Điều hướng nội trang (anchor)</h3>
<p><a href="#phan-cuoi">Xuống phần cuối ↓</a></p>

<hr>
<p>...nội dung dài...</p>
<p>...nội dung dài...</p>
<p>...nội dung dài...</p>

<h3 id="phan-cuoi">Phần cuối trang</h3>
<p>Bạn đã đến đây bằng liên kết neo!</p>
<p><a href="#">Lên đầu trang ↑</a></p>