{"id":473,"date":"2026-03-06T11:35:53","date_gmt":"2026-03-06T04:35:53","guid":{"rendered":"https:\/\/www.bisasoftware.id\/2026\/?p=473"},"modified":"2026-03-07T11:39:19","modified_gmt":"2026-03-07T04:39:19","slug":"bab-elemen-heading-pada-html","status":"publish","type":"post","link":"https:\/\/www.bisasoftware.id\/2026\/bab-elemen-heading-pada-html\/","title":{"rendered":"BAB 4 : Elemen Heading pada HTML"},"content":{"rendered":"\n<p>Pada pembelajaran kali ini, kita akan mengenal materi <strong>HTML \u2013 Elemen Heading<\/strong> yang biasanya digunakan untuk membuat sebuah judul situs atau judul artikel.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">1. Pengertian Heading dalam HTML<\/h2>\n\n\n\n<p>Dalam pembuatan halaman web menggunakan <strong>HTML (HyperText Markup Language)<\/strong>, heading merupakan elemen yang digunakan untuk <strong>menentukan judul atau subjudul pada sebuah halaman web<\/strong>.<\/p>\n\n\n\n<p>Heading berfungsi untuk:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Menunjukkan <strong>struktur atau hierarki isi halaman<\/strong><\/li>\n\n\n\n<li>Mempermudah <strong>pembaca memahami bagian-bagian konten<\/strong><\/li>\n\n\n\n<li>Membantu <strong>mesin pencari (SEO)<\/strong> memahami topik halaman<\/li>\n\n\n\n<li>Membuat tampilan halaman lebih <strong>terstruktur dan rapi<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Secara default, teks yang menggunakan heading akan tampil <strong>lebih besar dan tebal<\/strong> dibandingkan teks biasa.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">2. Jenis-Jenis Elemen Heading<\/h1>\n\n\n\n<p>HTML menyediakan <strong>6 tingkat heading<\/strong>, yaitu dari <strong>h1 sampai h6<\/strong>.<\/p>\n\n\n\n<p>Struktur dasarnya:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;Judul Utama&lt;\/h1&gt;\n&lt;h2&gt;Sub Judul&lt;\/h2&gt;\n&lt;h3&gt;Sub Judul Level 3&lt;\/h3&gt;\n&lt;h4&gt;Sub Judul Level 4&lt;\/h4&gt;\n&lt;h5&gt;Sub Judul Level 5&lt;\/h5&gt;\n&lt;h6&gt;Sub Judul Level 6&lt;\/h6&gt;\n<\/code><\/pre>\n\n\n\n<p>Penjelasan:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Heading<\/th><th>Fungsi<\/th><\/tr><\/thead><tbody><tr><td>h1<\/td><td>Judul utama halaman<\/td><\/tr><tr><td>h2<\/td><td>Subjudul utama<\/td><\/tr><tr><td>h3<\/td><td>Subjudul dari h2<\/td><\/tr><tr><td>h4<\/td><td>Subjudul dari h3<\/td><\/tr><tr><td>h5<\/td><td>Subjudul dari h4<\/td><\/tr><tr><td>h6<\/td><td>Subjudul paling kecil<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Semakin besar angka heading, maka ukuran teks biasanya semakin kecil.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">3. Contoh Penggunaan Heading<\/h1>\n\n\n\n<p>Contoh kode HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Belajar Heading HTML&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h1&gt;Belajar HTML&lt;\/h1&gt;\n&lt;h2&gt;Pengenalan HTML&lt;\/h2&gt;\n&lt;h3&gt;Sejarah HTML&lt;\/h3&gt;\n&lt;h2&gt;Struktur Dasar HTML&lt;\/h2&gt;\n&lt;h3&gt;Tag HTML&lt;\/h3&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>Hasil tampilan di browser kira-kira seperti berikut:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Belajar HTML\n    Pengenalan HTML\n        Sejarah HTML\n    Struktur Dasar HTML\n        Tag HTML\n<\/code><\/pre>\n\n\n\n<p>Heading membantu pembaca memahami <strong>tingkatan informasi<\/strong> dalam halaman web.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">4. Hierarki Heading dalam HTML<\/h1>\n\n\n\n<p>Heading sebaiknya digunakan secara <strong>berurutan dan logis<\/strong> untuk membentuk struktur dokumen.<\/p>\n\n\n\n<p>Contoh struktur yang benar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1  : Judul Halaman\n \u251c\u2500\u2500 h2 : Bab 1\n \u2502     \u251c\u2500\u2500 h3 : Sub Bab\n \u2502     \u2514\u2500\u2500 h3 : Sub Bab\n \u251c\u2500\u2500 h2 : Bab 2\n \u2502     \u251c\u2500\u2500 h3 : Sub Bab\n \u2502     \u2514\u2500\u2500 h3 : Sub Bab\n<\/code><\/pre>\n\n\n\n<p>Contoh penggunaan dalam HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;Belajar Pemrograman Web&lt;\/h1&gt;\n\n&lt;h2&gt;HTML&lt;\/h2&gt;\n&lt;h3&gt;Pengertian HTML&lt;\/h3&gt;\n&lt;h3&gt;Struktur HTML&lt;\/h3&gt;\n\n&lt;h2&gt;CSS&lt;\/h2&gt;\n&lt;h3&gt;Pengertian CSS&lt;\/h3&gt;\n&lt;h3&gt;Fungsi CSS&lt;\/h3&gt;\n<\/code><\/pre>\n\n\n\n<p>Dengan hierarki seperti ini, struktur halaman akan <strong>mudah dipahami oleh manusia maupun mesin pencari<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">5. Perbedaan Heading dan Paragraf<\/h1>\n\n\n\n<p>Heading sering disalahgunakan untuk membuat teks besar. Padahal fungsi utamanya adalah <strong>judul<\/strong>.<\/p>\n\n\n\n<p>Perbedaan:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Elemen<\/th><th>Fungsi<\/th><\/tr><\/thead><tbody><tr><td><code>&lt;h1&gt; - &lt;h6&gt;<\/code><\/td><td>Judul atau subjudul<\/td><\/tr><tr><td><code>&lt;p&gt;<\/code><\/td><td>Paragraf atau isi teks<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Contoh:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;Belajar HTML&lt;\/h1&gt;\n\n&lt;p&gt;\nHTML adalah bahasa markup yang digunakan untuk membuat halaman website.\n&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">6. Aturan Penggunaan Heading yang Baik<\/h1>\n\n\n\n<p>Dalam praktik pengembangan web profesional, penggunaan heading harus memperhatikan beberapa aturan berikut:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Gunakan hanya satu <code>&lt;h1&gt;<\/code> dalam satu halaman<\/h3>\n\n\n\n<p><code>h1<\/code> sebaiknya digunakan sebagai <strong>judul utama halaman<\/strong>.<\/p>\n\n\n\n<p>Contoh:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;Belajar Pemrograman Web&lt;\/h1&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2. Gunakan heading secara berurutan<\/h3>\n\n\n\n<p>Hindari langsung menggunakan <code>h4<\/code> tanpa <code>h2<\/code> atau <code>h3<\/code>.<\/p>\n\n\n\n<p>Contoh yang benar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1\nh2\nh3\n<\/code><\/pre>\n\n\n\n<p>Contoh yang salah:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1\nh4\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">3. Gunakan heading untuk struktur, bukan untuk ukuran teks<\/h3>\n\n\n\n<p>Jika ingin mengubah ukuran teks, gunakan <strong>CSS<\/strong>, bukan heading.<\/p>\n\n\n\n<p>Contoh:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p style=\"font-size:30px;\"&gt;Teks Besar&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">7. Contoh Halaman Web Menggunakan Heading<\/h1>\n\n\n\n<p>Contoh halaman sederhana:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Website Sekolah&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h1&gt;SMA Negeri 1 Teknologi&lt;\/h1&gt;\n\n&lt;h2&gt;Profil Sekolah&lt;\/h2&gt;\n&lt;p&gt;Sekolah unggulan yang berfokus pada teknologi dan sains.&lt;\/p&gt;\n\n&lt;h2&gt;Program Keahlian&lt;\/h2&gt;\n\n&lt;h3&gt;Rekayasa Perangkat Lunak&lt;\/h3&gt;\n&lt;p&gt;Belajar pemrograman dan pengembangan aplikasi.&lt;\/p&gt;\n\n&lt;h3&gt;Teknik Jaringan Komputer&lt;\/h3&gt;\n&lt;p&gt;Belajar jaringan komputer dan administrasi server.&lt;\/p&gt;\n\n&lt;h2&gt;Kontak&lt;\/h2&gt;\n&lt;p&gt;Email: info@sekolah.sch.id&lt;\/p&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>Struktur ini membuat halaman menjadi <strong>terorganisir dengan baik<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">8. Manfaat Heading untuk SEO<\/h1>\n\n\n\n<p>Heading juga penting dalam <strong>Search Engine Optimization (SEO)<\/strong>.<\/p>\n\n\n\n<p>Mesin pencari seperti Google menggunakan heading untuk:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>memahami <strong>topik halaman<\/strong><\/li>\n\n\n\n<li>mengetahui <strong>bagian penting konten<\/strong><\/li>\n\n\n\n<li>menentukan <strong>struktur artikel<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Contoh struktur artikel SEO:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>H1 : Judul Artikel\nH2 : Subtopik\nH3 : Penjelasan subtopik\n<\/code><\/pre>\n\n\n\n<p>Contoh:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>H1 : Cara Belajar HTML untuk Pemula\nH2 : Apa itu HTML\nH2 : Struktur Dasar HTML\nH2 : Contoh Program HTML\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">9. Kesimpulan<\/h1>\n\n\n\n<p>Elemen heading merupakan bagian penting dalam HTML yang berfungsi untuk <strong>memberikan judul dan mengatur struktur konten pada halaman web<\/strong>.<\/p>\n\n\n\n<p>HTML menyediakan <strong>enam level heading<\/strong> yaitu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt; sampai &lt;h6&gt;\n<\/code><\/pre>\n\n\n\n<p>Semakin kecil angka heading, semakin tinggi tingkatannya dalam struktur dokumen.<\/p>\n\n\n\n<p>Penggunaan heading yang baik akan membuat:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>halaman web lebih <strong>terstruktur<\/strong><\/li>\n\n\n\n<li>konten lebih <strong>mudah dipahami<\/strong><\/li>\n\n\n\n<li>halaman lebih <strong>ramah SEO<\/strong><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pada pembelajaran kali ini, kita akan mengenal materi HTML \u2013 Elemen Heading yang biasanya digunakan untuk membuat sebuah judul situs&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[5],"tags":[32],"class_list":["post-473","post","type-post","status-publish","format-standard","hentry","category-tutorial-html","tag-tutorial-html"],"_links":{"self":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/comments?post=473"}],"version-history":[{"count":3,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/473\/revisions"}],"predecessor-version":[{"id":476,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/473\/revisions\/476"}],"wp:attachment":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/media?parent=473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/categories?post=473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/tags?post=473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}