You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Sử dụng thẻ liên kết a và các thuộc tính cơ bản trong HTML

Sử dụng thẻ liên kết a và các thuộc tính cơ bản trong HTML

Cách tạo một liên kết trong trang web sử dụng thẻ liên kết a trong HTML. Đây là một thẻ thường xuyên sử dụng nhất trong các thẻ HTML, và nó là một thẻ cơ bản nhất mà bất kì một ai đã từng tạo ra một trang web điều đã viết đi viết lại nó rất nhiều lần.

Xem thêm bài viết

Trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo một liên kết trong trang web sử dụng thẻ liên kết a trong HTML. Đây là một thẻ thường xuyên sử dụng nhất trong các thẻ HTML, và nó là một thẻ cơ bản nhất mà bất kì một ai đã từng tạo ra một trang web điều đã viết đi viết lại nó rất nhiều lần.

Đầu tiên, hãy nhìn cú pháp của nó:

<a href="http://huynhtong.com" title="Trang web dạy học web">Dạy học web</a>

Cú pháp nó cũng khá đơn giản, các bạn có thể thử ngay để xem kết quả được tạo ra bằng một trình soạn code (Notepad++, Sublime text...).

Sử dụng thẻ liên kết a trong HTML

Kết quả ta sẽ được một liên kết như sau: Dạy học web , khi các bạn click vào nó sẽ dẫn đến địa chỉ trong thuộc tính href của thẻ a và khi gê chuột lên liên kết này ta sẽ thấy mô tả trong thuộc tính title hiện lên.

Bây giờ, chúng ta sẽ đi tìm hiểu sâu hơn về thẻ a và các thuộc tính của nó. Đầu tiên, chúng ta sẽ tìm hiểu về các loại liên kết trong một trang web. Thông thường, một liên kết sẽ dẫn chúng ta đến một trang khác dựa vào địa chỉ trong thuộc tính href như ví dụ ở trên, liên kết như vậy được gọi là liên kết ngoại. Tuy nhiên, trong một trang web người ta cũng sử dụng các liên kết nội để dẫn người dùng đến một vị trí nào đó trong cùng một trang, được xác định bởi một liên kết nội để giúp người dùng đến đúng vị trí tài liệu mà họ đang muốn xem trên trang.

Cú pháp liên kết nội: 

Đầu tiên, ở vị trí tài liệu mà chúng ta muốn liên kết chuyển đến phải được đánh dấu bằng một thẻ a với thuộc tính id:

<a id="id_tailieu">Nội dung tài liệu ta muốn đến trên trang</a>

Tiếp theo, chúng ta tạo một liên kết bình thường, với thuộc tính href là id của tài liệu:

<a href="#id_tailieu">Đến tài liệu có id là id_tailieu</a>

Như vậy, chúng ta sẽ được một liên kết nội, dẫn đến chính xác vị trí tài liệu được đánh dấu bằng một id

Liên kết nội

Như vậy, chúng ta đã tìm hiểu xong về liên kết nội và liên kết ngoại là như thế nào. Tiếp theo chúng ta sẽ tìm hiểu về các thuộc tính của thẻ a, bao gồm:

  • Thuộc tính href: Là địa chỉ mà liên kết này sẽ đến, chúng ta cũng có 2 loại địa chỉ là địa chỉ tương đối và địa chỉ tuyệt đối.
    • Địa chỉ tuyệt đối có dạng: http://huynhtong.com/thumuc-baiviet/baiviet.html . Khi chúng ta muốn chỉ rõ địa chỉ của liên kết hoặc địa chỉ bên ngoài website, chúng ta sẽ sử dụng địa chỉ tuyệt đối.
    • Địa chỉ tương đối có dạng: /thumuc-baiviet/baiviet2.html . Khi chúng ta muốn liên kết đến một trang trên cùng một website, chúng ta có thể sử dụng địa chỉ dạng này. 
  • Thuộc tính title: Mô tả cho liên kết
  • Thuộc tính target: Cách thức mở một tài liệu
    • _blank : Mở trong một tab mới
    • _seft: Mở trên tab hiện tại (Mặc định)
    • _parent: Mở trên tab cha đã mở tab hiện tại. 
    • _top: Chuyển tới tab hiện tại. Thường dùng khi muốn thoát khỏi iframe và mở trên tab đó luôn.
  • Thuộc tính rel: Thuộc tính này dành cho SEO.

Qua bài viết này, mình đã giới thiệu cho các bạn cách tạo ra một liên kết trong một trang web với thẻ a trong HTML. Đây là một thẻ thường xuyên sử dụng nhất và là một trong những thẻ cơ bản nhất trong các thẻ của HTML. Hi vọng bài viết cung cấp được những thông tin bổ ích cho các bạn.

Chúc các bạn học tốt!




Đặt câu hỏi cho bài viết này ?