Bài 5: Chèn liên kết vào trang web với thẻ a trong HTML

33

Chào các bạn,

Một thẻ HTML phổ biến tiếp theo mà mình muốn giới thiệu tới các bạn đó chính là thẻ <a href="...">...</a> có tác dụng để chèn liên kết (link) trong một tài liệu HTML.

I. Liên kết (link) là gì?

Trong phạm vi của series bài viết này, ‘liên kết’ là một cầu nối giữa 2 trang web (2 tài liệu HTML) với nhau.

Thực sự thì liên kết là cái mà bạn vẫn tiếp xúc hàng ngày khi lướt web, chính là cái mà khi bạn click vào thì trình duyệt sẽ chuyển bạn đến một trang web nào đấy. Nếu bạn vẫn chưa hình dung ra, thì link nó sẽ nhìn như thế này.

Rồi, bạn đã thấy nó quen thuộc chưa. Và phần tiếp theo mình sẽ hướng dẫn bạn cách tạo ra một cái tương tự nhé.

II. Chèn liên kết với thẻ a

Thẻ a trong HTML có cấu trúc như sau:

<a href="https://phambinh.net">Đây là ví dụ về một đường link</a>

Nhìn bạn có thể nhận ra ngay, khi người dùng nhấp vào dòng chữ Đây là ví dụ về một đường link thì trình duyệt sẽ chuyển bạn đến trang web có địa chỉ là https://phambinh.net. Hóa ra để tạo một đường link với HTML cũng không khó nhỉ.

III. Một vài thuộc tính hay đi kèm với thẻ a

Ngoài thuộc tính bắt buộc href, thì thẻ a có một số thuộc tính tính tùy chỉnh khác. Cụ thể mình sẽ liệt kê trong bảng dưới đây.

Thuộc tínhGiá trịMô tả
target_blank: Mở liên kết trong tab mới
_self: Mở liên kết ở tab hiện tại (mặc định)
_top: Mở liên kết ở tab hiện tại ngay cả khi liên kết nằm trong iframe
_parent: Mở liên kết ở tab cha
Thể hiện việc mở liên kết mới trong tab như thế nào?
downloadTên file sau khi tải xuốngKhi thẻ a có thuộc tính này, thì thay vì việc liên kết được mở trong tab, nó sẽ được tải về máy
relalternate
author
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag
Thể hiện mối quan hệ giữa hai trang web được liên kết.
Một vài giá trị của thuộc tính này có giá trị quan trọng trong SEO.

IV. Tổng kết

Thẻ a là một thẻ đơn giản và khá hay ho đúng không. Nếu có gì không hiểu, bạn có thể inbox mình tại fanpage Tự học lập trình, mình sẽ giúp đỡ.

Chúc các bạn học tập hiệu quả.


(*) iframe: Là một thẻ HTML mà mình sẽ có một bài viết riêng để giới thiệu.