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
Dipostkan May 23, 2017
Seorang guru matematika yang hobi ngeblog dan menulis. Dari ketiganya terwujudlah website ini sebagai sarana berbagi pengetahuan yang saya miliki.
