Cara Membuat Heading di HTML – Bagi seorang penulis sebuah web, tentu heading ini sudah tidak asing lagi. Heading adalah sebuah judul yang biasanya diberikan pada halaman atau beberapa bagian dari artikel. Heading tidak memiliki atribut khusus. Ia biasanya menggunakan atribut global.
Disini saya akan membahasnya lebih dalam, diantaranya :
- Cara membuat Judul di HTML
- Perbedaan Heading dengan Title dan Header
- Membuat Heading Style dengan CSS
Mari kita bahas satu persatu …
Cara Membuat Judul di HTML
Pada HTML kita bisa membuat judul dengan tag heading <h1> sampai <h6>. Tag <h1> adalah heading pertama yang biasanya ditampilkan dengan ukuran teks paling besar, setelah itu tag lainnya digunakan pada sub heading dan seterusnya. Penulisan judul yang baik adalah judul yang mengikuti levelnya mulai dari Tag <h1> sampai <h6>.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Heading di HTML</title>
</head>
<body>
<h1>Ini adalah Judul 1</h1>
<p> Pada HTML kita bisa membuat judul dengan tag h1 sampai h6. </p>
<h2>Ini adalah Judul 2</h2>
<p>Tag h1 adalah heading pertama yang biasanya ditampilkan dengan ukuran teks paling besar</p>
<h3>Ini adalah Judul 3</h3>
<p>setelah itu tag lainnya digunakan pada sub heading dan seterusnya.</p>
<h4>Ini adalah Judul 4</h4>
<h5>Ini adalah Judul 5</h5>
<h6>Ini adalah Judul 6</h6>
</body>
</html>
Hasil tampilan di browser:
Keterangan :
Tag <h1> biasanya digunakan untuk judul artikel. setelah itu tag <h2>, <h3>,<h4>, digunakan untuk sub judul atau sub heading, dan biasanya untuk tag <h5> dan <h6> jarang sekali digunakan.
Perbedaan Heading dengan Title dan Header pada HTML
Meskipun sama-sama digunakan untuk urusan judul, tapi tiga elemen ini berbeda.
- Heading adalah judul untuk artikel dan bagian artikel yang dibuat dengan tag <h1> sampai <h6>
- Title adalah judul dari web yang dibuat dengan tag <title>
- Header adalah bagian kepala (kop) pada web yang dibuat dengan tag <header>
Perhatikan gambar berikut:
Keterangan :
Berdasarkan gambar diatas dapat kita perjelas bahwa Tag <title> untuk judul yang ditampilkan di web browser. Tag <header> sama seperti kop surat. Lalu heading <h1> sampai <h6> menjadi judul untuk artikel.
Membuat Heading Style HTML dengan CSS
Sebenarnya pembahasan ini masuk dalam materi CSS, tapi ada baiknya kita mempelajari HTML dan CSS secara bersama. Hal ini karena CSS selalu digunakan secara bersamaan dengan HTML.
Balik lagi ke topik pembahasan, Heading Style adalah style CSS yang diberikan pada heading agar terlihat menarik. Berikut ini beberapa style yang sering digunakan pada heading:
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Heading di HTML</title>
</head>
<body>
<h1 style="text-decoration: underline;">ini adalah judul 1</h1>
<p> Pada HTML kita bisa membuat judul dengan tag h1 sampai h6. </p>
<h2 style="text-transform: uppercase;">ini adalah judul 2</h2>
<p>Tag h1 adalah heading pertama yang biasanya ditampilkan dengan ukuran teks paling besar</p>
<h3 style="text-transform: capitalize;">ini adalah judul 3</h3>
<p>setelah itu tag lainnya digunakan pada sub heading dan seterusnya.</p>
<h4 style="color: red;">ini adalah judul 4</h4>
<p>Contoh :</p>
<h5 style="background-color: rgb(89, 0, 255);">ini adalah judul 5</h5>
<h6>ini adalah judul 6</h6>
</body>
</html>
Hasil tampilan di browser:
Keterangan :
style=”text-decoration: underline;, Style Heading dengan Garis bawah
style=”text-transform: uppercase;, Style Heading menggunakan huruf besar semua
style=”text-transform: capitalize;, style case heading dengan huruf besar di depan
style=”color: red;, Style Heading dengan memberikan warna pada teks (merah)
style=”background-color: rgb(89, 0, 255); ,Style Heading dengan memberikan warna pada background (rgb ungu)
Begitulah cara membuat heading di HTML. Untuk artikel berikutnya adalah Belajar HTML#5 Membuat Komentar di HTML
