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.

Oleh Opan
Dibuat
Seorang guru matematika yang hobi menulis tiga bahasa, yaitu bahasa indonesia, matematika, dan php. Dari ketiganya terwujudlah website ini sebagai sarana berbagi pengetahuan yang dimiliki.

Demi menghargai hak kekayaan intelektual, mohon untuk tidak menyalin sebagian atau seluruh halaman web ini dengan cara apa pun untuk ditampilkan di halaman web lain atau diklaim sebagai karya milik Anda. Tindakan tersebut hanya akan merugikan diri Anda sendiri. Jika membutuhkan halaman ini dengan tujuan untuk digunakan sendiri, silakan unduh atau cetak secara langsung.

Protected by Copyscape CodeCogs - An Open Source Scientific Library