Một trang web chỉ thực sự trở thành “web” khi các trang được liên kết với nhau. HTML dùng thẻ <a> để tạo ra các liên kết (hyperlink), giúp người dùng chuyển từ nơi này đến nơi khác.
1. Cú pháp thẻ <a>
<a href="đường_dẫn">Nội dung liên kết</a>
Trong đó:
href(Hypertext REFerence) là thuộc tính bắt buộc, chỉ định liên kết sẽ đi đến đâu- Nội dung bên trong thẻ
<a>là phần người dùng nhìn thấy và có thể bấm vào
2. Các loại liên kết
a) Liên kết đến một trang web khác
<a href="https://www.google.com">Truy cập Google</a>
b) Liên kết đến một trang nội bộ (trong cùng thư mục)
<a href="lienhe.html">Trang liên hệ</a>
c) Liên kết mở trong tab mới
<a href="https://vnexpress.net" target="_blank">Xem tin tức</a>
Thuộc tính target="_blank" giúp mở liên kết trong một tab mới
d) Liên kết tới email
<a href="mailto:example@gmail.com">Gửi email</a>
e) Liên kết tới số điện thoại (dùng cho thiết bị di động)
<a href="tel:0123456789">Gọi ngay</a>
3. Thẻ liên kết có thể chứa gì?
Thẻ <a> không chỉ chứa văn bản, mà còn có thể chứa hình ảnh, icon, hoặc cả đoạn HTML khác:
<a href="trangchu.html">
<img src="logo.png" alt="Trang chủ">
</a>
4. Thực hành
Tạo một file tên lienket.html với nội dung sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Liên kết trong HTML</title>
</head>
<body>
<h1>Trang chính</h1>
<p><a href="https://www.w3schools.com" target="_blank">Tới trang học HTML</a></p>
<p><a href="lienhe.html">Đi tới trang liên hệ</a></p>
<p><a href="mailto:hello@example.com">Gửi email cho tôi</a></p>
</body>
</html>
Tạo thêm một file lienhe.html để kiểm tra liên kết nội bộ:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Liên hệ</title>
</head>
<body>
<h1>Thông tin liên hệ</h1>
<p>Gửi email tới hello@example.com</p>
<a href="lienket.html">Quay về trang chính</a>
</body>
</html>
5. Ghi nhớ
- Thẻ
<a>dùng để tạo mọi loại liên kết. hreflà thuộc tính quan trọng nhất.- Dùng
target="_blank"khi muốn mở trang mới.
Thảo luận