Tạo thẻ liên kết neo (Anchor Link) trên trang html
Như các bạn thấy thẻ liên kết neo hay Anchor Link được dùng rất phổ biến trên các trang Landing Page, nó giúp người dủng trãi nghiệm thú vị và đến mục tiêu tìm kiếm trên một trang nhanh chóng hơn.
Nếu bạn đang tìm chủ đề tạo liên kết nội bộ, để tạo thẻ liên kết neo (Anchor Link) cho một trang html bất kỳ thì có thể làm theo các bước sau nhé.
Nói thêm cho một số bạn chưa hiểu về thẻ liên kết neo (Anchor Link) hay thẻ liên kết nội bộ là gì, Anchor Link nghĩa là liên kết trong trang HTML bất kỳ, nó sẽ dẫn người xem đến một vị trí bất kỳ trên trang HTML đó mà không phải mở trang mới hay tải lại trang.
Ví dụ đầu văn bản trang HTML bạn có đặt một thẻ liên kết nội bộ anchor link ” xem chi tiết … gì đó ” , khi người dùng bấm vào nó sẽ dẫn đến đoạn văn bản trên cùng một trang html mà bạn muốn, điển hình như nội dung chi tiết nằm ở phía dưới.
Cách tạo thẻ liên kết nội bô (Anchor Link) – thẻ liên kết neo
Để có thẻ liên kết nội bộ (Anchor link), bạn cần tạo ID điểm neo và đặt link về nó:
- Tạo ID điểm neo hay vị trí được neo: là một khu vực bất kỳ trên trang HTML, bạn sẽ khai báo cho tiêu đề hoặc khu vực đó với thuộc tính ID=”gia_tri”. (Ví dụ: <p id=”noidung″>nội dung</p>)
- Liên kết neo: là liên kết có thuộc tính href có giá trị là dấu # cộng với tên ID của khu vực ta cần neo tới. (Ví dụ: <a href=”#noidung″>Xem chi tiết nội dung</a>)
Như vậy khu muốn liên kết đến bất kỳ vị trí nào trên cùng một trang văn bản html thì bạn cần tạo ID cho khu vực cần link tới, sau đó đặt liên kết đến vị trí ID đó bằng cách chèn liên kết có #ten-ID. Có thể bạn sẽ thấy khó hiểu nhưng hãy đọc từ từ và làm theo sẻ dễ hiểu hơn nhé.
Ví dụ trang web của mình ở phần header có text : Xem mẫu
Mình sẽ chèn link vào text trên dưới dạng van bản html <a href=”#xem-mau″>Xem mẫu</a>
Cuối trang web của mình là khu vực nội dung các mẫu thiết kế, có tiêu đề đầu văn bản là ” Mẫu Thiết Kế ” , mình sẽ đặt ID cho tiêu đề này là ID=”xem-mau” để khi người dùng bấm vào text link đầu trang ” Xem mẫu ” sẽ được đưa đến vị trí khu vực nội dung ” Mẫu Thiết Kế “.
Tạo ID dưới dạng văn bản html như sau: <h3 id=”xem-mau″>Mẫu Thiết Kế</h3> ( ở đây có h3 vì đây là thẻ tiêu đề h3, bạn tạo ID trực tiếp vào đó luôn nhé ). Chúc bạn thành công.
