Thẻ <a> là thẻ quan trọng vào bậc nhất trong HTML, không có nó thì không có World Wide Web, và các tài liệu chỉ đơn thuần là trơ trọi một mình như hòn đảo hoang giữa biển rộng mênh mông. Nghe thì khủng khiếp thế nhưng sử dụng thẻ <a> lại rất đơn giản.
Đây là cấu trúc chuẩn của thẻ <a>:
<a href="https://kiencang.net/">Kiến càng</a>Dòng code trên sẽ hiện ra ngoài trình duyệt như thế này: Kiến càng
- Phần quan trọng nhất của thẻ
<a>chính là đường liên kết nằm trong thuộc tínhhref, nó sẽ cho biết nơi mà bạn sẽ đến khi click vào. - Phần nằm giữa thẻ mở
<a>và thẻ đóng</a>là phần sẽ hiển thị ra bên ngoài cho người duyệt web thấy, trong ví dụ trên đó chính là cụm từKiến càng. Bạn có thể thay cụm từ này bằng hình ảnh hoặc nút nhấn (button). Ví dụ về code cho link ảnh là:
<a href="https://kiencang.net/"><img src="images/ducanh.jpg" /></a>
- Theo mặc định các đường liên kết bằng văn bản trong thẻ <a> có màu xanh (blue) và được gạch dưới (underline). Dĩ nhiên bạn hoàn toàn có thể thay đổi mặc định này bằng CSS, điều đó rất dễ dàng.
- Bình thường khi bạn nhấn vào liên kết, nội dung cũ sẽ mất và thay bằng nội dung mới của liên kết mới, nhưng nếu bạn thêm thuộc tính
target="_blank"thì một tab mới sẽ mở ra cho nội dung mới, nội dung cũ sẽ vẫn còn ở tab cũ. Bạn thử nhấn vào liên kết này xem. Đây là cách rất hay áp dụng đối với các trang trỏ ra bên ngoài (không thuộc về cùng một trang), tuy vậy các liên kết nội bộ cũng làm thế được, tùy mục đích. Code mẫu cho việc này là:
<a href="https://kiencang.net/" target="_blank">liên kết này xem</a>- Ứng dụng của thẻ
<a>ngoài việc liên kết từ trang nọ sang trang kia thì nó còn được làm vào các việc sau: liên kết để tải một thứ gì đó về (tài liệu, âm nhạc, phần mềm), liên kết gửi email, và liên kết trong cùng một trang (nếu bạn để ý một số website, ở footer có mũi tên hướng lên trên, khi nhấn vào nó sẽ nhẩy lên header – đây chính là liên kết trong trang, hoặc các mục lục để bạn nhảy đến một phần của nội dung dài). - Thi thoảng bạn sẽ thấy trong href người ta để là dấu thăng (#), kiểu thế này:
<a href="#">Kiến càng</a>Đây người ta gọi là liên kết giả, khi bạn nhấn vào thì nó không chuyển đến đâu cả. Bạn sẽ rất hay dùng cái này khi thực hiện dàn trang (code html và css web), vì khi ấy bạn cần các liên kết demo thôi, nên không cần nó trỏ cụ thể đến đâu.
- Giải thích từ viết tắt: a đại diện cho anchor tức là điểm neo, còn href đại diện cho Hypertext REFerence – tham chiếu tới siêu liên kết.
Thẻ a trong SEO
Ở khía cạnh SEO (tối ưu hóa cho máy tìm kiếm), thẻ a đặc biệt quan trọng. Nó là một trong các thành phần lõi được các công cụ tìm kiếm đưa vào nhằm tính toán mức độ liên quan cũng như giá trị của một nội dung nào đó cao đến đâu so với truy vấn của người dùng. Nếu rảnh rỗi muốn mở rộng thêm bạn có thể tìm hiểu cách tính PageRank, công thức nổi tiếng của Google.
Ngoài ra để chỉ thị cho máy tìm kiếm biết một liên kết nào đó có quan hệ ra sao với trang web của bạn, bạn dùng thuộc tính rel:
- rel=”sponsored”: liên kết được tài trợ, trả tiền, ví dụ các quảng cáo, tiếp thị liên kết trên trang của bạn. Mẫu:
<a rel="sponsored" href="https://cheese.example.com/Appenzeller_cheese">Appenzeller</a>- rel=”nofollow”: hàm ý rằng bạn không muốn máy tìm kiếm cho rằng bạn đánh giá cao liên kết nofollow hay có mối quan hệ ý nghĩa nào với trang đó. Mẫu:
<a rel="nofollow" href="https://cheese.example.com/Appenzeller_cheese">Appenzeller</a>Mời bạn ghé thăm trang này để hiểu rõ hơn (tài liệu chính thức của Google).