Materi Dasar HTML #5 : Pengertian Dan Cara Membuat Heading

Sebelumnya kita sudah belajar tentang cara membuat paragraf HTML, sekarang kita akan lanjut belajar cara membuat heading pada HTML.

---

Heading/Judul HTML

Heading merupakan sebuah judul dari paragraf pada sebuah halaman atau artikel. Tag Heading dalam HTML terdiri dari tag <h1> sampai <h6>, yang secara default akan tampil dengan huruf tebal (bold). Tag <h1> memiliki ukuran paling besar sedangkan tag <h2> sampai <h6> akan tampil ukuran sedang hingga sampai terkecil. 

Biasanya di dalam sebuah halaman/artikel, judul atau heading yang digunakan hanya tag <h1> sampai tag <h3>. Tag <h1> sebagai judul utama artikel, tag <h2> dan <h3> dipakai untuk sub heading/sub judul.

Penulisan Heading

Penulisan judul yang lazim yaitu mengikuti tingkatannya. Judul <h1> pada tingkatan pertama, <h2> pada tingkatan kedua dan seterusnya.

Berikut contoh tag heading HTML :

See the Pen by MiftaSetiaji (@MiftaSetiaji) on CodePen.

Fungsi Code Tag Heading <h1> sampai <h6> 

1. Tag Heading <h1> digunakan pada nama blog/website (berada pada homepage) dan akan berubah menjadi <h2> pada halaman posting. 
2. Tag Heading <h2> digunakan pada judul artikel blog dan akan berubah menjadi <h1> pada halaman posting. 
3. Tag Heading <h3> digunakan pada sub-judul atau penjelasan dari judul artikel atau posting, dan bisa juga digunakan pada judul widget. 
4. Tag Heading <h4> digunakan untuk judul artikel terkait, komentar atau bisa juga digunakan pada judul widget. 
5. Tag Heading <h5> digunakan sebagai nama komentator (pemberi komentar). 
6. Tag Heading <h6> digunakan sebagai footer yang letaknya berada paling bawah seperti "All Rights Reserved" atau "Powered by Blogger".

Yuk kita coba dengan menambahkan beberapa paragraf yang dilengkapi dengan heading. Buka dulu text ediornya kemudian ketik dengan kode berikut :

See the Pen Heading dan paragraf HTML by MiftaSetiaji (@MiftaSetiaji) on CodePen.

Perbedaan Title, Header, dan Heading

Terdapat tiga element yang berbeda, meskipun semua sama sama digunakan untuk judul, diantaranya :

• Title merupakan Judul web yang muncul pada tab browser, yang menggunakan tag <Title>.
• Header merupakan bagian kepala web, terletak bagian atas halaman. yang menggunakan tag <header>.
• Heading merupakan judul halaman artikel dan bagian halaman artikel, yang menggunakan tag <h1> sampai <h6>.

Berikut gambarannya :

Nah sudah jelaskan dengan perbedaannya. untuk sub heading/judul <h4> sampai <h6> saya sengaja tidak menampilkannya pada gambar karena sudah terdapat dalam blog ini. 

---

Selain paragraf dan judul, dalam struktur artikel juga terdapat daftar (list). Selajutnya kita akan belajar tentang Cara membuat Daftar/List HTML.