Membuat Bookmark Link di HTML: Cara dan Sintaknya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti October 1, 2020

Link HTML dapat digunakan untuk membuat bookmark, jadi kita bisa melompat ke bagian tertentu di halaman web.

Buat Bookmark dalam HTML

Bookmark dapat berguna jika halaman web sangat panjang.

Untuk membuat bookmark

Pertama buat bookmark
lalu tambahkan link ke sana.
Saat link diklik, maka halaman akan bergulir ke bawah atau ke atas ke bagian yang di klik.

Contoh
Pertama, gunakan atribut id untuk membuat bookmark, seperti di bawah:

<h2 id="C4">Chapter 4</h2>

Kemudian, tambahkan link ke bookmark (“Lompat ke Bab 4”), dari dalam halaman yang sama:

Contoh

<a href="#C4">Lompat ke Bab 4</a>

Kita juga bisa menambahkan link ke bookmark di halaman lain:

<a href="html_demo.html#C4">Jump to Chapter 4</a>

Contoh Lengkap

<!DOCTYPE html>
<html>
<body>

<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>
<p><a href="#C5">Jump to Chapter 5</a></p>
<p><a href="#C20">Jump to Chapter 20</a></p>
<p><a href="#C23">Jump to Chapter 23</a></p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

Ringkasan

Gunakan atribut id (id = “value”) untuk menentukan bookmark di halaman yang sama
Gunakan atribut href (href = “# value”) untuk menautkan link ke bookmark

html