Phần tử liên kết - mỏ neo <a>

Các liên kết - link là một phần không thể thiếu cho mọi trang web. Bạn có thể thêm link dạng text(văn bản) hay dạng ảnh mà người dùng bấm chuột vào nó để chuyển hướng đến một trang web khác, một file khác.

Thẻ <a> (anchor - mỏ neo) được dùng để tạo ra các liên kết, với thuộc tính href được thiết lập là siêu liên kết (hyperlink) trỏ tới các trang, các file, địa chỉ email, bất kỳ loại địa chỉ URL nào ... Nội dung trong thẻ <a> có thể là text, hình ảnh ... cho biết trang được liên kết đến.

Xem để hiểu Cấu trúc địa chỉ URL

Ví dụ:

Thuộc tính href của <a>

Bạn tạo liên kết (link) bằng thẻ <a> (Anchor - mỏ neo - tạo một điểm neo trên trang) trong sử dụng thuộc tính href (hyperlink reference) để chỉ ra địa chỉ đích mà link mở ra.

Ví dụ bạn tạo link tới trang https://xuanthulab.net/html/

<a href="https://xuanthulab.net/html/">Học HTML</a>

Với code HTML như trên, nó sẽ hiện thị dạng link text là: Học HTML

Khi bạn bấm chuột vào link, trình duyệt sẽ chuyển hướng đến trang có địa chỉ https://xuanthulab.net/html/

Lưu ý là địa chỉ URL chỉ ra trong href có thể là địa chỉ tuyệt đối ("https://xuanthulab.net/html/") hoặc địa chỉ tương đối ("/html/").

href nếu là email thì viết "mailto:youremail"
href là số điện thoại thì viết: "tel:phonenumber"

Thuộc tính target của <a>

Thuộc tính target xác định các xuất hiện trong của sổ trình duyệt khi người dùng nhấn vào liên kết. Có thể thiết lập các giá trị:

  • _self giá trị mặc định (target của <a> không cần thiết lập đã nhận giá trị này). Liên kết mở ra trong cửa sổ hiện tại của trình duyệt.
  • _blank mở liên kết ở một Tab mới (cửa sổ mới)
<a href="https://xuanthulab.net" target="_blank" >Học HTML</a>

Link đến tài nguyên không phải HTML (như link đến file ,mp3, .doc ...), với các tài nguyên này tùy loại trình duyệt có loại nó sẽ tải download về, có loại có thể mở ra xem ngay trên trình duyệt (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ề)

<a href="music.mp3">Tải nhạc</a>

Thẻ <a> có rel="nofollow"

Đây là thuộc tính thiết lập liên quan đến công cụ tìm kiếm (như Google Search) Khi bạn liên kết tới một địa chỉ URL của một Website khác, nếu có thuộc tính rel="nofollow" thì trang web đó (địa chỉ URL đó) không liên quan đến website của bạn. Google không coi đường link của bạn như là một vote cho website kia, robots của Google không lần theo địa chỉ từ thẻ <a> của bạn để đến thu thập dữ liệu của URL kia.

<a href="https://badexamples.com/abc/xyz" rel="nofollow">Đây là địa chỉ xấu</a>

Biên tập HTML link ở hộp sau và xem kết quả ở dưới


Đăng ký nhận bài viết mới