VPS
Hosting
Email
Máy chủ
Firewall Anti DDoS
Tên Miền
SSL
3
3

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

5001
Lượt xem
Home Tài Liệu Kỹ Thuật Thẻ a trong HTML là gì? Các thuộc tính của thẻ a thông dụng là gì?

Trong HTML nếu bạn muốn tạo ra các link liên kết thì bạn sẽ cần sử dụng đến một loại thẻ. Đó là thẻ a hay còn được gọi với tên gọi khác là thẻ tạo link liên kết. Thẻ <a> là một loại thẻ cơ bản, và cũng được coi là thẻ quan trọng vào bậc nhất trong HTML.

Vậy liệu bạn đã hiểu rõ về khái niệm, công dụng, cách dùng của loại thẻ này chưa? Hãy theo dõi bài viết dưới đây, Vietnix sẽ chia sẻ cho bạn những thông tin chi tiết nhất về Thẻ a trong HTML là gì? Các thuộc tính của thẻ a thông dụng bao gồm những gì?

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

Thẻ <a> được coi là thẻ quan trọng vào bậc nhất trong HTML. Vậy hãy cùng theo dõi bài viết dưới đây, Vietnix sẽ cùng bạn tìm hiểu chi tiết hơn về thẻ a nhé!

Khái niệm thẻ <a> trong HTML

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

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

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

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

<a href=”tel:+84708844444″>+84 7088 44 444</a>

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

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

Ví dụ về thẻ a trong HTML
Ví dụ về thẻ a trong HTML

>> Xem thêm: Thẻ Input trong HTML là gì? Tổng hợp các ví dụ cụ thể

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). 

Internal và external link
Internal và external link

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=“#”>vietnix</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>

>> Xem thêm: Link Building là gì? Các chiến lược xây dựng liên kết cho SEO

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:

Thuộc tínhGiá trịMô tả
downloadfilenameChỉ định rằng mục tiêu sẽ được tải xuống khi người dùng nhấp chuột vào siêu liên kết.
Có thể thêm giá trị cho thuộc tính download để xác định được tên của tập tin khi được lưu về máy tính.
hrefURLDùng để xác định đường dẫn đến tài liệu mà bạn đang muốn chuyển tới.
Ngoài ra còn để xác định một vị trí bên trong trang web mà bạn muốn di chuyển đến (vị trí của phần tử được xác định dựa giá trị thuộc tính id của phần tử).
hreflanglanguage_codeDùng để chỉ định ngôn ngữ của tài liệu được liên kết.
mediamedia_queryDùng để chỉ định phương tiện / thiết bị mà tài liệu được liên kết được tối ưu hóa.
pinglist_of_URLsDùng để chỉ định danh sách URL được phân tách bằng dấu cách, khi liên kết sau đó, các yêu cầu đăng với body ping sẽ được gửi bằng trình duyệt (trong bối cảnh). Được sử dụng để theo dõi.
referrerpolicyno-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url
Dùng để chỉ định liên kết giới thiệu nào sẽ gửi.
relalternate
author
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search 
tag
Dùng để chỉ định mối quan hệ giữa tài liệu hiện tại và tài liệu được liên kết.
typemedia_typeDùng để chỉ định loại phương tiện của tài liệu được liên kết.
target_blank: Mở tài liệu trong một tab mới
_parent: Mở tài liệu trong khung chat của khung hiện tại
_self: Mở tài liệu trong khung hiện tại
_top: Nghĩa là mở tài liệu trong tab hiện tại
Dùng để chỉ định nơi để mở tài liệu được liên kết.

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é!

Các trạng thái của thẻ a
Các trạng thái của thẻ a

Đị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 selectorcolor 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;
}

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 đó.
Định dạng CSS mặc định
Định dạng CSS mặc định

>> Xem thêm: CSS3 là gì? Giới thiệu tổng quan về CSS3

Lời kết

Thẻ a trong HTML mặc dù là một loại thẻ cơ bản nhất, tuy nhiên loại thẻ này lại là một phần quan trọng không thể thiếu trong HTML. Qua bài viết này, Vietnix mong rằng bạn sẽ hiểu rõ hơn về thẻ <a>, công dụng, các trạng thái và các thuộc tính cơ bản của loại thẻ này, cũng như giá trị href #. Và đồng thời cũng hiểu rõ hơn về định dạng CSS mặc định. Cảm ơn bạn đã theo dõi bài chia sẻ về thẻ a này nhé!

banner hosting gif
Chia sẻ bài viết
Đánh giá
Kết nối với mình qua
Mình là Bo - admin của Quản Trị Linux. Mình đã có 10 năm làm việc trong mảng System, Network, Security và đã trải nghiệm qua các chứng chỉ như CCNP, CISSP, CISA, đặc biệt là chống tấn công DDoS. Gần đây mình trải nghiệm thêm Digital Marketing và đã hòan thành chứng chỉ CDMP của PearsonVUE. Mình rất thích được chia sẻ và hỗ trợ cho mọi người, nhất là các bạn sinh viên. Hãy kết nối với mình nhé!
Đăng ký nhận tin
Để không bỏ sót bất kỳ tin tức hoặc chương trình khuyến mãi từ Vietnix
Bài viết liên quan
Bình luận
Theo dõi
Thông báo của
guest
0 Comments
Phản hồi nội tuyến
Xem tất cả bình luận