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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Deskripsi halaman">
<title>Judul Halaman</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World</h1>
<script src="script.js"></script>
</body>
</html>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 -->
<meta name="description" content="Deskripsi website kamu">
<!-- Keywords -->
<meta name="keywords" content="html, css, javascript">
<!-- Author -->
<meta name="author" content="Nama Kamu">
<!-- Refresh page -->
<meta http-equiv="refresh" content="30">
<!-- Open Graph (Facebook, LinkedIn) -->
<meta property="og:title" content="Judul">
<meta property="og:description" content="Deskripsi">
<meta property="og:image" content="image.jpg">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Judul">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><a href="#about">About</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main>
<!-- Section -->
<section>
<h2>Section Title</h2>
<p>Content here</p>
</section>
<!-- Article -->
<article>
<h2>Article Title</h2>
<p>Article content</p>
</article>
<!-- Aside untuk sidebar -->
<aside>
<h3>Related Links</h3>
</aside>
</main>
<!-- Footer website -->
<footer>
<p>© 2025 Website Kamu</p>
</footer>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</h6>Elemen 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
yang di-preserve
</pre>
<!-- Blockquote -->
<blockquote cite="https://source.com">
"Ini quote dari seseorang"
</blockquote>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>
<!-- Underline -->
<u>Text underline</u>
<!-- Strike -->
<s>Text di-coret</s>
<del>Text dihapus</del>
<ins>Text ditambahin</ins>
<!-- Small text -->
<small>Text kecil</small>
<!-- Mark/Highlight -->
<mark>Text di-highlight</mark>
<!-- Subscript & Superscript -->
H<sub>2</sub>O
x<sup>2</sup>
<!-- Code -->
<code>const x = 10;</code>
<!-- Keyboard input -->
Press <kbd>Ctrl</kbd> + <kbd>C</kbd>
<!-- Variable -->
<var>x</var> = 10Elemen 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>
<!-- Link dengan rel -->
<a href="https://example.com" rel="noopener noreferrer">Safe external link</a>
<!-- Email link -->
<a href="mailto:email@example.com">Send Email</a>
<!-- Phone link -->
<a href="tel:+6281234567890">Call</a>
<!-- Download link -->
<a href="file.pdf" download>Download PDF</a>
<!-- Anchor link (link ke section) -->
<a href="#section-id">Jump to section</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" height="200">
<!-- Responsive image -->
<img src="image.jpg" alt="Deskripsi" loading="lazy">
<!-- Picture element (multiple sources) -->
<picture>
<source media="(min-width: 768px)" srcset="large.jpg">
<source media="(min-width: 480px)" srcset="medium.jpg">
<img src="small.jpg" alt="Responsive image">
</picture>
<!-- Srcset untuk different resolutions -->
<img src="image.jpg"
srcset="image-2x.jpg 2x, image-3x.jpg 3x"
alt="High DPI image">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">
<li>Item 5</li>
<li>Item 6</li>
</ol>
<!-- Reversed -->
<ol reversed>
<li>Item 3</li>
<li>Item 2</li>
<li>Item 1</li>
</ol>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>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>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>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
</table>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="name" name="name" required>
<!-- Email -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<!-- Password -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<!-- Submit button -->
<button type="submit">Submit</button>
</form>Berbagai jenis input HTML5 untuk data yang berbeda seperti email, number, date, dll.
<!-- Text -->
<input type="text" placeholder="Text biasa">
<!-- Email -->
<input type="email" placeholder="email@example.com">
<!-- Password -->
<input type="password" placeholder="Password">
<!-- Number -->
<input type="number" min="0" max="100" step="5">
<!-- Tel -->
<input type="tel" placeholder="+62">
<!-- URL -->
<input type="url" placeholder="https://">
<!-- Search -->
<input type="search" placeholder="Search...">
<!-- Date -->
<input type="date">
<!-- Time -->
<input type="time">
<!-- Datetime Local -->
<input type="datetime-local">
<!-- Month -->
<input type="month">
<!-- Week -->
<input type="week">
<!-- Color -->
<input type="color">
<!-- Range/Slider -->
<input type="range" min="0" max="100" value="50">
<!-- File -->
<input type="file" accept="image/*">
<input type="file" multiple>
<!-- Checkbox -->
<input type="checkbox" id="check1">
<label for="check1">Agree</label>
<!-- Radio -->
<input type="radio" id="option1" name="group" value="1">
<label for="option1">Option 1</label>
<input type="radio" id="option2" name="group" value="2">
<label for="option2">Option 2</label>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="country">
<option value="">Pilih negara</option>
<option value="id">Indonesia</option>
<option value="my">Malaysia</option>
<option value="sg">Singapore</option>
</select>
<!-- Select multiple -->
<select name="skills" multiple>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>
<!-- Optgroup -->
<select>
<optgroup label="Frontend">
<option>HTML</option>
<option>CSS</option>
</optgroup>
<optgroup label="Backend">
<option>PHP</option>
<option>Node.js</option>
</optgroup>
</select>Datalist untuk memberikan autocomplete suggestions pada input text.
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>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 -->
<input type="text" minlength="3" maxlength="10">
<!-- Min/Max value -->
<input type="number" min="1" max="100">
<!-- Custom validation message -->
<input type="email" required
oninvalid="this.setCustomValidity('Isi email yang bener dong!')"
oninput="this.setCustomValidity('')">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="email" name="email" placeholder="Email">
</fieldset>
<fieldset>
<legend>Address</legend>
<input type="text" name="city" placeholder="Kota">
<input type="text" name="country" placeholder="Negara">
</fieldset>
</form>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>
<!-- Autoplay & loop -->
<audio autoplay loop muted>
<source src="audio.mp3">
</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="video/webm">
Browser kamu gak support video.
</video>
<!-- Video dengan poster -->
<video controls poster="thumbnail.jpg">
<source src="video.mp4">
</video>
<!-- Autoplay muted -->
<video autoplay muted loop>
<source src="video.mp4">
</video>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"
src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0"
allowfullscreen>
</iframe>
<!-- Google Maps -->
<iframe
src="https://www.google.com/maps/embed?pb=..."
width="600"
height="450">
</iframe>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</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">
Open Dialog
</button>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" low="0.3" high="0.7" optimum="0.8">60%</meter>Karakter khusus yang harus di-escape dalam HTML.
Daftar entitas HTML yang sering digunakan untuk karakter khusus.
<!-- Special characters -->
< <!-- < -->
> <!-- > -->
& <!-- & -->
" <!-- " -->
' <!-- ' -->
<!-- non-breaking space -->
© <!-- © -->
® <!-- ® -->
™ <!-- ™ -->
<!-- Arrows -->
← <!-- ← -->
↑ <!-- ↑ -->
→ <!-- → -->
↓ <!-- ↓ -->
<!-- Math -->
× <!-- × -->
÷ <!-- ÷ -->
± <!-- ± -->
<!-- Currency -->
€ <!-- € -->
£ <!-- £ -->
¥ <!-- ¥ -->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 style="color: red; font-size: 16px;">Styled text</p>
<!-- Title (tooltip) -->
<p title="Ini tooltip">Hover me</p>
<!-- Data attributes -->
<div data-user-id="123" data-role="admin"></div>
<!-- Hidden -->
<div hidden>Ini hidden</div>
<!-- Contenteditable -->
<div contenteditable="true">Edit text ini</div>
<!-- Draggable -->
<div draggable="true">Drag me</div>
<!-- Spellcheck -->
<textarea spellcheck="true"></textarea>
<!-- Translate -->
<p translate="no">Don't translate this</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">×</button>
<!-- Described by -->
<input aria-describedby="help-text">
<span id="help-text">Helper text di sini</span>
<!-- Live regions -->
<div aria-live="polite">
Status updates...
</div>
<!-- Hidden dari screen reader -->
<span aria-hidden="true"></span>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="email">
<!-- Skip navigation -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<main id="main-content">...</main>
<!-- Lang attribute -->
<html lang="id">
<p lang="en">This paragraph is in English</p>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)">
<!-- Canonical URL -->
<link rel="canonical" href="https://example.com/page">
<!-- Robots -->
<meta name="robots" content="index, follow">
<!-- Open Graph -->
<meta property="og:title" content="Judul">
<meta property="og:description" content="Deskripsi">
<meta property="og:image" content="image.jpg">
<meta property="og:url" content="https://example.com">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
</head>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>
<h2>Section Title</h2>
<p>Content...</p>
</section>
</article>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">
<link rel="preload" href="script.js" as="script">
<!-- DNS prefetch -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<!-- Defer JavaScript -->
<script src="script.js" defer></script>
<script src="script.js" async></script>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="favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="manifest" href="site.webmanifest">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="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">Login atau daftar akun gratis untuk membaca cheat sheet ini.