Thẻ <a> trong HTML
Tag <a> xác định một siêu liên kết (ahyperlink).
Được dùng để:
- Link từ trang này tới trang khác.
- Link anchor (link neo) từ vị trí này tới vị trí khác.
- Link để mở (hay download) một file nào đó (file word, excel, pdf, image, ...), mở một cửa sổ window hay một object nào đó,...
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Vi du the a trong HTML</title>
</head>
<body>
<p>
Vi du mot duong link: <a href="http://hoc.tv">Học TV</a>
</p>
</body>
</html>
Kết quả:
Sự khác nhau giữa HTML4.01 và HTML5
HTML4.01 | HTML5 |
|---|---|
● Sử dụng như siêu liên kết (link) hay một neo (anchor) | ● Luôn luôn là siêu liên kết (link). ● Nếu không có thuộc tính href thì nó chỉ là một trình giữ chỗ cho một liên kết. ● Trong HTML5 có một số thuộc tính mới, và một số thuộc tính không được hỗ trợ. |
Cấu trúc
<a href="#">Đây là link</a>
Các thuộc tính đặc trưng
Thẻ HTML <a> cũng hỗ trợ các thuộc tính sau:
Thuộc tính | Giá trị | Miêu tả |
|---|---|---|
charset | Mã hóa ký tự | Định nghĩa mã hóa ký tự của tài liệu được liên kết. |
coords | Nếu shape="rect" thì coords="left,top,right,bottom" Nếu shape="circ" thì coords="centerx,centery,radius" Nếu shape="poly" thì coords="x1,y1,x2,y2,..,xn,yn" | Xác định các tọa độ thích hợp tới thuộc tính shape để định nghĩa một khu vực của một hình ảnh cho Image Map. |
download <HTML5> | Tên file | Thẻ này download mục tiêu khi người sử dụng nhấn chuột vào hyperlink. |
href | URL | Xác định địa chỉ URL của một trang hoặc tên của đường link mà đi tới trang mục tiêu. |
hreflang | Mã hóa ngôn ngữ | Mã hóa ngôn ngữ của địa chỉ URL đích đến. |
media <HTML5> | media_query | Nó xác định kiểu phương tiện nào mà tài liệu được liên kết có ý định sử dụng. |
name | Tên khu vực | Đánh dấu một khu vực của một trang mà một link nhảy tới. |
rel | alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection appendix help bookmark | Miêu tả mối quan hệ giữa tài liệu hiện tại và URI đích đến. |
rev | alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection appendix help bookmark | Xác định mối quan hệ giữa URL mục tiêu và tài liệu hiện tại. |
shape | rect rectangle circ circle poly polygon | Xác định hình dạng của Image map. |
target | _blank _parent _self _top | Nơi để mở URL mục tiêu. _blank - URL mục tiêu sẽ mở một cửa sổ mới. _self - URL mục tiêu sẽ mở trong cùng một khung như khi nó được click. _parent - URL mục tiêu sẽ mở trong khung mẹ. _top - URL mục tiêu sẽ mở trong cả cửa sổ trình duyệt. |
type <HTML5> | mime_type | Xác định kiểu MIME của URL mục tiêu. |
Ví dụ: Liên kết tới trang khác
<p><a href="index.php">Liên kết tới trang khác</a></p>
Kết quả
Ví dụ: Liên kết mail
<p>Email: <a href="mailto:support@hoc.tv">support@hoc.tv</a></p>
Kết quả
Email: support@hoc.tv
Ví dụ: Link từ vị trí này tới vị trí khác
Chúng ta có thể dùng thẻ a để nhảy tới vị trí khác ngay trong trang bằng cách sử dụng thuộc tính
href="#vi_tri_can_nhay"
Trong đó vi_tri_can_nhay được định nghĩa với cấu trúc
name="vi_tri_can_nhay" hoặc id="vi_tri_can_nhay"
Ví dụ để nhảy tới phần Các thuộc tính đặc trưng ở trên ta có thể sử dụng code như sau:
Chỗ cần nhảy tới cần phải định nghĩa với name hoặc id
<a name="cac-thuoc-tinh-dac-trung">Cấu trúc</a>
Code nhảy tới phần chỉ định. Dưới đây là code link tới phần Các thuộc tính đặc trưng ở trên
<a href="#cac-thuoc-tinh-dac-trung"> CLick vào đây để xem phần Các thuộc tính đặc trưng</a>
Hiển thị
Trình duyệt hỗ trợ
