Thử tưởng tượng một thế giới Internet mà các trang web là những hòn đảo cô độc, không thể đi từ trang này sang trang khác. Đó chính là thế giới nếu thiếu thẻ a trong HTML. Thẻ “anchor” (mỏ neo) này không chỉ là một thẻ cơ bản, nó chính là “linh hồn” tạo nên sự kết nối của World Wide Web. Nhưng dùng thẻ a không chỉ là chèn một liên kết. Làm sao để tối ưu nó cho SEO? Thuộc tính rel=”nofollow” hay target=”_blank” dùng khi nào mới chuẩn? Bài viết này của WiWeb sẽ hướng dẫn bạn toàn tập để làm chủ “siêu liên kết” một cách chuyên nghiệp.
Thẻ a trong HTML là gì?
Nếu bạn đang bắt đầu hành trình xây dựng website, chắc hẳn bạn đã nghe qua về thẻ a trong HTML. Đây là một trong những thẻ quan trọng và cơ bản nhất. Nó chính là viên gạch nền móng tạo nên sự kết nối kỳ diệu của Internet. Hãy cùng WiWeb tìm hiểu sâu hơn về nó nhé.
Định nghĩa thẻ a
Thẻ a trong HTML là viết tắt của Anchor, có nghĩa là mỏ neo. Đúng như tên gọi, nó dùng để neo một liên kết vào một đoạn văn bản hoặc một hình ảnh. Khi người dùng nhấp vào, họ sẽ được chuyển đến một trang khác, một vị trí khác trên cùng trang, hoặc một tài nguyên nào đó trên mạng.
Nói đơn giản, thẻ a chính là công cụ để tạo ra các siêu liên kết (Hyperlink). Nếu không có nó, các trang web chỉ là những tài liệu riêng lẻ, không thể kết nối với nhau. Chính nhờ thẻ a mà chúng ta có thể lướt từ trang này sang trang khác một cách dễ dàng.
Tại sao thẻ a lại là nền tảng của World Wide Web?
Bạn hãy thử tưởng tượng một thế giới không có các con đường. Mỗi ngôi nhà, mỗi thành phố sẽ là một ốc đảo biệt lập. Thật khó để di chuyển và khám phá đúng không?
World Wide Web cũng vậy. Nếu không có thẻ a html, Internet sẽ chỉ là một kho lưu trữ các tệp HTML rời rạc. Chính thẻ a đã tạo ra những con đường vô hình, kết nối hàng tỷ trang web lại với nhau, tạo thành một mạng lưới thông tin khổng lồ. Nó cho phép chúng ta:
- Điều hướng: Di chuyển từ trang chủ đến trang giới thiệu, từ bài viết này sang bài viết liên quan.
- Trích dẫn nguồn: Dẫn link đến các tài liệu, bài viết, hoặc nghiên cứu khác để tăng tính xác thực cho nội dung.
- Kêu gọi hành động: Hướng người dùng đến trang đăng ký, trang mua hàng, hoặc trang tải xuống.
Vì vậy, có thể nói rằng thẻ a không chỉ là một thẻ HTML. Nó là linh hồn, là bản chất của sự kết nối trên Internet. Hiểu rõ thẻ a là gì chính là bước đầu tiên để bạn làm chủ được nghệ thuật xây dựng web.
Cú pháp và các thuộc tính quan trọng nhất của thẻ a
Để sử dụng thành thạo thẻ a, bạn cần nắm vững cú pháp và các thuộc tính đi kèm của nó. Đừng lo, chúng rất đơn giản và dễ nhớ. WiWeb sẽ giải thích từng phần một cách chi tiết nhất.
Cú pháp cơ bản của thẻ a
Cú pháp để tạo liên kết trong HTML rất trực quan:
<a href="URL_Đích">Nội dung hiển thị cho người dùng</a>
Trong đó:
<a>: Thẻ mở, báo hiệu sự bắt đầu của một liên kết.href: Là thuộc tính quan trọng nhất, chúng ta sẽ tìm hiểu ngay sau đây.Nội dung hiển thị cho người dùng: Đây là phần văn bản hoặc hình ảnh mà người dùng sẽ thấy và nhấp vào. Phần này còn được gọi là Anchor Text.</a>: Thẻ đóng, kết thúc liên kết.
Thuộc tính href
href là viết tắt của Hypertext Reference. Đây là thuộc tính bắt buộc của thẻ a. Nó xác định địa chỉ URL mà liên kết sẽ trỏ tới. Nếu không có thuộc tính href, thẻ a sẽ mất đi chức năng liên kết của nó và chỉ là một đoạn văn bản bình thường.
Ví dụ:
<a href="https://wiweb.vn">Ghé thăm trang chủ WiWeb</a>
Thuộc tính target
Thuộc tính target cho phép bạn kiểm soát cách trình duyệt sẽ mở liên kết. Có một vài giá trị phổ biến:
_self: Đây là giá trị mặc định. Liên kết sẽ được mở ngay trên cửa sổ hoặc tab hiện tại._blank: Liên kết sẽ được mở trong một tab hoặc cửa sổ mới. Cách này rất hữu ích khi bạn muốn người dùng tham khảo một trang khác nhưng vẫn giữ họ ở lại trang của bạn._parent: Mở liên kết trong khung cha (parent frame)._top: Mở liên kết trong cửa sổ đầy đủ của trình duyệt.
Thông thường, bạn sẽ dùng _self hoặc _blank nhiều nhất. Dùng _blank là một lựa chọn khôn ngoan cho các liên kết ngoài.
Thuộc tính rel
rel là viết tắt của Relationship. Thuộc tính này mô tả mối quan hệ giữa trang hiện tại và trang được liên kết đến. Nó rất quan trọng cho SEO và bảo mật. Một vài giá trị phổ biến bao gồm nofollow, noopener, noreferrer. WiWeb sẽ giải thích chi tiết hơn về chúng ở phần tối ưu SEO nhé.
Thuộc tính title
Thuộc tính title cung cấp thêm thông tin về liên kết. Khi người dùng di chuột qua liên kết, một hộp thoại nhỏ (tooltip) chứa nội dung của title sẽ hiện ra. Điều này giúp cải thiện trải nghiệm người dùng và tốt cho khả năng truy cập (accessibility).
Ví dụ:
<a href="/bao-gia.html" title="Xem bảng giá thiết kế website của WiWeb">Báo giá dịch vụ</a>
Hướng dẫn tạo các loại liên kết phổ biến với thẻ a
Nắm được lý thuyết rồi, giờ là lúc thực hành! Cách dùng thẻ a trong HTML rất linh hoạt. Bạn có thể tạo ra nhiều loại liên kết khác nhau để phục vụ cho các mục đích riêng. Dưới đây là những loại phổ biến nhất mà bạn chắc chắn sẽ dùng.
Liên kết đến một trang web khác
Đây là loại liên kết cơ bản nhất, dùng để trỏ đến một tên miền hoàn toàn khác. Bạn chỉ cần điền URL đầy đủ vào thuộc tính href.
<!-- Liên kết đến trang tìm kiếm Google -->
<a href="https://google.com" target="_blank">Tìm kiếm với Google</a>
Mẹo nhỏ: Luôn dùng target="_blank" cho các liên kết ngoài để giữ chân người dùng trên trang của bạn.
Liên kết nội bộ
Liên kết nội bộ trỏ đến một trang khác trên cùng website của bạn. Thay vì dùng URL đầy đủ, bạn có thể dùng đường dẫn tương đối. Cách này giúp website chạy nhanh hơn và dễ bảo trì.
<!-- Liên kết đến trang Giới thiệu -->
<a href="/gioi-thieu.html">Về chúng tôi</a>
<!-- Liên kết đến một bài viết trong thư mục blog -->
<a href="/blog/bai-viet-hay.html">Đọc bài viết mới nhất</a>
Liên kết đến một vị trí cụ thể trên trang
Đôi khi bạn muốn đưa người dùng đến một phần cụ thể của một trang dài. Rất đơn giản! Đầu tiên, bạn cần đặt một id cho phần tử đích. Sau đó, trong thuộc tính href của thẻ a, bạn dùng dấu # theo sau là id đó.
<!-- Bước 1: Tạo liên kết -->
<a href="#phan-lien-he">Đi đến phần Liên hệ</a>
<!-- Bước 2: Đặt id cho phần tử đích ở cuối trang -->
<h2 id="phan-lien-he">Thông tin liên hệ</h2>
Liên kết để gửi email
Bạn có thể tạo một liên kết mà khi nhấp vào sẽ mở ứng dụng email mặc định của người dùng, với địa chỉ người nhận đã được điền sẵn.
<a href="mailto:hotro@wiweb.vn">Gửi email cho chúng tôi</a>
Liên kết để gọi điện thoại
Tương tự như email, liên kết này cực kỳ hữu ích trên thiết bị di động. Khi người dùng nhấp vào, nó sẽ mở ứng dụng gọi điện với số điện thoại đã được điền.
<a href="tel:+84987654321">Gọi ngay cho WiWeb: 0987.654.321</a>
Liên kết để tải file
Để tạo một liên kết cho phép người dùng tải xuống một tệp tin (ví dụ: PDF, ZIP, ảnh…), bạn chỉ cần thêm thuộc tính download vào thẻ a. Trình duyệt sẽ tự động tải tệp về thay vì cố gắng hiển thị nó.
<a href="/tai-lieu/bang-bao-gia.pdf" download>Tải về bảng báo giá PDF</a>
Thật tiện lợi phải không nào? Chỉ với một thẻ a, bạn đã có thể tạo ra vô số tương tác hữu ích cho người dùng.
Tối ưu thẻ a cho SEO
Sử dụng thẻ a trong html không chỉ là về kỹ thuật. Nó còn là một nghệ thuật để tối ưu hóa cho công cụ tìm kiếm (SEO). Một liên kết được tối ưu tốt sẽ giúp cả người dùng và Google hiểu rõ hơn về cấu trúc và nội dung website của bạn. Hãy cùng WiWeb tìm hiểu các kỹ thuật quan trọng nhé.
Sức mạnh của Anchor Text trong SEO
Anchor Text là văn bản hiển thị của một liên kết. Đây là một yếu tố cực kỳ quan trọng trong SEO. Google sử dụng Anchor Text để hiểu nội dung của trang mà liên kết đó trỏ tới.
Thay vì dùng những Anchor Text chung chung như xem thêm, tại đây, click vào đây, bạn hãy sử dụng văn bản mô tả và chứa từ khóa liên quan.
- Không tốt: Để biết thêm chi tiết, hãy
bấm vào đây. - Tốt hơn nhiều: Chúng tôi cung cấp
dịch vụ thiết kế website chuyên nghiệpcho doanh nghiệp.
Anchor Text tốt không chỉ giúp Google xếp hạng trang đích tốt hơn cho từ khóa đó, mà còn giúp người dùng biết họ sắp nhấp vào đâu.
Khi nào nên dùng thuộc tính rel=”nofollow”?
Theo mặc định, các công cụ tìm kiếm sẽ đi theo các liên kết và chuyển một phần uy tín (link juice) từ trang này sang trang khác. Tuy nhiên, có những trường hợp bạn không muốn điều này xảy ra. Đó là lúc rel="nofollow" phát huy tác dụng. Nó ra hiệu cho Google rằng: Đừng đi theo liên kết này và đừng chuyển uy tín cho nó.
Bạn nên dùng nofollow trong các trường hợp:
- Liên kết trả phí hoặc quảng cáo: Để tuân thủ nguyên tắc của Google.
- Nội dung do người dùng tạo: Ví dụ như các liên kết trong phần bình luận của blog để tránh spam.
- Khi bạn không thể xác thực hoặc không muốn bảo chứng cho trang được liên kết đến.
Tìm hiểu về rel=”noopener” và rel=”noreferrer” để tăng bảo mật
Đây là hai thuộc tính quan trọng thường bị bỏ qua, đặc biệt là khi bạn dùng target="_blank".
- rel=”noopener”: Ngăn chặn trang mới có thể truy cập vào đối tượng
window.openercủa trang gốc. Điều này giúp chống lại các cuộc tấn công lừa đảo (phishing), nơi trang đích độc hại có thể thay đổi nội dung trang của bạn. - rel=”noreferrer”: Có chức năng tương tự
noopener, nhưng còn đi xa hơn bằng cách không gửi thông tin về trang giới thiệu (referrer) đến trang mới. Trang đích sẽ không biết người dùng đến từ trang của bạn.
Lời khuyên từ WiWeb: Để đảm bảo an toàn tối đa, hãy luôn thêm rel="noopener noreferrer" vào tất cả các liên kết có target="_blank".
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Một liên kết ngoài an toàn</a>
Tạo kiểu cho thẻ a bằng CSS để đẹp hơn
Mặc định, các liên kết trong trình duyệt thường có màu xanh dương và một đường gạch chân. Điều này khá nhàm chán và có thể không phù hợp với thiết kế website của bạn. Rất may, với CSS, việc tạo kiểu cho thẻ a html trở nên cực kỳ dễ dàng và thú vị.
Thay đổi màu sắc và bỏ gạch chân mặc định
Đây là hai yêu cầu phổ biến nhất. Bạn có thể sử dụng thuộc tính color để đổi màu chữ và text-decoration để loại bỏ gạch chân.
Ví dụ, để biến tất cả các liên kết trên trang thành màu đen và không có gạch chân, bạn chỉ cần đoạn CSS ngắn gọn sau:
a {
color: #333333; /* Mã màu đen */
text-decoration: none; /* Bỏ gạch chân */
}
Quá đơn giản phải không? Từ đây bạn có thể tùy chỉnh màu sắc sao cho phù hợp với bộ nhận diện thương hiệu của mình.
Sử dụng các lớp giả
Để tạo ra trải nghiệm người dùng tốt hơn, bạn nên tạo kiểu cho các trạng thái khác nhau của một liên kết. CSS cung cấp các lớp giả (pseudo-class) cho việc này:
:link: Trạng thái mặc định của một liên kết chưa được người dùng truy cập.:visited: Trạng thái của một liên kết đã được người dùng truy cập.:hover: Trạng thái khi người dùng di chuột qua liên kết.:active: Trạng thái khi người dùng đang nhấp chuột vào liên kết.
Kết hợp chúng lại, bạn có thể tạo ra hiệu ứng tương tác rất chuyên nghiệp. Đây là một ví dụ đầy đủ:
/* 1. Liên kết chưa được truy cập */
a:link {
color: #007bff; /* Màu xanh dương */
text-decoration: none;
}
/* 2. Liên kết đã được truy cập */
a:visited {
color: #6c757d; /* Màu xám */
}
/* 3. Khi di chuột qua liên kết */
a:hover {
color: #0056b3; /* Màu xanh đậm hơn */
text-decoration: underline; /* Thêm lại gạch chân để báo hiệu */
}
/* 4. Khi đang nhấp vào liên kết */
a:active {
color: #ff0000; /* Màu đỏ */
}
Bằng cách tạo kiểu cho các trạng thái này, bạn cung cấp cho người dùng những phản hồi trực quan rõ ràng. Họ sẽ biết được liên kết nào đã xem, liên kết nào có thể nhấp vào. Đây là một chi tiết nhỏ nhưng lại tạo nên sự khác biệt lớn cho một website chuyên nghiệp.
Vậy là chúng ta đã cùng nhau đi qua một hành trình chi tiết để tìm hiểu thẻ a trong HTML là gì. Từ định nghĩa cơ bản, cú pháp, các thuộc tính quan trọng, cho đến cách ứng dụng thực tế và tối ưu cho SEO. Hy vọng rằng qua bài viết này của WiWeb, bạn đã hoàn toàn tự tin để sử dụng thẻ a một cách hiệu quả và chuyên nghiệp.
Bạn còn thắc mắc nào về cách dùng thẻ a trong html không? Hãy để lại bình luận bên dưới, WiWeb sẽ giải đáp ngay nhé!
Và nếu bạn đang tìm kiếm một đơn vị thiết kế website chuyên nghiệp, đừng ngần ngại liên hệ với WiWeb để biến ý tưởng của bạn thành hiện thực.
13/12/2025
12/12/2025
11/12/2025
10/12/2025
09/12/2025
08/12/2025