Membuat Daftar Tautan Menuju Baris Tertentu pada Halaman yang Sama

Adakalanya, suatu artikel atau tulisan di sebuah halaman website dengan format html terdiri dari beberapa subjudul. Untuk memberi tahu pembaca mengenai subjudul yang terdapat di halaman tersebut, bisa dibuat daftar subjudul berupa tautan pada awal tulisan sehingga ketika diklik akan langsung menuju baris pertama subjudul yang sesuai. Untuk membuat hal seperti ini bisa dilakukan dengan menggunakan tag a pada tautan awal dan pada baris tujuan.

Penggunaan tautan model ini akan terekam di hasil pencarian sebagai sublink seperti gambar di bawah ini.

Contoh subjudul pada tulisan

Misalnya, pada sebuah halaman terdapat tiga subjudul dengan masing-masing memiliki nama sebagai berikut.

---

Pertama

Konten subjudul pertama.

Kedua

Konten subjudul kedua.

Ketiga

Konten subjudul ketiga.

---

Contoh daftar subjudul di awal tulisan

Misal, pada awal tulisan kita buat daftar subjudul sebagai berikut.

---

• Pertama
• Kedua
• Ketiga

---

Jika digabungkan akan menjadi seperti berikut.

---

Daftar Isi

• Pertama
• Kedua
• Ketiga

Pertama

Konten subjudul pertama.

Kedua

Konten subjudul kedua.

Ketiga

Konten subjudul ketiga.

---

Daftar isi di bagian atas bisa dijadikan tautan sehingga ketika diklik akan langsung menuju baris pertama subjudul yang dituju. Berikut caranya.

Pada daftar subjudul yang diletakan sebelum tulisan utama, gunakan kode berikut.

<ul>
<li><a href="#pertama">Pertama</a></li>
<li><a href="#kedua">Kedua</a></li>
<li><a href="#ketiga">Ketiga</a></li>
</ul>

Pada bagian sebelum subjudul yang terletak pada tulisan utama, gunakan kode html berikut. Karakter pada bagian setelah # pada kode di atas (daftar subjudul) harus sesuai dengan karakter yang terdapat di dalam id (tulisan utama) pada kode di bawah.

<a id="pertama"></a>
<h3>Pertama</h3>
<p>Konten subjudul pertama.</p>

<a id="kedua"></a>
<h3>Kedua</h3>
<p>Konten subjudul kedua.</p>

<a id="ketiga"></a>
<h3>Ketiga</h3>
<p>Konten subjudul ketiga.</p>

Kode selengkapnya adalah sebagai berikut.

<Daftar Isi>
<ul>
<li><a href="#pertama">Pertama</a></li>
<li><a href="#kedua">Kedua</a></li>
<li><a href="#ketiga">Ketiga</a></li>
</ul>

<a id="pertama"></a>
<h3>Pertama</h3>
<p>Konten subjudul pertama.</p>

<a id="kedua"></a>
<h3>Kedua</h3>
<p>Konten subjudul kedua.</p>

<a id="ketiga"></a>
<h3>Ketiga</h3>
<p>Konten subjudul ketiga.</p>

Hasil yang diperoleh dari kode di atas akan berupa daftar tautan di awal tulisan yang jika diklik akan menuju baris pertama subjudul yang dituju diikuti dengan pembahasan yang bersesuaian dengan subjudulnya. Silakan untuk mencobanya.