Bài 10: Thẻ a trong HTML – Thẻ tạo link liên kết trong HTML

Bạn đã tìm hiểu về web chắc hẳn bạn cũng đã biết, 1 website luôn tồn tại các liên kết qua lại giữa các trang khác nhau và những liên kết này được gọi là Hyperlinks (siêu liên kết). Bạn có thể thấy ngay trong đoạn này mình có chèn liên kết về chuyên mục học HTML bằng cách dùng thẻ a trong HTML để tạo link liên kết đến 1 trang khác.

Trong HTML để tạo ra các link liên kết thì chúng ta sử dụng thẻ a – thẻ tạo link liên kết. Về cách dùng thẻ a trong HTML thì bài viết này mình sẽ hướng dẫn cho bạn chi tiết nhất về thẻ a trong HTML để bạn hiểu và dùng được nó.

Hướng dẫn dùng thẻ a trong HTML để tạo link liên kết

Thẻ a trong HTML được dùng rất nhiều nó giúp bạn tạo 1 đường dẫn trỏ đến 1 trang nào đó ngay trong web của bạn hoặc sang 1 web khác. Nếu bạn đã tìm hiểu về SEO thì bạn cũng biết thẻ a được dùng trong SEO cực kỳ nhiều khi bạn chèn backlink. Nó 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) và external link còn gọi là liên kết bên ngoài(link trỏ đến trang không cùng domain).

Tham khảo thêm

• Thẻ IMG trong HTML – Thẻ chèn hình ảnh trong HTML
• Các thẻ tạo danh sách (LIST) trong HTML
• Cấu trúc của một trang web bằng HTML

Cấu trúc của thẻ a trong HTML

<a href="https://nguyenhung.net" title="Học HTML Online" target="_blank">NguyenHung.Net</a>

Trong cấu trúc trên có các thuộc tính sau:

• <a>…</a> là cấu trúc khai báo của cặp thẻ a
• href là thuộc tính khai báo đường dẫn tới trang đích
• title là thuộc tính khai báo tiêu đề cho liên kết
• target là thuộc tính với các tùy chọn đích đến ở dưới (nếu không khai báo thuộc tính target thì giá trị mặc định là _self)
  • _self tùy chọn này sẽ mở link trên tab hiện tại
  • _blank tùy chọn này sẽ mở link trên tab mới
  • _parent  tùy chọn này sẽ mở link trong tab cha của tab hiện tại
  • _top tùy chọn này sẽ mở link trong cửa sổ toàn màn hình
• NguyenHung.Net  là thành phần hiển thị cho người dùng nhìn thấy. Nó có thể là text link hoặc image link.

Cấu trúc thẻ a nhảy tới vị trí nào đó trên trang

Ngoài việc đặt link dẫn đến 1 trang khác trong web hoặc dẫn đến 1 trang web khác thì bạn còn có thể đặt link nhảy đến 1 vị trí nào đó ngay trong trang mà không bị load lại trang.

Để làm việc này bạn hãy thêm vào thẻ HTML ở vị trí cần nhảy tới id=”ten_id” sau đó trong thuộc tính href của thẻ a bạn để link ở dạng href=”#ten_id”. Nói vậy có vẻ bạn sẽ thấy mở hồ, bạn hãy xem ví dụ dưới đây để hiểu nhé.

Ví dụ

Đầu tiên là thêm id cho đoạn cần nhảy tới. Ở đây mình sẽ thêm id cho thẻ h1 như sau:

<h1 id="den_day">Học HTML Online</h1>

Bây giờ chúng ta viết thẻ a với cấu trúc như sau:

<a href="#den_day" title="Học HTML Online">NguyenHung.Net</a>

Bậy giờ khi click vào thẻ a nó sẽ nhảy tới thẻ h1 có id=”den_day” ngay trong trang hiện tại mà không cần load lại trang.

Demo rõ nhất là bạn có thể xem mục lục của bài viết này ở bên tay phải màn hình, sau đó bạn click vào các link nó sẽ nhảy đến vị trí bạn cần tới.

Ngoài ra, với hình thức tạo link như này nó còn hiển thị trực tiếp trên kết quả tìm kiếm Google khá là hay, bạn có thể tìm hiểu thêm trong lĩnh vực SEO nhé.

Cấu trúc thẻ a tạo liên kết mail

Bạn có thể dùng thẻ a để tạo liên kết giúp người dùng click vào liên kết đó sẽ mở ứng dụng gửi mail và tự điền email mà bạn đã nhập sẵn ở đó. Cấu trúc thẻ a như sau:

<a href="mailto:[email protected]">[email protected]</a>

Và nó sẽ hiển thị trên trình duyệt như sau: [email protected]

Cấu trúc thẻ a tạo liên kết tới số điện thoại

Việc tạo link tới số điện thoại hiện nay rất hữu dụng, nhất là với các website bán hàng nếu muốn người dùng truy cập bằng điện thoại ấn vào liên kết số điện thoại là tự động nhập số điện thoại để gọi ngay rất là hay. Cách làm đơn giản với thẻ a như sau:

<a href="tel:19001009">19001009</a>

Nó sẽ hiển thị trên trình duyệt như sau, bạn hãy truy cập trang này bằng điện thoại và click vào thử nhé: 19001009

4 trạng thái của thẻ a

Thẻ a đặc biệt hơn các thẻ khác là nó sẽ có 4 trạng thái cho người dùng thấy như sau:

• link: là trạng thái thẻ a khi bạn chưa click lần nào
• hover: là trạng thái khi bạn trỏ chuột qua nhưng không click vào
• visited: là trạng thái khi bạn đã click vào link
• active: là trạng thái khi bạn click vào link nhưng vẫn đang giữ chuột

Về các trạng thái này thì chúng ta phải kết hợp cùng CSS mới thấy rõ được. Nên mình sẽ nói tới trong bài viết về CSS cho thẻ a sau.

Lời kết

Như vậy trong bài viết này mình đã cùng bạn đi tìm hiểu về thẻ a trong HTML và cách dùng thẻ a trong các trường hợp thường xuyên gặp nhất. Hi vọng với từng đó kiến thức sẽ giúp bạn sử dụng thẻ a trong HTML tốt hơn.

Nếu thấy bài viết hay hãy chia sẻ ngay nhé, còn nếu có thắc mắc gì hãy để lại còm men ở khung bình luận bên dưới nhá. Và nhớ theo dõi NguyenHung.Net để học thêm nhiều kiến thức về web hơn nhé. Chúc bạn thành công!