Di posting sebelumnya kita sudah membahas cara membuat paragraf di HTML. Kali ini kita akan bahas cara membuat judul di HTML. Simak panduan AneIqbal berikut sampai akhir untuk mengetahui langkah-langkahnya.
Membuat judul/heading di HTML
Sama seperti paragraf, HTML juga menyediakan tag khusus untuk membuat judul (biasa disebut heading).
Tagnya pun nggak cuma 1, melainkan 6 tag, yaitu tag <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Masing-masing memiliki ukuran yang berbeda.
Ukuran yang paling besar adalah <h1> dan yang paling kecil yaitu <h6>. Perbedaan level heading ini punya peran penting untuk SEO onpage.
Seperti ini kodenya:
<!DOCTYPE html>
<html>
<head>
<title>Membuat heading di HTML</title>
</head>
<body>
<h1>Ini adalah heading level 1</h1>
<h2>Ini adalah heading level 2</h2>
<h3>Ini adalah heading level 3</h3>
<h4>Ini adalah heading level 4</h4>
<h5>Ini adalah heading level 5</h5>
<h6>Ini adalah heading level 6</h6>
</body>
</html>
Web browser akan menampilkan:
Terlihat sekali perbedaannya bukan? Tampak seperti yang ada pada dokumen Microsoft Word. Level heading ini memiliki kegunaan dan ukurannya masing-masing.
Walaupun demikian, untuk tampilannya sendiri masih kita modifikasi dengan bantuan coding CSS.
Kalau hanya heading saja tampak begitu sedikit dan sepi bukan? Kita coba tambahkan dengan beberapa paragraf di bawah judulnya.
Contoh lain yang dikombinasikan dengan paragraf:
<!DOCTYPE html>
<html>
<head>
<title>Membuat heading di HTML</title>
</head>
<body>
<h1>Ini adalah heading level 1</h1>
<p>Halo gan.. di posting sebelumnya kita sudah membahas cara membuat paragraf di HTML.. kali ini kita akan bahas cara membuat judul/heading di HTML..</p>
<h2>Ini adalah heading level 2</h2>
<p>Halo gan.. di posting sebelumnya kita sudah membahas cara membuat paragraf di HTML.. kali ini kita akan bahas cara membuat judul/heading di HTML..</p>
<h3>Ini adalah heading level 3</h3>
<p>Halo gan.. di posting sebelumnya kita sudah membahas cara membuat paragraf di HTML.. kali ini kita akan bahas cara membuat judul/heading di HTML..</p>
<h4>Ini adalah heading level 4</h4>
<p>Halo gan.. di posting sebelumnya kita sudah membahas cara membuat paragraf di HTML.. kali ini kita akan bahas cara membuat judul/heading di HTML..</p>
<h5>Ini adalah heading level 5</h5>
<p>Halo gan.. di posting sebelumnya kita sudah membahas cara membuat paragraf di HTML.. kali ini kita akan bahas cara membuat judul/heading di HTML..</p>
<h6>Ini adalah heading level 6</h6>
<p>Halo gan.. di posting sebelumnya kita sudah membahas cara membuat paragraf di HTML.. kali ini kita akan bahas cara membuat judul/heading di HTML..</p>
</body>
</html>
Seperti ini jadinya:
Coba dipraktikkan gan hasilnya sama atau nggak kaya di atas. Sampai sini, selesai bahasan cara membuat judul/heading di HTML.
Semoga panduan singkat bagaimana cara membuat judul atau heading di atas bisa mudah dipahami dan membantu Anda. Terima kasih sudah membaca sampai akhir pembahasan.
Selanjutnya yang akan kita bahas adalah cara membuat list di HTML.
