Cách sử dụng thuộc tính HTML href

Thuộc tính href

Thuộc tính href là một trong những thuộc tính quan trọng nhất HTML.

href dùng để chỉ định URL cho:

• Siêu liên kết (còn gọi "liên kết").
• Hoặc nhập tài nguyên ngoài, như style và script.

Trường hợp phổ biến nhất href là thêm link nội bộ/ngoài (URL) trên anchor <a>:

<a href="link-path">Nhấp</a>

Liên kết nội bộ với href

Tạo link đưa người dùng về trang chủ khi nhấp.

Gọi là Trang chủ.

Đầu tiên, định nghĩa anchor:

<a>Trang chủ</a>

Bây giờ làm <a> thành siêu liên kết, thêm href:

<a href>Trang chủ</a>

Gán giá trị "/":

<a href="/">Trang chủ</a>

Hiển thị trình duyệt:

Trang chủ

Tách ví dụ anchor:

• <a> thẻ mở anchor
• </a> thẻ đóng anchor
• Trang chủ nội dung (phần duy nhất hiển thị)
• href tên thuộc tính
• = toán tử gán
• "/" giá trị thuộc tính

Trên web này, anchor này bọc logo TechStacker góc trên trái header (nhấp vào về trang chủ).

Thường thấy code này trong <nav>...</nav> thanh điều hướng.

Giả sử web có 3 trang: Trang chủ, Giới thiệu, Liên hệ, muốn link nội bộ.

Mỗi file HTML nên đặt tên:

• Trang chủ: index.html
• Giới thiệu: about.html
• Liên hệ: contact.html

Định nghĩa route tương đối cho mỗi tài liệu:

<a href="/">Trang chủ</a> <a href="/about">Giới thiệu</a> <a href="/contact">Liên hệ</a>

Bọc mỗi anchor trong <nav>:

<nav> <a href="/">Trang chủ</a> <a href="/about">Giới thiệu</a> <a href="/contact">Liên hệ</a> </nav>

Bây giờ có component điều hướng đặt ở header, footer, hoặc sidebar.

Liên kết ngoài với href

Muốn link trang web khác, dùng liên kết ngoài, chỉ định đường dẫn tuyệt đối:

<a href="https://www.youtube.com">Link đến YouTube.com</a>

Tôi dùng cơ hội link kênh YouTube:

Link kênh YouTube (TechStacker).