Encyclopedia of Components: Dokumentasi Lengkap & Variasi Fitur Han Haoyu Platform (Bagian 1)

Encyclopedia of Components Han Haoyu Platform Bagian 1 — Dokumentasi 30 Komponen Pertama

Daftar Isi

Selamat Datang di Encyclopedia of Components! 👋

Oke, stop dulu. Sebelum kamu scroll buru-buru nyari kode yang kamu butuhin, dengerin ini dulu satu menit.

Pernah nggak kamu bikin sesuatu yang keren banget — fitur-fitur mantap, layout yang rapi, sistem yang udah matang — tapi pas orang lain (atau bahkan kamu sendiri beberapa bulan kemudian) mau pakai ulang, malah bingung? "Eh ini kodenya gimana tadi? Yang mana yang bener?"

Itu bukan masalah skill. Itu masalah dokumentasi. Dan Han Haoyu Platform udah terlalu keren buat punya masalah kayak gitu.

Makanya lahirlah artikel ini — Encyclopedia of Components. Bukan dokumentasi kering yang bikin ngantuk. Ini adalah panduan hidup buat siapapun yang mau ngerti, ngepakai, dan memaksimalkan setiap komponen yang ada di hanhaoyu.com. Dari yang paling dasar sampai yang bikin orang lain nanya "wah, ini bisa gitu?"

Di Bagian 1 ini, kita bakal bedah 30 komponen pertama — lengkap: intro penjelasan, demo kode langsung, dan referensi silang ke komponen lain yang relevan. Artikel ini ditulis kayak ngobrol sama temen yang kebetulan ngerti web development, bukan manual buku tebal yang ngebosenin.

Cara Baca Artikel Ini yang Paling Efektif:
Kalau kamu lagi nyari komponen spesifik, pakai Daftar Isi di atas. Kalau mau belajar dari awal, baca dari atas ke bawah sambil ngopi. Setiap komponen berdiri sendiri — tapi semuanya saling nyambung lewat bagian "Relevansi Silang" di tiap seksi.

SEO Snippet Tersembunyi

Kenalan Dulu Sama Si "Bisikan Rahasia" ke Google

Bayangin kamu udah susah payah nulis artikel panjang dan berkualitas. Judulnya oke, kontennya mantap, gambarnya estetik. Tapi pas di-share ke WhatsApp grup atau muncul di Google Search, preview-nya malah kosong melompong — atau lebih parahnya, ngambil teks random dari tengah artikel yang nggak nyambung sama sekali. Nyebelin banget kan?

Nah, Si Komponen 01 ini adalah solusinya. Dia adalah blok div yang disembunyikan dari tampilan visual halaman — reader nggak bakal lihat dia — tapi isinya bisa dibaca mesin pencari, sistem preview WhatsApp, Facebook Open Graph, dan berbagai crawler lainnya.

Intinya: ini adalah "bisikan rahasia" kamu ke Google dan platform sosmed tentang apa isi artikelmu, supaya mereka bisa nampilinnya dengan benar.

Demo Langsung

<div hidden aria-hidden='true'>Deskripsi singkat artikel kamu di sini — usahakan 120–160 karakter untuk hasil SEO paling optimal.</div>

Contoh nyata buat artikel dokumentasi seperti ini:

<div hidden aria-hidden='true'>Panduan lengkap 30 komponen Han Haoyu Platform: snippet SEO, cover gambar, link eksternal, blok kode, download box & lebih. Copy-paste ready!</div>

Dua atribut yang dipakai punya peran masing-masing:

Atribut	Fungsi
`hidden`	Menyembunyikan elemen dari tampilan visual browser — reader nggak bisa lihat
`aria-hidden='true'`	Menyembunyikan dari screen reader aksesibilitas — biar nggak dibacain dua kali

Taruh di Baris PERTAMA!
Komponen ini wajib berada di baris pertama artikel — sebelum konten apapun. Kalau ditaruh di tengah atau bawah, sistem Blogger dan crawler bisa saja ngambil teks lain sebagai deskripsi. Jangan sampe kejadian!

Relevansi Silang

Komponen 02 (Read More Anchor): Dua ini selalu berpasangan di header setiap artikel. Snippet SEO di baris pertama, anchor read more tepat sesudahnya.
Komponen 22 (Thumbnail Tersembunyi): Snippet teks + thumbnail gambar tersembunyi = kombinasi preview sosmed yang sempurna. Satu handle teksnya, satu handle gambarnya.
Variable meta.image & opengraph.image (Komponen 118–120): Pastiin gambar OG di template juga sudah di-setting — snippet ini handle teksnya, variable template handle gambarnya.

Anchor Read More (Blogger Jump Break)

Titik Potong yang Menentukan Nasib Homepage

Homepage blog kamu adalah etalase toko. Kalau semua produk ditumpahin di etalase — tanpa kurasi, tanpa filter — pengunjung malah overwhelmed dan kabur. Kamu butuh titik yang bilang "sampai sini aja yang ditampilin, sisanya klik dulu".

Itulah fungsi Anchor Read More. Dia adalah penanda tak kasat mata yang memberitahu Blogger: "semua konten di atas gue yang tampil di halaman utama, sisanya hidden sampai reader klik tombol baca selengkapnya".

Demo Langsung

<a name="more"></a>

Taruh kode ini tepat di titik mana kamu mau konten "terpotong". Semua teks di atas anchor ini yang muncul di halaman utama, sisanya baru muncul setelah reader klik "Baca Selengkapnya".

Varian alternatif — efek sama, sintaks berbeda:

<!--more-->

Teknik Copywriting: Open Loop! Taruh anchor ini tepat di titik paling menggantung dari intro kamu — saat reader udah mulai penasaran tapi belum dapat jawabannya. Itu namanya teknik open loop: kamu buka pertanyaan atau masalah, tapi jawaban/solusinya ada di balik klik. Works banget untuk meningkatkan click-through rate dari homepage ke artikel lengkap.

Relevansi Silang

Komponen 01 (SEO Snippet): Pasangan wajib — selalu ada bareng di header artikel.
Komponen 03 (Gambar Cover): Strategi umum: taruh anchor read more setelah 2–3 paragraf intro, baru di bawahnya gambar cover artikel — biar homepage nggak berat load gambar besar.
Komponen 85 (Split Post/Pagination): Beda konsep — split post motong artikel jadi beberapa halaman penuh, bukan sekadar preview. Pilih sesuai kebutuhan.

Gambar Cover Artikel

First Impression Itu Ditentukan dalam 50 Milidetik

Riset bilang otak manusia butuh 50 milidetik untuk membentuk first impression visual. Artinya: sebelum reader baca satu kata pun dari artikelmu, mereka udah "menilai" halamanmu dari gambarnya. Cover yang bagus = reader bertahan. Cover yang jelek atau gagal load = bounce rate naik dan Google nggak suka itu.

Han Haoyu Platform punya cara standar memasang gambar cover yang kompatibel dengan sistem Blogger, auto-centered, dan bisa diklik untuk melihat gambar ukuran penuh:

Demo Langsung

Versi Standar (Separator Blogger)

<div class="separator" style="clear: both;">
  <a href="URL-GAMBAR-FULL" style="display: block; padding: 1em 0; text-align: center;">
    <img alt="Deskripsi gambar yang mengandung kata kunci utama artikel" border="0" src="URL-GAMBAR" />
  </a>
</div>

Versi Figure + Caption (Lebih Semantik)

<figure>
  <img alt="Deskripsi gambar yang deskriptif" height="720" loading="eager" src="URL-GAMBAR" width="1280"/>
  <figcaption>Keterangan gambar cover | Han Haoyu Platform</figcaption>
</figure>

Atribut alt wajib diisi deskripsi yang mengandung kata kunci — ini penting untuk SEO gambar di Google Images.
Gunakan dua URL: href untuk gambar full/original, src untuk gambar yang ditampilkan (bisa versi compress).
Pakai loading="eager" untuk gambar cover — bukan lazy! Cover adalah LCP element yang harus muncul secepat mungkin.
Ukuran ideal: 1280x720px (16:9), ukuran file di bawah 200KB setelah dikompresi.

Wajib Kompres Dulu!
Gambar di atas 500KB tanpa kompresi = loading lambat = Google PageSpeed jelek = ranking turun. Gunakan Squoosh, TinyPNG, atau convert ke format WebP/AVIF. Bedanya bisa signifikan: dari 2MB jadi 150KB dengan visual hampir identik.

Relevansi Silang

Komponen 13 (Figure + Caption): Versi yang lebih semantik dari cover gambar — gunakan ini kalau artikel butuh caption resmi di bawah gambar.
Komponen 61 (Lazy Load): Untuk gambar-gambar DI DALAM artikel — bukan cover. Cover pakai eager, gambar konten pakai lazy.
Komponen 57 (Grid Gambar): Kalau artikel punya banyak screenshot atau gambar, gunakan grid biar rapi.
Komponen 90 & 91 (Lightbox & Zoom): Wrap gambar dalam div.lbImg untuk lightbox otomatis saat diklik.

Link Eksternal (extL)

Cara Nge-Link yang Aman, SEO-Friendly, dan Profesional

Nge-link ke website lain itu hal yang sangat wajar dan bahkan bagus untuk SEO (menunjukkan konten kamu terverifikasi referensi). Tapi kalau caranya salah, bisa rugi dari sisi keamanan dan sinyal SEO yang kamu kirim ke Google. Di Han Haoyu Platform, semua link eksternal punya standar wajib:

Demo Langsung

Versi Default

<a class="extL" href="https://url-tujuan.com" rel="nofollow noreferrer noopener" target="_blank">Teks Link</a>

Semua Varian Style

<!-- Default — paling umum, untuk sebagian besar konteks -->
<a class='extL' href='https://url.com' rel='nofollow noreferrer noopener' target='_blank'>Teks Link Default</a>

<!-- Alt — untuk link yang perlu tampil lebih mencolok -->
<a class='extL alt' href='https://url.com' rel='nofollow noreferrer noopener' target='_blank'>Teks Link Alt</a>

<!-- Secondary — untuk referensi tambahan yang lebih subtle -->
<a class='extL sec' href='https://url.com' rel='nofollow noreferrer noopener' target='_blank'>Teks Link Sec</a>

Breakdown setiap atribut:

Atribut	Nilai	Fungsi
`class="extL"`	`extL`	Styling khusus link eksternal — tema otomatis tambahin ikon eksternal
`rel`	`nofollow`	Bilang ke Google: "jangan hitung ini sebagai endorsement SEO"
`rel`	`noreferrer`	Nggak kirimin info halaman asalmu ke website tujuan
`rel`	`noopener`	Proteksi keamanan: website tujuan nggak bisa akses window kamu via JS
`target="_blank"`	`_blank`	Buka di tab baru — user nggak kehilangan halaman asalnya

Relevansi Silang

Komponen 14 & 63 (Button Link): Kalau link eksternal butuh tampil sebagai tombol, pakai class="button" — tapi tetap harus sertakan atribut rel dan target yang sama.
Komponen 17–19 (Download Box): Link download ke server luar wajib mengikuti prinsip keamanan yang sama — rel="nofollow noreferrer noopener".
Komponen 64 (dlBox Simple): Tombol download di dlBox versi simpel juga pakai atribut rel lengkap.

Teks Code Inline

Beda Nama Fungsi Sama Kalimat Biasa? Tandai!

Ini adalah komponen paling sederhana di arsenal Han Haoyu Platform — tapi penggunaannya paling sering dan paling krusial untuk keterbacaan artikel teknis. Kapanpun kamu sebut nama class, fungsi, variable, perintah terminal, nama file, atau apapun yang "berbau kode" di dalam kalimat biasa — bungkus dengan tag ini.

Demo Langsung

<code>nama-kode-disini</code>

Lihat perbedaannya dalam konteks kalimat:

Tanpa code inline: Gunakan class extL untuk semua link eksternal, dan jangan lupa tambahkan rel nofollow noreferrer noopener sebagai atribut keamanan standar.

Dengan code inline: Gunakan class extL untuk semua link eksternal, dan jangan lupa tambahkan rel="nofollow noreferrer noopener" sebagai atribut keamanan standar.

Jauh lebih enak dibaca kan? Reader langsung tau mana yang "kata biasa" dan mana yang "istilah teknis yang harus diperhatiin".

Beberapa konteks tepat penggunaan code inline:

Nama class CSS: .note, .button, .extL
Nama function atau method: console.log(), getAll()
Nama variable: apiKey, databaseUrl
Perintah terminal: npm install, npm run build
Nama file atau path: config.js, src/index.html
Nilai atribut HTML: _blank, nofollow

Relevansi Silang

Komponen 06 (Blok Kode Panjang): Pasangan serasi — code inline untuk sebutan pendek di kalimat, blok kode untuk kode multi-baris yang perlu ditampilkan lengkap.
Komponen 25 & 26 (Tabel & API Reference): Code inline sering banget dipake di dalam sel tabel — terutama untuk kolom "Tipe Data" dan "Default Value" di dokumentasi API.
Komponen 10 (Steps): Setiap langkah tutorial hampir selalu punya code inline di dalamnya — nama perintah, nama file, atau nilai yang harus diinput.

Blok Kode Panjang

Kode Multi-Baris Butuh Panggung Sendiri

Kalau code inline adalah "sebutan singkat di tengah obrolan", blok kode adalah "presentasi lengkap di depan layar". Begitu kodenya lebih dari satu baris, atau kamu mau reader bisa baca, copy, dan pahami keseluruhannya dengan jelas — blok kode adalah jawabannya.

Han Haoyu Platform punya beberapa variasi blok kode yang makin ke sini makin powerful.

Demo Langsung

Dasar: pre + code

<pre><code>kode panjang
bisa multi-baris
ditulis di sini</code></pre>

Dengan Nama File (data-source)

<pre data-source='worker.js'><code>// kode javascript kamu di sini
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})</code></pre>

Dengan Label Bahasa (data-comment)

<pre data-comment='.html' data-source='src/index.html'><code><div class="container">
  <h1>Hello World!</h1>
</div></code></pre>

Dengan Syntax Highlighting Eksplisit

<!-- JavaScript -->
<pre><code class='language-js'>console.log("Hello World!");</code></pre>

<!-- CSS -->
<pre><code class='language-css'>.element { color: red; }</code></pre>

<!-- HTML/XML -->
<pre><code class='language-xml'><div class="contoh">HTML di sini</div></code></pre>

Dengan Highlight Baris Tertentu (data-lines)

<pre data-lines='3,4,5'><code>baris 1 - tampil biasa
baris 2 - tampil biasa
baris 3 - ini yang di-highlight karena penting!
baris 4 - ini juga di-highlight
baris 5 - ini juga
baris 6 - kembali normal</code></pre>

Contoh Kode dengan Komentar Output

<pre><code>const result = cookie.getAll();
console.log(result);
// Output: { user: 'Han Haoyu', theme: 'dark', language: 'id' }</code></pre>

Kombinasi Terbaik Atribut Blok Kode: Untuk dokumentasi profesional, pakai kombinasi: data-source (nama file) + data-comment (label bahasa) + class='language-xxx' (syntax highlighting). Hasilnya akan tampil seperti kode editor sungguhan — lengkap dengan nama file di header, label bahasa di pojok, dan kode berwarna sesuai syntax.

Relevansi Silang

Komponen 05 (Code Inline): Dua sahabat yang saling melengkapi — inline untuk sebutan singkat, block untuk kode lengkap.
Komponen 07 (Mark di dalam Kode): Tambahkan highlight pada nilai spesifik di dalam blok kode — next level banget.
Komponen 42 & 48 (Multi-Tab Code Block): Untuk perbandingan kode "Sebelum vs Sesudah" atau multi-platform — wrap blok kode dalam sistem tab.
Komponen 29 (Blok Kode dengan Komentar Output): Variasi blok kode yang menampilkan hasil eksekusi — berguna banget untuk tutorial API dan fungsi.

Highlight / Mark di Dalam Blok Kode

"Yang Ini Harus Kamu Ganti" — Tanpa Basa-Basi

Ini salah satu fitur paling underrated tapi paling impactful di Han Haoyu Platform. Coba bayangin skenario ini: kamu kasih reader sebuah blok kode konfigurasi JSON yang panjang. Lalu di akhir kamu bilang "ganti bagian yang perlu disesuaikan ya". Reader pun bingung: yang mana? Semua? Sebagian? Yang mana yang aman nggak diubah?

Solusinya: tag  di dalam blok kode, lengkap dengan label keterangan via atribut data-before atau data-after. Nilai yang perlu diubah reader langsung ter-highlight secara visual — plus ada label tooltip/keterangan yang menjelaskan apa yang harus diisi.

Demo Langsung

Mark Standar di Dalam Kode

<pre><code>databaseUrl: "<mark data-before='Ganti dengan URL database kamu'>https://db.contoh.com</mark>"
apiKey: "<mark data-before='API Key dari dashboard'>MASUKKAN-API-KEY-DISINI</mark>"
projectId: "nama-project-kamu"</code></pre>

Semua Varian Mark

<!-- Mark standar dengan label keterangan -->
<mark data-before='Label Keterangan'>nilai-yang-di-highlight</mark>

<!-- Mark kosong — field yang HARUS diisi user (placeholder) -->
<mark data-before='Isi Measurement ID di sini'></mark>

<!-- Mark dengan label setelah nilai -->
<mark data-after='Format yang benar: YYYY-MM-DD'>2026-02-11</mark>

<!-- Mark warna ungu -->
<mark class='purple' data-before='Opsional tapi direkomendasikan'>nilai-opsional</mark>

<!-- Mark block merah — untuk nilai yang KRITIS dan wajib diganti -->
<mark class='block red' data-before='WAJIB diganti atau kode error!'>nilai-kritis</mark>

<!-- Mark block biasa -->
<mark class='block' data-before='Sesuaikan dengan kebutuhan'>nilai-default</mark>

Varian	Kapan Dipakai
`mark` standar	Nilai yang perlu disesuaikan tapi punya default yang aman
`mark` kosong	Field yang belum ada nilainya — reader wajib isi sendiri
`mark.purple`	Nilai penting tapi opsional
`mark.block.red`	Nilai kritis — kalau nggak diganti, kode nggak jalan
`mark.block`	Nilai dengan emphasis lebih kuat dari mark biasa

Relevansi Silang

Komponen 06 (Blok Kode): Mark hanya efektif di dalam blok kode — keduanya selalu jalan bersama.
Komponen 39 (Mark di Tabel): Mark juga bisa dipakai di dalam sel tabel untuk highlight nilai penting — bukan hanya di blok kode.
Komponen 47 (Mark dengan Class Warna): Versi lengkap dari semua varian warna mark — termasuk mark di luar konteks blok kode.
Komponen 70 (Mark dengan data-after): Variasi mark yang labelnya muncul setelah nilai, bukan sebelumnya.

Kotak Catatan Biasa (Note)

Rambu Lalu Lintas Konten Kamu

Artikel yang bagus itu seperti jalan tol yang baik — ada rambu-rambunya. Tanpa rambu, semua informasi ditumpuk jadi paragraf panjang dan reader mudah kehilangan hal-hal yang penting. Note box adalah "rambu" paling dasar di Han Haoyu Platform — sederhana, serbaguna, dan efektif.

Demo Langsung

<!-- Versi div -->
<div class='note'>Teks catatan atau info tambahan kamu di sini. Bisa ditulis agak panjang — note box ini flexible.</div>

<!-- Versi p — untuk catatan yang lebih pendek -->
<p class='note'>Catatan singkat tanpa perlu banyak ruang.</p>

<!-- Note tanpa judul tebal — polos, minimalis, ringkas -->
<p class='note'>
  Ini adalah catatan tambahan tanpa judul tebal — cocok untuk info singkat yang nggak perlu penekanan lebih.
</p>

Note ini ideal untuk:

Tip tambahan yang berkaitan tapi bukan bagian utama tulisan
Pengecualian atau kasus khusus yang perlu disebutkan
Informasi versi atau kompatibilitas
Catatan kecil per-langkah di dalam tutorial (nested di dalam li)

Relevansi Silang

Komponen 09 (Note Warning): Versi lebih serius dari note biasa — untuk info yang kalau diabaikan bisa bikin masalah.
Komponen 41 & 66 (Alert Box): Note box adalah versi compact dan inline — Alert Box adalah versi standalone yang lebih besar dan mencolok.
Komponen 10 (Steps): Note sering di-nested di dalam li untuk kasih keterangan spesifik tiap langkah — ini pola yang sangat umum.
Komponen 83 & 84 (Note Info & Success): Varian lanjutan note dengan class tambahan info dan success untuk konteks yang lebih spesifik.

Kotak Peringatan / Warning

Kalau Ini Diabaikan, Jangan Nangis Ya

Ada informasi yang sifatnya "bagus untuk diketahui" — dan ada yang sifatnya "kalau kamu nggak baca ini, kamu bakal nyesel". Yang pertama pakai note biasa. Yang kedua? Ini saatnya Warning Note Box tampil.

Warning box dirancang untuk menarik perhatian secara paksa — styling-nya lebih mencolok, biasanya berwarna berbeda, dan secara psikologis membuat reader berhenti dan membaca sebelum melanjutkan.

Demo Langsung

<p class='note wr'><b>Penting Banget!</b><br>
  Teks peringatan kamu di sini. Ini akan ditampilkan dengan style yang berbeda dan langsung menarik perhatian reader sebelum mereka lanjut.
</p>

Contoh penggunaan nyata:

<p class='note wr'><b>Backup Dulu Sebelum Lanjut!</b><br>
  Langkah berikutnya akan menghapus semua data konfigurasi lama. Pastikan kamu sudah backup file <code>config.json</code> sebelum menjalankan perintah ini. Nggak ada undo setelah ini!
</p>

Kapan pakai warning box (bukan note biasa)?

Langkah yang tidak bisa di-undo (hapus data, reset konfigurasi)
Persyaratan yang wajib dipenuhi sebelum melanjutkan
Batasan atau limitasi penting yang sering diabaikan
Risiko keamanan atau performa yang signifikan

Relevansi Silang

Komponen 08 (Note Biasa): Gunakan note biasa untuk informasi non-kritis. Warning untuk hal yang benar-benar penting dan berdampak.
Komponen 46 (Alert Warning): div.alert.warning.outline adalah versi warning yang lebih besar dan standalone — gunakan kalau warning-nya perlu lebih mencolok lagi.
Komponen 83 (Note Info): Untuk informasi penting tapi tidak se-kritis warning — nada yang lebih netral.

Daftar Langkah-Langkah (ol.steps)

Tanpa Urutan yang Jelas, Tutorial Itu Bukan Tutorial

Komponen ini adalah jantung dari setiap tutorial teknis di Han Haoyu Platform. ol class='steps' bukan sekadar ordered list biasa — ini adalah komponen yang didesain khusus untuk membuat proses langkah demi langkah terasa terstruktur, jelas, dan mudah diikuti.

Yang bikin dia spesial: setiap li bisa menampung konten kompleks — blok kode, note box, gambar, bahkan multi-tab code block — semuanya nested rapi di dalamnya.

Demo Langsung

Versi Dasar

<ol class='steps'>
  <li>Langkah pertama yang simpel dan jelas.</li>
  <li>Langkah kedua dengan <code>perintah-terminal</code> di dalamnya.</li>
  <li>Langkah ketiga dengan <b>teks tebal</b> untuk penekanan penting.</li>
</ol>

Versi Kompleks — Steps dengan Blok Kode dan Note

<ol class='steps'>
  <li>Buka terminal di direktori project kamu.</li>
  <li>
    Jalankan perintah instalasi berikut:
    <pre><code>npm install han-haoyu-components --save</code></pre>
    <p class='note'>Pastikan Node.js versi 18+ sudah terinstall sebelum menjalankan perintah ini.</p>
  </li>
  <li>
    Salin konfigurasi berikut ke file <code>config.js</code>:
    <pre data-source='config.js' data-comment='.js'><code class='language-js'>module.exports = {
  apiKey: "<mark data-before='API Key dari dashboard'>YOUR-API-KEY</mark>",
  projectId: "<mark data-before='ID project kamu'>YOUR-PROJECT-ID</mark>"
};</code></pre>
    <p class='note wr'><b>Jangan di-commit ke Git!</b><br>
      Tambahkan <code>config.js</code> ke <code>.gitignore</code> kamu untuk mencegah API key bocor ke publik.
    </p>
  </li>
  <li>
    Verifikasi instalasi berhasil:
    <pre><code>npm run verify
// Output: ✓ All checks passed (3/3)</code></pre>
    <p class='note success'><b>Berhasil!</b><br>Kalau output-nya seperti di atas, instalasi kamu 100% sukses!</p>
  </li>
</ol>

Versi Unordered Steps (ul.steps)

<ul class='steps'>
  <li>Pastikan sudah punya akun Blogger aktif.</li>
  <li>Template Han Haoyu sudah terpasang di blog.</li>
  <li>Akses Edit HTML template sudah dimiliki.</li>
</ul>

Gunakan ul.steps (bukan ol.steps) ketika langkah-langkahnya tidak harus diikuti secara berurutan — misalnya daftar prasyarat atau checklist.

Relevansi Silang

Komponen 06 (Blok Kode): Hampir setiap tutorial punya kombinasi steps + blok kode — ini adalah duo paling ikonik.
Komponen 07 (Mark di Kode): Mark di dalam blok kode yang ada di dalam steps — triple combo yang powerful untuk tutorial konfigurasi.
Komponen 08 & 09 (Note & Warning): Note nested di dalam langkah adalah pattern yang sangat umum.
Komponen 50 & 104 (Accordion): Bungkus steps dalam accordion untuk tutorial panjang yang butuh collapsed secara default.
Komponen 136 (Steps + Pre Tabs Nested): Untuk tutorial multi-platform, bisa nested pre tabs di dalam langkah — advanced level!

SVG Icon Inline

Ikon yang Load Cepat, Tampil Tajam, Tanpa Request Tambahan

Ada banyak cara untuk menampilkan ikon di web: icon font, image file, CDN library, atau SVG inline. Han Haoyu Platform memilih SVG inline untuk ikon yang butuh tampil di dalam teks atau kalimat — dan alasannya solid: tanpa HTTP request tambahan, tampil tajam di semua resolusi layar termasuk retina display, dan bisa dikontrol ukurannya dengan CSS.

Demo Langsung

Icon Panah Bawah (Inline di Teks)

<svg viewBox='0 0 512 512' style='display:inline-block;vertical-align:top'>
  <path d='M98 190.06l139.78 163.12a24 24 0 0036.44 0L414 190.06c13.34-15.57 2.28-39.62-18.22-39.62h-279.6c-20.5 0-31.56 24.05-18.18 39.62z'></path>
</svg>

Icon Save/Simpan

<svg viewBox='0 0 48 48' style='display:inline-block;vertical-align:top'>
  <path d='M34 6H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V14l-8-8zM24 38c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm6-20H10v-8h20v8z'></path>
</svg>

Variant: Inline-Block Wrapper (span)

<span style='display:inline-block;vertical-align:top'>
  <svg viewBox='0 0 48 48'>
    <path d='M6 34.5V42h7.5l22.13-22.13-7.5-7.5L6 34.5zm35.41-20.41c.78-.78.78-2.05 0-2.83l-4.67-4.67c-.78-.78-2.05-.78-2.83 0l-3.66 3.66 7.5 7.5 3.66-3.66z'/>
  </svg>
</span>

Variant: Inline-Flex (Ikon + Teks Sejajar Sempurna)

<span style='display:inline-flex;align-items:baseline'>
  <svg viewBox='0 0 48 48' style='align-self:center'>
    <path d='M0 0h48v48H0V0z' fill='none'/>
    <path d='M18.8 33.2L9.7 24l9.2-9.2L16 12 4 24l12 12 2.8-2.8zm10.4 0l9.2-9.2-9.2-9.2L32 12l12 12-12 12-2.8-2.8z'/>
  </svg>
  <b style='text-indent:4px'>Label Teks di Samping Ikon</b>
</span>

Untuk ikon yang sudah terdaftar di tema Han Haoyu, gunakan shortcut Blogger include yang lebih bersih: <b:include name='svg.nama-icon'/> — nggak perlu copy-paste SVG path panjang.

Relevansi Silang

Komponen 14 & 63 (Button dengan Icon): Alternatif yang lebih simple dari SVG inline — gunakan  untuk ikon yang sudah terdaftar di sistem tema.
Komponen 52 (Blogger Include): Cara paling clean untuk memanggil ikon dari tema — tanpa harus paste path SVG.
Komponen 88 & 89 (Span Inline-Block & Inline-Flex): Pattern wrapper yang lebih lengkap untuk ikon + teks yang butuh alignment sempurna.

Footer Copyright Artikel

Tanda Tangan di Ujung Setiap Karya

Setiap artikel di Han Haoyu Platform diakhiri dengan satu hal: tanda kepemilikan. Bukan sekadar formalitas — ini adalah pernyataan bahwa konten ini ada yang bertanggung jawab, ada yang punya, dan ada yang merawatnya. Subtle tapi penting.

Demo Langsung

<p class='pRef'>Copyright (c):<br>
  Han Haoyu Platform
</p>

Class pRef memberikan styling khusus — tampil dengan ukuran teks yang lebih kecil, warna berbeda dari teks biasa, dan posisi yang jelas sebagai penutup artikel.

Posisi yang Tepat: Taruh footer copyright di paling bawah artikel — setelah semua konten selesai, setelah Related Posts, dan sebelum area komentar Blogger. Ini standar setiap artikel di platform.

Relevansi Silang

Komponen 24 (Artikel Terkait Otomatis): Related Posts biasanya tampil tepat sebelum footer copyright — urutan standar penutup artikel.
Komponen 74 (Manual Related Posts): Kalau kamu mau kurasi manual artikel yang muncul — taruh sebelum footer copyright juga.
Komponen 15 (Garis Pemisah): <hr> sering dipake tepat sebelum footer copyright sebagai pemisah visual dari konten utama.

Gambar dengan Caption (Figure)

Gambar yang Bisa "Bicara" Sendiri

Ada perbedaan besar antara gambar yang cuma "ditaro" dan gambar yang punya konteks. Dengan elemen figure dan figcaption, gambarmu jadi punya keterangan resmi yang semantik — dimengerti oleh browser, mesin pencari, dan screen reader secara proper.

Demo Langsung

<figure>
  <img alt="Deskripsi gambar yang lengkap dan mengandung kata kunci" height="720" loading="eager" src="URL-GAMBAR" width="1280"/>
  <figcaption>Teks caption yang menjelaskan konteks gambar | Han Haoyu Platform</figcaption>
</figure>

Versi figure yang sudah mengaktifkan lightbox otomatis (tanpa perlu atribut tambahan — tema handle ini):

<figure>
  <img alt='Deskripsi gambar untuk lightbox' src='URL-GAMBAR'/>
  <figcaption>Caption gambar yang mendukung lightbox otomatis saat diklik.</figcaption>
</figure>

Perbedaan figure dengan wrapper separator biasa: figure adalah elemen semantik HTML5 yang dikenali mesin pencari sebagai gambar dengan keterangan resmi — ini memberikan konteks SEO yang lebih kaya. Gunakan figure untuk gambar ilustrasi utama yang butuh keterangan, separator untuk gambar cover yang cukup standalone.

Relevansi Silang

Komponen 03 (Cover Gambar): Cover gambar biasanya pakai separator style — figure lebih cocok untuk gambar ilustrasi di dalam konten.
Komponen 55 (Gambar dengan Caption Versi Table): Alternatif cara Blogger lama untuk gambar + caption — figure adalah versi yang lebih semantik dan modern.
Komponen 99 (Figure + Lightbox Aktif): Detail tentang figure yang sudah terintegrasi dengan sistem lightbox tema.

Tombol / Button Link

CTA yang Nggak Bisa Di-Ignore

Di era konten yang padat dan perhatian manusia yang semakin singkat, button yang well-designed adalah satu-satunya cara memastikan reader melakukan aksi yang kamu inginkan. Mau reader download file? Klik demo? Buka link? Jangan cuma taruh link biasa — kasih tombol yang mencolok dan jelas.

Demo Langsung

Cara Pakai Standar (Dengan Centering)

<div style='text-align:center'>
  <a class="button" href="#tujuan"><i class='icon demo'></i>Lihat Demo</a>
</div>

Semua Varian Button

<!-- Button standar — paling umum -->
<a class='button' href='#'>Teks Tombol</a>

<!-- Button outline — lebih subtle -->
<a class='button ln' href='#'>Teks Tombol Outline</a>

<!-- Button full width — memenuhi lebar container -->
<a class='button full' href='#'>Tombol Full Width</a>

<!-- Dengan icon download -->
<a class='button' href='#'><i class='icon dl'></i>Download Sekarang</a>

<!-- Dengan icon demo -->
<a class='button' href='#'><i class='icon demo'></i>Coba Live Demo</a>

<!-- Dengan icon info -->
<a class='button' href='#'><i class='icon info'></i>Info Lebih Lanjut</a></code></pre>

Relevansi Silang

Komponen 04 (Link Eksternal): Kalau button mengarah ke link luar, tambahkan rel="nofollow noreferrer noopener" dan target="_blank".
Komponen 63 (Semua Varian Button Lengkap): Referensi lengkap semua varian dan kombinasi button — komponen 14 adalah contoh dasarnya saja.
Komponen 64 (dlBox Simple): Tombol download di dlBox menggunakan class button dengan icon dl.

Garis Pemisah (HR)

Jeda Visual yang Punya Makna

Ini mungkin komponen paling sederhana yang ada — satu tag HTML, satu baris kode. Tapi jangan anggap remeh. Di artikel panjang seperti dokumentasi ini, garis pemisah adalah "napas" visual yang memberi tanda kepada reader bahwa satu topik sudah selesai dan topik baru akan dimulai. Tanpa jeda seperti ini, artikel panjang terasa seperti satu blok teks raksasa yang mengintimidasi.

Demo Langsung

<hr>

Pola penggunaan yang paling umum:

<!-- Pemisah antar section besar -->
</section-konten-sebelumnya>

<hr>

<h2>Topik Baru Dimulai Di Sini</h2>

<!-- Pemisah sebelum footer copyright -->
<hr>

<p class='pRef'>Copyright (c):<br>Han Haoyu Platform</p>

Relevansi Silang

Komponen 12 (Footer Copyright): HR sering dipake tepat sebelum footer copyright — batas visual antara konten utama dan area penutup.
Komponen 16 (Heading H3 dan H4): HR berpasangan dengan heading untuk membangun struktur artikel yang jelas. HR untuk pemisah section besar, heading untuk judul sub-topik.
Komponen 30 (Heading H2 + H3 + H4 Bertingkat): Dalam pola dokumentasi lengkap, HR biasanya ada di antara H2 sections — bukan di antara H3 atau H4.

Heading H3 dan H4

Hierarki Judul yang Bikin Konten Bisa "Dinavigasi"

Artikel panjang tanpa hierarki heading yang jelas itu seperti buku tanpa daftar isi — informasinya mungkin ada, tapi susah dicarinya. Di Han Haoyu Platform, heading H3 dan H4 adalah komponen struktural yang membangun navigasi artikel dari dalam.

Demo Langsung

<!-- Heading level 3 — sub-judul utama dalam seksi -->
<h3>Sub Judul Level 3</h3>

<!-- Heading level 4 — sub-sub-judul yang lebih spesifik -->
<h4>Sub Judul Level 4</h4>

<!-- H3 dengan teks italic di dalamnya -->
<h3><i>Roadmap Fitur</i> yang Perlu Kamu Tahu</h3>

<!-- H4 dengan data-before untuk penomoran -->
<h4 data-before='1. '>Langkah Pertama yang Harus Dilakukan</h4>
<h4 data-before='2. '>Langkah Kedua Berikutnya</h4>
<h4 data-before='3. '>Langkah Ketiga dan Terakhir</h4>

Panduan hierarki heading yang benar:

Tag	Fungsi	Contoh Konteks
`h2`	Judul section utama artikel	"Cara Instalasi", "Konfigurasi", "Troubleshooting"
`h3`	Sub-topik dalam satu section	"Instalasi via npm", "Instalasi Manual"
`h4`	Detail atau langkah spesifik	"Parameter yang Diperlukan", "Contoh Penggunaan"

Jangan Skip Level Heading!
Jangan langsung loncat dari H2 ke H4 tanpa H3 di antaranya. Ini merusak struktur dokumen dan membingungkan baik reader maupun mesin pencari. Turun level satu-satu: H2 → H3 → H4.

Relevansi Silang

Komponen 23 (TOC Otomatis): TOC otomatis di Han Haoyu Platform membaca semua heading di artikel dan membuat daftar isi — struktur heading yang baik langsung menghasilkan TOC yang rapih.
Komponen 30 (Heading H2 + H3 + H4 Bertingkat): Pattern lengkap heading untuk dokumentasi API — H2 untuk nama fitur, H3 untuk method, H4 untuk parameter/return.
Komponen 32 (H2 dengan data-before): Variasi H2 dengan label prefix — untuk artikel yang perlu penomoran section secara eksplisit.
Komponen 49 (H4 dengan data-before): H4 dengan prefix penomoran otomatis — sangat berguna untuk sub-sub-bagian yang banyak dan perlu terurut.

Download Box — Semua Versi Lengkap

Box Download yang Lebih dari Sekadar Link

Kalau kamu sering share file, template, atau resource lewat blog — kamu tahu betapa jauhnya perbedaan antara "ini link-nya: blabla.com" dan tombol download yang informatif, jelas, dan terlihat profesional. Han Haoyu Platform punya sistem Download Box yang sangat fleksibel untuk ini.

Demo Langsung

Versi 1: Download Box dengan Thumbnail Gambar

<div class='hhc-download-box'
     data-link='https://link-download-kamu.com'
     data-image='https://url-thumbnail-kamu.jpg'
     data-timeout='30'
     data-nama='Nama File Kamu'
     data-kategori='Kategori'
     data-ukuran='879KB'
     data-resolusi='1980x1080'></div>

Versi 2: Download Box dengan Placeholder Ekstensi

<div class='hhc-download-box'
     data-link='https://link-download-kamu.com'
     data-placeholder='.zip'
     data-timeout='10'
     data-nama='Nama File Kamu'
     data-kategori='Dokumen'
     data-ukuran='2.5MB'
     data-format='PDF'></div>

Versi 3: Download Box dengan Data Custom Bebas

<div class='hhc-download-box'
     data-link='https://link-download-kamu.com'
     data-placeholder='.apk'
     data-timeout='15'
     data-nama='Han Haoyu Components v2.0'
     data-versi='2.0.1'
     data-tanggal='11 Feb 2026'
     data-penulis='Han Haoyu'
     data-target='_blank'></div>

Semua data attribute yang tersedia dan fungsinya:

Attribute	Wajib?	Keterangan
`data-link`	Wajib	URL tujuan download
`data-image`	Opsional	URL thumbnail gambar (gunakan ini atau data-placeholder, pilih salah satu)
`data-placeholder`	Opsional	Ekstensi file (.zip, .apk, .pdf) sebagai pengganti visual thumbnail
`data-timeout`	Opsional	Hitung mundur sebelum tombol download aktif (dalam detik)
`data-nama`	Opsional	Nama file atau resource yang ditampilkan di box
`data-kategori`	Opsional	Kategori file (Aplikasi, Dokumen, Template, dll)
`data-ukuran`	Opsional	Ukuran file: 2.5MB, 879KB, dll
`data-format`	Opsional	Format file: PDF, PNG, ZIP, dll
`data-resolusi`	Opsional	Resolusi gambar/media: 1980x1080, 4K, dll
`data-versi`	Opsional	Nomor versi file/aplikasi
`data-tanggal`	Opsional	Tanggal rilis: 11 Feb 2026, dll
`data-penulis`	Opsional	Nama pembuat atau penulis file
`data-target`	Opsional	Target buka link: `_blank` atau `_self`

Fleksibilitas Penuh!
Kamu bisa tambahkan data attribute apapun di luar list di atas — misalnya data-lisensi, data-bahasa, data-platform — dan semuanya otomatis ditampilkan sebagai info tambahan di box. Tidak perlu edit template atau JavaScript tambahan!

Relevansi Silang

Komponen 04 (Link Eksternal): Prinsip keamanan link yang sama berlaku untuk data-link yang mengarah ke server lain.
Komponen 64 (dlBox Simple): Versi minimalis tanpa sistem data attribute lengkap — lebih cocok untuk file sederhana tanpa metadata banyak.
Komponen 41 & 66 (Alert Box): Kombinasikan download box dengan alert info untuk memberi konteks tentang isi file sebelum reader download.

Blok Kode Pesan / Konfigurasi JS

Tampilkan Konfigurasi Object JS dengan Benar

Kadang yang perlu ditampilkan bukan kode yang dijalankan, tapi konfigurasi berbentuk object JavaScript — misalnya options, settings, atau messages config yang perlu di-customize oleh user. Ini punya cara penyajian khusus yang bikin beda mana yang "nama key" dan mana yang "nilai yang bisa diubah".

Demo Langsung

<pre><code>messages: {
  startingDownload: "Memulai Download dalam &lt;span&gt;%d&lt;/span&gt; detik",
  pleaseWait: "Mohon tunggu..."
}</code></pre>

Perhatikan penggunaan HTML entities untuk karakter < dan > di dalam blok kode — ini penting agar browser tidak salah menginterpretasikan tag HTML di dalam kode yang ditampilkan:

Karakter	Entity HTML	Kapan Digunakan
`<`	`<`	Tanda "lebih kecil" / pembuka tag di dalam kode yang ditampilkan
`>`	`>`	Tanda "lebih besar" / penutup tag di dalam kode yang ditampilkan
`&`	`&`	Ampersand di dalam kode yang ditampilkan

Relevansi Silang

Komponen 06 (Blok Kode): Komponen 20 adalah aplikasi khusus dari blok kode — prinsip dasarnya sama, konteksnya spesifik untuk konfigurasi JS.
Komponen 07 (Mark di Kode): Gunakan mark di dalam kode konfigurasi ini untuk highlight nilai yang perlu diubah user.
Komponen 17–19 (Download Box): Download Box punya sistem messages config sendiri — Komponen 20 dipakai untuk mendokumentasikan cara kustomisasinya.

Script Type Module (ES Module di Blogger)

JavaScript Modern di Platform Blogger? Bisa!

Blogger punya parsing XML yang cukup strict — karakter seperti <, >, dan & di dalam tag <script> bisa menyebabkan error parsing template. Solusinya adalah kombinasi type='module' dengan wrapper CDATA khusus.

Demo Langsung

<script type='module'>/*<![CDATA[*/
  // kode JavaScript modern kamu di sini
  // Bisa pakai import/export, arrow function, async/await, dll
  
  import { something } from './module.js';
  
  const handler = async (event) => {
    const data = await fetch('/api/endpoint');
    return data.json();
  };
/*]]>*/</script>

Kenapa perlu wrapper ini?

type='module' — Menandai script sebagai ES Module yang bisa pakai syntax import/export dan dijalankan dalam strict mode otomatis.
/*<![CDATA[*/ — Membuka CDATA section yang memberitahu XML parser Blogger: "konten di antara ini jangan di-parse sebagai XML".
Isi JavaScript — Kode bebas ditulis dengan syntax modern tanpa risiko konflik parsing.
/*]]>*/ — Menutup CDATA section. Dibungkus komentar JS /* */ agar browser nggak salah interpretasi.

Relevansi Silang

Komponen 31 (Script IIFE): Alternatif untuk JavaScript yang perlu jalan langsung tanpa module system — pakai IIFE pattern.
Komponen 125–130 (Custom Code Placement di Template): Untuk script yang perlu ada di semua halaman (global), tempatkan di zona khusus Edit HTML template menggunakan penanda b:comment.

Thumbnail Tersembunyi (untuk Sistem Blogger)

Gambar Rahasia yang Ngatur Preview Sosmed

Blogger punya sistem otomatis untuk memilih gambar yang ditampilkan sebagai thumbnail di halaman daftar post. Tapi sistem ini kadang salah pilih — ngambil gambar random yang nggak representatif. Solusinya: Thumbnail Tersembunyi.

Ini adalah gambar yang disisipkan dalam komentar HTML khusus yang dimengerti sistem Blogger tapi nggak ditampilkan ke reader:

Demo Langsung

<!--[
  <div class='separator'><img src='URL-THUMBNAIL-YANG-KAMU-PILIH'/></div>
]-->

Taruh kode ini di dalam post — biasanya di bagian atas artikel, setelah SEO snippet. URL gambar yang kamu masukkan akan digunakan Blogger sebagai thumbnail resmi artikel di halaman utama dan feed RSS.

Pilih Gambar yang Tepat!
Thumbnail ini yang akan muncul di Google Discover, share preview, dan daftar post homepage. Gunakan gambar yang paling representatif, eye-catching, dengan rasio 16:9 dan resolusi minimal 1280x720px. Gambar yang bagus = klik rate yang lebih tinggi.

Relevansi Silang

Komponen 01 (SEO Snippet): Pasangan sempurna — snippet handle deskripsi teks, thumbnail handle gambar preview.
Komponen 03 (Cover Gambar): Idealnya URL di thumbnail tersembunyi sama dengan gambar cover artikel — konsistensi visual yang bagus.
Variable meta.image (Komponen 118): Setting gambar default di template untuk artikel yang nggak punya thumbnail tersembunyi spesifik.

Table of Contents / Daftar Isi Otomatis

Navigasi Artikel Tanpa Perlu Coding Manual

Pernah baca artikel panjang dan harus scroll terus-terusan nyari section yang kamu butuhin? Frustrasi banget. Daftar Isi menyelesaikan masalah itu — dan di Han Haoyu Platform, kamu nggak perlu bikin manual satu per satu. Sistem TOC otomatis membaca semua heading di artikel dan menghasilkan daftar isi yang dinamis.

Demo Langsung

<details class='sp toc' open>
  <summary data-show='Show all' data-hide='Hide all'>Daftar Isi</summary>
  <div class='aToc'></div>
</details>

Cara kerjanya:

class='sp toc' — Mengaktifkan komponen spoiler dengan identitas khusus TOC. Sistem JavaScript tema akan scan semua heading di #postBody dan populate div.aToc secara otomatis.
open — TOC tampil terbuka secara default. Hapus atribut ini kalau mau TOC collapsed by default.
data-show & data-hide — Teks label untuk tombol expand/collapse. Bisa dikustomisasi.
div.aToc — Container kosong tempat TOC akan di-inject oleh JavaScript.

TOC ini membaca heading secara hierarkis — H2, H3, H4 akan tampil dengan indentasi yang berbeda, mencerminkan struktur artikel. Makanya, penting banget untuk menggunakan heading dengan hierarki yang benar (tidak skip level).

Relevansi Silang

Komponen 16 (Heading H3 & H4): TOC bergantung pada heading yang terstruktur baik — semakin rapi hierarki heading, semakin bagus TOC yang dihasilkan.
Komponen 71 (Spoiler): TOC menggunakan sistem spoiler yang sama — details.sp — tapi dengan class tambahan toc.
Komponen 24 (Related Posts): Selalu pair TOC di awal artikel dengan Related Posts di akhir artikel — bookend yang sempurna.

Attribute	Fungsi
`data-label`	Label Blogger spesifik untuk filter artikel yang tampil
`data-max-posts`	Batasi jumlah artikel yang ditampilkan (default biasanya 6)

Semua Class Modifier Tabel

<!-- Modifier Layout -->
<div class='table sticky bordered stripped'>...</div>   <!-- Header sticky saat scroll -->
<div class='table bordered stripped hovered'>...</div>  <!-- Row highlight saat hover -->
<div class='table cborder'>...</div>                   <!-- Border pada container -->
<div class='table noborder'>...</div>                  <!-- Hapus border konten -->

<!-- Modifier Warna Header -->
<div class='table bordered primary'>...</div>
<div class='table bordered clr'>...</div>
<div class='table bordered warning'>...</div>
<div class='table bordered success'>...</div>
<div class='table bordered error'>...</div>

<!-- Modifier Max-Height -->
<div class='table bordered mh200'>...</div>
<div class='table bordered mh300'>...</div>
<div class='table bordered mhvh'>...</div>

<!-- Modifier Padding Cell -->
<div class='table bordered sp5'>...</div>
<div class='table bordered sp10'>...</div>
<div class='table bordered sp20'>...</div>

Relevansi Silang

Komponen 05 (Code Inline): Hampir wajib dikombinasikan — terutama untuk kolom "Tipe Data" dan "Default" di tabel API reference.
Komponen 39 (Mark di Tabel): Mark bisa dipake di dalam sel tabel untuk highlight nilai penting.
Komponen 26 (API Reference): Tabel adalah cara alternatif mendokumentasikan parameter — dl adalah cara lainnya.
Komponen 67 (Tabel dengan Hovered): Variasi tabel dengan efek hover row — lebih interaktif.
Komponen 95 (Semua Table Modifier): Referensi lengkap semua kombinasi class modifier tabel yang tersedia.

Daftar Definisi / API Reference (dl, dt, dd)

Cara Elegan Mendokumentasikan Method dan Return Value

Kalau Komponen 25 (Tabel) cocok untuk data dengan banyak kolom, Definition List (dl) adalah cara yang lebih compact dan clean untuk mendokumentasikan API: nama object, method yang tersedia, dan return value-nya — semua dalam satu blok yang rapi.

Demo Langsung

<dl>
  <dt>namaObject</dt>
  <dd>.get(key) &#8658; <code>string | null</code></dd>
  <dd>.set(key, value) &#8658; <code>boolean</code></dd>
  <dd>.delete(key) &#8658; <code>void</code></dd>
  <dd>.set(key, value, [config]) &#8658; <code>string</code></dd>
</dl>

Hasilnya tampak seperti:

namaObject: .get(key) ⇒ string | null; .set(key, value) ⇒ boolean; .delete(key) ⇒ void; .set(key, value, [config]) ⇒ string

Simbol ⇒ adalah HTML entity untuk tanda panah ⇒ — standar di Han Haoyu Platform untuk menunjukkan return value dari sebuah method.

Relevansi Silang

Komponen 05 (Code Inline): Return type selalu dibungkus dengan code — string, boolean, void, dll.
Komponen 25 (Tabel): Tabel lebih cocok untuk parameter dengan banyak kolom (nama, tipe, default, keterangan). dl lebih compact untuk daftar method sederhana.
Komponen 28 (Tanda Panah Unicode): Entity ⇒ adalah standar platform — dipakai konsisten di semua API reference.
Komponen 30 (Heading H2 + H3 + H4 Bertingkat): Dokumentasi API lengkap menggunakan kombinasi: heading H3 untuk nama method, tabel untuk parameter, dl untuk overview semua method.

Teks Strong

Bold yang Punya Makna Semantik

Apa bedanya  dan ? Secara visual di browser, keduanya sama — teks tebal. Tapi secara semantik HTML5, keduanya berbeda:

 — Bold secara visual, tapi tanpa makna tambahan. "Ini dicetak tebal karena desain."
 — Tebal dengan penekanan kuat secara semantik. "Ini penting! Screen reader akan membacanya dengan penekanan."

Demo Langsung

<!-- Untuk penekanan semantik kuat -->
<strong>Informasi kritis yang benar-benar tidak boleh diabaikan</strong>

<!-- Dalam konteks kalimat -->
<p>Sebelum lanjut, <strong>pastikan kamu sudah backup semua data</strong> — proses berikutnya tidak bisa di-undo.</p>

Relevansi Silang

Komponen 09 (Note Warning): Strong sering dipakai di dalam note warning untuk penekanan tambahan pada bagian terpenting dari peringatan.
Komponen 53 (Paragraph pIndent & Drop Cap): Dalam penulisan artikel panjang bergaya majalah, strong dipakai untuk highlight kata-kata kunci di paragraf indented.

Tanda Panah / Simbol Unicode

Simbol Kecil yang Bikin Dokumentasi Terlihat Pro

Ada satu simbol yang hampir selalu muncul di setiap dokumentasi API di Han Haoyu Platform — tanda panah kanan ⇒ untuk menunjukkan return value. Ini bukan gambar, bukan emoji, tapi HTML entity Unicode yang ringan dan tampil konsisten di semua browser dan platform.

Demo Langsung

<!-- Tanda panah kanan — untuk return value -->
<p>Method ini &#8658; <code>string | null</code></p>

<!-- Hasil render: Method ini ⇒ string | null -->

<!-- Dipakai di dalam API reference -->
<dd>.getUser(id) &#8658; <code>object | null</code></dd>
<dd>.isLoggedIn() &#8658; <code>boolean</code></dd>
<dd>.logout() &#8658; <code>void</code></dd>

Entity ⇒ merender sebagai karakter ⇒ — panah ganda ke kanan yang secara universal dimengerti sebagai "menghasilkan" atau "return" dalam konteks kode.

Selain untuk return value, tanda panah juga digunakan dalam navigasi breadcrumb atau urutan langkah. Contoh: Settings > Advanced > API Keys menjadi Settings > Advanced > API Keys.

Relevansi Silang

Komponen 26 (API Reference): Entity panah ini adalah komponen standar dalam setiap dl/dd API reference.
Komponen 38 (Navigasi dengan Simbol Panah Teks): Untuk navigasi menu breadcrumb, pakai > (karakter >) yang lebih sesuai konteksnya.

Blok Kode dengan Komentar Output

Tunjukkan Hasilnya, Bukan Cuma Kodenya

Tutorial yang bagus bukan cuma kasih kode — tapi juga tunjukkan apa yang terjadi ketika kode itu dijalankan. Komponen 29 adalah variasi blok kode yang menyertakan komentar output hasil eksekusi, sehingga reader tau persis apa yang diharapkan tanpa harus jalankan kodenya dulu.

Demo Langsung

<pre><code>const result = cookie.getAll();
console.log(result);
// Output: { user: 'Han Haoyu', theme: 'dark', language: 'id' }</code></pre>

Pattern ini sangat berguna untuk:

Demonstrasi fungsi yang mengembalikan nilai
Menampilkan response API
Memvalidasi apakah instalasi berhasil
Tutorial debugging — tunjukkan output yang diharapkan vs yang error

<pre><code class='language-js'>// Cek status koneksi database
const status = db.ping();
console.log(status);
// Output jika berhasil: { connected: true, latency: 12, server: 'primary' }
// Output jika gagal:    { connected: false, error: 'Connection timeout' }
</code></pre>

Relevansi Silang

Komponen 06 (Blok Kode): Komponen 29 adalah variasi khusus blok kode — semua modifier (data-source, data-comment, class language) tetap berlaku.
Komponen 10 (Steps): Langkah verifikasi di tutorial hampir selalu pakai pola ini — "jalankan perintah ini, kalau outputnya begini berarti berhasil".
Komponen 07 (Mark di Kode): Kombinasikan — highlight nilai dalam output yang perlu diperhatikan reader dengan mark.

Heading H2 + H3 + H4 Bertingkat — Pola Dokumentasi Lengkap

Template Sakti yang Bikin Dokumentasi API Terlihat Profesional

Ini adalah "template" heading paling powerful di Han Haoyu Platform — kombinasi H2, H3, dan H4 yang disusun dalam hierarki terstruktur khusus untuk mendokumentasikan fitur atau API dengan lengkap. Kalau kamu pernah baca dokumentasi library seperti MDN atau libraries populer lainnya, pola ini pasti familiar.

Demo Langsung

<!-- H2: Nama fitur atau section utama -->
<h2>Nama Fitur Utama</h2>

<p>Deskripsi singkat tentang apa fitur ini dan kapan digunakannya.</p>

<!-- H3: Nama method spesifik dengan signature dan return type -->
<h3>Method namaMethod(param) &#8658; <code>returnType</code></h3>

<p>Penjelasan apa yang method ini lakukan secara singkat.</p>

<!-- H4: Detail parameter -->
<h4>Parameter yang Dibutuhkan</h4>

<div class='table sticky bordered stripped'>
  <table>
    <thead>
      <tr>
        <th>Parameter</th>
        <th>Tipe</th>
        <th>Keterangan</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>param1</code></td>
        <td><code>string</code></td>
        <td>Keterangan parameter pertama</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- H4: Return value -->
<h4>Return Value</h4>
<p>Mengembalikan <code>string</code> berisi <b>nama lengkap user</b> jika ditemukan, atau <code>null</code> jika tidak ada data.</p>

<!-- H4: Contoh penggunaan -->
<h4>Contoh Penggunaan</h4>
<pre><code class='language-js'>const userName = userAPI.getName('user_123');
console.log(userName);
// Output: 'Han Haoyu'
// Output (tidak ditemukan): null</code></pre>

Kenapa pola ini powerful? Karena strukturnya konsisten dan predictable. Reader yang baca satu dokumentasi API langsung tau cara baca dokumentasi API berikutnya — nggak perlu adaptasi lagi. Ini yang namanya UX documentation yang baik.

Relevansi Silang

Komponen 25 (Tabel): Tabel parameter adalah komponen inti dari pola H4 "Parameter yang Dibutuhkan".
Komponen 26 (API Reference dl): Kombinasikan H2 dengan dl untuk overview semua method, lalu H3+H4 untuk detail tiap method.
Komponen 28 (Tanda Panah Unicode): Return type di H3 selalu menggunakan ⇒ sebagai penanda.
Komponen 29 (Blok Kode dengan Output): H4 "Contoh Penggunaan" hampir selalu diisi blok kode dengan komentar output.
Komponen 32 (H2 dengan data-before): Untuk dokumentasi multi-method, tambahkan prefix penomoran di H2: "Metode 1:", "Metode 2:", dst.
Komponen 23 (TOC Otomatis): Dengan pola heading ini, TOC otomatis akan menghasilkan navigasi yang sangat terstruktur dan berguna.

Selesai! Kita Sudah Cover 30 Komponen Pertama 🎉

Bro, kalau kamu udah baca sampai sini — serius, salut banget. Itu bukan hal kecil. Kamu baru aja selesai menjelajahi 30 komponen pertama dari Encyclopedia of Components Han Haoyu Platform — dan yang lebih penting, kamu sekarang tau bukan cuma cara pakainya, tapi juga kenapa komponen itu ada, kapan paling tepat digunakan, dan bagaimana dia berinteraksi dengan komponen lain.

Itu bedanya dokumentasi yang bagus dengan yang biasa. Bukan cuma "ini kodenya, copy-paste aja" — tapi membangun pemahaman yang genuine tentang ekosistem platform.

Recap 30 Komponen Bagian 1:
01 SEO Snippet · 02 Read More Anchor · 03 Cover Gambar · 04 Link Eksternal · 05 Code Inline · 06 Blok Kode · 07 Mark di Kode · 08 Note Box · 09 Note Warning · 10 Steps · 11 SVG Icon · 12 Footer Copyright · 13 Figure + Caption · 14 Button · 15 HR Pemisah · 16 Heading H3 & H4 · 17-19 Download Box (3 versi) · 20 JS Config Block · 21 Script Module · 22 Thumbnail Tersembunyi · 23 TOC Otomatis · 24 Related Posts · 25 Tabel Data · 26 API Reference dl · 27 Strong · 28 Arrow Unicode · 29 Kode + Output · 30 Pola Heading Dokumentasi

Di Bagian 2 — The Ultimate Component Library, kita bakal lanjut ke 30 komponen berikutnya: Script IIFE, multi-tab code block, accordion, spoiler, gambar grid, scroll gallery, blockquote, alert box, dan masih banyak lagi. Level-nya naik, tapi penjelasannya tetap se-gampang ngobrol. Stay tuned!

Prefetch Manager

Switch Account (email)

Encyclopedia of Components: Dokumentasi Lengkap & Variasi Fitur Han Haoyu Platform (Bagian 1)

Selamat Datang di Encyclopedia of Components! 👋

SEO Snippet Tersembunyi

Kenalan Dulu Sama Si "Bisikan Rahasia" ke Google

Demo Langsung

Relevansi Silang

Anchor Read More (Blogger Jump Break)

Titik Potong yang Menentukan Nasib Homepage

Demo Langsung

Relevansi Silang

Gambar Cover Artikel

First Impression Itu Ditentukan dalam 50 Milidetik

Demo Langsung

Versi Standar (Separator Blogger)

Versi Figure + Caption (Lebih Semantik)

Relevansi Silang

Link Eksternal (extL)

Cara Nge-Link yang Aman, SEO-Friendly, dan Profesional

Demo Langsung

Versi Default

Semua Varian Style

Relevansi Silang

Teks Code Inline

Beda Nama Fungsi Sama Kalimat Biasa? Tandai!

Demo Langsung

Relevansi Silang

Blok Kode Panjang

Kode Multi-Baris Butuh Panggung Sendiri

Demo Langsung

Dasar: pre + code

Dengan Nama File (data-source)

Dengan Label Bahasa (data-comment)

Dengan Syntax Highlighting Eksplisit

Dengan Highlight Baris Tertentu (data-lines)

Contoh Kode dengan Komentar Output

Relevansi Silang

Highlight / Mark di Dalam Blok Kode

"Yang Ini Harus Kamu Ganti" — Tanpa Basa-Basi

Demo Langsung

Mark Standar di Dalam Kode

Semua Varian Mark

Relevansi Silang

Kotak Catatan Biasa (Note)

Rambu Lalu Lintas Konten Kamu

Demo Langsung

Relevansi Silang

Kotak Peringatan / Warning

Kalau Ini Diabaikan, Jangan Nangis Ya

Demo Langsung

Relevansi Silang

Daftar Langkah-Langkah (ol.steps)

Tanpa Urutan yang Jelas, Tutorial Itu Bukan Tutorial

Demo Langsung

Versi Dasar

Versi Kompleks — Steps dengan Blok Kode dan Note

Versi Unordered Steps (ul.steps)

Relevansi Silang

SVG Icon Inline

Ikon yang Load Cepat, Tampil Tajam, Tanpa Request Tambahan

Demo Langsung

Icon Panah Bawah (Inline di Teks)

Icon Save/Simpan

Variant: Inline-Block Wrapper (span)

Variant: Inline-Flex (Ikon + Teks Sejajar Sempurna)

Relevansi Silang

Footer Copyright Artikel

Tanda Tangan di Ujung Setiap Karya

Demo Langsung

Relevansi Silang

Gambar dengan Caption (Figure)

Gambar yang Bisa "Bicara" Sendiri

Demo Langsung

Relevansi Silang

Tombol / Button Link

CTA yang Nggak Bisa Di-Ignore

Demo Langsung

Cara Pakai Standar (Dengan Centering)

Semua Varian Button