Cara Menggunakan Tag H1 hingga H6

by

Apa Itu HTML Tag H1 H6?

HTML tag <h1> sampai <h6> adalah elemen heading yang digunakan untuk membuat judul dan subjudul dalam halaman web.

Dalam HTML (HyperText Markup Language), tag <h1> sampai <h6> digunakan untuk membuat heading atau judul pada sebuah halaman web. Heading berfungsi untuk menunjukkan tingkatan atau hierarki informasi dalam sebuah konten, sehingga halaman web menjadi lebih terstruktur, mudah dibaca oleh pengunjung, dan lebih mudah dipahami oleh mesin pencari seperti Google.

Tag heading memiliki enam tingkat, dimulai dari <h1> sebagai heading paling penting dan biasanya berukuran paling besar, hingga <h6> sebagai heading dengan tingkat kepentingan paling rendah dan ukuran paling kecil. Urutan ini membantu membentuk struktur konten yang mirip dengan bab, subbab, dan bagian kecil dalam sebuah buku.

Fungsi Utama Tag H1 H6

Tag heading tidak hanya berfungsi untuk memperbesar teks, tetapi juga memiliki beberapa fungsi penting dalam pembuatan website, antara lain:

  1. Menyusun Struktur Konten
    Heading membantu mengatur isi halaman menjadi bagian-bagian yang jelas. Dengan adanya struktur heading yang baik, pembaca dapat dengan mudah memahami topik utama dan subtopik dalam sebuah artikel atau halaman.

  2. Meningkatkan Keterbacaan
    Teks yang memiliki heading lebih mudah dipindai oleh pembaca. Banyak orang biasanya membaca halaman web dengan cara memindai judul terlebih dahulu, kemudian baru membaca bagian yang dianggap penting.

  3. Membantu SEO (Search Engine Optimization)
    Mesin pencari seperti Google menggunakan heading untuk memahami topik utama halaman. Tag <h1> biasanya dianggap sebagai judul utama halaman, sedangkan <h2> hingga <h6> membantu menjelaskan struktur isi halaman tersebut.

  4. Membantu Aksesibilitas
    Teknologi pembaca layar (screen reader) untuk pengguna dengan keterbatasan penglihatan menggunakan heading untuk menavigasi halaman web dengan lebih mudah.

Urutan dan Hierarki Heading

  • <h1> → Judul utama halaman
  • <h2> → Subjudul utama
  • <h3> → Subjudul dari h2
  • <h4> → Subjudul dari h3
  • <h5> → Subjudul tingkat lanjut
  • <h6> → Heading tingkat paling kecil

Struktur Dasar HTML Tag H1–H6

Dalam HTML, tag <h1> sampai <h6> digunakan untuk membuat heading atau judul pada halaman web.

Heading membantu:

  • Menyusun struktur konten
  • Mempermudah pembaca memahami artikel
  • Membantu SEO di mesin pencari seperti Google

Urutan heading dari yang paling besar sampai paling kecil:

<h1>Judul Utama</h1>
<h2>Subjudul</h2>
<h3>Sub-subjudul</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

Contoh Penggunaan HTML Tag H1–H6

1. Struktur Artikel

Tag heading sering digunakan untuk membuat struktur artikel yang rapi dan hierarkis.

<h1>Belajar HTML Dasar</h1>

<h2>Pengenalan HTML</h2>
<p>HTML adalah bahasa markup...</p>

<h2>Struktur Dasar</h2>
<h3>Tag dan Elemen</h3>
<p>Penjelasan tentang tag...</p>

Penjelasan

  • <h1> → Judul utama halaman
  • <h2> → Subjudul dari topik utama
  • <h3> → Subbagian dari <h2>

Struktur ini membantu artikel menjadi lebih terorganisir.

Contoh HTML dan CSS Lengkap: Struktur Artikel Heading

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Struktur Artikel Heading</title>
</head>
<body>
	<div class="container">

	<h1>Belajar HTML Dasar</h1>

	<h2>Pengenalan HTML</h2>
	<p>
	HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman web di internet. 
	Dengan HTML, kita dapat menambahkan teks, gambar, tautan, tabel, dan berbagai elemen lain 
	yang membentuk tampilan dasar sebuah website sebelum diberi desain menggunakan CSS.
	</p>

	<h2>Struktur Dasar</h2>

	<h3>Tag dan Elemen</h3>
	<p>
	Dalam HTML terdapat tag dan elemen yang berfungsi untuk menyusun konten halaman. 
	Tag biasanya ditulis dengan tanda kurung sudut seperti <b>p, h1, atau 
	div</b>. Setiap elemen memiliki fungsi tertentu untuk mengatur struktur dan 
	memberikan arti pada isi halaman web.
	</p>

	</div>
</body>
</html>

2. Digunakan dalam Blog

Heading juga sering dipakai dalam elemen artikel blog. Contohnya menggunakan tag <article>.

<article>
  <h1>Cara Membuat Website</h1>
  <h2>Persiapan</h2>
  <h2>Proses Pembuatan</h2>
  <h3>Membuat Struktur HTML</h3>
</article>

Penjelasan

  • <h1> → Judul artikel
  • <h2> → Bagian utama artikel
  • <h3> → Penjelasan lebih detail dari bagian tersebut

Struktur ini sering digunakan di blog dan website tutorial.

Contoh HTML dan CSS Lengkap: Artikel Blog

<!DOCTYPE html>
<html lang="id">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Contoh Artikel Blog</title>
</head>
<body>
	<article>
	<h1>Cara Membuat Website</h1>

	<h2>Persiapan</h2>
	<p>
	Sebelum membuat website, kita perlu menyiapkan beberapa hal seperti
	editor kode, browser, dan memahami dasar HTML serta CSS.
	</p>

	<h2>Proses Pembuatan</h2>
	<p>
	Setelah persiapan selesai, kita bisa mulai membuat struktur dasar website.
	</p>

	<h3>Membuat Struktur HTML</h3>
	<p>
	Struktur HTML digunakan untuk menyusun elemen-elemen seperti judul,
	paragraf, gambar, dan bagian lain dalam halaman website.
	</p>
	</article>
</body>
</html>

3. Dikombinasikan dengan CSS

Tag heading juga bisa dikombinasikan dengan CSS untuk mengubah tampilan teks.

<style>
h1 {color: #1AA260;}
h2 {color: #3d3d3d;}
</style>

<h1>Judul Website</h1>
<h2>Subjudul Website</h2>

Hasilnya

  • Judul <h1> akan berwarna Hijau
  • Subjudul <h2> akan berwarna Hitam Abu

Dengan CSS kita bisa mengatur:

  • warna
  • ukuran
  • font
  • jarak antar heading

Contoh HTML dan CSS Lengkap: Judul Website

<!DOCTYPE html>
<html lang="id">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Judul Website</title>
</head>
<body>
	<header>
	  <h1>Judul Website</h1>
	  <h2>Subjudul Website</h2>
	</header>

	<article>

	  <h1>Cara Membuat Website</h1>

	  <h2>Persiapan</h2>
	  <p>
		Sebelum membuat website, kita perlu menyiapkan beberapa alat seperti
		text editor, browser, dan memahami dasar HTML serta CSS.
	  </p>

	  <h2>Proses Pembuatan</h2>

	  <h3>Membuat Struktur HTML</h3>
	  <p>
		HTML digunakan untuk membuat struktur halaman seperti judul,
		paragraf, gambar, dan bagian lainnya.
	  </p>

	  <h3>Menambahkan CSS</h3>
	  <p>
		CSS digunakan untuk mengatur tampilan website agar lebih menarik,
		seperti warna, ukuran teks, dan layout halaman.
	  </p>

	</article>
</body>
</html>

Perbedaan H1 Sampai H6

Perbedaannya terletak pada tingkat kepentingan dan ukuran default di browser:

  • H1 → Paling penting dan paling besar
  • H2 → Sedikit lebih kecil dari H1
  • H3–H6 → Semakin kecil sesuai levelnya

Namun ukuran bisa diubah menggunakan CSS.

Atribut Penting HTML Tag Heading

Atribut Fungsi Contoh
id Identitas unik elemen <h2 id="tentang">
class Kelas untuk CSS <h3 class="judul-kecil">
style Styling langsung <h1 style="color:red">
title Keterangan tambahan <h2 title="judul bagian">

Atribut Lanjutan HTML Tag Heading

Atribut Fungsi Contoh
hidden Menyembunyikan elemen <h3 hidden>
lang Menentukan bahasa <h1 lang="id">
dir Arah teks <h2 dir="ltr">
data-* Data kustom tambahan <h4 data-section="intro">

Manfaat Menggunakan HTML Tag H1–H6

  • Membuat struktur konten lebih rapi
  • Meningkatkan SEO
  • Membantu pembaca layar memahami hierarki konten
  • Meningkatkan keterbacaan

Best Practice Penggunaan Heading

  • Gunakan hanya satu <h1> untuk judul utama halaman
  • Gunakan heading secara berurutan (jangan lompat level)
  • Jangan gunakan heading hanya untuk memperbesar teks
  • Kombinasikan dengan struktur semantic HTML

Kesimpulan

HTML tag <h1> sampai <h6> digunakan untuk membuat struktur judul dan subjudul pada halaman web. Penggunaan yang benar akan membuat website lebih terstruktur, mudah dibaca, dan SEO friendly.

Untuk memahami dasar tag HTML lebih lengkap, silakan baca dokumentasi tag HTML lengkap.

Leave a Comment

Responsive — 100%