Setelah kalian sudah mengerti apa itu Tag, Element, dan Attribute, sekarang waktunya kita bahas tentang HTML Heading.

Jadi apa itu HTML Heading, Kenapa website membutuhkan Headings, dan bagaimana contoh membuat Heading dengan HTML. Mari kita bahas satu persatu.

Apa itu HTML Heading

HTML Heading adalah element atau tag HTML yang digunakan untuk membuat judul atau subjudul pada tampilan di halaman web.

Judul HTML ditulis dengan tag <h1> sampai dengan <h6>. <h1> digunakan sebagai heading utama atau judul utama website. <h2> dan <h3> biasanya digunakan untuk sub-judul. <h4> , <h5> dan <h6> merupakan heading yang jarang digunakan.

Kenapa website membutuhkan Headings

Mesin pencari menggunakan Heading untuk mengindeks struktur dan konten halaman website. Contohnya <h1> dianggap sebagai judul utama dari sebuah halaman web, dan menjelaskan isi dari keseluruhan konten.

Para pengunjung juga sering membaca sepintas sebuah halaman berdasarkan judulnya. Jadi sangat penting untuk menggunakan heading untuk menunjukkan isi dan struktur halaman web.

Contoh Headings pada HTML

Seperti yang sudah dijelaskan diatas, judul pada HTML dibuat dengan tag <h1> sampai <h6>. Setiap heading memiliki ukuran default. Dan setiap Tag Headings mempunyai ukuran teks yang berbeda-beda. Dimulai dari <h1> yang memiliki ukuran teks paling besar, dan <h6> yang paling kecil.

Contoh:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML Heading</title>
    </head>
    <body>
        <h1>Contoh Judul h1</h1>
        <h2>Contoh Judul h2</h2>
        <h3>Contoh Judul h3</h3>
        <h4>Contoh Judul h4</h4>
        <h5>Contoh Judul h5</h5>
        <h6>Contoh Judul h6</h6>
    </body>
</html>

Hasil:

PENTING untuk kalian, Jangan gunakan heading untuk membuat teks menjadi lebih BESAR atau tebal. Gunakanlah heading untuk membuat judul saja.

Misalkan kalian ingin membuat teks sebuah paragraf atau artikel menjadi lebih besar dan tebal. Jangan gunakan <h3> atau <h4> untuk memperbesar teks paragraf, tetaplah gunakan Tag <p> dengan style css untuk memperbesar dan menebalkan teks.

Contoh:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Tips HTML Heading</title>
</head>

<body>
    <h1>Tips Penting HTML Heading</h1>
    <h2>Contoh Judul yang Salah</h2>
    <h3>Contoh Judul yang salah karena menggunakan h6 membuat teks paragraf lebih tebal dan besar</h3>
    <h2>Contoh Judul yang Benar</h2>
    <p style="font-size:24px;font-width:700;">Contoh Judul yang benar karena menggunakan tag p dengan style untuk
        membuat teks paragraf lebih tebal dan besar</p>
</body>

</html>

Hasil:

Semoga artikel tentang Tutorial membuat judul dengan HTML Heading. Jika kalian masih ada yang kurang paham atau ada hal yang ingin ditanyakan, jangan sungkan untuk beratanya di kolom komentar. Kalian juga bisa membagikan artikel ini.

Tutorial Selanjutnya, akan membahas tentang: #5. Belajar Membuat Paragraf Dengan HTML