Home / HTML / Tutorial HTML Bagian 3: Membuat Heading di HTML (Tag Heading H1-H6)

Tutorial HTML Bagian 3: Membuat Heading di HTML (Tag Heading H1-H6)

Tag Heading <h1> sampai <h6> digunakan untuk memberikan format judul halaman website. Sebuah Teks yang diberikan format menggunakan tag heading, maka secara otomatis akan memiliki ketebalan dan ukuran lebih besar dari pada teks normal. Fungsi sebuah teks yang diberi format heading dalam HTML berbeda dengan teks yang di bold ataupun dibesarkan. Teks yang di besarkan biasanya dibuat dengan style Css dan kegunaanya untuk mempercantik tampilan dan menunjang kenyamanan pengunjung disaat membaca teks pada halaman website.

Lain halnya dengan tag heading, fungsi tag ini tidak hanya digunakan untuk sekedar mempercantik tampilan halaman website tetapi lebih ke arah Search Engine Optimation(SEO). Penggunaan heading yang benar pada halaman website akan mempengaruhi reputasi(menaikkan) website dalam peringkat mesin pencari seperti google, bing, yahoo, ask, aol dan lain-lain. Mesin pencari secara otomatis menganggap teks heading sebagai prioritas kata kunci dalam halaman website.

Tag heading memiliki 6 tingkatan yang berurut berdasarkan ukuran dan fungsinya. Ukuran yang paling besar adalah <h1>  dan yang paling kecil adalah <h6>. Format teks dengan tag heading <h1> digunakan untuk judul utama halaman dan umumnya dalam satu halaman cuma sekali digunakan. Tag heading <h2>, <h3> dan seterusnya hingga <h6> digunakan untuk sub judul.

Berikut ini contoh penggunaan tag <H1> – <H6>

<!DOCTYPE html>
<html>
    <head><title>Membuat Tag Heading - ITGeek.id</title></head>
    <body>
        <h1>Teks Menggunakan Tag Judul Heading H1</h1>
        <h2>Teks Menggunakan Tag Judul Heading H2</h2>
        <h3>Teks Menggunakan Tag Judul Heading H3</h3>
        <h4>Teks Menggunakan Tag Judul Heading H4</h4>
        <h5>Teks Menggunakan Tag Judul Heading H5</h5>
        <h6>Teks Menggunakan Tag Judul Heading H6</h6>
    </body>
</html>

Seperti yang sudah saya sampaikan sebelumnya dalam Pengenalan Tag, Atribut dan Elemen HTML, bahwa tag HTML itu umumnya saling berpasangan. Seperti tag <h1> baris ke 5 akan di akhiri dengan tag penutup </h1>, begitu seterusnya hingga tag heading <h6>.

Penggunaan tag <h1> – <h6> setelah di tampilkan pada browser dapat dilihat pada gambar dibawah:

Tag Heading di HTML

Dari gambar terlihat perbedaan bentuk teks yang di format dengan <h1> hingga <h6>. <h1> memiliki ukuran yang paling besar. Untuk mengubah ukuran, tiap-tiap tag heading dapat menggunakan Css. Bahasan mengenai Css akan dibuat topik tersendiri.

Tag <h1> digunakan untuk judul utama pada halaman website, untuk sub judul menggunakan <h2>, <h3> dan seterusnya.

Contoh penggunaan tag heading sebagai judul dan subjudul seperti berikut:

<!DOCTYPE html>
<html>
    <head><title>Membuat Tag Heading - ITGeek.id</title></head>
    <body>
        <h1>Ini adalah Judul Halaman menggunakan tag H1</h1>
        <p>Berisi keterangan judul Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta</p>
        <h2>Ini subjudul menggunakan tag H2</h2>
        <p>Berisi keterangan subjudul Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta</p>
        <h3>Ini subnya subjudul menggunakan tag H3</h3>
        <p>Berisi keterangan subnya subjudul Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta</p>
        <h4>Ini sub judul seterusnya menggunakan tag H4</h4>
        <p>Berisi keterangan subnya subjudul Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta</p>
        
    </body>
</html>

Pada contoh penggunaan tag heading diatas, baris ke 5 adalah tag <h1> yang digunakan untuk memformat judul utama sebuah halaman, kemudian dibawahnya adalah keterangan mengenai judul. Pada baris ke 7 terdapat sub judul maka yang digunakan adalah tag <h2>, begitu seterusnya penggunaan tag heading, jika sub judul <h2> memiliki subjudul lagi maka gunakan tag <h3> seperti baris ke 9 dan 11.

Hasil tampilan penggunaan tag heading sebagai judul dan subjudul pada browser sebagai berikut:

Format Tag Heading di HTML

Demikian tutorial Membuat Heading di HTML (Tag H1-H6). Dengan penggunaan tag heading yang benar maka halaman website akan lebih mudah di index dan memiliki reputasi yang baik mesin pencari.

Tutorial HTML selanjutnya adalah penggunaan tag <p> untuk membuat paragraf di HTML.

Comments

comments

About admin

admin

My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion and some humor.

Tutorial Lain

Tutorial HTML Bagian 1: Pengenalan HTML

Pengenalan HTML. Ketika membuka sebuah website menggunakan browser, maka umumnya kita akan disuguhi halaman yang …

Leave a Reply

Your email address will not be published. Required fields are marked *