Heading HTML

Bagaimana jadinya jika artikel yang ada di internet tidak memiliki judul heading dan sub judul?

Ini bisa membingungkan pembaca.

Pembaca menjadi lebih sulit menemukan bagian-bagian tertentu di dalam artikel, terutama bagi pembaca cepat.

Oleh karena itu kita perlu menggunakan judul atau heading agar artikel lebih terstruktur dan membuat pembaca nyaman.

Terus apa itu heading?

Bagaimana cara membuatnya?

Seperti apa struktur heading yang baik?

Itu semua akan kita pelajari di sini. Langsung saja, mari kita bahas.

Apa Itu Heading?
Cara Membuat Heading?
Catatan Penggunaan
Struktur
Atribut
Perbedaan Heading, Title, Header, dan Head
Menyesuaikan Gaya Heading

Apa Itu Heading?

Heading adalah judul atau sub judul yang ingin ditampilkan di halaman web.

Ini dapat digunakan untuk mengatur struktur konten agar pembaca lebih mudah menemukan topik yang dicari di halaman tersebut.

Di HTML, kita dapat membuat enam level heading, <h1> yang tertinggi hingga <h6> yang terendah.

Secara umum fungsinya sama saja seperti heading di Microsoft Word, ini digunakan untuk membuat judul.

Cara Membuat Heading

Untuk membuat judul di HTML kita bisa menggunakan tag <h1> sampai tag <h6>, kita bisa menyisipkan teks judul diantara tag pembuka dan penutup.

<h1> adalah level tertinggi biasanya digunakan untuk judul utama, sedangkan <h6> terendah (jarang digunakan).

Yang paling sering digunakan adalah <h1> sampai <h4>, sisanya jarang digunakan.

Tapi tentu saja jika Anda memang membutuhkan level judul sedalam itu, Anda bisa menggunakannya.

Berikut contoh penggunaan tag heading HTML:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Hasil:

Catatan Penggunaan

Ada beberapa catatan yang harus diperhatikan saat menggunakan tag heading.

Berikut diantaranya:

1. Jangan Gunkaan Heading untuk Mengubah Ukuran Teks

Misalnya, niatnya ingin membuat paragraf dengan ukuran huruf yang besar, tapi yang digunakan adalah tag heading.

Dalam kasus seperti ini lebih baik tetap gunakan tag paragraf dan atur ukuran hurufnya menggunkaan CSS.

Contoh bagus:

<p style="font-size: 30px">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus impedit
  molestiae animi tempore odit recusandae quos sed aperiam laborum. Perferendis
  voluptates architecto maiores corrupti voluptatem eum eos delectus aut ex!
</p>

Contoh buruk:

<h1>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus impedit
  molestiae animi tempore odit recusandae quos sed aperiam laborum. Perferendis
  voluptates architecto maiores corrupti voluptatem eum eos delectus aut ex!
</h1>

2. Satu Halaman, Satu `<h1>`

Jangan gunakan <h1> lebih dari satu kali dalam satu halaman. Tag <h1> harus menjadi judul utama yang ringkas dan menjelaskan kesuluruhan konten.

Tentu tidak masuk akal ketika satu halaman memiliki lebih dari satu judul utama.

Contoh bagus:

<h1>Judul Utama</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam aperiam
  debitis eum. Repudiandae beatae suscipit numquam dolorum ullam quibusdam
  animi.
</p>
<h2>Sub Judul</h2>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt officia
  recusandae fugiat quod voluptatum facere veritatis repellendus id quaerat
  magnam!
</p>

Contoh buruk:

<h1>Judul Utama</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam aperiam
  debitis eum. Repudiandae beatae suscipit numquam dolorum ullam quibusdam
  animi.
</p>
<h1>Sub Judul</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt officia
  recusandae fugiat quod voluptatum facere veritatis repellendus id quaerat
  magnam!
</p>

3. Pastikan Level Heading Berurutan

Saat menggunakan heading pastikan itu berurutan, <h2> tidak boleh ditulis sebelum <h1> dan seterusnya.

Selalu mulai dengan <h1>, <h2>, <h3> dan seterusnya. Ini akan kita bahas secara detail di bawah.

Contoh bagus:

<h1>Provinsi dan Kota di Indonesia</h1>
<p>paragraf pembuka...</p>

<h2>Jawa Barat</h2>
<p>Deskripsi provinsi Jawa Barat...</p>

<h3>Bandung</h3>
<p>Deskripsi kota Bandung...</p>

<h3>Karawang</h3>
<p>Deskripsi kota Karawang...</p>

<h2>Jawa Timur</h2>
<p>Deskripsi provinsi Jawa Timur...</p>

<h3>Surabaya</h3>
<p>Deskripsi kota Surabaya...</p>

<h3>Malang</h3>
<p>Deskripsi kota Malang...</p>

Contoh buruk:

<h1>Kota dan Provinsi Indonesia</h1>
<p>paragraf pembuka...</p>

<h3>Jawa Barat</h3>
<p>Deskripsi provinsi Jawa Barat...</p>

<h2>Bandung</h2>
<p>Deskripsi kota Bandung...</p>

<h2>Karawang</h2>
<p>Deskripsi kota Karawang...</p>

<h3>Jawa Timur</h3>
<p>Deskripsi provinsi Jawa Timur...</p>

<h2>Surabaya</h2>
<p>Deskripsi kota Surabaya...</p>

<h2>Malang</h2>
<p>Deskripsi kota Malang...</p>

Struktur

Seperti yang sudah dijelaskan sebelumnya, kita harus menulis heading secara berurutan sesuai dengan struktur konten yang kita buat.

Jadi, <h1> harus ditulis lebih dulu dari pada <h2>, dan seterusnya.

Kita bisa saja menulis <h6> sebelum <h1>, halaman kita tetap bisa dibuka di browser, tapi ini bukan praktir yang baik.

Struktur heading yang baik tidak hanya memudahkan pembaca, tapi juga memudahkan mesin pencari memahami struktur halaman yang kita buat.

Berikut adalah gambar ilustrasi yang menggambarkan struktur judul yang baik:

Atribut

Sama seperti tag HTML yang lainnya, kita juga bisa menambahkan atribut ke dalam tag judul.

Semua atribut global bisa kita masukkan ke dalam tag heading, tag ini tidak memiliki atribut khusus.

Atribut global yang sering digunakan dalam tag heading diantaranya:

id - untuk menambahkan id unik, agar elemen dapat diseleksi dengan mudah oleh kode CSS dan JavaScript.
class - sama seperti id, tapi tidak harus unik.
style - untuk menambahkan kode CSS sebaris.

Perbedaan Heading, Title, Header, dan Head

Kadang-kadang pemula kesulitan membedakan keempat elemen ini, keempatnya dibuat untuk tujuan yang berbeda.

Jangan sampai salah pilih.

Singkatnya, ini perbedaannya:

Heading - tag <h1> sampai <h6> untuk membuat judul yang dapat dilihat pengguna.
Title - tag <title> untuk judul yang ditampilkan di tab browser.
Header - tag <header> untuk membungkus elemen pengantar seperti judul <h1>, nama penulis, tanggal terbit artikel dan sebagainya, kadang juga digunakan untuk membungkus navigasi. Kalau di surat resmi, ini mirip kop surat.
Head - tag <head> untuk membungkus metadata termasuk <title>, tag ini sejajar dengan <body> (bukan di dalam).

Teks judul yang ada di dalam tag <title> dan <h1> umumnya disamakan.

Contoh:

<!DOCTYPE html>
<html lang="id">
  <head>
    <title>Kota dan Provinsi Indonesia</title>
  </head>
  <body>
    <header>
      <h1>Kota dan Provinsi Indonesia</h1>
      <span>R.M. Reza</span>
      <time datetime="2021-09-11T04:18:48.870Z">11 September 2021</time>
    </header>

    <p>paragraf pembuka...</p>

    <h2>Jawa Barat</h2>
    <p>Deskripsi provinsi Jawa Barat...</p>

    <h3>Bandung</h3>
    <p>Deskripsi kota Bandung...</p>

    <h3>Karawang</h3>
    <p>Deskripsi kota Karawang...</p>

    <h2>Jawa Timur</h2>
    <p>Deskripsi provinsi Jawa Timur...</p>

    <h3>Surabaya</h3>
    <p>Deskripsi kota Surabaya...</p>

    <h3>Malang</h3>
    <p>Deskripsi kota Malang...</p>
  </body>
</html>

Atau lihat gambar ilustrasi berikut.

Menyesuaikan Gaya Heading

Jika kita tidak mengatur gaya judul secara manual, browser akan menambahkan gaya standar.

Untuk mengatur gaya judul, kita bisa menggunakan atribut style untuk menyisipkan CSS.

Jika Anda sudah belajar CSS, lebih baik tulis di dalam file CSS, jangan di dalam tag style.

Berikut beberapa gaya judul yang sering diubah.

1. Warna Latar Belakang dan Teks

Warna latar belakang dan teks judul bisa kita ubah menggunakan properti css background-color (latar belakang) dan color (warna teks).

Kita bisa menggunakan warna standar, RGB, HEX, HSL, RGBA, atau HSLA.

Contoh:

<h2 style="color: red">Belajar Membuat Heading</h2>

<h2 style="background-color: salmon">Belajar Membuat Heading</h2>

<h2 style="color: greenyellow; background-color: grey">
  Belajar Membuat Heading
</h2>

Hasil:

2. Kapitalisasi Huruf

Untuk mengatur kapitalisasi huruf judul, kita bisa menggunakan properti CSS text-transform dengan nilai berikut:

lowercase - huruf kecil semua.
uppercase - huruf besar semua.
capitalize - huruf pertama setiap kata menggunakan huruf besar.

Contoh:

<h2 style="text-transform: lowercase">belajar membuat Heading</h2>
<h2 style="text-transform: uppercase">belajar membuat Heading</h2>
<h2 style="text-transform: capitalize">belajar membuat Heading</h2>

Hasil:

3. Jenis Huruf

Jenis huruf yang digunakan pada judul juga bisa kita atur menggunakan properti CSS font-family.

Untuk saat ini mari kita gunakan jenis huruf yang tersedia secara lokal di komputer seperti Times New Roman, Arial, dan Georgia.

Jika Anda ingin menggunakan jenis huruf eksternal, gunakan Google Fonts, ini akan kita bahas nanti di artikel terpisah.

Untuk saat ini mari kita gunakan jenis huruf yang sudah tersedia di komputer lokal.

Contoh:

<h2 style="font-family: 'Times New Roman'">Belajar Membuat Heading</h2>
<h2 style="font-family: Arial">Belajar Membuat Heading</h2>
<h2 style="font-family: Georgia">Belajar Membuat Heading</h2>

Hasil:

4. Ukuran Huruf

Ukuran huruf bisa diatur menggunakan properti CSS font-size. Kita bisa menggunakan satuan ukuran px, em, atau rem.

Contoh:

<h2 style="font-size: 35px">Ukuran Huruf Sudah Diubah</h2>
<h2>Ukuran Huruf Belum Diubah</h2>

Hasil:

Apa Itu Heading?

Cara Membuat Heading

Catatan Penggunaan

1. Jangan Gunkaan Heading untuk Mengubah Ukuran Teks

2. Satu Halaman, Satu <h1>

3. Pastikan Level Heading Berurutan

Struktur

Atribut

Perbedaan Heading, Title, Header, dan Head

Menyesuaikan Gaya Heading

1. Warna Latar Belakang dan Teks

2. Kapitalisasi Huruf

3. Jenis Huruf

4. Ukuran Huruf

2. Satu Halaman, Satu `<h1>`