Thẻ <a> trong HTML

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ả

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ợ

Thẻ <a> trong HTML 4


Bình luận