Thẻ liên kết

Trong HTML, thẻ liên kết (anchor link) là thành phần quan trọng để điều hướng người dùng giữa các trang, tới một vị trí cụ thể trong trang, hoặc tới các tài nguyên khác như email, điện thoại, file tải xuống...

Thẻ <a> và thuộc tính href

• Thẻ <a> (anchor - điểm neo, neo một liên kết) được dùng để tạo ra liên kết cho văn bản, hình ảnh, hoặc bất kỳ phần tử nào khác.
• Thuộc tính href (hypertext reference) xác định URL mà người dùng sẽ được chuyển đến khi nhấn vào liên kết.
• Nếu không khai báo href, thẻ <a> không phải là liên kết.
• Nếu để href="" thẻ <a> sẽ tải lại trang hiện tại.
• Nếu href="#" khi nhấn sẽ cuộn lên đầu trang.

Ví dụ:

<a href="https://google.com">Tới Google</a> <!-- Liên kết ngoài -->
<a href="">Tải lại trang hiện tại</a>
<a href="#">Lên đầu trang</a>

Thuộc tính target và rel

• Thuộc tính target quyết định cách mở liên kết:
  • _self (mặc định): mở liên kết tại trang hiện tại.
  • _blank: mở liên kết trong tab mới.

Khi mở liên kết ngoài với target="_blank", nên thêm rel="noopener" (hoặc rel="noopener noreferrer") để bảo mật và hiệu năng tốt hơn.

Ví dụ:

<p>
  <!-- Mở liên kết từ trang hiện tại -->
  <a href="https://google.com">Mở Google từ trang hiện tại</a>
</p>

<p>
  <!-- Mở liên kết trong tab mới kèm rel -->
  <a href="https://google.com" target="_blank" rel="noopener">
    Mở Google trong tab mới (an toàn)
  </a>
</p>

Liên kết tới điện thoại (tel:) và email (mailto:)

Thẻ <a> cũng có thể liên kết tới số điện thoại hoặc địa chỉ email:

• tel: để mở ứng dụng gọi điện trên thiết bị.
• mailto: để mở ứng dụng email với nội dung được điền sẵn.

Ví dụ:

<!-- Liên kết tới số điện thoại -->
<a href="tel:0999999999">Gọi 0999999999</a><br />
<a href="tel:+84999999999">Gọi số +84 999 999 999</a>

<!-- Liên kết tới email với cc, bcc, subject, body -->
<a
  href="mailto:example@gmail.com?cc=ccexample@gmail.com&bcc=bccexample@gmail.com&subject=Request Support&body=Body of Request Support"
>
  Liên hệ với chúng tôi
</a>

Các tham số phổ biến trong mailto::

• cc: gửi bản sao đến email khác.
• bcc: gửi bản sao ẩn.
• subject: tiêu đề email.
• body: nội dung email.

Liên kết với menu, mục lục

• Khi xây dựng menu hoặc mục lục, dùng <a> để người dùng nhấn vào được.
• Khi chưa có URL cụ thể, có thể dùng href="#!" để giữ chỗ, tránh trang tải lại (href="") hoặc cuộn lên đầu trang (href="#").

Ví dụ:

<ul>
  <li><a href="#!">Trang chủ</a></li>
  <li><a href="#!">Sản phẩm</a></li>
  <li><a href="#!">Dịch vụ</a></li>
  <li><a href="#!">Liên hệ</a></li>
</ul>

Thuộc tính href với hash và id (liên kết trong trang)

• Hash (#) trong URL cho phép cuộn tới một vị trí cụ thể trong trang.
• id là định danh duy nhất của một phần tử HTML trong trang.
• Khi href="#id-name", trình duyệt sẽ cuộn tới phần tử có id="id-name".
• Nếu hash trỏ tới một id không tồn tại thì không có gì xảy ra.

Ví dụ:

<!-- Liên kết tới đoạn văn có id="paragraph" -->
<a href="#paragraph">Xem đoạn văn bên dưới</a>

<!-- Nội dung bên dưới -->
<h2 id="paragraph">Đoạn văn quan trọng</h2>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry...
</p>

Về việc sử dụng thẻ h trong danh sách

• Không nhất thiết phải dùng thẻ h trong danh sách tóm tắt nội dung vì tiêu đề đã thể hiện rõ cấu trúc phân cấp.
• Nếu danh sách chứa các đầu mục quan trọng, có thể kết hợp thẻ h với <a>. Cấp độ thẻ h tùy thuộc vào tầm quan trọng của mục.

Mẹo sử dụng thẻ a tốt hơn

• Có thể liên kết tới nhiều loại tài nguyên: hình ảnh, video, file PDF, ZIP…
• Nội dung liên kết nên rõ ràng, súc tích để hỗ trợ trình đọc màn hình (screen reader).
• Giữ kiểu hiển thị quen thuộc: không gạch chân nội dung không phải liên kết, nên gạch chân hoặc đổi màu liên kết để người dùng nhận biết.
• Có thể dùng thuộc tính download để cho phép tải file thay vì mở file đó:

<a href="/files/ebook.pdf" download>Tải ebook PDF</a>

Kết luận