Tìm hiểu cơ bản về cách phần tử HTML (<a>) siêu liên kết được dùng để định nghĩa các liên kết tương tác trên web.
Trong HTML, thẻ <a> được dùng để định nghĩa các phần tử liên kết/siêu liên kết:
<a>Phần tử liên kết</a>Phần tử liên kết còn được gọi là phần tử anchor (neo).
Liên kết vs Siêu liên kết:
- Một liên kết (link) là một địa chỉ chỉ định một vị trí trên Internet.
- Một siêu liên kết (hyperlink) là một loại liên kết mà bạn có thể nhấp vào để kích hoạt điều gì đó hoặc đi đến một đích đến, như một trang web.
Trong hội thoại, hầu hết mọi người dùng "hyperlink" và "link" thay thế cho nhau.
Cách dùng phần tử 'a'
Phần tử <a> nhận một số thuộc tính, quan trọng nhất là thuộc tính href, dùng để cung cấp đích đến liên kết (URL) khi người dùng nhấp vào.
Dưới đây là ví dụ về liên kết dẫn bạn đến trang chủ TechStacker khi nhấp vào:
<a href="https://techstacker.com">Đi đến trang chủ TechStacker.</a>Liên kết trên chứa các khối xây dựng sau:
- Thẻ mở liên kết
<a> - Tên thuộc tính:
href - Giá trị thuộc tính:
"https://techstacker.com"(URL đích đến) - Văn bản liên kết
Đi đến trang chủ TechStacker.(hiển thị cho người dùng) - Thẻ đóng liên kết
</a>
Cách liên kết trên trông trong thực tế:
URL tuyệt đối vs. URL tương đối
Giá trị thuộc tính (đích đến liên kết/URL) có thể là URL tuyệt đối hoặc tương đối. Ví dụ trước là URL tuyệt đối:
<a href="https://techstacker.com">Đi đến trang chủ TechStacker.</a>Đây là URL tương đối dẫn đến một bài viết trên trang web này:
<a href="/html-tags-vs-html-elements-difference">HTML Tags vs. HTML Elements.</a>Đây là URL tuyệt đối đến cùng bài viết đó:
<a href="https://techstacker.com/html-tags-vs-html-elements-difference">HTML Tags vs. HTML Elements.</a>Chú ý cách URL tuyệt đối có nhiều thông tin hơn URL tương đối:
- Nó có giao thức (
https) - Tên miền
techstacker.com - Slug
/html-tags-vs-html-elements-difference
URL tương đối chỉ có slug.
Vậy khi nào dùng loại nào?
- Dùng URL tương đối khi liên kết đến nội dung trên trang web của chính bạn.
- Dùng URL tuyệt đối khi liên kết đến nội dung trên các trang web khác.
Bạn chỉ có thể dùng URL tương đối để tham chiếu nội dung nằm (được lưu trữ) trên cùng máy chủ chứa trang web của bạn. Ngược lại, hãy dùng URL tuyệt đối.
Nếu bạn bị bối rối về sự khác biệt giữa thẻ HTML và phần tử HTML, bạn có thể muốn đọc bài viết về HTML Tags vs. HTML Elements.
Ối, còn một thuộc tính nữa thường dùng và quan trọng, đặc biệt khi nói đến SEO.
Thuộc tính target
Một thuộc tính hữu ích khác của phần tử liên kết là thuộc tính target, chỉ định nơi mở liên kết khi người dùng nhấp vào.
Nếu bạn nhấp vào liên kết này:
<a href="https://techstacker.com/">Liên kết đến trang chủ</a>Bạn sẽ được đưa đến trang chủ TechStacker trong cùng tab/cửa sổ trình duyệt bạn đang ở. Điều này có nghĩa là nếu bạn liên kết đến trang web khác, người dùng sẽ bị chuyển khỏi trang web của bạn, sang trang web bạn liên kết đến (có thể bạn muốn hoặc không muốn).
Điều này xảy ra vì mặc định các phần tử <a> có thuộc tính target với giá trị _self — nghĩa là nó mở liên kết trong cùng cửa sổ người dùng đang ở.
Vì vậy, phần tử liên kết này:
<a href="https://techstacker.com/"></a>Được máy tính/trình duyệt đọc như sau:
<a href="https://techstacker.com/" target="_self"></a>Điều này có thể gây nhầm lẫn, vì bạn không thấy được điều đó (nhưng bây giờ bạn đã biết).
Nếu bạn muốn liên kết của mình mở trong tab trình duyệt mới, bạn có thể ghi đè giá trị mặc định _self bằng giá trị _blank:
<a href="https://youtube.com" target="_blank" rel="noopener">Nếu bạn nhấp vào này, trang web YouTube mở trong tab mới</a>Khi nào dùng loại nào?
Câu trả lời đơn giản là: nếu bạn không muốn chuyển người dùng ra khỏi trang web của mình, ví dụ cho mục đích SEO, thì dùng target="_blank".
Ngược lại, đừng làm gì cả, liên kết của bạn sẽ mặc định mở trong cùng cửa sổ trình duyệt (qua giá trị _self).
Dùng thẻ tiêu đề làm liên kết
Nhiều phần tử HTML có thể dùng làm liên kết, bao gồm cả tiêu đề. Thực tế điều đó rất phổ biến. Tất cả những gì bạn cần làm là bọc phần tử bạn muốn biến thành liên kết bên trong thẻ liên kết <a></a>:
<a href="/html-for-beginners"> <h3>HTML cho Người mới bắt đầu</h3> </a>Dùng hình ảnh làm liên kết
Phần tử liên kết cũng có thể biến hình ảnh thành liên kết, ví dụ cho hình thu nhỏ (thumbnail) của bài viết hoặc trang sản phẩm. Để làm điều đó, bạn chỉ cần bọc phần tử hình ảnh <img> bên trong phần tử liên kết <a></a>, như sau:
<a href="/tags/html"> <img src="../../thumbnails/html.png" /> </a>Ví dụ trên sẽ đưa người dùng đến phần bài viết HTML này khi họ nhấp vào hình ảnh.
Cách nó trông trong thực tế (thử nhấp vào nó):
