Referensi lengkap HTML5. Semantic elements, forms, media, APIs, dan fitur modern lainnya. Dari basic sampe advanced.
Struktur dasar HTML yang diperlukan untuk membuat halaman web yang valid dan responsive.
Template HTML5 dasar yang lengkap dengan semua elemen penting untuk memulai website.
<!DOCTYPE html>
<html lang="id">
<head>
<
Tag meta yang penting untuk SEO, social media sharing, dan konfigurasi browser.
<!-- Character set -->
<meta charset="UTF-8">
<!-- Viewport untuk responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Description untuk SEO -->
Elemen HTML5 yang memiliki makna semantik untuk meningkatkan struktur dan aksesibilitas website.
Elemen semantic untuk struktur layout yang lebih bermakna dan SEO-friendly.
<!-- Header website -->
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li
Elemen untuk mengelompokkan gambar dengan caption yang sesuai.
<figure>
<img src="image.jpg" alt="Deskripsi gambar">
<figcaption>Caption gambar di sini</figcaption>
</figure>Elemen untuk membuat collapsible content (expandable/collapsible).
<details>
<summary>Klik buat expand</summary>
<p>Content yang di-hidden, muncul kalau di-klik</p>
</details>Elemen-elemen HTML untuk menampilkan teks dengan berbagai format dan styling.
Elemen heading untuk struktur hierarki konten dengan ukuran yang berbeda.
<h1>Heading 1 - Paling besar</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6 - Paling kecil</h6Elemen untuk paragraf dan berbagai jenis teks seperti blockquote dan preformatted text.
<!-- Paragraph -->
<p>Ini adalah paragraf biasa</p>
<!-- Line break -->
<p>Baris pertama<br>Baris kedua</p>
<!-- Horizontal rule -->
<hr>
<!-- Preformatted text -->
<pre>
Text dengan spacing
Elemen untuk memformat teks seperti bold, italic, underline, dan lainnya.
<!-- Bold -->
<strong>Text penting (bold)</strong>
<b>Text bold (visual aja)</b>
<!-- Italic -->
<em>Text emphasis (italic)</em>
<i>Text italic (visual aja)</i
Elemen untuk hyperlink dan gambar dengan berbagai fitur modern.
Elemen anchor untuk membuat berbagai jenis link dengan behavior yang berbeda.
<!-- Link biasa -->
<a href="https://example.com">Visit Example</a>
<!-- Open di tab baru -->
<a href="https://example.com" target="_blank">Open in new tab</a>
Elemen gambar dengan berbagai atribut untuk responsive dan performance.
<!-- Image biasa -->
<img src="image.jpg" alt="Deskripsi gambar">
<!-- Image dengan width/height -->
<img src="image.jpg" alt="Deskripsi" width="300"
Elemen untuk membuat berbagai jenis daftar (list) seperti unordered, ordered, dan description list.
Daftar dengan bullet points untuk item yang tidak berurutan.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Daftar dengan nomor untuk item yang berurutan atau memiliki urutan penting.
<ol>
<li>Langkah 1</li>
<li>Langkah 2</li>
<li>Langkah 3</li>
</ol>
<!-- Start dari nomor tertentu -->
<ol start="5"
Daftar untuk istilah dan definisi, seperti kamus atau glossary.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>Elemen untuk membuat tabel dengan data terstruktur.
Tabel sederhana dengan header, body, dan footer.
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<
Tabel dengan sel yang bisa merge (span) ke beberapa kolom atau baris.
<table>
<tr>
<td colspan="2">Span 2 kolom</td>
</tr>
<tr>
<td rowspan="2">Span 2 baris</td>
<
Elemen untuk membuat form interaktif dengan berbagai jenis input dan validasi.
Form sederhana dengan berbagai jenis input dan tombol submit.
<form action="/submit" method="POST">
<!-- Text input -->
<label for="name">Nama:</label>
<input type="text" id=
Berbagai jenis input HTML5 untuk data yang berbeda seperti email, number, date, dll.
<!-- Text -->
<input type="text" placeholder="Text biasa">
<!-- Email -->
<input type
Textarea untuk teks panjang dan select/dropdown untuk memilih dari pilihan.
<!-- Textarea -->
<textarea rows="5" cols="30" placeholder="Tulis sesuatu..."></textarea>
<!-- Select/Dropdown -->
<select name=
Datalist untuk memberikan autocomplete suggestions pada input text.
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option
Validasi form menggunakan atribut HTML5 tanpa JavaScript.
<!-- Required -->
<input type="text" required>
<!-- Pattern -->
<input type="text" pattern="[A-Za-z]{3,}" title="Min 3 huruf">
<!-- Min/Max length -->
<
Fieldset untuk mengelompokkan form fields dan legend sebagai label untuk grup.
<form>
<fieldset>
<legend>Personal Info</legend>
<input type="text" name="name" placeholder="Nama">
<input type
Elemen untuk menampilkan audio, video, dan embed content lainnya.
Elemen audio untuk memutar file suara dengan berbagai kontrol.
<!-- Audio player -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Browser kamu gak support audio.
</audio>
Elemen video untuk memutar file video dengan kontrol dan atribut khusus.
<!-- Video player -->
<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type
Iframe untuk embed konten dari website lain seperti YouTube atau Google Maps.
<!-- Embed website lain -->
<iframe src="https://example.com" width="600" height="400"></iframe>
<!-- YouTube embed -->
<iframe
width="560"
height="315"
Elemen HTML5 yang menambahkan interaktivitas tanpa JavaScript.
Elemen dialog untuk modal dan popup yang native.
<dialog id="myDialog">
<h2>Dialog Title</h2>
<p>Content di dalam dialog</p>
<button onclick="document.getElementById('myDialog').close()">Close</
Elemen progress untuk menampilkan progress bar.
<!-- Progress bar -->
<progress value="70" max="100">70%</progress>
<!-- Indeterminate progress -->
<progress></progress>Elemen meter untuk menampilkan gauge atau meter dengan nilai min/max.
<!-- Meter/gauge -->
<meter value="6" min="0" max="10">6 out of 10</meter>
<!-- Dengan low, high, optimum -->
<meter value="0.6" min="0" max="1" lowKarakter khusus yang harus di-escape dalam HTML.
Daftar entitas HTML yang sering digunakan untuk karakter khusus.
<!-- Special characters -->
< <!-- < -->
> <!-- > -->
& <!-- & -->
" <!-- " -->
' <!-- ' -->
<!-- non-breaking space -->
© <!-- © -->
® <!-- ® -->
™ <!-- ™ -->
<!-- Arrows -->
Atribut yang bisa digunakan di semua elemen HTML.
Atribut umum seperti id, class, style, dan lainnya yang universal.
<!-- ID (unique) -->
<div id="unique-id"></div>
<!-- Class -->
<div class="class1 class2"></div>
<!-- Style -->
<p
Praktik untuk membuat website yang bisa diakses semua orang.
Atribut ARIA untuk meningkatkan aksesibilitas dengan screen reader.
<!-- Role -->
<div role="navigation">
<a href="#">Link</a>
</div>
<!-- Label -->
<button aria-label="Close">×</
Praktik terbaik untuk aksesibilitas web.
<!-- Alt text untuk gambar -->
<img src="logo.jpg" alt="Company Logo">
<!-- Label untuk form -->
<label for="email">Email:</label>
<input type="email" id
Teknik untuk mengoptimalkan website agar lebih mudah ditemukan search engine.
Meta tag penting untuk SEO dan social media sharing.
<head>
<!-- Title (important banget!) -->
<title>Judul Halaman - Brand Name</title>
<!-- Description -->
<meta name="description" content="Deskripsi singkat dan jelas (150-160 karakter)">
Penggunaan elemen semantic untuk struktur konten yang lebih baik.
<!-- Use semantic elements -->
<article>
<header>
<h1>Article Title</h1>
<time datetime="2025-01-01">January 1, 2025</time>
</header>
<section>
Tips praktis untuk performa, favicon, dan optimasi mobile.
Teknik untuk meningkatkan kecepatan loading website.
<!-- Lazy load images -->
<img src="image.jpg" loading="lazy" alt="Description">
<!-- Preload critical resources -->
<link rel="preload" href="style.css" as="style"
Cara menambahkan favicon yang kompatibel dengan berbagai device.
<!-- Modern favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href
Optimasi untuk pengalaman mobile yang lebih baik.
<!-- Viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Theme color (browser UI) -->
<meta name="theme-color" content="#ffffff">
<!-- Apple Web App -->
<meta name