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://quynhweb.pro/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://quynhweb.pro/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!
