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://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!

Related Posts

Cách sử dụng đường dẫn tương đối trong HTML

Cách sử dụng đường dẫn tương đối trong HTML

Trang web hiện đại thường bao gồm nhiều tài nguyên như hình ảnh, trang HTML khác, tệp tin CSS và JavaScript. Để liên kết và truy cập…

javascript

Cách gọi hàm JavaScript trong HTML

Hàm (Functions) trong JavaScript nếu không gọi đến nó sẽ không thực thi chức năng. Vì thế để thực hiện một nhiệm vụ nào đó ở trong…

Mẫu Form đăng nhập HTML và CSS đẹp mắt

Trong một số bài viết trên blog này mình đã chia sẻ về cách tạo một Form đăng nhập đơn giản. Nhưng để có một Form đẹp…

form-lien-he-4

Hướng dẫn tạo form liên hệ bằng HTML, CSS

Form liên hệ là một chức năng không thể thiếu cho blog, website. Thông qua Form độc giả, khách hàng có thể yêu cầu admin trợ giúp…

Tổng hợp các thẻ cơ bản trong HTML

Các thẻ cơ bản trong HTML thường sử dụng

HTML là ngôn ngữ tạo khung xương cho trang web với cú pháp tương đối dễ dàng. Hầu như ai cũng có thể học HTML trong vài…

owlcarousel

Tạo Slide ảnh trong HTML với OwlCarousel

Để tạo Slide ảnh chạy ngang có nhiều cách khác nhau. Bạn có thể dùng HTML, CSS kết hợp với JavaScript hoặc jQuery, dùng Bootstrap. Một cách…