Mỗi lần lướt web chắc hẳn bạn đã bắt gặp các bài quảng cáo hiện liên, khi bấm vào nó thì chuyển đến một trang web khác. Khi đọc báo, bạn nhìn thấy có các bài viết liên quan và bạn bấm vào nó cũng chuyển đến bài viết khác. Có khi nào bạn thắc mắc nó là cái gì không? Đó chính là thẻ trong HTML.

1. Thẻ trong HTML là gì

Thẻ trong HTML được sử dụng để tạo liên kết (link) đến các trang web khác, các tài nguyên trong cùng một trang web hoặc các vị trí khác trên cùng một trang web. Đây là một trong những thẻ quan trọng và phổ biến nhất trong HTML. Ví dụ: 

<!DOCTYPE html>
 <html> 
 <body> 
     <a href="#">Stringee</a>
 </body>
 </html>

2. Các thuộc tính của thẻ

Thẻ bao gồm các thuộc tính như: href, title, rel, target,... Ba thuộc tính được sử dụng nhiều nhất là download, href và target. 2.1 Thuộc tính href Đây là thuộc tính bắt buộc và xác định đường dẫn mà ta muốn điều hướng đến. Ví dụ: 

<!DOCTYPE html>
 <html> 
 <body> 
      <a href="https://stringee.com">Đường dẫn đến trang chủ stringee.com</a>
 </body>
 </html>

2.2 Thuộc tính download Thuộc tính này cho phép người dùng tải xuống một tệp khi nhấp vào liên kết. Giá trị của thuộc tính này là tên tệp cần tải xuống. Ví dụ:

<!DOCTYPE html>
   <html> 
   <body> 
       <a href="file.pdf" download =”tenFileTaiVe">Download</a>
    </body>
    </html>

2.3 Thuộc tính target Thuộc tính này dùng để xác định cách liên kết sẽ được mở. Các giá trị thông thường bao gồm:

  • _blank: Mở liên kết trong cửa sổ hoặc tab mới.
  • _self: Mở liên kết trong cùng cửa sổ hoặc tab (giá trị mặc định).
  • _parent: Mở liên kết trong cửa sổ cha của nó (nếu có).
  • _top: Mở liên kết trong cửa sổ cha cao nhất (nếu có). Ở ví dụ này giá trị của target mình gán bằng “ _blank”, khi bấm vào thì link sẽ mở ở tab mới, còn các giá trị khác của target sử dụng sẽ tương tự.
<!DOCTYPE html>
   <html> 
   <body> 
       <a href="stringee.com/blog " target="_blank">Mở link ở tab mới</a>
    </body>
    </html>

2.4 Các thuộc tính khác

  • title: Cung cấp một chú thích hoặc mô tả cho liên kết khi người dùng di chuột qua liên kết. Ví dụ:
<!DOCTYPE html>
   <html> 
   <body> 
       <a href="stringee.com/blog " title=”Trang chủ">Mở link trang chủ</a>
    </body>
    </html>
  • class và id: Thuộc tính này cho phép bạn định dạng liên kết bằng CSS hoặc thực hiện xử lý bằng JavaScript. Bạn có thể sử dụng các lớp (classes) hoặc định danh (IDs) duy nhất để tùy chỉnh liên kết. Ví dụ:
<!DOCTYPE html>
   <html> 
   <body> 
       <a href="https://stringee.com" class="custom-link">Liên kết</a>
    </body>
    </html>

3. Định dạng CSS mặc định của thẻ a

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

a:link, a:visited {
 color: (internal value);
 text-decoration: underline;
 cursor: auto; 
}
a:link:active, a:visited:active {
 color: (internal value);
 }

Thông thường, khi chúng ta tạo một liên kết bất kỳ bằng thẻ a thì màu sắc sẽ là màu tím và có dấu gạch chân dưới liên kết

Tổng kết

Như vậy chúng ta đã tìm hiểu về thẻ a trong html. Đây là một thẻ cơ bản nhất nhưng cũng là một trong những thẻ quan trọng và không thể thiếu khi làm việc với HTML. Qua bài viết này, mong bạn hiểu được công dụng, trạng thái và các thuộc tính cơ bản của thẻ này và áp dụng tốt trong việc lập trình web.

Stringee API cung cấp các tính năng như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài chăm sóc khách hàng (CSKH) có thể được nhúng trực tiếp vào các ứng dụng/website của doanh nghiệp nhanh chóng. Điều này giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp, trong khi nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.