HTML Dasar
Fitur Rahasia & Simbol

Fitur Rahasia & Simbol (HTML5 Gems) 💎

Banyak yang ngira HTML itu cuma buat nampilin teks diem. Salah besar. HTML5 punya fitur interaktif yang bikin lo gak perlu nyentuh JavaScript.

1. Accordion (Buka-Tutup) Tanpa JS 😲

Mau bikin halaman FAQ (Tanya Jawab) yang bisa diklik terus muncul jawabannya? Gak perlu React State isOpen / setIsOpen. Pake tag <details> dan <summary>.

<details>
  <summary>Apakah Pendaftaran Santri Masih Buka?</summary>
  <p>Masih dong! Pendaftaran buka sampai tanggal 30 Desember.</p>
</details>
 
<details>
  <summary>Berapa Biaya SPP?</summary>
  <p>Gratis buat yatim piatu. Bayar buat yang mampu.</p>
</details>
  • <details>: Wadah utamanya.

  • <summary>: Judul yang selalu kelihatan (bisa diklik).

  • Sisanya bakal tersembunyi dan cuma muncul kalau diklik. Magic! ✨

2. Progress Bar & Meter 📊

Mau nampilin Skill Bar atau Sisa Kuota Penyimpanan?

 
<label>Upload File:</label>
<progress value="70" max="100">70%</progress>
 
<label>Sisa Stok:</label>
<meter value="2" min="0" max="10">2 dari 10</meter>

3. HTML Entities (Simbol Aneh) 🔣

Di keyboard lo gak ada simbol Copyright, Euro, atau Spasi Keras. Kita pake kode khusus yang diawali & dan diakhiri ;.

KodeHasilNamaKapan Dipake?
©©CopyrightFooter web (© 2025).
 ( )Non-breaking SpaceBikin spasi yang "keras" biar teks gak turun baris.
<<Less ThanKalau lo mau nulis rumus matematika 5 < 10 biar gak dikira tag HTML.
>>Greater ThanKebalikannya.
&&AmpersandNulis "Tom & Jerry" (Resmi).
TrademarkBrand dagang.

4. Meta Tags (Biar Ganteng di WA) 📱

Pernah share link di WhatsApp terus muncul gambar thumbnail dan judul yang keren? Itu namanya Open Graph (OG Tags).

Kalau di HTML biasa ditaruh di <head>. Kalau di Next.js, kita atur di file layout.tsx atau page.tsx pake metadata.

Contoh Logic-nya:

 
<title>Pondok Pesantren Modern</title>
 
<meta name="description" content="Pondok terbaik di desa..." />
 
<meta property="og:title" content="Pondok Pesantren Modern" />
<meta property="og:description" content="Ayo mondok! Fasilitas lengkap, gratis WiFi." />
<meta property="og:image" content="[https://website-lo.com/foto-cover.jpg](https://website-lo.com/foto-cover.jpg)" />
🚀
Pro Tip: Jangan remehkan OG Image. Link yang ada gambarnya pas di-share di Grup WA Keluarga, kemungkinannya diklik 3x lebih besar daripada link polos.