Thẻ a trong HTML và hướng dẫn cách sử dụng chi tiết

Bạn đã bao giờ thắc mắc làm thế nào các trang web có thể liên kết với nhau, cho phép bạn di chuyển từ trang này sang trang khác chỉ bằng một cú nhấp chuột? Bí mật nằm ở thẻ a trong HTML, một trong những thành phần quan trọng nhất giúp tạo nên các siêu liên kết giữa các trang web. Trong bài viết này, cùng GOBRANDING tìm hiểu chi tiết về thẻ <a>, cách sử dụng và các thuộc tính quan trọng của thẻ này.

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

Trong HTML, thẻ “a” được sử dụng để tạo một siêu liên kết, cho phép bạn điều hướng đến một trang web khác hoặc một phần khác của cùng một trang. Chữ “a” là viết tắt của “anchor” (neo), vì nó tạo ra một liên kết đóng vai trò như một điểm neo để điều hướng.

Ví dụ: <a href=”https://gobranding.com.vn/”>Nhấp vào đây</a>

Mã này tạo ra một liên kết hiển thị văn bản “Nhấp vào đây”. Khi bạn nhấp vào liên kết, nó sẽ đưa bạn đến trang web của GOBRANDING tại địa chỉ: https://gobranding.com.vn/.

thẻ <a> trong html
thẻ a trong html

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

Trong SEO, thẻ <a> này đóng vai trò cốt lõi trong việc xây dựng backlink – một yếu tố quan trọng ảnh hưởng trực tiếp đến thứ hạng của website trên công cụ tìm kiếm.

Thẻ <a> có thể được sử dụng để tạo hai loại liên kết chính:

  1. Internal Link: Đây là các liên kết dẫn đến những trang khác thuộc cùng một website. Loại liên kết này giúp người dùng dễ dàng điều hướng và khám phá thêm nội dung trong cùng một tên miền, đồng thời cải thiện cấu trúc website.
  2. External Link: Đây là các liên kết dẫn đến các trang web khác bên ngoài tên miền của bạn. Chúng thường được sử dụng để trích dẫn nguồn, giới thiệu tài liệu tham khảo, hoặc liên kết đến các đối tác, giúp tăng giá trị nội dung và độ tin cậy của website.

Ngoài ra, thẻ <a> còn mang lại nhiều ứng dụng thực tiễn khác, bao gồm:

  • Tạo liên kết tải xuống dẫn người dùng đến các tệp tin như tài liệu, phần mềm,… Ví dụ: <a href=”file.docx” download>Tải xuống tài liệu</a>
  • Tạo liên kết gửi email, bằng cách sử dụng cú pháp với thuộc tính mailto: Khi người dùng nhấp vào, trình email mặc định sẽ được mở với địa chỉ email được chỉ định. Ví dụ: <a href=”mailto:example@email.com”>Gửi email</a>
  • Tạo liên kết trong cùng một trang ví dụ như nút mũi tên ở phần footer giúp người dùng nhấn để quay lại phần header. Ví dụ: <a href=”#top”>Trở về đầu trang</a> … <div id=”top”>Đây là phần đầu trang</div>.

III. Cấu trúc của thẻ a trong HTML

Thẻ <a> trong HTML có cấu trúc cơ bản như sau:

<a href=”URL” target=”TARGET_ATTRIBUTE” other_attributes=”value”>Nội dung liên kết</a>

Trong đó:

  • href=”URL”: Đây là thuộc tính quan trọng nhất, xác định đường dẫn (URL) mà liên kết sẽ trỏ đến. Bạn cần thay thế “URL” bằng địa chỉ cụ thể mà bạn muốn liên kết đến, chẳng hạn như đến 1 trang web (https://gobranding.com.vn/) hoặc 1 tài liệu.
  • target=”TARGET_ATTRIBUTE”: Thuộc tính này xác định cách liên kết sẽ được mở. Một số giá trị phổ biến gồm:
    • _self: Mở liên kết trong cùng tab hoặc cửa sổ hiện tại (mặc định).
    • _blank: Mở liên kết trong một tab hoặc cửa sổ mới.
    • _parent: Mở liên kết trong khung (frame) cha nếu có.
    • _top: Mở liên kết chiếm toàn bộ body của cửa sổ hiện tại.
  • other_attributes=”value”: Bạn có thể thêm các thuộc tính tùy chọn khác, chẳng hạn như class, id, hoặc style. Mỗi thuộc tính đi kèm với giá trị tương ứng để tạo phong cách hoặc chức năng bổ sung cho liên kết.

Nội dung giữa thẻ mở <a> và thẻ đóng </a> chính là văn bản hoặc phần tử HTML sẽ hiển thị dưới dạng liên kết.

Cấu trúc của thẻ a trong HTML
Cấu trúc của thẻ a trong HTML

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

Thẻ <a> có thể chứa nhiều thuộc tính như href, title, rel, target,… Tuy nhiên, ba thuộc tính được sử dụng phổ biến nhất là download, href, và target.

1. Thẻ a href trong HTML

Thẻ <a href> trong HTML là một công cụ quan trọng giúp tạo trải nghiệm điều hướng mượt mà và hỗ trợ tối ưu hóa SEO cho website. Thẻ này không chỉ dẫn người dùng đến các trang web khác mà còn điều hướng đến vị trí cụ thể trong trang, gửi email hoặc tải xuống tệp tin.

<a href=”đường dẫn liên kết”>Nội dung liên kết</a>

Trong đó:

  • <a>: Là thẻ mở để tạo một liên kết trong HTML.
  • href=”đường dẫn liên kết”: Thuộc tính href chỉ định địa chỉ URL mà liên kết sẽ trỏ đến. Bạn thay thế đường dẫn liên kết bằng địa chỉ thực tế, có thể là một trang web khác, một tệp tin, hoặc một phần trong trang hiện tại.
  • Nội dung liên kết: Đây là phần văn bản hoặc nội dung HTML mà người dùng sẽ thấy trên trang web. Khi người dùng nhấp vào phần này, họ sẽ được chuyển đến địa chỉ đã chỉ định trong thuộc tính href.
  • </a>: Thẻ đóng kết thúc liên kết.

Khi không cần liên kết đến một URL cụ thể, bạn có thể đặt href=”#”. Giá trị này giúp tạo neo (anchor) để điều hướng trong cùng một trang. Ví dụ như, SEOer có thể sử dụng thẻ href=”#” cho nút “Đăng ký” để dẫn đến một form đăng ký trên website. thẻ này giúp người dùng dễ dàng tìm thông tin và tăng khả năng thực hiện hành động mong muốn.

Lý do sử dụng href=”#”:

  1. Tạo liên kết nội bộ: Giúp người dùng chuyển nhanh đến các phần nội dung quan trọng, cải thiện trải nghiệm và tăng thời gian trên trang.
  2. Tạo bookmark: Cho phép lưu lại vị trí cụ thể trên trang để tiện xem lại sau.
  3. Tạo menu điều hướng: Kết hợp href=”#” với JavaScript để tạo menu điều hướng mượt mà mà không cần tải lại trang.

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

Các thuộc tính của thẻ <a> trong HTML cung cấp nhiều cách để tùy chỉnh liên kết và điều hướng người dùng, từ việc tải xuống tệp tin đến việc xác định cách thức mở tài liệu. Dưới đây là một số thuộc tính quan trọng và mô tả của chúng:

Các thuộc tính của thẻ <a> trong HTML cung cấp nhiều cách để tùy chỉnh liên kết và điều hướng người dùng, từ việc tải xuống tệp tin đến việc xác định cách thức mở tài liệu. Dưới đây là một số thuộc tính quan trọng và mô tả của chúng:

Thuộc tính Giá trị Mô tả
download filename Chỉ định rằng tài liệu sẽ được tải xuống khi người dùng nhấp vào liên kết. Có thể thêm giá trị cho thuộc tính này để chỉ định tên tệp khi tải về.
href URL Xác định đường dẫn đến tài liệu hoặc vị trí trong trang. Nếu giá trị là một ID, nó sẽ đưa người dùng đến phần tử có id tương ứng trong trang.
hreflang language_code Chỉ định ngôn ngữ của tài liệu được liên kết.
media media_query Chỉ định phương tiện hoặc thiết bị mà tài liệu được tối ưu hóa cho.
ping list_of_URLs Định nghĩa một danh sách URL để theo dõi khi người dùng nhấp vào liên kết, giúp gửi các yêu cầu ping.
referrerpolicy no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url Chỉ định cách thức gửi liên kết giới thiệu (referrer) khi người dùng truy cập liên kết.
rel alternate, author, bookmark, external, help, license, next, nofollow,noreferrer, noopener, prev, search, tag 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. Ví dụ: khi sử dụng rel=”nofollow”, Google sẽ không theo liên kết để thu thập dữ liệu từ trang đó.
type media_type Xác định loại phương tiện của tài liệu được liên kết (ví dụ: video, audio).
target _blank: Mở liên kết trong tab mới.
_parent: Mở trong khung chat của khung hiện tại.
_self: mở trong cửa sổ hiện tại.
_top: Mở tài liệu trong tab hiện tại.
Xác định nơi mở tài liệu được liên kết. Ví dụ:<a href=”music.mp3″>Tải nhạc</a>
Link đến tài nguyên ví dụ file ảnh, pdf … có thể trình duyệt tải và mở ngay, nhưng có những file .rar, .zip, có thể nó chỉ tải về)

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

Thẻ <a> trong HTML có bốn trạng thái chính. Các trạng thái này có thể được tùy chỉnh giao diện bằng CSS để cải thiện trải nghiệm người dùng. Dưới đây là các trạng thái của thẻ <a>:

  • link: Trạng thái mặc định của liên kết, khi người dùng chưa tương tác với liên kết đó.
  • visited: Trạng thái này hiển thị sau khi người dùng đã nhấp vào liên kết. Liên kết sẽ thay đổi màu sắc hoặc kiểu dáng để cho biết rằng nó đã được truy cập.
  • hover: Trạng thái này xảy ra khi người dùng di chuột qua liên kết. Liên kết thường thay đổi màu sắc, kiểu dáng, hoặc có hiệu ứng chuyển động để thể hiện rằng người dùng có thể nhấp vào nó.
  • active: Đây là trạng thái khi người dùng nhấn vào liên kết (khi đang thực hiện thao tác click).
Thẻ a ở trạng thái "link" với chữ màu trắng nền đỏ
Thẻ a ở trạng thái “link” với chữ màu trắng nền đỏ

Ví dụ:

a:link {
color: blue; /* Màu khi chưa nhấp vào */
}
a:visited {
color: purple; /* Màu sau khi đã nhấp vào */
}
a:hover {
color: red; /* Màu khi di chuột qua */
}
a:active {
color: green; /* Màu khi đang nhấn chuột */
}

Từ ví dụ trên ta có:

  • a:link: Màu mặc định của liên kết chưa được nhấp (màu xanh dương).
  • a:visited: Màu của liên kết sau khi đã nhấp vào (màu tím).
  • a:hover: Màu thay đổi khi bạn di chuột qua liên kết (màu đỏ).
  • a:active: Màu thay đổi khi bạn đang nhấn chuột vào liên kết (màu xanh lá).

Các trạng thái này giúp người dùng dễ dàng nhận biết liên kết đang ở trạng thái nào.

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

Để thay đổi kiểu dáng của thẻ <a>, bạn có thể sử dụng các thuộc tính CSS. Dưới đây là một số ví dụ về cách định dạng liên kết (thẻ <a>) với màu sắc, nền và bỏ dấu gạch chân.

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

Theo mặc định, các liên kết sẽ có màu tím. Nếu bạn muốn thay đổi màu sắc của thẻ <a>, bạn có thể sử dụng thuộc tính color. Ví dụ, nếu bạn muốn thẻ <a> có màu xanh, cú pháp sẽ như sau:

a {

color: blue;

}

Với đoạn mã trên, tất cả các liên kết trong trang sẽ có màu xanh.

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

Bạn có thể sử dụng thuộc tính background để thay đổi màu nền cho thẻ <a>. Ví dụ, nếu bạn muốn nền của liên kết là màu đỏ và chữ màu trắng, bạn có thể viết mã như sau:

a {

background: red;

color: White;

}

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

Mặc định, thẻ <a> sẽ có một dấu gạch chân dưới liên kết. Nếu bạn muốn loại bỏ dấu gạch chân này, bạn có thể sử dụng thuộc tính text-decoration và đặt giá trị là none:

a {

text-decoration: none;

}

Trên đây là những thông tin chi tiết về thẻ <a> trong HTML, từ các khái niệm cơ bản đến những thuộc tính quan trọng như href, target và rel. Hy vọng những kiến thức này sẽ giúp bạn tạo ra các liên kết hiệu quả, thân thiện với người dùng và tối ưu hóa SEO cho website của bạn. Chúc bạn áp dụng thành công và phát triển website của mình!

Bài viết liên quan

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *