Thẻ a trong HTML là gì? Các thuộc tính của thẻ a thông dụng là gì?

Trong lĩnh vực phát triển và lập trình website, việc hiểu rõ về HTML là một yếu tố quan trọng để xây dựng và tối ưu hóa các trang web. Trong bài viết này, chúng ta sẽ khám phá sâu hơn về một phần quan trọng của ngôn ngữ đánh dấu này – “Thẻ <a> trong HTML là gì?” Thẻ <a> đóng một vai trò quan trọng trong việc tạo liên kết trên trang web, đưa người dùng đến các trang khác hoặc nguồn tài nguyên liên quan. Chúng ta sẽ tìm hiểu về cách sử dụng thẻ này, cấu trúc cơ bản của nó, và tại sao nó quan trọng cho việc tối ưu hóa SEO. Hãy cùng BKNS bắt đầu khám phá Thẻ a trong HTML là gì ngay trong bài viết dưới đây nhé. 

Thẻ <a> trong HTML là gì?

Thẻ <a> được coi là thẻ quan trọng vào bậc nhất trong HTML. 

Thẻ <a> trong HTML là một trong những thẻ cơ bản nhất và được sử dụng khá nhiều.

Một số ví dụ về thẻ <a>:

<a href=”https://bkns.vn/” target=”_blank” title=”bkns.vn” rel=”follow, index”>bkns.vn</a>

<a href=”mailto:someone@example.com”>Send email</a>

<a href=”tel:+84708899999″>+84 7088 99 999</a>

<a href=”#section2″>Go to Section 2</a>

<a href=”javascript:alert(‘Hello World!’);”>Execute JavaScript</a>

Công dụng của thẻ <a>

Công dụng của thẻ a là chứa liên kết điều hướng người dùng đi đến một trang khác. Nếu bạn đã tìm hiểu về SEO, thì chắc hẳn bạn sẽ thấy rằng thẻ a được dùng trong SEO cực kỳ nhiều. Đặc biệt là khi bạn chèn backlink. Lúc này, sẽ có 2 dạng là internal link hay còn gọi là liên kết bên trong (link trỏ đến trang cùng domain); external link còn gọi là liên kết bên ngoài (link trỏ đến trang không cùng domain).

Thẻ <a> ngoài việc liên kết từ trang nọ sang trang kia thì nó còn được sử dụng vào các việc sau đây:

• • Thứ nhất, liên kết để tải một thứ gì đó về (tài liệu, âm nhạc, phần mềm,…).
• • Thứ hai, liên kết gửi email.
• • Thứ ba, liên kết trong cùng một trang (nếu bạn để ý ở một số website, ở phần footer có mũi tên hướng lên trên, khi nhấn vào nó sẽ nhảy lên phần header – đây chính là liên kết trong trang).

Giá trị href # của thẻ a trong HTML

Thẻ a href là gì? Giá trị của href # của thẻ a trong HTML là gì?

Thẻ a href trong HTML là gì?

Thẻ a href trong HTML là một tag html cực kỳ quan trọng được sử dụng thường xuyên. Thẻ a href có tác dụng tạo liên kết trong html. Thẻ này có nhiều thuộc tính giúp bạn dễ dàng tạo liên kết đến một link, website, email hoặc một file nào đó mà bạn mong muốn.

Cú pháp: <a href=”link liên kết”>nội dung liên kết </a>

Giá trị href # của thẻ a

Khi bạn khai báo một thẻ a không muốn trỏ đến một liên kết nào cả, thì hãy thiết lập giá trị href=“#”

Ví dụ: <a href=“#”>bkns</a>

Trong trường hợp bạn muốn khi click vào thẻ a thì trình duyệt sẽ di chuyển đến một vị trí nào đó trong trang web thì thực hiện các bước sau đây

Bước 1: Bạn đặt ID cho vị trí bạn cần di chuyển đến. Giả sử đó là thẻ div, bạn sẽ đặt id cho nó như sau: <a href=“moveto”></div>

Bước 2: Khi click vào thẻ a thì sẽ chuyển tới thẻ div#moveto, bạn cần thiết lập như sau: <a href=”#moveto” > Đi tới div#moveto</a>

Tổng hợp các thuộc tính của thẻ a trong HTML

Thẻ <a> bao gồm các thuộc tính: href, title, rel, target,..Trong đó, có 3 thuộc tính cơ bản được sử dụng nhiều nhất đó là download, href và target.

Hãy tham khảo bảng tổng hợp chi tiết các thuộc tính của thẻ a trong HTML thông qua bảng dưới đây:

Những trạng thái của thẻ a trong HTML là gì?

Thẻ a trong HTML gồm có 4 trạng thái chính sau đây:

• • link: là chưa có hành động nào trên link.
• • visited: là đã click vào link và đi đến trang đích.
• • hover: là di chuyển qua link.
• • active: là link đã được active.

Thông thường, chúng ta sẽ kết hợp với CSS để tạo ra hiệu ứng cho 4 trạng thái trên. Để hiểu rõ hơn về CSS, hãy tiếp tục theo dõi phần tiếp theo của bài viết này nhé.

Định dạng CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị phần tử <a> với định dạng CSS như phần trình bày dưới đây:

Định dạng màu sắc cho thẻ a

Thông thường, mặc định trong thẻ a khi chúng ta tạo một liên kết bất kỳ; thì màu sắc sẽ là màu tím. Nếu như bạn muốn thay đổi màu mặc định. Bạn có thể định dạng lại màu sắc theo cú pháp selector và color như sau:

Ví dụ: Bạn muốn định dạng màu sắc thẻ a là màu đỏ.

a {
    color:red;
}

Định dạng background cho liên kết

Để định dạng màu nền bạn sẽ có thuộc tính Background. Và bạn sẽ cần thực hiện như sau:

Ví dụ : Bạn định dạng nền màu xanh, chữ màu đỏ cho thẻ a (liên kết).

a {
     background: blue;
     color: red;
}

Ẩn dấu gạch chân (liên kết) thẻ a

Khi bạn tạo một liên kết bất kỳ thì ngoài màu sắc mặc định là màu tím ra thì còn có dấu gạch chân dưới liên kết. Bạn muốn loại bỏ dấu gạch chân này đi thì cần phải làm gì? Bạn có thể bỏ dấu này đi bằng cú pháp như sau đây:

a {
    text-decoration: none;
}

Các Style sự kiện trong thẻ a (bao gồm link, visited, active, hover)

Thẻ a bao gồm 4 style sự kiện chính đã được đề cập ở bên trên. Khi mà chúng ta nhấp chuột vào hay di chuyển chuột lên liên kết sẽ có 4 style sự kiện sau đây:

• • link : Nghĩa là màu sắc của thẻ a mà bạn chưa click chuột vào lần nào.
• • visited : Nghĩa là trạng tháNghĩa lài khi bạn click vào thẻ.
• • active : Nghĩa là trạng thái khi bạn click vào và nhấn giữ chuột liên kết đó.
• • hover : Nghĩa là trạng thái chuyển màu sắc khi bạn đưa chuột lên liên kết đó.

Kết luận

Kết luận, thẻ “a” trong HTML chính là công cụ quan trọng để tạo liên kết và điều hướng giữa các trang web. Bằng cách sử dụng thẻ “a” và các thuộc tính đi kèm, bạn có khả năng tạo ra các liên kết nội bộ và ngoại trang, cũng như quản lý cách chúng được hiển thị và tương tác với người dùng. Những thuộc tính thông dụng như “href”, “target”, và “title” giúp điều chỉnh hành vi của liên kết.

Hy vọng thông qua bài viết này, bạn đã biết về thẻ a trong HTML là gì. Đây là một loại thẻ đóng vai trò quan trọng không thể thiếu trong ngôn ngữ lập trình HTML. Đến đây có lẽ bạn đã hiểu hơn về thẻ <a>, công dụng của nó, các trạng thái và thuộc tính cơ bản của thẻ.

Cảm ơn các bạn đã đọc bài viết. Để đọc thêm nhiều thông tin hữu ích khác, hãy thường xuyên tham khảo các bài viết khác của BKNS bạn nhé.

>Xem thêm:

Pingback là gì? Phân biệt giữa Pingback và Trackback

Payload là gì? Đặc điểm của Payload khi truyền dữ liệu