HTML5 DOCS

DOKUMEN

<!DOCTYPE html>
Description: Deklarasi tipe dokumen HTML5.
Example: 
<!DOCTYPE html>
Output: Wajib di baris pertama
<html>
Description: Root element — pembungkus semua elemen HTML.
Example: 
<html lang="id">
Output: Bahasa Indonesia
<head>
Description: Metadata dokumen (tidak terlihat user).
Example: 
<head>...</head>
Output: Metadata
<body>
Description: Konten yang terlihat user.
Example: 
<body>...</body>
Output: Konten halaman

METADATA

<title>
Description: Judul halaman (tab browser).
Example: 
<title>Halaman Saya</title>
Output: Judul tab
<meta charset>
Description: Encoding karakter.
Example: 
<meta charset="UTF-8">
Output: UTF-8
<meta name="viewport">
Description: Viewport untuk responsif.
Example: 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Output: Responsif
<meta name="description">
Description: Deskripsi halaman (SEO).
Example: 
<meta name="description" content="Belajar HTML5">
Output: Deskripsi SEO
<meta name="keywords">
Description: Kata kunci (SEO — sudah jarang dipakai).
Example: 
<meta name="keywords" content="html, css, js">
Output: Keywords
<meta name="author">
Description: Penulis halaman.
Example: 
<meta name="author" content="Ridho">
Output: Author
<meta name="robots">
Description: Atur indexing (index, noindex, follow, nofollow).
Example: 
<meta name="robots" content="index, follow">
Output: Index & follow
<meta http-equiv="refresh">
Description: Refresh/redirect halaman.
Example: 
<meta http-equiv="refresh" content="5; url=/new">
Output: Redirect 5 detik
<meta name="theme-color">
Description: Warna tema browser mobile.
Example: 
<meta name="theme-color" content="#6c5ce7">
Output: Ungu
<link>
Description: Hubungkan resource eksternal (CSS, favicon, dll).
Example: 
<link rel="stylesheet" href="style.css">
Output: CSS
<link rel="icon">
Description: Favicon.
Example: 
<link rel="icon" href="favicon.ico">
Output: Favicon
<link rel="preload">
Description: Preload resource penting.
Example: 
<link rel="preload" href="font.woff2" as="font" crossorigin>
Output: Preload font
<link rel="preconnect">
Description: Preconnect ke origin.
Example: 
<link rel="preconnect" href="https://api.example.com">
Output: Preconnect
<link rel="dns-prefetch">
Description: DNS prefetch.
Example: 
<link rel="dns-prefetch" href="https://cdn.example.com">
Output: DNS prefetch
<style>
Description: CSS internal.
Example: 
<style> body { margin: 0; } </style>
Output: CSS di HTML
<script>
Description: JavaScript internal atau external.
Example: 
<script src="app.js" defer></script>
Output: JS
<noscript>
Description: Konten jika JS dinonaktifkan.
Example: 
<noscript>JS diperlukan</noscript>
Output: Fallback
<base>
Description: URL dasar untuk semua link relatif.
Example: 
<base href="https://example.com/">
Output: Base URL

HEADING

<h1>
Description: Heading level 1 — paling penting (SEO).
Example: 
<h1>Judul Utama</h1>
Output: Heading 1
<h2>
Description: Heading level 2 — sub-judul.
Example: 
<h2>Sub Judul</h2>
Output: Heading 2
<h3>
Description: Heading level 3.
Example: 
<h3>Bagian</h3>
Output: Heading 3
<h4>
Description: Heading level 4.
Example: 
<h4>Sub Bagian</h4>
Output: Heading 4
<h5>
Description: Heading level 5.
Example: 
<h5>Detail</h5>
Output: Heading 5
<h6>
Description: Heading level 6 — paling rendah.
Example: 
<h6>Sub Detail</h6>
Output: Heading 6

TEKS

<p>
Description: Paragraf.
Example: 
<p>Ini paragraf.</p>
Output: Paragraf
<span>
Description: Inline container — tanpa makna semantik.
Example: 
<span class="highlight">teks</span>
Output: Inline
<div>
Description: Block container — tanpa makna semantik.
Example: 
<div class="wrapper">...</div>
Output: Block
<br>
Description: Baris baru (line break).
Example: 
Baris 1<br>Baris 2
Output: Baris baru
<hr>
Description: Garis horizontal (thematic break).
Example: 
<hr>
Output: Garis
<wbr>
Description: Titik potong kata opsional.
Example: 
super<wbr>panjang
Output: Potong jika perlu
<pre>
Description: Preformatted text — mempertahankan spasi & baris.
Example: 
<pre>  spasi  
baris</pre>
Output: Preserved
<blockquote>
Description: Kutipan panjang.
Example: 
<blockquote cite="url">Kutipan</blockquote>
Output: Kutipan
<q>
Description: Kutipan pendek inline.
Example: 
<q>Kata bijak</q>
Output: "Kutipan"
<cite>
Description: Judul karya (buku, film, dll).
Example: 
<cite>Harry Potter</cite>
Output: Miring
<abbr>
Description: Singkatan dengan tooltip.
Example: 
<abbr title="HyperText Markup Language">HTML</abbr>
Output: HTML
<address>
Description: Informasi kontak.
Example: 
<address>ridho@email.com</address>
Output: Kontak
<bdo>
Description: Override arah teks.
Example: 
<bdo dir="rtl">terbalik</bdo>
Output: kilabret
<bdi>
Description: Isolasi arah teks (untuk teks RTL).
Example: 
<bdi>اسم</bdi>
Output: Isolasi

FORMAT-TEKS

<b>
Description: Teks tebal (tanpa makna penting).
Example: 
<b>Tebal</b>
Output: **Tebal**
<strong>
Description: Teks penting / serius (semantik).
Example: 
<strong>Penting!</strong>
Output: Penting (SEO)
<i>
Description: Teks miring (tanpa makna).
Example: 
<i>Miring</i>
Output: *Miring*
<em>
Description: Teks ditekankan (semantik).
Example: 
<em>Penekanan</em>
Output: Penekanan (SEO)
<u>
Description: Garis bawah.
Example: 
<u>Underline</u>
Output: Garis bawah
<s>
Description: Teks dicoret (tidak relevan).
Example: 
<s>Harga lama Rp100k</s>
Output: Coret
<del>
Description: Teks dihapus (semantik).
Example: 
<del>Dihapus</del>
Output: Dihapus
<ins>
Description: Teks ditambahkan (semantik).
Example: 
<ins>Ditambahkan</ins>
Output: Garis bawah
<mark>
Description: Teks ditandai / highlight.
Example: 
<mark>Highlight</mark>
Output: Kuning
<small>
Description: Teks kecil (catatan, legal).
Example: 
<small>© 2025</small>
Output: Kecil
<sub>
Description: Subscript — di bawah garis.
Example: 
H<sub>2</sub>O
Output: H₂O
<sup>
Description: Superscript — di atas garis.
Example: 
x<sup>2</sup>
Output: x²
<code>
Description: Potongan kode.
Example: 
<code>console.log()</code>
Output: Monospace
<kbd>
Description: Input keyboard.
Example: 
<kbd>Ctrl</kbd> + <kbd>C</kbd>
Output: Keyboard
<samp>
Description: Output program.
Example: 
<samp>Error 404</samp>
Output: Monospace
<var>
Description: Variabel matematika/programming.
Example: 
<var>x</var> = 10
Output: Miring
<time>
Description: Waktu / tanggal (semantik, SEO).
Example: 
<time datetime="2025-06-27">27 Juni 2025</time>
Output: 27 Juni 2025
<data>
Description: Data dengan nilai mesin-readable.
Example: 
<data value="100">Seratus</data>
Output: Seratus
<ruby>
Description: Anotasi ruby (Asia Timur).
Example: 
<ruby>漢字<rt>kanji</rt></ruby>
Output: Kanji + furigana
<rt>
Description: Teks ruby (pronunciation).
Example: 
<ruby>漢<rt>kan</rt></ruby>
Output: Di atas karakter
<rp>
Description: Fallback parentheses untuk ruby.
Example: 
<ruby>漢<rp>(</rp><rt>kan</rt><rp>)</rp></ruby>
Output: Fallback

LINK

<a>
Description: Hyperlink.
Example: 
<a href="https://example.com">Link</a>
Output: Link biru
<a target="_blank">
Description: Buka di tab baru.
Example: 
<a href="url" target="_blank" rel="noopener noreferrer">Tab Baru</a>
Output: Tab baru (aman)
<a href="#id">
Description: Anchor link — lompat ke elemen.
Example: 
<a href="#section2">Ke Section 2</a>
Output: Scroll
<a href="mailto:">
Description: Link email.
Example: 
<a href="mailto:hi@example.com">Kirim Email</a>
Output: Buka mail client
<a href="tel:">
Description: Link telepon.
Example: 
<a href="tel:+628123456789">Call</a>
Output: Buka dialer
<a download>
Description: Download file.
Example: 
<a href="file.pdf" download>Download</a>
Output: Download
<nav>
Description: Navigasi utama.
Example: 
<nav><a href="/">Home</a></nav>
Output: Navigasi

LIST

<ul>
Description: Unordered list — bullet.
Example: 
<ul><li>Item</li></ul>
Output: • Item
<ol>
Description: Ordered list — nomor.
Example: 
<ol><li>Pertama</li></ol>
Output: 1. Pertama
<ol start>
Description: Mulai dari angka tertentu.
Example: 
<ol start="5"><li>Lima</li></ol>
Output: 5. Lima
<ol reversed>
Description: Urutan terbalik.
Example: 
<ol reversed><li>A</li><li>B</li></ol>
Output: 2. B, 1. A
<ol type>
Description: Tipe penomoran (1, A, a, I, i).
Example: 
<ol type="A"><li>Item</li></ol>
Output: A. Item
<li>
Description: Item list.
Example: 
<li>Item 1</li>
Output: • Item 1
<li value>
Description: Override nomor item.
Example: 
<li value="10">Kesepuluh</li>
Output: 10. Kesepuluh
<dl>
Description: Description list.
Example: 
<dl><dt>HTML</dt><dd>HyperText Markup Language</dd></dl>
Output: HTML: HyperText...
<dt>
Description: Term dalam description list.
Example: 
<dt>CSS</dt>
Output: CSS
<dd>
Description: Deskripsi dalam description list.
Example: 
<dd>Cascading Style Sheets</dd>
Output: Cascading...

TABEL

<table>
Description: Tabel.
Example: 
<table>...</table>
Output: Tabel
<caption>
Description: Judul tabel (aksesibilitas).
Example: 
<caption>Data User</caption>
Output: Judul di atas
<thead>
Description: Header tabel.
Example: 
<thead><tr><th>Nama</th></tr></thead>
Output: Header
<tbody>
Description: Body tabel.
Example: 
<tbody><tr><td>Ridho</td></tr></tbody>
Output: Body
<tfoot>
Description: Footer tabel.
Example: 
<tfoot><tr><td>Total</td></tr></tfoot>
Output: Footer
<tr>
Description: Baris tabel.
Example: 
<tr>...</tr>
Output: Baris
<th>
Description: Header cell.
Example: 
<th scope="col">Nama</th>
Output: Header cell
<td>
Description: Data cell.
Example: 
<td>Ridho</td>
Output: Data cell
<td colspan>
Description: Merge kolom.
Example: 
<td colspan="2">Gabung 2 kolom</td>
Output: Merge horizontal
<td rowspan>
Description: Merge baris.
Example: 
<td rowspan="2">Gabung 2 baris</td>
Output: Merge vertikal
<colgroup>
Description: Group kolom untuk styling.
Example: 
<colgroup><col span="2" class="highlight"></colgroup>
Output: Styling kolom
<col>
Description: Definisi kolom dalam colgroup.
Example: 
<col style="background: #eee">
Output: Style kolom

GAMBAR-MEDIA

<img>
Description: Gambar.
Example: 
<img src="foto.jpg" alt="Deskripsi" width="300" height="200">
Output: Gambar
<img loading="lazy">
Description: Lazy load gambar.
Example: 
<img src="foto.jpg" loading="lazy" alt="...">
Output: Lazy load
<img srcset>
Description: Responsive images — berbagai resolusi.
Example: 
<img src="small.jpg" srcset="large.jpg 1200w, medium.jpg 800w" sizes="100vw" alt="...">
Output: Responsif
<figure>
Description: Konten mandiri (gambar + caption).
Example: 
<figure><img src="foto.jpg" alt="..."><figcaption>Caption</figcaption></figure>
Output: Gambar + caption
<figcaption>
Description: Caption untuk figure.
Example: 
<figcaption>Foto 1</figcaption>
Output: Caption
<picture>
Description: Art direction — ganti gambar per kondisi.
Example: 
<picture><source srcset="large.webp" media="(min-width: 768px)"><img src="small.jpg" alt="..."></picture>
Output: Kondisional
<source>
Description: Sumber media untuk picture/video/audio.
Example: 
<source srcset="image.webp" type="image/webp">
Output: Sumber
<video>
Description: Video player.
Example: 
<video src="video.mp4" controls width="400"></video>
Output: Video
<video controls>
Description: Tampilkan kontrol play/pause.
Example: 
<video src="v.mp4" controls></video>
Output: Kontrol
<video autoplay muted loop>
Description: Autoplay (harus muted).
Example: 
<video src="bg.mp4" autoplay muted loop playsinline></video>
Output: Background video
<video poster>
Description: Thumbnail sebelum play.
Example: 
<video src="v.mp4" poster="thumb.jpg"></video>
Output: Thumbnail
<audio>
Description: Audio player.
Example: 
<audio src="lagu.mp3" controls></audio>
Output: Audio
<track>
Description: Subtitle/caption untuk video/audio.
Example: 
<track src="sub.vtt" kind="subtitles" srclang="id" label="Indonesia">
Output: Subtitle
<map>
Description: Image map — area yang bisa diklik.
Example: 
<map name="map"><area shape="rect" coords="0,0,100,100" href="page.html"></map>
Output: Area klik
<area>
Description: Area dalam image map.
Example: 
<area shape="circle" coords="50,50,30" href="page.html" alt="...">
Output: Area
<svg>
Description: Vector graphics inline.
Example: 
<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="red"/></svg>
Output: Lingkaran merah
<canvas>
Description: Canvas untuk menggambar (JS).
Example: 
<canvas id="myCanvas" width="200" height="100"></canvas>
Output: Canvas

FORM

<form>
Description: Formulir.
Example: 
<form action="/submit" method="POST">...</form>
Output: Form
<form novalidate>
Description: Matikan validasi browser.
Example: 
<form novalidate>...</form>
Output: Tanpa validasi
<form autocomplete>
Description: Autocomplete on/off.
Example: 
<form autocomplete="off">...</form>
Output: No autocomplete
<input>
Description: Input field (type: text, password, email, dll).
Example: 
<input type="text" name="username" placeholder="Nama" required>
Output: Input teks
input type="text"
Description: Teks satu baris.
Example: 
<input type="text" value="Ridho">
Output: Input teks
input type="password"
Description: Input password (tersembunyi).
Example: 
<input type="password" name="pass">
Output: ••••••
input type="email"
Description: Input email + validasi otomatis.
Example: 
<input type="email" placeholder="email@example.com">
Output: Email
input type="number"
Description: Input angka.
Example: 
<input type="number" min="0" max="100" step="5">
Output: Angka
input type="tel"
Description: Input telepon.
Example: 
<input type="tel" pattern="[0-9]{10,13}">
Output: Telepon
input type="url"
Description: Input URL.
Example: 
<input type="url" placeholder="https://">
Output: URL
input type="search"
Description: Input pencarian (ada tombol clear).
Example: 
<input type="search" placeholder="Cari...">
Output: Search
input type="date"
Description: Date picker.
Example: 
<input type="date" min="2025-01-01" max="2025-12-31">
Output: Tanggal
input type="time"
Description: Time picker.
Example: 
<input type="time">
Output: Jam
input type="datetime-local"
Description: Tanggal + jam.
Example: 
<input type="datetime-local">
Output: Tanggal & jam
input type="month"
Description: Month picker.
Example: 
<input type="month">
Output: Bulan
input type="week"
Description: Week picker.
Example: 
<input type="week">
Output: Minggu
input type="color"
Description: Color picker.
Example: 
<input type="color" value="#6c5ce7">
Output: Warna
input type="file"
Description: Upload file.
Example: 
<input type="file" accept=".jpg,.png" multiple>
Output: Upload
input type="range"
Description: Slider.
Example: 
<input type="range" min="0" max="100" value="50">
Output: Slider
input type="checkbox"
Description: Checkbox (multi-select).
Example: 
<input type="checkbox" checked> Setuju
Output: ☑ Setuju
input type="radio"
Description: Radio button (single-select).
Example: 
<input type="radio" name="gender" value="male"> Laki
Output: ◉ Pilihan
input type="hidden"
Description: Tersembunyi — kirim data tanpa terlihat.
Example: 
<input type="hidden" name="token" value="abc123">
Output: Hidden
input type="submit"
Description: Tombol submit form.
Example: 
<input type="submit" value="Kirim">
Output: Kirim
input type="reset"
Description: Tombol reset form.
Example: 
<input type="reset" value="Batal">
Output: Batal
input type="button"
Description: Tombol biasa.
Example: 
<input type="button" value="Klik">
Output: Klik
input type="image"
Description: Gambar sebagai tombol submit.
Example: 
<input type="image" src="submit.png" alt="Kirim">
Output: Tombol gambar
<textarea>
Description: Input teks multi-baris.
Example: 
<textarea rows="4" cols="50" placeholder="Tulis..."></textarea>
Output: Textarea
<select>
Description: Dropdown.
Example: 
<select name="kota"><option>Jakarta</option></select>
Output: Dropdown
<optgroup>
Description: Group opsi dalam select.
Example: 
<optgroup label="Indonesia"><option>Jakarta</option></optgroup>
Output: Group
<option>
Description: Opsi dalam select/datalist.
Example: 
<option value="jkt" selected>Jakarta</option>
Output: Opsi
<datalist>
Description: Saran autocomplete untuk input.
Example: 
<input list="kota"><datalist id="kota"><option value="Jakarta"></datalist>
Output: Autocomplete
<fieldset>
Description: Group elemen form.
Example: 
<fieldset><legend>Alamat</legend>...</fieldset>
Output: Kotak
<legend>
Description: Judul fieldset.
Example: 
<legend>Data Diri</legend>
Output: Judul
<label>
Description: Label untuk input (aksesibilitas).
Example: 
<label for="nama">Nama:</label><input id="nama">
Output: Label
<button>
Description: Tombol.
Example: 
<button type="submit">Kirim</button>
Output: Tombol
button type="button"
Description: Tombol biasa (tidak submit).
Example: 
<button type="button" onclick="...">Klik</button>
Output: Tombol
button type="reset"
Description: Tombol reset.
Example: 
<button type="reset">Reset</button>
Output: Reset
<output>
Description: Tampilkan hasil kalkulasi.
Example: 
<output name="hasil">0</output>
Output: Hasil
<progress>
Description: Progress bar.
Example: 
<progress value="70" max="100">70%</progress>
Output: Progress 70%
<meter>
Description: Pengukuran (disk usage, rating).
Example: 
<meter value="0.8" min="0" max="1">80%</meter>
Output: 80%

SEMANTIK

<header>
Description: Kepala halaman / section.
Example: 
<header><h1>Logo</h1><nav>...</nav></header>
Output: Header
<footer>
Description: Kaki halaman / section.
Example: 
<footer><p>© 2025</p></footer>
Output: Footer
<main>
Description: Konten utama halaman (hanya 1 per halaman).
Example: 
<main>...</main>
Output: Main
<section>
Description: Bagian tematik.
Example: 
<section><h2>Berita</h2>...</section>
Output: Section
<article>
Description: Konten mandiri (bisa berdiri sendiri).
Example: 
<article><h2>Judul Artikel</h2><p>...</p></article>
Output: Artikel
<aside>
Description: Konten sampingan (sidebar, iklan).
Example: 
<aside>Sidebar</aside>
Output: Aside
<details>
Description: Widget expand/collapse.
Example: 
<details><summary>Klik</summary><p>Isi tersembunyi</p></details>
Output: Accordion
<summary>
Description: Judul untuk details.
Example: 
<summary>Lihat Detail</summary>
Output: Judul accordion
<dialog>
Description: Dialog modal (popup).
Example: 
<dialog open><p>Modal</p><button onclick="this.parentElement.close()">Tutup</button></dialog>
Output: Modal
<search>
Description: Area pencarian (HTML5 terbaru).
Example: 
<search><form><input type="search"></form></search>
Output: Search area

EMBED

<iframe>
Description: Embed halaman lain.
Example: 
<iframe src="https://example.com" width="600" height="400" sandbox allowfullscreen></iframe>
Output: Frame
<iframe sandbox>
Description: Batasi kemampuan iframe (aman).
Example: 
<iframe src="url" sandbox="allow-scripts"></iframe>
Output: Sandbox
<iframe loading="lazy">
Description: Lazy load iframe.
Example: 
<iframe src="url" loading="lazy"></iframe>
Output: Lazy
<embed>
Description: Embed plugin/eksternal (PDF, Flash).
Example: 
<embed src="file.pdf" type="application/pdf" width="600" height="400">
Output: PDF
<object>
Description: Embed multimedia/plugin.
Example: 
<object data="file.pdf" type="application/pdf" width="600" height="400"></object>
Output: PDF
<param>
Description: Parameter untuk object.
Example: 
<param name="autoplay" value="true">
Output: Parameter
<portal>
Description: Preview halaman lain (eksperimental).
Example: 
<portal src="https://example.com"></portal>
Output: Preview

INTERAKTIF

<template>
Description: Template HTML (tidak dirender).
Example: 
<template id="row"><tr><td></td></tr></template>
Output: Template (JS)
<slot>
Description: Slot untuk Web Components.
Example: 
<slot name="header">Default</slot>
Output: Slot
contenteditable
Description: Atribut global — buat elemen bisa diedit.
Example: 
<div contenteditable="true">Edit aku</div>
Output: Bisa diedit
draggable
Description: Atribut global — elemen bisa di-drag.
Example: 
<div draggable="true">Drag</div>
Output: Bisa drag
hidden
Description: Atribut global — sembunyikan elemen.
Example: 
<p hidden>Tidak terlihat</p>
Output: Tersembunyi
spellcheck
Description: Periksa ejaan.
Example: 
<textarea spellcheck="true"></textarea>
Output: Spellcheck
tabindex
Description: Urutan tab (aksesibilitas).
Example: 
<button tabindex="1">Pertama</button>
Output: Tab order
accesskey
Description: Shortcut keyboard.
Example: 
<button accesskey="s">Save (Alt+S)</button>
Output: Shortcut
title
Description: Tooltip saat hover.
Example: 
<p title="Informasi tambahan">Hover aku</p>
Output: Tooltip
lang
Description: Bahasa elemen.
Example: 
<p lang="en">Hello</p>
Output: English
dir
Description: Arah teks (ltr, rtl, auto).
Example: 
<p dir="rtl">Arab</p>
Output: Kanan ke kiri
data-*
Description: Custom data attribute.
Example: 
<div data-user-id="123" data-role="admin">Data</div>
Output: Custom data

MICRODATA

itemscope
Description: Root microdata.
Example: 
<div itemscope itemtype="https://schema.org/Person">
Output: Schema
itemtype
Description: Tipe schema.
Example: 
itemtype="https://schema.org/Product"
Output: Product
itemprop
Description: Properti schema.
Example: 
<span itemprop="name">Ridho</span>
Output: Nama
itemid
Description: ID global schema.
Example: 
itemid="#product-1"
Output: ID
itemref
Description: Referensi elemen lain.
Example: 
itemref="detail"
Output: Referensi

OBSOLETE

<marquee>
Description: Teks berjalan (DEPRECATED).
Example: 
<marquee>Jangan dipakai</marquee>
Output: ⚠️ Deprecated
<center>
Description: Tengah (DEPRECATED — pakai CSS).
Example: 
<center>Teks tengah</center>
Output: ⚠️ Deprecated
<font>
Description: Font styling (DEPRECATED — pakai CSS).
Example: 
<font color="red">Merah</font>
Output: ⚠️ Deprecated
<big>
Description: Teks besar (DEPRECATED).
Example: 
<big>Besar</big>
Output: ⚠️ Deprecated
<tt>
Description: Teletype (DEPRECATED).
Example: 
<tt>Monospace</tt>
Output: ⚠️ Deprecated
<strike>
Description: Coret (DEPRECATED — pakai <s> atau <del>).
Example: 
<strike>Coret</strike>
Output: ⚠️ Deprecated
<frame>
Description: Frame (DEPRECATED).
Example: 
<frame src="url">
Output: ⚠️ Deprecated
<frameset>
Description: Frameset (DEPRECATED).
Example: 
<frameset cols="50%,50%">
Output: ⚠️ Deprecated
<noframes>
Description: No frames (DEPRECATED).
Example: 
<noframes>Browser tidak support</noframes>
Output: ⚠️ Deprecated
<applet>
Description: Java applet (DEPRECATED).
Example: 
<applet code="App.class"></applet>
Output: ⚠️ Deprecated
<bgsound>
Description: Background sound (DEPRECATED).
Example: 
<bgsound src="music.mid">
Output: ⚠️ Deprecated
<blink>
Description: Teks berkedip (DEPRECATED).
Example: 
<blink>Kedip</blink>
Output: ⚠️ Deprecated
<keygen>
Description: Key pair generator (DEPRECATED).
Example: 
<keygen name="key">
Output: ⚠️ Deprecated
<command>
Description: Perintah menu (DEPRECATED).
Example: 
<command type="command">Run</command>
Output: ⚠️ Deprecated
<menu>
Description: Menu (sekarang hanya untuk toolbar).
Example: 
<menu><li><button>Copy</button></li></menu>
Output: ⚠️ Semantik berubah

ATRIBUT-GLOBAL

id
Description: Identifier unik elemen.
Example: 
<div id="header">
Output: #header
class
Description: Kelas CSS.
Example: 
<div class="card active">
Output: .card.active
style
Description: Inline CSS.
Example: 
<div style="color: red;">
Output: Merah
title
Description: Tooltip.
Example: 
<p title="Info">Hover</p>
Output: Tooltip
lang
Description: Bahasa.
Example: 
<html lang="id">
Output: id
dir
Description: Arah teks (ltr, rtl, auto).
Example: 
<p dir="rtl">
Output: RTL
hidden
Description: Sembunyikan.
Example: 
<div hidden>
Output: Hidden
tabindex
Description: Urutan fokus.
Example: 
<button tabindex="0">
Output: Fokus
accesskey
Description: Shortcut.
Example: 
<button accesskey="s">
Output: Alt+S
contenteditable
Description: Bisa diedit.
Example: 
<div contenteditable="true">
Output: Editable
draggable
Description: Bisa drag.
Example: 
<div draggable="true">
Output: Drag
spellcheck
Description: Cek ejaan.
Example: 
<textarea spellcheck="true">
Output: Spellcheck
translate
Description: Boleh diterjemahkan? (yes, no).
Example: 
<span translate="no">Brand Name</span>
Output: Tidak diterjemahkan
enterkeyhint
Description: Label tombol enter di keyboard mobile.
Example: 
<input enterkeyhint="search">
Output: Search
inputmode
Description: Jenis keyboard virtual.
Example: 
<input inputmode="numeric">
Output: Keyboard angka
role
Description: Aksesibilitas — ARIA role.
Example: 
<div role="button">
Output: Button
aria-*
Description: Atribut aksesibilitas (ARIA).
Example: 
<button aria-label="Tutup" aria-expanded="false">X</button>
Output: Aksesibilitas
data-*
Description: Custom data attribute.
Example: 
<div data-id="123">
Output: dataset.id
slot
Description: Slot Web Components.
Example: 
<span slot="header">
Output: Slot
part
Description: Shadow DOM part untuk styling.
Example: 
<div part="container">
Output: ::part(container)
exportparts
Description: Export shadow parts.
Example: 
<div exportparts="btn">
Output: Export part
inert
Description: Non-interaktif (aksesibilitas).
Example: 
<div inert>
Output: Inert
popover
Description: Popover native (baru!).
Example: 
<div popover>Konten popover</div>
Output: Popover
nonce
Description: CSP nonce untuk keamanan.
Example: 
<script nonce="random123">
Output: CSP
autofocus
Description: Fokus otomatis saat load.
Example: 
<input autofocus>
Output: Auto fokus