Bạn có bao giờ thắc mắc tại sao khi lướt web, chỉ cần một cú click là có thể nhảy từ trang này sang trang khác một cách nhanh chóng? Vấn đề là nếu không hiểu rõ cách hoạt động của thẻ a trong HTML, bạn sẽ khó xây dựng được những liên kết hiệu quả, khiến trải nghiệm người dùng bị gián đoạn và thậm chí ảnh hưởng đến thứ hạng trên công cụ tìm kiếm. Bài viết này sẽ giúp bạn hiểu rõ thẻ a trong HTML là gì, cách sử dụng đúng các thuộc tính và mẹo hay để tận dụng tối đa sức mạnh của thẻ này, giúp trang web của bạn vừa thân thiện với người dùng vừa hiệu quả trên công cụ tìm kiếm.
Thẻ a trong HTML là gì?
Thẻ a (viết tắt của "anchor" – nghĩa là "neo") là một trong những thẻ quan trọng nhất trong HTML, dùng để tạo liên kết giữa các trang web hoặc đến một vị trí cụ thể nào đó trong cùng một trang. Đây là yếu tố cốt lõi để xây dựng cấu trúc điều hướng, tạo trải nghiệm liền mạch cho người dùng trên website.
Cấu trúc cơ bản của phần tử a trong HTML:
< a href = "duong-dan" > Nội dung hiển thị < /a >
Trong đó:
- Href (Hypertext Reference): Là thuộc tính bắt buộc, chứa đường dẫn liên kết.
- Nội dung hiển thị: Đây là phần người dùng nhìn thấy và nhấn vào được, thường là văn bản hoặc hình ảnh.
Ví dụ: < a href = " https://www.phuongnamvina.com" >Truy cập trang chủ < /a >.
Khi người dùng nhấn vào đoạn văn bản "Truy cập trang chủ", trình duyệt sẽ ngay lập tức chuyển hướng họ đến địa chỉ https://www.phuongnamvina.com.
Như vậy, phần tử a trong HTML chính là cầu nối giữa các nội dung trên Internet hoặc trong cùng một trang, đóng vai trò thiết yếu trong việc xây dựng trải nghiệm người dùng và điều hướng thông minh cho mọi website hiện đại.
Công dụng của thẻ a trong HTML
Thẻ a không chỉ là một phần tử cơ bản trong HTML mà còn là một trong những nền tảng cốt lõi của web hiện đại. Dưới đây là những công dụng phổ biến và hữu ích nhất của thẻ a HTML trong thực tế lập trình web.
- Liên kết đến trang web bên ngoài: Thẻ a trong HTML cho phép người dùng truy cập đến các website khác chỉ bằng một cú nhấp chuột. Điều này rất quan trọng khi bạn muốn cung cấp thông tin tham khảo, dẫn chứng, nguồn gốc hoặc chuyển hướng người dùng đến các đối tác hoặc dịch vụ liên quan. Liên kết ra ngoài giúp tăng độ tin cậy của nội dung và cung cấp giá trị bổ sung cho người dùng. Ngoài ra nếu dùng đúng cách, tag a HTML còn có lợi cho SEO.
- Liên kết đến các trang hoặc nội dung trong cùng website: Phần tử a trong HTML giúp điều hướng người dùng dễ dàng trong cùng một website, từ trang chủ đến trang sản phẩm, dịch vụ hoặc các phần nội dung chi tiết khác. Điều này giúp người dùng truy cập thông tin nhanh chóng và giữ chân họ ở lại website lâu hơn.
- Liên kết đến vị trí cụ thể trong cùng một trang (Anchor link): Thẻ a có thể dẫn người dùng đến một phần nội dung cụ thể trong trang hiện tại, rất hữu ích với các trang dài hoặc tài liệu có mục lục. Người dùng chỉ cần nhấp là được đưa ngay đến vị trí mong muốn mà không phải cuộn trang thủ công.
Các thuộc tính quan trọng của thẻ a HTML
Trong HTML, thẻ a (anchor tag) đóng vai trò quan trọng trong việc tạo liên kết – một trong những yếu tố cốt lõi của web. Tuy nhiên, để tối ưu hóa trải nghiệm người dùng và hỗ trợ hiệu quả cho SEO, việc sử dụng đúng và đầy đủ các thuộc tính của thẻ a trong HTML là điều không thể bỏ qua.
1. Href (Hypertext REFerence)
href là thuộc tính quan trọng nhất trong thẻ a, xác định địa chỉ đích mà liên kết sẽ dẫn đến khi người dùng nhấp vào. Bạn có thể hiểu đơn giản href chính là “địa chỉ đích” mà liên kết dẫn đến, giống như khi bạn nhập địa chỉ vào thanh trình duyệt để truy cập một trang web vậy.
Có 2 loại đường dẫn chính:
- Đường dẫn tuyệt đối: Liên kết đến một URL đầy đủ ngoài website. Nó thường được dùng để dẫn đến một trang web bên ngoài hoặc một website khác. Ví dụ: < a href="https://www.phuongnam24h.com">Trang web.
- Đường dẫn tương đối: Đây là đường dẫn nội bộ, dùng để dẫn đến các trang hoặc tệp nằm trong cùng website. Ví dụ: < a href="/lien-he.html" >Liên hệ < /a >. Khi người dùng nhấp vào, họ sẽ được đưa đến trang liên hệ trên chính website đó (nằm cùng domain).
2. Target
Thuộc tính target trong thẻ a quy định nơi mà trang web hoặc tài liệu được liên kết sẽ được mở khi người dùng nhấp vào liên kết. Việc sử dụng target đúng cách không chỉ giúp kiểm soát trải nghiệm người dùng mà còn tránh làm gián đoạn quá trình duyệt web hoặc gây nhầm lẫn khi chuyển hướng.
Các giá trị phổ biến bao gồm:
_self: Đây là giá trị mặc định nếu bạn không chỉ định target. Liên kết sẽ được mở trong cùng cửa sổ hoặc tab hiện tại mà người dùng đang sử dụng. Điều này giúp giữ cho người dùng ở trên cùng một cửa sổ duyệt web, thuận tiện khi bạn muốn họ tiếp tục khám phá trang sau khi xem nội dung liên kết.
_blank: Khi đặt target="_blank", liên kết sẽ được mở trong một tab hoặc cửa sổ mới của trình duyệt. Đây là lựa chọn phổ biến khi bạn muốn giữ người dùng ở lại trang web chính nhưng vẫn cho phép họ xem nội dung khác mà không mất trang đang xem.
_parent: Giá trị này được sử dụng trong trường hợp bạn có cấu trúc khung (frameset). Liên kết sẽ được mở trong khung cha của khung hiện tại. Trong các trang web hiện đại hiếm khi dùng frameset nhưng nếu có, _parent giúp mở liên kết trong khung bao ngoài.
_top: Đây là giá trị cho phép liên kết mở trong toàn bộ cửa sổ trình duyệt, thay thế mọi khung hay iframe hiện có. Nó rất hữu ích khi bạn muốn “thoát” khỏi các khung con và mở trang đích chiếm toàn bộ màn hình trình duyệt, đảm bảo người dùng không bị giới hạn trong một khung nhỏ.
3. Title
Thuộc tính title trong thẻ a cung cấp thông tin bổ sung khi người dùng di chuột qua liên kết. Đây là một cách để hiển thị mô tả ngắn gọn về nội dung mà liên kết dẫn đến, giúp cải thiện trải nghiệm người dùng và hỗ trợ SEO một cách gián tiếp. Thuộc tính này không chỉ giúp hiển thị một đoạn văn bản nhỏ khi người dùng di chuột qua liên kết, mà còn tăng khả năng tiếp cận (accessibility) cho những người cần hỗ trợ trong việc đọc hoặc hiểu nội dung. Ngoài ra, nó còn cung cấp thêm ngữ cảnh hoặc lời nhắc ngắn gọn về nơi liên kết sẽ dẫn đến, từ đó giúp cải thiện trải nghiệm người dùng và mang lại lợi ích gián tiếp cho SEO.
Ví dụ: < a href = "https://www.example.com" title="Truy cập trang ví dụ" > Trang ví dụ.
Trong đó:
- < a > là thẻ liên kết trong HTML, dùng để tạo liên kết đến một trang hoặc tài nguyên khác.
- href = "https://www.example.com" là thuộc tính xác định địa chỉ đích của liên kết. Trong trường hợp này, khi người dùng nhấp vào liên kết, họ sẽ được chuyển đến trang web https://www.example.com.
- title = "Truy cập trang ví dụ" là thuộc tính cung cấp thông tin bổ sung về liên kết. Khi người dùng di chuột lên dòng chữ “Trang ví dụ”, một cửa sổ nhỏ (tooltip) sẽ hiện lên với nội dung là “Truy cập trang ví dụ”.
- Trang ví dụ là anchor text, tức là phần văn bản hiển thị trên giao diện trang web mà người dùng sẽ nhấp vào.
4. Download
Thuộc tính download trong thẻ a HTML cho phép người dùng tải tệp về máy thay vì mở trực tiếp trong trình duyệt. Khi được sử dụng, trình duyệt sẽ hiểu rằng liên kết là để tải xuống một tệp, không phải để điều hướng đến trang đó.
Chức năng chính của thuộc tính download là yêu cầu trình duyệt tải tệp về thiết bị của người dùng thay vì mở trực tiếp nội dung đó trên trình duyệt. Điều này đặc biệt hữu ích với các tệp như PDF, hình ảnh, tài liệu hoặc phần mềm mà bạn muốn người dùng lưu về máy. Ngoài ra, thuộc tính download còn cho phép bạn chỉ định một tên tệp mới sẽ được lưu khi người dùng tải về, giúp tăng tính chuyên nghiệp và dễ quản lý hơn cho các tệp tải xuống.
5. Rel (Relationship)
Thuộc tính rel trong thẻ a xác đị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. Đây là một thuộc tính quan trọng không chỉ trong HTML mà còn trong SEO và bảo mật website.
Thuộc tính rel trong anchor tag HTML có chức năng cung cấp thông tin bổ sung cho các công cụ tìm kiếm và trình duyệt về mối quan hệ giữa trang hiện tại và page được liên kết tới. Điều này giúp kiểm soát tốt hơn hành vi của đường link, đặc biệt là với các liên kết ngoài (external links), chẳng hạn như ngăn công cụ tìm kiếm truyền giá trị SEO thông qua thuộc tính rel = "nofollow".
Ví dụ: < a href="https://example.com" target="_blank" rel="noopener noreferrer">Trang ngoài
Các giá trị phổ biến của thuộc tính rel trong thẻ a HTML:
| Giá trị | Ý nghĩa |
| nofollow | Yêu cầu công cụ tìm kiếm không truyền “link juice” đến trang được liên kết. |
| noopener | Ngăn trang được mở bằng target="_blank" truy cập vào window.opener (giảm nguy cơ tấn công). |
| noreferrer | Không gửi thông tin nguồn (referrer) đến trang đích. |
| ugc | Liên kết được tạo bởi người dùng (User Generated Content), như bình luận. |
| sponsored | Đánh dấu liên kết trả phí/quảng cáo. |
6. Type
Thuộc tính type trong thẻ a trong HTML được sử dụng để chỉ định kiểu MIME (MIME type) của tài nguyên mà liên kết dẫn đến. Điều này giúp trình duyệt và công cụ tìm kiếm hiểu rõ hơn về nội dung được liên kết.
Chức năng của thẻ type bao gồm:
- Xác định loại tệp mà liên kết trỏ đến (ví dụ: tài liệu PDF, hình ảnh, video...).
- Thẻ type có thể hỗ trợ trình duyệt xử lý đúng định dạng nội dung, đặc biệt khi kết hợp với mã JavaScript hoặc ứng dụng web nâng cao.
Ví dụ:
< a href="/tai-lieu/huong-dan.pdf" type="application/pdf">Tải hướng dẫn dạng PDF
Một số kiểu MIME phổ biến bao gồm:
| MIME Type | Loại nội dung |
| text/html | Trang HTML |
| application/pdf | Tệp PDF |
| image/png | Hình ảnh PNG |
| audio/mpeg | Tệp âm thanh MP3 |
| video/mp4 | Tệp video MP4 |
| application/zip | Tệp nén ZIP |
7. Hreflang
Thuộc tính hreflang trong anchor tag dùng để chỉ định ngôn ngữ và (tùy chọn) khu vực địa lý của trang web mà liên kết dẫn đến. Đây là một thuộc tính quan trọng với các website đa ngôn ngữ, giúp cải thiện SEO quốc tế và mang lại trải nghiệm người dùng tốt hơn.
Thẻ hreflang thông báo cho công cụ tìm kiếm rằng liên kết trỏ đến một phiên bản nội dung dành cho một ngôn ngữ cụ thể, từ đó giúp Google hiển thị đúng phiên bản trang cho người dùng dựa trên ngôn ngữ và vị trí của họ.
Ví dụ:
< a href="https://example.com/fr" hreflang="fr">Phiên bản tiếng Pháp.
< a href="https://example.com/vi-vn" hreflang="vi-VN">Trang tiếng Việt.
Trong đó
- fr: tiếng Pháp.
- vi - VN: tiếng Việt tại Việt Nam (ngôn ngữ + quốc gia).
Những trạng thái của thẻ a trong HTML
Trong HTML và CSS, thẻ a có thể mang nhiều trạng thái khác nhau, đại diện cho từng giai đoạn trong hành vi tương tác của người dùng. Việc hiểu rõ các trạng thái này giúp bạn thiết kế giao diện rõ ràng, dễ sử dụng và trực quan hơn.
1. a:link - Liên kết chưa được truy cập
a:link là trạng thái mặc định của thẻ < a > khi liên kết đó chưa từng được người dùng nhấp vào. Đây là bước đầu tiên trong vòng đời tương tác của một liên kết. Trạng thái này thường được sử dụng để định dạng màu sắc, kiểu chữ hoặc hiệu ứng hiển thị riêng biệt giúp người dùng phân biệt đâu là liên kết chưa từng xem qua.
Ví dụ trong CSS, bạn có thể đặt a:link { color: blue; } để tất cả các liên kết chưa được truy cập hiển thị với màu xanh truyền thống. Việc sử dụng đúng a:link không chỉ nâng cao trải nghiệm người dùng mà còn hỗ trợ điều hướng hiệu quả hơn trên website.
2. a:visited – Liên kết đã được truy cập
a:visited là trạng thái của thẻ < a > khi người dùng đã từng nhấp và truy cập vào liên kết đó trước đó. Trạng thái này giúp người dùng dễ dàng nhận biết các trang mà họ đã từng xem, từ đó tránh nhầm lẫn hoặc truy cập lặp lại không cần thiết. Trong CSS, bạn có thể dùng thuộc tính này để thay đổi màu sắc của liên kết đã truy cập, ví dụ: a:visited { color: purple;} để hiển thị các liên kết cũ bằng màu tím.
Tuy nhiên vì lý do bảo mật, trình duyệt sẽ giới hạn một số thuộc tính có thể thay đổi đối với a:visited (như không cho phép thay đổi kích thước hoặc thêm hình ảnh nền) nhằm ngăn chặn việc truy vết lịch sử duyệt web của người dùng. Dù vậy, đây vẫn là một công cụ quan trọng trong việc tối ưu hóa trải nghiệm người dùng và thiết kế giao diện web hiệu quả.
3. a:hover – Khi di chuột vào liên kết
a:hover là trạng thái của thẻ a HTML khi người dùng di chuyển chuột qua liên kết nhưng chưa nhấp vào. Đây là hiệu ứng tương tác trực tiếp, giúp tăng tính sinh động và thu hút sự chú ý của người dùng đối với các liên kết trên trang web. Nhờ a:hover, các nhà thiết kế web có thể tạo hiệu ứng đổi màu, gạch chân, phóng to, đổi biểu tượng… để tạo cảm giác phản hồi tức thì.
Ví dụ: a:hover { color: red; text-decoration: underline; } sẽ làm liên kết chuyển sang màu đỏ và có gạch chân khi rê chuột qua. Trạng thái này rất quan trọng trong việc cải thiện trải nghiệm người dùng (UX), đặc biệt trên các trang có nhiều liên kết vì nó giúp định hướng hành vi và tăng khả năng nhấp chuột.
4. a:active - Khi liên kết đang được nhấn giữ chuột
a:active là trạng thái của thẻ a trong CSS khi người dùng đang nhấn chuột xuống liên kết, nhưng chưa thả ra. Đây là một phần trong chuỗi phản hồi trực quan giúp người dùng cảm nhận được hành động đang diễn ra. Việc sử dụng a:active giúp tăng tính tương tác và mang lại cảm giác mượt mà khi thao tác với liên kết.
Ví dụ: Bạn có thể dùng a:active { color: orange; transform: scale(0.98); } để khi nhấn vào, liên kết sẽ chuyển sang màu cam và hơi thu nhỏ lại tạo cảm giác như nút đang được ấn xuống. Trạng thái này thường được kết hợp cùng a:hover để hoàn thiện trải nghiệm nhấp chuột của người dùng trên website.
Định dạng CSS mặc định của thẻ a
Trong trình duyệt web, thẻ a thường đi kèm với các kiểu mặc định được áp dụng bởi CSS của trình duyệt (user agent stylesheet). Các định dạng này nhằm giúp liên kết dễ nhận biết và phân biệt với các thành phần văn bản khác trên trang:
- Định dạng màu sắc cho liên kết chưa truy cập: Liên kết chưa được người dùng nhấp vào sẽ được trình duyệt hiển thị với màu xanh dương (blue) mặc định. Màu sắc này giúp người dùng dễ dàng nhận biết đâu là liên kết có thể tương tác, tạo cảm giác quen thuộc và dễ dàng phân biệt với phần văn bản bình thường trên trang.
- Định dạng màu sắc cho liên kết đã truy cập (a:visited): Khi người dùng đã từng nhấp vào một liên kết, trình duyệt sẽ tự động thay đổi màu sắc của liên kết đó sang màu tím (purple). Điều này giúp người dùng biết được họ đã từng xem nội dung của liên kết đó, tránh nhấp lại nhiều lần hoặc mất phương hướng trong quá trình duyệt web.
- Gạch chân liên kết (text-decoration: underline): Để tăng tính trực quan, các trình duyệt mặc định sẽ gạch chân các liên kết. Việc gạch chân này tạo thành một dấu hiệu trực quan dễ nhận biết giúp người dùng phân biệt rõ ràng các đoạn văn bản có thể nhấn được so với đoạn văn bản thuần túy.
- Con trỏ chuột khi di chuyển vào liên kết: Khi người dùng di chuyển chuột qua một liên kết, con trỏ chuột sẽ chuyển từ mũi tên mặc định sang biểu tượng bàn tay (pointer). Hiệu ứng này đóng vai trò như một dấu hiệu trực quan, báo hiệu cho người dùng rằng phần tử đang đứng trên có thể được nhấn để chuyển hướng hoặc thực hiện hành động nào đó.
Ví dụ CSS mặc định mô phỏng lại:
Một số tips hay khi sử dụng thẻ a
Trong thiết kế và phát triển web, thẻ a giữ vai trò then chốt trong việc tạo ra các liên kết giúp người dùng di chuyển giữa các trang hoặc đến các nội dung quan trọng.
- Luôn sử dụng thuộc tính href hợp lệ: Thuộc tính href là yếu tố quyết định địa chỉ mà liên kết sẽ dẫn đến. Việc sử dụng một URL hợp lệ, đầy đủ và chính xác giúp tránh lỗi trang không tìm thấy (404) hoặc dẫn người dùng đến những trang không mong muốn.
- Sử dụng target="_blank" cho liên kết ngoài: Khi liên kết dẫn đến một website hoặc tài nguyên bên ngoài, việc mở liên kết trong tab mới bằng target="_blank" giúp người dùng không bị mất trang hiện tại. Điều này giữ họ ở lại trang gốc lâu hơn, đồng thời cho phép họ khám phá nội dung bổ sung mà không phải thoát khỏi website chính.
- Thêm thuộc tính rel="noopener noreferrer" khi dùng target="_blank": Khi mở liên kết trong tab mới, thuộc tính rel = "noopener noreferrer" giúp ngăn chặn nguy cơ bảo mật như tabnabbing, một kỹ thuật lừa đảo mà trang mới có thể truy cập và thao túng trang gốc. noopener ngăn việc trang mới có quyền truy cập vào window.opener, còn noreferrer hạn chế gửi thông tin HTTP_referer đến trang đích, tăng tính riêng tư cho người dùng.
- Viết văn bản liên kết (anchor text) rõ ràng, có ý nghĩa: Anchor text nên mô tả chính xác nội dung mà liên kết hướng đến thay vì dùng các từ chung chung như “click vào đây” hay “xem thêm”. Một anchor text cụ thể và phù hợp giúp người dùng hiểu trước về nội dung liên kết, đồng thời hỗ trợ công cụ tìm kiếm trong việc đánh giá và xếp hạng trang web, góp phần cải thiện SEO hiệu quả hơn.
Câu hỏi thường gặp về thẻ a trong HTML
Thẻ a là một trong những thẻ cơ bản nhưng cực kỳ quan trọng trong HTML, dùng để tạo liên kết đến trang web khác, tệp tin hoặc đến một phần tử cụ thể trong cùng trang. Dưới đây là các câu hỏi thường gặp giúp bạn hiểu rõ và sử dụng hiệu quả thẻ HTML này.
1. Có thể đặt hình ảnh bên trong thẻ a để biến hình ảnh thành liên kết không?
Có, bạn hoàn toàn có thể đặt hình ảnh bên trong thẻ a HTML để khi người dùng nhấp vào hình ảnh, nó sẽ hoạt động như một liên kết. Cách thực hiện rất đơn giản:
< a href="https://example.com" >
< img src="hinh-anh.jpg" alt ="Mô tả hình ảnh" >
< /a >
Trong ví dụ trên:
- Khi người dùng nhấp vào hình ảnh, họ sẽ được chuyển đến https://example.com.
- Thẻ < img > nằm bên trong thẻ < a >, vì vậy hình ảnh trở thành phần có thể click được.
2. Có thể dùng thẻ a HTML để tạo liên kết tải xuống file không?
Có, bạn có thể sử dụng thẻ a HTML để tạo liên kết tải xuống file bằng cách thêm thuộc tính download vào thẻ. Khi người dùng nhấp vào liên kết, trình duyệt sẽ tải file về thay vì mở nó trực tiếp.
Cú pháp ví dụ: < a href="tailieu.pdf" download>Tải về tài liệu PDF
Giải thích:
- href="tailieu.pdf" chỉ đường dẫn đến file cần tải.
- download là thuộc tính cho biết trình duyệt nên tải file thay vì mở nó.
Một số trình duyệt có thể bỏ qua thuộc tính download nếu liên kết trỏ đến một tên miền khác hoặc bị giới hạn bởi chính sách bảo mật.
3. Thẻ a có thể dùng mà không có href không?
Có, bạn có thể dùng thẻ a mà không có thuộc tính href, nhưng nó sẽ không hoạt động như một liên kết. Khi không có href, thẻ a chỉ là một phần tử inline không có chức năng điều hướng.
Một số lập trình viên dùng thẻ a không có href để gắn sự kiện JavaScript (như click), ví dụ như < a onclick="alert('Bạn vừa nhấn!') "> Nhấn vào đây < /a >.
Phần tử a trong HTML không chỉ là một thành phần cơ bản để tạo liên kết mà còn đóng vai trò quan trọng trong việc điều hướng, cải thiện trải nghiệm người dùng và hỗ trợ tối ưu hóa công cụ tìm kiếm. Khi hiểu và sử dụng đúng các thuộc tính như trong bài viết của Phương Nam Vina, bạn không chỉ đảm bảo liên kết hoạt động hiệu quả mà còn giúp trang web của mình trở nên chuyên nghiệp và thân thiện hơn. Dù là người mới bắt đầu hay đã có kinh nghiệm lập trình web, việc nắm vững cách sử dụng phần tử a trong HTML luôn là nền tảng không thể thiếu để xây dựng một website hiệu quả và dễ sử dụng.
