Hướng dẫn tag a trong html

  • Trang chủ
  • Tham khảo
  • Tag html
  • html5
  • <a>

Định nghĩa và sử dụng

Tag <a> xác định một siêu liên kết (hyperlink).
Đượ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 đó,...

Xem ví dụ.

Sự khác nhau giữa HTML4.01 và HTML5

HTML4.01HTML5
● 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>

Ví dụ: Liên kết tới trang khác

Html viết:

<p><a href="index.php">Liên kết tới trang khác</a></p>

Hiển thị trình duyệt:

Ví dụ: Liên kết mail

Html viết:

Hiển thị trình duyệt:

Khi click vào sẽ xuất hiện một hộp thư gửi mail.

Html viết:

<p><a href="#content">Liên kết tới id content</a></p>

Hiển thị trình duyệt:

Html viết:

<p><a href="doc/ex.doc">Mở file ex.doc trong thư mục "doc"</a></p>

Hiển thị trình duyệt:

Ví dụ: Liên kết mở ra cửa sổ khác

Html viết:

<p><a href="index.php" target="_blank">Liên kết mở ra cửa sổ khác</a></p>

Hiển thị trình duyệt:

Trình duyệt hỗ trợ

Tag <a> được hỗ trợ trong đa số các trình duyệt.

Thuộc tính

Cách sử dụng: <a thuoctinh="giatri"></a>

Thuộc tính tùy chọn

Thuộc tínhGiá trịVí dụMô tả
Thuộc tính mới (Mới)
media truy vấn media media="screen" Xác định mục tiêu URL cho media/device.
Giá trị mặc định là: all.
type Kiểu MIME type="image/gif" Xác định kiểu MIME cho mục tiêu URL.
Thuộc tính như HTML4.01
href URL href="index.html" Đường dẫn cụ thể đến một liên kết.
target _blank
_parent
_self
_top
framename
target"_blank" Xác định nơi để mở tài liệu.
Thuộc tính không hỗ trợ trong HTML5
charset Bộ mã ký tự charset="UTF-8" Không hỗ trợ trong HTML5.
coords Tọa độ coords="0,111,122" Không hỗ trợ trong HTML5.
name Tên name="products" Không hỗ trợ trong HTML5.
rev Text rev="ourWeb" Không hỗ trợ trong HTML5.
shape default
rect
circle
poly
shape"circle" Không hỗ trợ trong HTML5.
Thuộc tính không được hỗ trợ trong phần lớn các trình duyệt
hreflang Mã ngôn ngữ hreflang="vi" Xác định rõ ngôn ngữ của văn bản được liên kết.
Không hỗ trợ trong phần lớn trình duyệt
rel Text rel="ourWeb" Xác định mối quan hệ giữa các văn bản hiện tại và văn bản được liên kết.
Không hỗ trợ trong phần lớn trình duyệt

Thuộc tính Tổng quát và thuộc tính sự kiện

Tất cả thuộc tính tổng quát và thuộc tính sự kiện được xác định trên phần lớn các thành phần HTML5

Trong HTML nếu bạn muốn tạo ra các link liên kết thì bạn sẽ cần sử dụng đến một loại thẻ. Đó là thẻ a hay còn được gọi với tên gọi khác là thẻ tạo link liên kết. Thẻ <a> là một loại thẻ cơ bản, và cũng được coi là thẻ quan trọng vào bậc nhất trong HTML.

Vậy liệu bạn đã hiểu rõ về khái niệm, công dụng, cách dùng của loại thẻ này chưa? Hãy theo dõi bài viết dưới đây, Vietnix sẽ chia sẻ cho bạn những thông tin chi tiết nhất về Thẻ a trong HTML là gì? Các thuộc tính của thẻ a thông dụng bao gồm những gì?

Thẻ <a> trong HTML là gì?

Thẻ <a> được coi là thẻ quan trọng vào bậc nhất trong HTML. Vậy hãy cùng theo dõi bài viết dưới đây, Vietnix sẽ cùng bạn tìm hiểu chi tiết hơn về thẻ a nhé!

Khái niệm thẻ <a> trong HTML

Thẻ <a> trong HTML là một trong những thẻ cơ bản nhấtđược sử dụng khá nhiều

Một số ví dụ về thẻ <a>:

<a href=”https://vietnix.vn/” target=”_blank” title=”Vietnix” rel=”follow, index”>vietnix.vn</a>

<a href=”mailto:”>Send email</a>

<a href=”tel:+84708844444″>+84 7088 44 444</a>

<a href=”#section2″>Go to Section 2</a>

<a href=”javascript:alert(‘Hello World!’);”>Execute JavaScript</a>

Hướng dẫn tag a trong html
Ví dụ về thẻ a trong HTML

>> Xem thêm: Thẻ Input trong HTML là gì? Tổng hợp các ví dụ cụ thể

Công dụng của thẻ <a>

Công dụng của thẻ a là chứa liên kết điều hướng người dùng đi đến một trang khác. Nếu bạn đã tìm hiểu về SEO, thì chắc hẳn bạn sẽ thấy rằng thẻ a được dùng trong SEO cực kỳ nhiều. Đặc biệt là khi bạn chèn backlink. Lúc này, sẽ có 2 dạng là internal link hay còn gọi là liên kết bên trong (link trỏ đến trang cùng domain); external link còn gọi là liên kết bên ngoài (link trỏ đến trang không cùng domain). 

Hướng dẫn tag a trong html
Internal và external link

Thẻ <a> ngoài việc liên kết từ trang nọ sang trang kia thì nó còn được sử dụng vào các việc sau đây: 

  • Thứ nhất, liên kết để tải một thứ gì đó về (tài liệu, âm nhạc, phần mềm,…).
  • Thứ hai, liên kết gửi email.
  • Thứ ba, liên kết trong cùng một trang (nếu bạn để ý ở một số website, ở phần footer có mũi tên hướng lên trên, khi nhấn vào nó sẽ nhảy lên phần header – đây chính là liên kết trong trang).

Giá trị href # của thẻ a trong HTML

Thẻ a href là gì? Giá trị của href # của thẻ a trong HTML là gì?

Thẻ a href trong HTML là gì?

Thẻ a href trong HTML là một tag html cực kỳ quan trọng được sử dụng thường xuyên. Thẻ a href có tác dụng tạo liên kết trong html. Thẻ này có nhiều thuộc tính giúp bạn dễ dàng tạo liên kết đến một link, website, email hoặc một file nào đó mà bạn mong muốn.

Cú pháp: <a href=”link liên kết”>nội dung liên kết </a>

Giá trị href # của thẻ a

Khi bạn khai báo một thẻ a không muốn trỏ đến một liên kết nào cả, thì hãy thiết lập giá trị href=“#”

Ví dụ: <a href=“#”>vietnix</a>

Trong trường hợp bạn muốn khi click vào thẻ a thì trình duyệt sẽ di chuyển đến một vị trí nào đó trong trang web thì thực hiện các bước sau đây

Bước 1: Bạn đặt ID cho vị trí bạn cần di chuyển đến. Giả sử đó là thẻ div, bạn sẽ đặt id cho nó như sau: <a href=“moveto”></div>

Bước 2: Khi click vào thẻ a thì sẽ chuyển tới thẻ div#moveto, bạn cần thiết lập như sau: <a href=”#moveto” > Đi tới div#moveto</a>

>> Xem thêm: Link Building là gì? Các chiến lược xây dựng liên kết cho SEO

Tổng hợp các thuộc tính của thẻ a trong HTML

Thẻ <a> bao gồm các thuộc tính: href, title, rel, target,..Trong đó, có 3 thuộc tính cơ bản được sử dụng nhiều nhất đó là download, href và target.

Hãy tham khảo bảng tổng hợp chi tiết các thuộc tính của thẻ a trong HTML thông qua bảng dưới đây:

Thuộc tínhGiá trịMô tả
download filename Chỉ định rằng mục tiêu sẽ được tải xuống khi người dùng nhấp chuột vào siêu liên kết.
Có thể thêm giá trị cho thuộc tính download để xác định được tên của tập tin khi được lưu về máy tính.
href URL Dùng để xác định đường dẫn đến tài liệu mà bạn đang muốn chuyển tới.
Ngoài ra còn để xác định một vị trí bên trong trang web mà bạn muốn di chuyển đến (vị trí của phần tử được xác định dựa giá trị thuộc tính id của phần tử).
hreflang language_code Dùng để chỉ định ngôn ngữ của tài liệu được liên kết.
media media_query Dùng để chỉ định phương tiện / thiết bị mà tài liệu được liên kết được tối ưu hóa.
ping list_of_URLs Dùng để chỉ định danh sách URL được phân tách bằng dấu cách, khi liên kết sau đó, các yêu cầu đăng với body ping sẽ được gửi bằng trình duyệt (trong bối cảnh). Được sử dụng để theo dõi.
referrerpolicy no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url
Dùng để chỉ định liên kết giới thiệu nào sẽ gửi.
rel alternate
author
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search 
tag
Dùng để chỉ định mối quan hệ giữa tài liệu hiện tại và tài liệu được liên kết.
type media_type Dùng để chỉ định loại phương tiện của tài liệu được liên kết.
target _blank: Mở tài liệu trong một tab mới
_parent: Mở tài liệu trong khung chat của khung hiện tại
_self: Mở tài liệu trong khung hiện tại
_top: Nghĩa là mở tài liệu trong tab hiện tại
Dùng để chỉ định nơi để mở tài liệu được liên kết.

Những trạng thái của thẻ a trong HTML là gì?

Thẻ a trong HTML gồm có 4 trạng thái chính sau đây:

  • link: là chưa có hành động nào trên link.
  • visited: là đã click vào link và đi đến trang đích.
  • hover: là di chuyển qua link.
  • active: là link đã được active.

Thông thường, chúng ta sẽ kết hợp với CSS để tạo ra hiệu ứng cho 4 trạng thái trên. Để hiểu rõ hơn về CSS, hãy tiếp tục theo dõi phần tiếp theo của bài viết này nhé!

Hướng dẫn tag a trong html
Các trạng thái của thẻ a

Định dạng CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị phần tử <a> với định dạng CSS như phần trình bày dưới đây:

Định dạng màu sắc cho thẻ a

Thông thường, mặc định trong thẻ a khi chúng ta tạo một liên kết bất kỳ; thì màu sắc sẽ là màu tím. Nếu như bạn muốn thay đổi màu mặc định. Bạn có thể định dạng lại màu sắc theo cú pháp selectorcolor như sau:

Ví dụ: Bạn muốn định dạng màu sắc thẻ a là màu đỏ.

a {
    color:red;
}

Định dạng background cho liên kết

Để định dạng màu nền bạn sẽ có thuộc tính Background. Và bạn sẽ cần thực hiện như sau:

Ví dụ : Bạn định dạng nền màu xanh, chữ màu đỏ cho thẻ a (liên kết).

a {
     background: blue;
     color: red;
}

Ẩn dấu gạch chân (liên kết) thẻ a 

Khi bạn tạo một liên kết bất kỳ thì ngoài màu sắc mặc định là màu tím ra thì còn có dấu gạch chân dưới liên kết. Bạn muốn loại bỏ dấu gạch chân này đi thì cần phải làm gì? Bạn có thể bỏ dấu này đi bằng cú pháp như sau đây:

a {
    text-decoration: none;
}

Thẻ a bao gồm 4 style sự kiện chính đã được đề cập ở bên trên. Khi mà chúng ta nhấp chuột vào hay di chuyển chuột lên liên kết sẽ có 4 style sự kiện sau đây:

  •  link : Nghĩa là màu sắc của thẻ a mà bạn chưa click chuột vào lần nào.
  •  visited : Nghĩa là trạng tháNghĩa lài khi bạn click vào thẻ.
  •  active : Nghĩa là trạng thái khi bạn click vào và nhấn giữ chuột liên kết đó.
  •  hover : Nghĩa là trạng thái chuyển màu sắc khi bạn đưa chuột lên liên kết đó.
Hướng dẫn tag a trong html
Định dạng CSS mặc định

>> Xem thêm: CSS3 là gì? Giới thiệu tổng quan về CSS3

Lời kết

Thẻ a trong HTML mặc dù là một loại thẻ cơ bản nhất, tuy nhiên loại thẻ này lại là một phần quan trọng không thể thiếu trong HTML. Qua bài viết này, Vietnix mong rằng bạn sẽ hiểu rõ hơn về thẻ <a>, công dụng, các trạng thái và các thuộc tính cơ bản của loại thẻ này, cũng như giá trị href #. Và đồng thời cũng hiểu rõ hơn về định dạng CSS mặc định. Cảm ơn bạn đã theo dõi bài chia sẻ về thẻ a này nhé!

Tải thêm tài liệu liên quan đến bài viết Hướng dẫn tag a trong html