bisasoftware.id

BAB 4 : Elemen Heading pada HTML

deka — Fri, 06 Mar 2026 04:35:53 +0000

Pada pembelajaran kali ini, kita akan mengenal materi HTML – Elemen Heading yang biasanya digunakan untuk membuat sebuah judul situs atau judul artikel.

1. Pengertian Heading dalam HTML

Dalam pembuatan halaman web menggunakan HTML (HyperText Markup Language), heading merupakan elemen yang digunakan untuk menentukan judul atau subjudul pada sebuah halaman web.

Heading berfungsi untuk:

Menunjukkan struktur atau hierarki isi halaman
Mempermudah pembaca memahami bagian-bagian konten
Membantu mesin pencari (SEO) memahami topik halaman
Membuat tampilan halaman lebih terstruktur dan rapi

Secara default, teks yang menggunakan heading akan tampil lebih besar dan tebal dibandingkan teks biasa.

2. Jenis-Jenis Elemen Heading

HTML menyediakan 6 tingkat heading, yaitu dari h1 sampai h6.

Struktur dasarnya:

Judul Utama
Sub Judul
Sub Judul Level 3
Sub Judul Level 4
Sub Judul Level 5
Sub Judul Level 6

Penjelasan:

Heading	Fungsi
h1	Judul utama halaman
h2	Subjudul utama
h3	Subjudul dari h2
h4	Subjudul dari h3
h5	Subjudul dari h4
h6	Subjudul paling kecil

Semakin besar angka heading, maka ukuran teks biasanya semakin kecil.

3. Contoh Penggunaan Heading

Contoh kode HTML:




    Belajar Heading HTML



Belajar HTML
Pengenalan HTML
Sejarah HTML
Struktur Dasar HTML
Tag HTML

Hasil tampilan di browser kira-kira seperti berikut:

Belajar HTML
    Pengenalan HTML
        Sejarah HTML
    Struktur Dasar HTML
        Tag HTML

Heading membantu pembaca memahami tingkatan informasi dalam halaman web.

4. Hierarki Heading dalam HTML

Heading sebaiknya digunakan secara berurutan dan logis untuk membentuk struktur dokumen.

Contoh struktur yang benar:

h1  : Judul Halaman
 ├── h2 : Bab 1
 │     ├── h3 : Sub Bab
 │     └── h3 : Sub Bab
 ├── h2 : Bab 2
 │     ├── h3 : Sub Bab
 │     └── h3 : Sub Bab

Contoh penggunaan dalam HTML:

Belajar Pemrograman Web

HTML
Pengertian HTML
Struktur HTML

CSS
Pengertian CSS
Fungsi CSS

Dengan hierarki seperti ini, struktur halaman akan mudah dipahami oleh manusia maupun mesin pencari.

5. Perbedaan Heading dan Paragraf

Heading sering disalahgunakan untuk membuat teks besar. Padahal fungsi utamanya adalah judul.

Perbedaan:

Elemen	Fungsi
`-`	Judul atau subjudul
	Paragraf atau isi teks

Contoh:

Belajar HTML


HTML adalah bahasa markup yang digunakan untuk membuat halaman website.

6. Aturan Penggunaan Heading yang Baik

Dalam praktik pengembangan web profesional, penggunaan heading harus memperhatikan beberapa aturan berikut:

1. Gunakan hanya satu

dalam satu halaman

h1 sebaiknya digunakan sebagai judul utama halaman.

Contoh:

Belajar Pemrograman Web

2. Gunakan heading secara berurutan

Hindari langsung menggunakan h4 tanpa h2 atau h3.

Contoh yang benar:

h1
h2
h3

Contoh yang salah:

h1
h4

3. Gunakan heading untuk struktur, bukan untuk ukuran teks

Jika ingin mengubah ukuran teks, gunakan CSS, bukan heading.

Contoh:

Teks Besar

7. Contoh Halaman Web Menggunakan Heading

Contoh halaman sederhana:




    Website Sekolah



SMA Negeri 1 Teknologi

Profil Sekolah
Sekolah unggulan yang berfokus pada teknologi dan sains.

Program Keahlian

Rekayasa Perangkat Lunak
Belajar pemrograman dan pengembangan aplikasi.

Teknik Jaringan Komputer
Belajar jaringan komputer dan administrasi server.

Kontak
Email: info@sekolah.sch.id

Struktur ini membuat halaman menjadi terorganisir dengan baik.

8. Manfaat Heading untuk SEO

Heading juga penting dalam Search Engine Optimization (SEO).

Mesin pencari seperti Google menggunakan heading untuk:

memahami topik halaman
mengetahui bagian penting konten
menentukan struktur artikel

Contoh struktur artikel SEO:

H1 : Judul Artikel
H2 : Subtopik
H3 : Penjelasan subtopik

Contoh:

H1 : Cara Belajar HTML untuk Pemula
H2 : Apa itu HTML
H2 : Struktur Dasar HTML
H2 : Contoh Program HTML

9. Kesimpulan

Elemen heading merupakan bagian penting dalam HTML yang berfungsi untuk memberikan judul dan mengatur struktur konten pada halaman web.

HTML menyediakan enam level heading yaitu:

 sampai

Semakin kecil angka heading, semakin tinggi tingkatannya dalam struktur dokumen.

Penggunaan heading yang baik akan membuat:

halaman web lebih terstruktur
konten lebih mudah dipahami
halaman lebih ramah SEO

BAB 3 – Atribut Pada HTML

deka — Thu, 25 Dec 2025 02:55:34 +0000

Indikator Materi :
1. Memahami atribut pada elemen HTML
2. Menerapkan Tag, Elemen dan Atribut pada HTML

Atribut menyediakan informasi tambahan tentang sebuah elemen HTML. Informasi ini bisa berupa:

Pengidentifikasi unik.
Sumber file (misalnya untuk gambar atau link).
Dimensi (lebar dan tinggi).
Petunjuk styling.
Dan banyak lagi, tergantung jenis elemennya.

Aturan Penulisan Atribut:

Selalu Ditaruh di Tag Pembuka: Atribut hanya ditulis di dalam tag pembuka elemen, bukan di tag penutup.
Format Pasangan nama="nilai": Setiap atribut terdiri dari dua bagian:
- Nama Atribut: Menunjukkan jenis informasi yang mau kita kasih (misalnya id, class, src, href, style).
- Nilai Atribut: Isi dari informasi tersebut, biasanya diapit oleh tanda kutip dua (" "). Tanda kutip satu (' ') juga bisa, tapi kutip dua lebih umum.
- PENTING: Walaupun kadang browser bisa toleran kalau nilai atribut gak pake kutip (khususnya kalau nilainya satu kata tanpa spasi), sangat disarankan untuk SELALU menggunakan tanda kutip. Ini praktik terbaik biar kode lebih rapi, aman, dan menghindari error tak terduga.
  
  Contoh penulisan atribut pada elemen HTML :
  Ini paragraf dalam bahasa Indonesia.
  
  This is a paragraph in English.

Contoh praktek bisa menggunakan platform code editor di bawah ini :

See the Pen project by deka wildan (@deka-wildan) on CodePen.

TUGAS !
1. Buatkan syntax html untuk menampilkan paragraf biodata diri dengan background warna kuning !
2. Buat kesimpulan untuk konten berupa paragraf dan non paragraf !

Testimoni – Deka Wildan

deka — Mon, 22 Dec 2025 13:29:18 +0000

bisasoftware.id memberikan berbagai macam produk template dan source code untuk kebutuhan anda.

Testimoni – Siti Safaatul Khoyria

Siti Safaatul Khoyria — Mon, 22 Dec 2025 06:35:29 +0000

bisasoftware.id melayani dengan sepenuh hati untuk service komputer dan laptop.
Pelayanan service dan pelatihan sesuai jam kerja.

BAB 2 – Struktur Direktori Laravel

deka — Mon, 22 Dec 2025 06:33:35 +0000

Pada bab 2 kali ini, akan dibahas materi tentang struktur direktori pada Laravel, karena tidak semua direktori di ubah atau ditambahkan isinya.

BAB 1 – Pengenalan dan Download Laravel

deka — Mon, 22 Dec 2025 06:26:40 +0000

Laravel merupakan sebuah framework yang menggunakan bahasa pemrograman PHP dengan menganut sistem Model View Controller (MVC) untuk memisah antara tampilan, logika dan struktur database.

BAB 2 – Instalasi MySQL

deka — Mon, 22 Dec 2025 06:24:43 +0000

Pada bab 2 kali ini, akan dibahas materi tentang, instalasi software DBMS MySQL, untuk kasus kali ini, kita akan menggunakan paket software XAMPP yang didalamnya tidak hanya terdapat software MySQL, namun juga ada Apache untuk menjalankan server web dan PHP.

BAB 1 – Pengenalan DBMS MySQL

deka — Mon, 22 Dec 2025 06:21:45 +0000

MySQL merupakan software Database Management System (DBMS) yang digunakan untuk mengelola sistem database dengan menggunakan bahasa query / SQL (Structured Query Language).

BAB 2 – Instalasi JQuery

deka — Mon, 22 Dec 2025 06:19:46 +0000

Pada bab 2 kali ini, akan dibahas materi tentang instalasi jquery baik lokal maupun online.

BAB 1 – Pengenalan JQuery

deka — Mon, 22 Dec 2025 06:09:01 +0000

Apa itu jQuery?

jQuery adalah pustaka JavaScript yang cepat, kecil, dan kaya fitur. jQuery membuat hal-hal seperti penelusuran dan manipulasi dokumen HTML, penanganan peristiwa, animasi, dan Ajax jauh lebih sederhana dengan API yang mudah digunakan dan berfungsi di berbagai browser. Dengan kombinasi fleksibilitas dan kemampuan perluasan, jQuery telah mengubah cara jutaan orang menulis JavaScript.

Sekilas
Penelusuran dan Manipulasi DOM
Dapatkan elemen dengan kelas ‘continue’ dan ubah HTML-nya menjadi ‘Langkah Selanjutnya…’

$( "button.continue" ).html( "Next Step..." )

Event Handling

Tampilkan elemen #banner-message yang disembunyikan dengan display:none di CSS-nya ketika tombol apa pun di #button-container diklik.

var hiddenBox = $( "#banner-message" );$( "#button-container button" ).on( "click", function( event ) { hiddenBox.show();});

Ajax

Panggil skrip lokal di server /api/getWeather dengan parameter kueri zipcode=97201 dan ganti html elemen #weather-temp dengan teks yang dikembalikan.

$.ajax({ url: "/api/getWeather", data: { zipcode: 97201 }, success: function( result ) { $( "#weather-temp" ).html( "" + result + " degrees" ); }});

Simulasi JQuery Bisa dipraktekkan menggunakan tools editor di bawah ini :

See the Pen project by deka wildan (@deka-wildan) on CodePen.

bisasoftware.id

BAB 4 : Elemen Heading pada HTML

1. Pengertian Heading dalam HTML

2. Jenis-Jenis Elemen Heading

Judul Utama

Sub Judul

Sub Judul Level 3

Sub Judul Level 4

Sub Judul Level 5

Sub Judul Level 6

3. Contoh Penggunaan Heading

Belajar HTML

Pengenalan HTML

Sejarah HTML

Struktur Dasar HTML

Tag HTML

4. Hierarki Heading dalam HTML

Belajar Pemrograman Web

HTML

Pengertian HTML

Struktur HTML

CSS

Pengertian CSS

Fungsi CSS

5. Perbedaan Heading dan Paragraf

-

Belajar HTML

6. Aturan Penggunaan Heading yang Baik

1. Gunakan hanya satu dalam satu halaman h1 sebaiknya digunakan sebagai judul utama halaman. Contoh: Belajar Pemrograman Web

dalam satu halaman

Belajar Pemrograman Web

2. Gunakan heading secara berurutan

3. Gunakan heading untuk struktur, bukan untuk ukuran teks

7. Contoh Halaman Web Menggunakan Heading

SMA Negeri 1 Teknologi

Profil Sekolah

Program Keahlian

Rekayasa Perangkat Lunak

Teknik Jaringan Komputer

Kontak

8. Manfaat Heading untuk SEO

9. Kesimpulan

sampai

BAB 3 – Atribut Pada HTML

Testimoni – Deka Wildan

Testimoni – Siti Safaatul Khoyria

BAB 2 – Struktur Direktori Laravel

BAB 1 – Pengenalan dan Download Laravel

BAB 2 – Instalasi MySQL

BAB 1 – Pengenalan DBMS MySQL

BAB 2 – Instalasi JQuery

BAB 1 – Pengenalan JQuery

Event Handling

Ajax

1. Gunakan hanya satu
dalam satu halaman

`h1` sebaiknya digunakan sebagai judul utama halaman.

Contoh:

`Belajar Pemrograman Web`