Một siêu liên kết HTML cho phép bạn điều hướng đến trang khác. Thẻ <a> định nghĩa một điểm neo (anchor). Thuộc tính "href" chỉ định vị trí người dùng sẽ được đưa đến khi nhấp vào liên kết. Giữa thẻ <a> và thẻ đóng </a> là văn bản neo (anchor text) sẽ được hiển thị cho người dùng.
Khi bạn xây dựng trang web, bạn có thể muốn tham chiếu đến một trang web hoặc trang web khác. Ví dụ, bạn có thể đang tạo blog và muốn liên kết đến bài viết mà bạn nghĩ là liên quan.
Siêu liên kết, hoặc liên kết, được dùng để kết nối một trang web với trang khác và cho phép người dùng di chuyển giữa nhiều trang web nhanh chóng. Siêu liên kết có thể dùng để liên kết đến các trang khác trên trang web của bạn hoặc trang trên các trang web khác nhau.
Trong hướng dẫn này, chúng ta sẽ phân tích cơ bản của siêu liên kết trong HTML. Chúng ta sẽ nói về cách đặt đích cho liên kết, cách tạo neo cho dấu trang, và liên kết đến địa chỉ email và các phần tử web.
HTML Siêu liên kết
Một siêu liên kết HTML trỏ đến tài nguyên web khác. Siêu liên kết được định nghĩa giữa thẻ <a> và thẻ đóng </a>. Văn bản giữa hai thẻ này đưa người dùng đến tài nguyên web được liên kết khi liên kết được nhấp.
Siêu liên kết được tạo bằng thẻ <a>. Cú pháp cho siêu liên kết trong tệp HTML:
<a href="your_url">Văn bản này sẽ đi đến một URL.</a>
Văn bản giữa các thẻ sẽ liên kết đến URL mà chúng ta chỉ định trong thẻ mở. Chúng ta sử dụng thuộc tính href để chọn đích của URL. Điều này có thể là URL tuyệt đối như https://www.careerkarma.com hoặc URL tương đối tới đâu đó trên trang của chúng ta.
Đây là ví dụ liên kết trỏ đến địa chỉ trang chủ Career Karma:
<a href="https://www.careerkarma.com">Career Karma</a>
Các loại thẻ Siêu liên kết HTML
Có ba loại liên kết có thể xuất hiện trong trình duyệt. Chúng như sau:
- Liên kết chưa truy cập, xuất hiện màu xanh dương
- Liên kết đã truy cập, xuất hiện màu tím
- Liên kết đang hoạt động, xuất hiện màu đỏ
Một số trang web ghi đè các màu này, nghĩa là chúng xuất hiện khác, nhưng đó là các loại liên kết chính bạn có thể tạo kiểu trong HTML.
Siêu liên kết HTML: Mục tiêu (Targets)
Bạn có thể thay đổi cách liên kết được mở. Ví dụ, giả sử bạn muốn liên kết mở trong tab mới của trình duyệt. Điều này sẽ đảm bảo người dùng không mất vị trí trên trang web họ đang xem.
Đó là nơi thuộc tính target của liên kết xuất hiện. Bằng cách sử dụng thuộc tính target, bạn có thể chỉ định trình duyệt nên mở tài nguyên mà bạn đã liên kết ở đâu.
Có bốn loại đích bạn có thể sử dụng:
- _self: Truy cập tài nguyên web trong cùng cửa sổ và tab. Đây là đích mặc định dùng trong HTML siêu liên kết.
- _parent: Truy cập tài nguyên web trong cửa sổ cha.
- _blank: Truy cập tài nguyên web trong cửa sổ hoặc tab mới.
- _top: Truy cập tài nguyên web trong toàn bộ cửa sổ trình duyệt.
Đây là ví dụ một vài liên kết này trong hành động:
<a href="https://www.careerkarma.com" target="_self">Liên kết này sẽ mở trong tab này.</a> <a href="https://www.careerkarma.com" target="_parent">Liên kết này sẽ mở cửa sổ cha.</a> <a href="https://www.careerkarma.com" target="_blank">Liên kết này sẽ mở trong tab mới.</a> <a href="https://www.careerkarma.com" target="_top">Liên kết này sẽ mở trong toàn bộ cửa sổ trình duyệt.</a>
Siêu liên kết HTML: Neo dấu trang (Bookmark Anchors)
Siêu liên kết trong HTML cũng có thể tham chiếu đến một phần cụ thể của tài liệu HTML. Điều này hữu ích nếu bạn có trang web dài và muốn hướng người dùng đến một vị trí cụ thể trong văn bản.
Trước khi bắt đầu sử dụng neo dấu trang, trước tiên bạn cần định nghĩa thuộc tính ID trên phần tử mà bạn muốn người dùng đến. Đây là ví dụ khai báo thuộc tính ID trên tiêu đề trong trang web:
<h3 id="subtitle3">Phụ đề 3</h3>
Chúng ta đã cho thẻ tiêu đề HTML id subtitle3, mà chúng ta có thể dùng để tham chiếu trong siêu liên kết.
Đây là ví dụ siêu liên kết tham chiếu tiêu đề này:
<a href="#subtitle3">Đi đến Phụ đề 3</a>
Thay vì chỉ định URL trong thẻ href, chúng ta chỉ định ID của phần tử muốn liên kết. Chúng ta thêm dấu thăng (#) trước id đó để trình duyệt biết tài liệu được liên kết nằm trên trang web của chúng ta.
Thẻ Neo HTML
Thẻ neo HTML đề cập đến thẻ. Thẻ này liên kết người dùng đến tài nguyên web khác. Thuộc tính "href" định nghĩa tài nguyên mà người dùng sẽ được đưa đến khi nhấp vào liên kết.
Ví dụ Thẻ Neo HTML
Hãy cùng xem một vài ví dụ sử dụng thẻ HTML <a>.
URL tương đối (Relative URLs)
Nếu bạn đang liên kết đến tài nguyên trên cùng tài liệu HTML bạn đang phát triển, bạn có thể dùng URL tương đối. URL tương đối cũng được gọi là liên kết cục bộ (local links) và không dùng cú pháp "https://www.sitename.com". Thay vào đó, URL tương đối trỏ đến đường dẫn tệp của tài nguyên web cụ thể trên máy chủ cục bộ.
Giả sử chúng ta đang tạo liên kết trên trang Career Karma trỏ đến blog của chúng ta. Thay vì dùng URL tuyệt đối, chúng ta có thể dùng URL cục bộ, vì trang của chúng ta là trang Career Karma. Đây là mã chúng ta dùng để tạo liên kết:
<a href="/blog">Blog Career Karma</a>
Khi nhấp vào văn bản Blog Career Karma, chúng ta được gửi đến tài nguyên /blog trên trang của chúng ta.
Địa chỉ Email
Thẻ neo cũng có thể dùng để liên kết đến địa chỉ email. Khi liên kết đến email được nhấp, chương trình email mặc định của người dùng sẽ mở. Người dùng sẽ được hỏi xem họ có muốn gửi tin nhắn đến địa chỉ email bạn chỉ định.
Để liên kết đến địa chỉ email, chúng ta cần bắt đầu liên kết với giao thức mailto:. Đây là ví dụ liên kết đến email trong HTML:
<a href="mailto:nothing@google.com">Gửi email cho chúng tôi!</a>
Khi nhấp vào liên kết, chương trình email mở ra và yêu cầu gửi email đến "nothing@google.com".
Liên kết đến phần tử
Thẻ neo có thể liên kết đến phần tử trên trang web. Bạn có thể tạo liên kết này bằng cách chỉ định id của phần tử mà neo nên trỏ đến. Giả sử chúng ta muốn liên kết đưa người dùng đến tiêu đề Tiêu đề Thử nghiệm trên trang web. Chúng ta có thể tạo liên kết bằng mã sau:
<a href="#test_heading">Nhảy đến Tiêu đề Thử nghiệm</a> <h2 id="test_heading">Tiêu đề Thử nghiệm</h2>
Khi nhấp vào liên kết, trang web sẽ cuộn xuống phần tử với id test_heading.
Kết luận
Siêu liên kết có thể dùng trong HTML để liên kết một trang web hoặc tài nguyên đến tài nguyên khác. Bạn có thể dùng siêu liên kết để kết nối đến tài nguyên trên trang của bạn, hoặc bất kỳ trang web nào khác. Trong hướng dẫn này, chúng ta đã phân tích cách dùng siêu liên kết trong tài liệu HTML.
Với tất cả thông tin này, bạn đã sẵn sàng tạo siêu liên kết trong HTML như một bậc thầy!
Để tìm hiểu thêm về viết mã HTML, hãy đọc hướng dẫn Cách học HTML.