Bạn có thể sử dụng anchor (<a> ) các liên kết trong HTML để liên kết đến một trang khác hoặc một trang web khác. Nhưng làm thế nào bạn có thể liên kết đến một phần cụ thể của trang web?
Câu trả lời là liên kết nhảy .
Liên kết nhảy là các liên kết sẽ không chỉ tải trang mà còn "nhảy" xuống một phần cụ thể của trang web. Bạn có thể sử dụng chúng trong nội bộ để liên kết đến một trang khác trên trang web của mình và thậm chí bạn có thể chia sẻ các liên kết ra bên ngoài.
Các liên kết này sẽ hoạt động cho dù người dùng đến từ đâu và chúng không yêu cầu bất kỳ thứ gì khác ngoài HTML cơ bản để hoạt động.
Tạo liên kết nhảy neo
Trong HTML, bạn có thể tạo một liên kết cố định bằng cách sử dụng một bộ <a> thẻ có văn bản bên trong. Đây là một ví dụ:
<a>Here is a link that doesn't go anywhere!</a>Sử dụng thuộc tính id cho mục tiêu liên kết
Bây giờ, để tạo một liên kết nhảy, chúng ta cần một liên kết và chúng ta cần một mục tiêu. Mục tiêu có thể là bất kỳ phần tử nào trên trang web có thuộc tính "id".
Mục tiêu thực sự phổ biến sẽ là dòng tiêu đề hoặc dòng tiêu đề phụ sử dụng thẻ H như <h1> , <h2> , <h3> , và như thế. Nói chung, bạn nên thêm id vào bất kỳ thẻ H nào cho những mục đích này.
Giả sử chúng tôi có một trang web thực sự dài và chúng tôi muốn liên kết đến một phần của trang trông giống như sau:
<h2 id="extra_content">Extra content we don't want to link to</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed porta est, nec pretium lectus. Quisque sit amet porta risus, sed faucibus magna.
</p>
<h2 id="linked_content">Subheadline of a section to link to</h2>
<p>
Vivamus orci erat, sagittis vitae aliquam at, pretium sagittis neque. Curabitur vel eros in turpis elementum sollicitudin.
</p>Liên kết đến phần tử trong URL
Bây giờ chúng ta đã có phần tử đích của mình, chúng ta có thể tạo một liên kết nhảy tới nó bằng cách thêm #linked_content ở cuối URL của trang. Dù id của mục tiêu là gì, hãy thêm nó vào sau # (bảng Anh / thẻ băm).
Nếu chúng ta đang ở trên một trang và muốn chuyển xuống một phần trên cùng một trang, chúng ta có thể tạo một liên kết nội bộ. Liên kết nội bộ không yêu cầu https://www.WebsiteName.com trong href của liên kết thuộc tính.
Ví dụ về liên kết nhảy nội bộ có thể là:
<a href="#linked_content">Link to the subheadline on the same page</a>
Điều gì sẽ xảy ra nếu bạn đang thêm liên kết trên một trang web khác hoặc thậm chí chia sẻ nó với những người khác trên phương tiện truyền thông xã hội hoặc email? Bạn vẫn có thể làm điều tương tự bằng cách thêm #linked_content ở cuối URL đầy đủ như thế này:
<a href="https://www.WebsiteName.com/PageName/#linked_content">Link to the subheadline on the same page</a>Lưu ý về thuộc tính "name"
Trước đây, các loại liên kết nhảy này được nhắm mục tiêu bằng cách sử dụng thuộc tính “name” trên một liên kết neo trống. Theo Mạng nhà phát triển Mozilla, phương pháp này đã lỗi thời kể từ HTML5. Nó vẫn có thể hoạt động trong một số trình duyệt, nhưng tôi thực sự khuyên bạn nên sử dụng phương pháp liên kết hiện tại hơn.
Tôi hy vọng điều này sẽ giúp bạn trong việc tạo liên kết chuyển đến một phần cụ thể của trang web!