Thẻ a trong HTML – Thẻ tạo link liên kết trong HTML

Một trong các thẻ thường được sử dụng khi xây dựng website bằng HTML đó là thẻ a. Nó có vai trò quan trọng đối với người dùng và công cụ tìm kiếm. Ngày hôm nay Quách Quỳnh sẽ giúp bạn cách sử dụng thẻ <a> trong HTML như thế nào.

Thẻ a trong HTML để tạo link liên kết

Cú pháp viết:

<a href="#">text</a>

Ví dụ:

<a href="https://quachquynh.com/html-css/" title="Học HTML và CSS" rel="dofollow" target="_blank">HTML và CSS</a>

Giải thích:

<a>: thẻ bắt đầu, </a> đóng thẻ a

title: tiêu đề cho liêu kết, khi bạn rê chuột vào nó sẽ hiện ra

rel: giá trị là nofollow hoặc dofollow. Đối với con Bot của công cụ tìm kiếm nó sẽ dùng để xác định đó là liên kết dofollow hoặc nofollow. Cái này bạn sẽ nghiên cứu thêm trong phần thủ thuật SEO nhé!

target gồm có:

_blank: Chuyển tới liên kết qua tab mới

_self: Chuyến tới liên kết với tab hiện tại

_parent: Chuyển link trong khung nguồn chứa đường link

_top: Nhảy tới liên kết trong cửa sổ toàn màn hình

Thiết lập màu link bằng CSS cho thẻ a

Để phân biệt các liên kết chưa nhấp chuột hay đã nhấp chuột vào rồi chún ta sẽ thêm cho chúng các trạng thái bằng CSS.

Ví dụ:

<!DOCTYPE>
<html>
<head>
<title> Ví dụ về thẻ a trong HTML</title>
<style>
/* Trạng thái khi chưa nhấp chuột*/
a:link {
color: blue;
}
/* Trạng thái đã nhấp chuột */
a:visited {
color: green;
}
/* Rê chuột vào liên kết */
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="https://quachquynh.com/html-css/" title="Học HTML và CSS" rel="dofollow" target="_blank">HTML và CSS</a>
</body>
</html>

Bạn thử tạo 1 file test.html để chạy và xem kết quả.

Bài viết này đã hướng dẫn cách sử dụng thẻ <a> với các ví dụ dễ hiểu nhất. Hi vọng sau khi đọc xong bạn có thể thực hành và hiểu ngay. Chúc bạn thành công!

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments