Heading merupakan bagian terpenting dari sebuah halaman web karena menjelaskan topik apa yang akan atau sedang dibahas dalam konten halaman web itu sendiri.
Seperti yang kita tahu
Isi website tidak hanya terdiri dari artikel berupa teks, seolah-olah hanya berisi satu paragraf
Namun, itu juga membutuhkan heading yang menjadi garis besar topik yang ingin disampaikan oleh konten di halaman website itu sendiri
Definisi judul
Tahukah kamu apa itu heading?
Selain itu, heading atau judul juga menjadi landasan pembentukan sebuah konten dalam memberikan informasi yang nantinya akan dibahas dalam konten tersebut.
Heading biasanya terdapat dalam setiap tulisan artikel atau surat kabar, tidak hanya itu dalam penulisan surat menyurat, heading juga sering digunakan terutama dalam sebuah halaman web.
Cara membuat judul di html
Heading atau judul dalam html dapat dibuat dengan menggunakan tag <h1> hingga <h6>
Dimana tag <h1> merupakan elemen heading terbesar dibandingkan dengan tag heading html lainnya seperti <h2>, <h3>, <h4>, <!DOCTYPE html> <html> <head> <title>Artikel</title> </head> <body> <h1>Belajar membuat heading pada html</h1> <p>Heading dapat kita dibuat dengan tag h1, h2, h3, h4, h5 dan h6. Dari masing-masing tag tersebut mempunyai kegunaan dan fungsi tersendiri misalnya yang h1 sebagai judul utama, h2 sebagai sub judul dari h1 dan seterusnya</p> <h2>Ini adalah sub judul</h2> <p>Sub judul atau sub heading di html dibuat dengan adanya tag h2 sampai h6. Dan itu artinya h1 memanglah hanya sebagai judul utama dari sebuah artikel.</p> </body> </html>0 dan <h6>
Hal ini tentunya berkaitan dengan level yang dimiliki oleh setiap tag heading di html
Misalnya saja
<!DOCTYPE html> <html> <head> <title>Belajar heading html</title> </head> <body> <h1>Ini tag h1</h1> <h2>Ini tag h2</h2> <h3>Ini tag h3</h3> <h4>Ini tag h4</h4> <h5>Ini tag h5</h5> <h6>Ini tag h6</h6> </body> </html>_Hasilnya jika dilihat dengan browser
Contoh lain ketika kita menggunakan judul dalam html adalah membuat artikel
Berikut adalah contoh sederhana artikel yang bisa kita buat dengan heading html
<!DOCTYPE html> <html> <head> <title>Artikel</title> </head> <body> <h1>Belajar membuat heading pada html</h1> <p>Heading dapat kita dibuat dengan tag h1, h2, h3, h4, h5 dan h6. Dari masing-masing tag tersebut mempunyai kegunaan dan fungsi tersendiri misalnya yang h1 sebagai judul utama, h2 sebagai sub judul dari h1 dan seterusnya</p> <h2>Ini adalah sub judul</h2> <p>Sub judul atau sub heading di html dibuat dengan adanya tag h2 sampai h6. Dan itu artinya h1 memanglah hanya sebagai judul utama dari sebuah artikel.</p> </body> </html>Buat file html dan tulis kode di bawah ini
hasilnya ketika ditampilkan oleh browser
Susunan hierarki judul html
Pada hirarki heading html, seperti yang telah dijelaskan sebelumnya bahwa heading/judul memiliki tingkatan
Yang dimaksud dengan level adalah level pada heading html, mulai dari tag yang menghasilkan teks terbesar yaitu <h1> hingga yang terkecil <h6>
Untuk lebih jelasnya lihat gambar dibawah ini
Dengan memahami urutan hirarki heading html, nantinya kita akan mengetahui kegunaan heading dalam html
Penggunaan judul html
Dalam membuat sebuah artikel, penggunaan heading sangatlah penting, terutama dalam sebuah halaman web
Menggunakan heading dalam html, disarankan untuk tidak sembarangan dalam penggunaannya
Mengapa?
Hal ini dikarenakan jika tidak tepat dalam penggunaannya maka akan berkaitan dengan masalah SEO (Search Engine Optimization) dalam suatu halaman web.
SEO merupakan hal yang paling penting dalam sebuah halaman web, karena berhubungan dengan search engine seperti google, bing dan lain-lain
Sebuah halaman web jika terjadi kesalahan dalam penggunaan heading, maka halaman web tersebut akan kesulitan tampil di mesin pencari seperti google
Berikut ini adalah contoh penggunaan heading yang salah atau arbitrer
<!DOCTYPE html> <html> <head> <title>Artikel</title> </head> <body> <h4>Ini judul</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, provident?</p> <h3>Ini subjudul</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor consectetur magni nostrum, delectus sapiente provident? Pariatur sit, error nihil fugiat!</p> <h1>Ini subjudul</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, itaque magni animi eos, in laudantium.</p> </body> </html>Dari kesalahan penggunaan heading dan sub heading di atas, jika kita perbaiki maka akan menjadi seperti berikut
Dalam membuat heading dengan html biasanya tag <h1> biasanya digunakan hanya sebagai judul utama sebuah artikel. Sedangkan tag <h2>, <h3>, dan <h4> digunakan sebagai subtitle
Lalu bagaimana dengan h5 dan h6?
Tag <!DOCTYPE html> <html> <head> <title>Artikel</title> </head> <body> <h1>Belajar membuat heading pada html</h1> <p>Heading dapat kita dibuat dengan tag h1, h2, h3, h4, h5 dan h6. Dari masing-masing tag tersebut mempunyai kegunaan dan fungsi tersendiri misalnya yang h1 sebagai judul utama, h2 sebagai sub judul dari h1 dan seterusnya</p> <h2>Ini adalah sub judul</h2> <p>Sub judul atau sub heading di html dibuat dengan adanya tag h2 sampai h6. Dan itu artinya h1 memanglah hanya sebagai judul utama dari sebuah artikel.</p> </body> </html>0 dan <h6> biasanya jarang digunakan dalam membuat artikel di halaman web
Untuk mengetahui lebih jelas bagaimana menggunakan heading untuk membuat artikel, lihat gambar berikut ini
Atribut tajuk
Sama seperti atribut pada tag <!DOCTYPE html> <html> <head> <title>Artikel</title> </head> <body> <h4>Ini judul</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, provident?</p> <h3>Ini subjudul</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor consectetur magni nostrum, delectus sapiente provident? Pariatur sit, error nihil fugiat!</p> <h1>Ini subjudul</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, itaque magni animi eos, in laudantium.</p> </body> </html>_0 di html, heading juga memiliki atribut
Atribut yang dimiliki oleh tag heading adalah atribut global. diantara mereka
- <!DOCTYPE html> <html> <head> <title>Artikel</title> </head> <body> <h4>Ini judul</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, provident?</p> <h3>Ini subjudul</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor consectetur magni nostrum, delectus sapiente provident? Pariatur sit, error nihil fugiat!</p> <h1>Ini subjudul</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, itaque magni animi eos, in laudantium.</p> </body> </html>1. digunakan untuk digunakan saat mengatur gaya elemen di css
- <!DOCTYPE html> <html> <head> <title>Artikel</title> </head> <body> <h4>Ini judul</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, provident?</p> <h3>Ini subjudul</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor consectetur magni nostrum, delectus sapiente provident? Pariatur sit, error nihil fugiat!</p> <h1>Ini subjudul</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, itaque magni animi eos, in laudantium.</p> </body> </html>2. adalah atribut dengan nilai unik. Penggunaannya biasanya untuk link, css dan javascript
- <!DOCTYPE html> <html> <head> <title>Artikel</title> </head> <body> <h4>Ini judul</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, provident?</p> <h3>Ini subjudul</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor consectetur magni nostrum, delectus sapiente provident? Pariatur sit, error nihil fugiat!</p> <h1>Ini subjudul</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, itaque magni animi eos, in laudantium.</p> </body> </html>_3. digunakan untuk memasukkan kode css langsung pada tag html
- <!DOCTYPE html> <html> <head> <title>Artikel</title> </head> <body> <h4>Ini judul</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, provident?</p> <h3>Ini subjudul</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor consectetur magni nostrum, delectus sapiente provident? Pariatur sit, error nihil fugiat!</p> <h1>Ini subjudul</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, itaque magni animi eos, in laudantium.</p> </body> </html>_4. memberikan informasi tambahan untuk tag html yang dibuat
- dan masih banyak lagi atribut global yang bisa dimiliki oleh sebuah tag html
Berbicara tentang atribut? . Pelajari HTML3. mengenali tag, atribut dan elemen dalam html
Kesimpulan
Dengan mengetahui cara membuat heading di html akan menambah pengetahuan kita dalam mengimplementasikan pembuatan title atau heading dengan html
Tidak hanya itu, kita juga telah belajar bagaimana menggunakan heading untuk membuat halaman web yang baik agar tidak terjadi kesalahan dalam pengembangan website nantinya.