Koleksi Lengkap Tag HTML Langka
📚 Koleksi Lengkap Tag HTML Langka
Dokumentasi ini berisi 75+ tag HTML yang jarang digunakan namun sangat berguna. Setiap tag dilengkapi dengan deskripsi, contoh kode, dan hasil preview.
<details> & <summary>
Membuat dropdown interaktif yang bisa dibuka/tutup.
Klik untuk membuka
Ini konten tersembunyi yang muncul saat dropdown dibuka.
Nested dropdown
Bisa dibuat bersarang!
<details>
<summary>Klik untuk membuka</summary>
<p>Ini konten tersembunyi...</p>
<details>
<summary>Nested dropdown</summary>
<p>Bisa dibuat bersarang!</p>
</details>
</details>
<dialog>
Membuat modal dialog native tanpa JavaScript.
<dialog id="demoDialog">
<p>Ini adalah dialog modal native!</p>
<form method="dialog">
<button>Tutup</button>
</form>
</dialog>
<button onclick="document.getElementById('demoDialog').showModal()">
Buka Dialog
</button>
<fieldset> & <legend>
Mengelompokkan elemen form dengan border dan judul.
<fieldset>
<legend>Data Pribadi</legend>
<label>Nama: <input type="text"></label><br>
<label>Email: <input type="email"></label>
</fieldset>
<ruby> & <rt>
Untuk anotasi teks Asia (seperti furigana di Jepang).
<ruby>
日本語 <rt>Nihongo</rt>
</ruby>
<mark>
Menandai teks seperti stabilo.
Ini adalah teks yang ditandai dengan marker.
<p>Ini adalah teks <mark>yang ditandai</mark> dengan marker.</p>
<ins> & <del>
Menandai teks yang disisipkan (insert) dan dihapus (delete).
Harga normal Rp 100.000 Rp 75.000
<p>Harga normal <del>Rp 100.000</del> <ins>Rp 75.000</ins></p>
<kbd>
Menampilkan input keyboard.
Tekan + untuk menyalin
<p>Tekan <kbd>Ctrl</kbd> + <kbd>C</kbd> untuk menyalin</p>
<samp>
Menampilkan sample output dari program.
Error: 404 Not Found
<p><samp>Error: 404 Not Found</samp></p>
<var>
Menandai variabel dalam matematika atau pemrograman.
x = y + 2
<p><var>x</var> = <var>y</var> + 2</p>
<abbr>
Menampilkan singkatan dengan tooltip.
HTML adalah bahasa markup.
<p><abbr title="HyperText Markup Language">HTML</abbr> adalah bahasa markup.</p>
<dfn>
Menandai istilah yang sedang didefinisikan.
CSS digunakan untuk styling.
<p><dfn title="Cascading Style Sheets">CSS</dfn> digunakan untuk styling.</p>
<cite>
Menandai judul karya (buku, film, dll).
Harry Potter karya J.K. Rowling
<p><cite>Harry Potter</cite> karya J.K. Rowling</p>
::
<meter>
Menampilkan pengukuran dalam bentuk gauge.
<meter value="0.7" min="0" max="1" low="0.3" high="0.8" optimum="0.5">
70% kapasitas
</meter>
<progress>
Menampilkan progress bar.
<progress value="70" max="100">70%</progress>
<output>
Menampilkan hasil kalkulasi.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50"> +
<input type="number" id="b" value="50"> =
<output name="result" for="a b">100</output>
</form>
<datalist>
Menyediakan opsi autocomplete untuk input.
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>
<label>Pilih browser: <input list="browsers"></label>
<data>
Menyimpan data machine-readable.
Produk A
<data value="12345">Produk A</data>
<time>
Menandai waktu dan tanggal.
<time datetime="2025-04-09">9 April 2025</time>
Input Type Langka
<label>Color: <input type="color"></label>
<label>Date: <input type="date"></label>
<label>Time: <input type="time"></label>
<!-- dst -->
<optgroup>
Mengelompokkan opsi dalam select.
<select>
<optgroup label="Jerman">
<option>BMW</option>
<option>Mercedes</option>
</optgroup>
<optgroup label="Jepang">
<option>Toyota</option>
<option>Honda</option>
</optgroup>
</select>
<iframe srcdoc>
Menyisipkan HTML langsung di iframe.
<iframe srcdoc='
<html>
<body style="background:#f0f0f0">
<h4>Inline HTML</h4>
<button onclick="alert("Hello!")">Klik</button>
</body>
</html>
' width="100%" height="120">
</iframe>
<embed>
Menyisipkan plugin eksternal.
<embed src="dummy.pdf" type="application/pdf" width="100%" height="150">
<object>
Menyisipkan objek eksternal dengan fallback.
<object data="dummy.pdf" type="application/pdf" width="100%" height="150">
<p>Fallback: <a href="dummy.pdf">Download PDF</a></p>
</object>
<canvas>
Menggambar grafis dengan JavaScript.
<canvas id="canvas" width="200" height="100"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#00DC82';
ctx.fillRect(10, 10, 50, 50);
</script>
<svg>
Menyisipkan grafis vektor.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="none" />
<text x="50" y="55" text-anchor="middle">SVG</text>
</svg>
<template>
Template yang tidak dirender sampai di-clone JavaScript.
Card Template
Konten dari template
<template id="cardTemplate">
<div class="card">
<h4>Card Template</h4>
<p>Konten dari template</p>
</div>
</template>
<button onclick="addCard()">Tambah Card</button>
<div id="cardContainer"></div>
<script>
function addCard() {
const template = document.getElementById('cardTemplate');
const clone = template.content.cloneNode(true);
document.getElementById('cardContainer').appendChild(clone);
}
</script>
<map> & <area>
Membuat area klik pada gambar.
<img src="image.jpg" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,100,150" alt="Computer" href="...">
<area shape="circle" coords="150,100,30" alt="Coffee" href="...">
</map>
contenteditable
Membuat elemen bisa diedit langsung.
<div contenteditable="true">
Klik dan edit teks ini!
</div>
draggable
Membuat elemen bisa di-drag.
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Dragged!')">
Drag aku!
</div>
spellcheck
Mengaktifkan pengecekan ejaan.
Cek ejaan kalimat ini (klik untuk edit)
<p spellcheck="true" contenteditable="true">
Cek ejaan kalimat ini
</p>
translate
Menentukan apakah konten boleh diterjemahkan.
Jangan terjemahkan teks ini!
<p translate="no">Jangan terjemahkan teks ini!</p>
inert
Membuat elemen tidak bisa diinteraksi.
Div ini inert — tidak bisa diklik!
<div inert>
<p>Div ini inert — tidak bisa diklik!</p>
<button>Tombol tidak berfungsi</button>
</div>
accesskey
Shortcut keyboard untuk elemen.
Tekan + untuk fokus ke link:
Home (Alt+H)<a href="#" accesskey="h">Home (Alt+H)</a>
tabindex
Mengatur urutan focus dengan Tab.
Tab ke-1
Tab ke-3
Tab ke-2
<p tabindex="1">Tab ke-1</p>
<p tabindex="3">Tab ke-3</p>
<p tabindex="2">Tab ke-2</p>
<marquee> (Jangan dipakai!)
<marquee behavior="alternate" scrollamount="5">
JANGAN PAKAI MARQUEE DI PRODUCTION!
</marquee>
<blink> (Jangan dipakai!)
<blink>Ini teks berkedip</blink>
<marquee>, <blink>, <command>, dan <menuitem> sudah obsolete/deprecated dan tidak boleh digunakan di website modern.::
📊 Ringkasan Tag
✅ Sangat Berguna
<details>, <summary>, <dialog>, <mark>, <kbd>, <meter>, <progress>, <datalist>, <template>
⚠️ Gunakan dengan Hati-hati
<ruby>, <ins>, <del>, <abbr>, <dfn>, <optgroup>, <iframe srcdoc>
❌ Jangan Dipakai
<marquee>, <blink>, <command>, <menuitem>, <isindex>, <keygen>
Praktik Terbaik, Debugging, dan Langkah Selanjutnya
Menulis HTML yang bersih, menemukan dan memperbaiki kesalahan, serta jalan setelah menguasai dasar.
CSS Documentation
Welcome to the CSS styling documentation for NLFTs. This guide will help you configure and style your application for our developer program.