Cheat Sheet HTML Lengkap

Cheat sheet ini berisi referensi lengkap elemen dan atribut HTML dalam Bahasa Indonesia untuk membantu pengembangan web Anda.

Struktur Dasar HTML

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Judul Halaman</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <!-- Konten halaman web -->
  </body>
</html>

Elemen Teks dan Heading

Heading (H1-H6)

<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>

Paragraf dan Pemformatan Teks

<p>Paragraf teks</p>
<br> <!-- Line break (baris baru) -->
<hr> <!-- Horizontal rule (garis horizontal) -->
<strong>Teks tebal</strong> atau <b>teks tebal</b>
<em>Teks miring</em> atau <i>teks miring</i>
<u>Teks bergaris bawah</u>
<strike>Teks dicoret</strike> atau <s>teks dicoret</s> atau <del>teks dicoret</del>
<mark>Teks disorot</mark>
<small>Teks kecil</small>
<big>Teks besar</big> (tidak disarankan di HTML5)
<sup>Teks superscript</sup>
<sub>Teks subscript</sub>
<code>Kode komputer</code>
<pre>Teks dengan format asli</pre>
<blockquote>Kutipan panjang</blockquote>
<q>Kutipan pendek</q>
<abbr title="Hyper Text Markup Language">HTML</abbr> <!-- Singkatan dengan tooltip -->

List (Daftar)

Unordered List (Daftar Tak Berurutan)

<ul>
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ul>

Ordered List (Daftar Berurutan)

<ol>
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ol>

Definition List (Daftar Definisi)

<dl>
  <dt>Istilah</dt>
  <dd>Definisi dari istilah</dd>
  <dt>HTML</dt>
  <dd>Hyper Text Markup Language</dd>
</dl>

Link dan Anchor

Link Dasar

<a href="https://www.contoh.com">Teks link</a>
<a href="halaman.html">Link ke halaman lain</a>
<a href="mailto:email@contoh.com">Kirim email</a>
<a href="tel:+62123456789">Telepon</a>
<a href="#bagian-id">Link ke bagian di halaman yang sama</a>

Atribut Link

<a href="https://www.contoh.com" target="_blank">
  Buka di tab baru
</a>
<a href="dokumen.pdf" download>
  Unduh file
</a>
<a href="https://www.contoh.com" rel="nofollow">
  Link tanpa follow
</a>
<a href="halaman.html" title="Deskripsi ketika hover">
  Link dengan tooltip
</a>

Gambar dan Multimedia

Gambar

<img src="gambar.jpg" alt="Deskripsi gambar" />
<img src="gambar.jpg" alt="Deskripsi gambar" width="300" height="200" />
<img src="gambar.jpg" alt="Deskripsi gambar" title="Tooltip ketika hover" />

Selalu sertakan atribut alt pada elemen gambar untuk aksesibilitas web yang lebih baik.

Figure dengan Caption

<figure>
    <img src="gambar.jpg" alt="Deskripsi gambar">
    <figcaption>Keterangan gambar</figcaption>
</figure>

Audio

<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  <source src="audio.ogg" type="audio/ogg" />
  Browser Anda tidak mendukung tag audio.
</audio>

Video

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  Browser Anda tidak mendukung tag video.
</video>

Iframe (Menyematkan Konten)

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="560"
  height="315"
  frameborder="0"
  allowfullscreen
></iframe>
<iframe src="halaman.html" width="600" height="400"></iframe>

Tabel

Struktur Tabel Dasar

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Baris 1, Kolom 1</td>
            <td>Baris 1, Kolom 2</td>
        </tr>
        <tr>
            <td>Baris 2, Kolom 1</td>
            <td>Baris 2, Kolom 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Footer 1</td>
            <td>Footer 2</td>
        </tr>
    </tfoot>
</table>

Atribut Tabel

<table border="1" cellpadding="5" cellspacing="0">
  <!-- konten tabel -->
</table>
 
<td colspan="2">Sel yang mencakup 2 kolom</td>
<td rowspan="2">Sel yang mencakup 2 baris</td>

Form dan Input

Struktur Form

<form action="/proses.php" method="post">
  <!-- elemen form -->
  <input type="submit" value="Kirim" />
</form>

Elemen Input

<input type="text" name="nama" placeholder="Masukkan nama" required>
<input type="email" name="email" placeholder="Email Anda">
<input type="password" name="password" placeholder="Kata sandi">

<input type="number" name="umur" min="18" max="100">
<input type="tel" name="telepon" pattern="[0-9]{12}">
<input type="range" name="rentang" min="0" max="100">

<input type="date" name="tanggal">
<input type="time" name="waktu">
<input type="datetime-local" name="tanggal_waktu">
<input type="month" name="bulan">
<input type="week" name="minggu">

<input type="url" name="website">
<input type="color" name="warna">
<input type="file" name="berkas">
<input type="hidden" name="id" value="123">

Checkbox dan Radio Button

<!-- Checkbox (kotak centang) -->
<input type="checkbox" name="hobi" value="membaca"> Membaca
<input type="checkbox" name="hobi" value="olahraga" checked> Olahraga

Textarea

<textarea
  name="pesan"
  rows="4"
  cols="50"
  placeholder="Tulis pesan Anda di sini"
></textarea>

<select name="kota">
  <option value="">Pilih Kota</option>
  <option value="jakarta">Jakarta</option>
  <option value="bandung">Bandung</option>
  <option value="surabaya" selected>
    Surabaya
  </option>
</select>

Datalist (Autocomplete)

<input list="browsers" name="browser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
  <option value="Edge"></option>
</datalist>

Button

<button type="submit">Kirim</button>
<button type="reset">Reset</button>
<button type="button" onclick="fungsiJavaScript()">Klik Saya</button>

Label

Selalu gunakan elemen <label> untuk meningkatkan aksesibilitas form.

<label for="nama">Nama:</label> <input type="text" id="nama" name="nama" />

Fieldset dan Legend

<fieldset>
  <legend>Informasi Pribadi</legend>
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama" /><br />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
</fieldset>

Semantic HTML5

Struktur Halaman

<header>Header halaman (bagian atas)</header>
<nav>Navigasi</nav>
<main>
    <article>Artikel atau konten utama</article>
    <section>Bagian konten</section>
    <aside>Sidebar (konten sampingan)</aside>
</main>
<footer>Footer halaman (bagian bawah)</footer>

Elemen Semantik Lainnya

<time datetime="2023-10-30">30 Oktober 2023</time>
<address>
  Nama Perusahaan<br />
  Jl. Contoh No. 123<br />
  Jakarta, Indonesia
</address>
<details>
  <summary>Klik untuk detail lebih lanjut</summary>
  <p>Informasi tambahan yang tersembunyi secara default.</p>
</details>
<mark>Teks yang disorot</mark>
<progress value="70" max="100">70%</progress>
<meter value="0.6" min="0" max="1">60%</meter>

Div dan Span (Container Non-Semantik)

<div>Kontainer blok generik</div>
<span>Kontainer inline generik</span>

Meta Tags

Meta Tags Dasar

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Deskripsi halaman web Anda" />
<meta name="keywords" content="kata kunci, seo, html" />
<meta name="author" content="Nama Penulis" />
<meta http-equiv="refresh" content="30" />
<!-- Refresh setiap 30 detik -->

<!-- Open Graph untuk Facebook -->
<meta property="og:title" content="Judul Halaman">
<meta property="og:description" content="Deskripsi halaman">
<meta property="og:image" content="gambar.jpg">
<meta property="og:url" content="https://www.contoh.com/halaman">
<meta property="og:type" content="website">

Link ke CSS dan JavaScript

<!-- CSS External -->
<link rel="stylesheet" href="style.css">
 
<!-- CSS Internal -->
<style>
    body {
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }
</style>
 
<!-- CSS Inline -->
<p style="color: blue; font-size: 16px;">Teks dengan styling inline</p>

HTML5 Canvas dan SVG

<!-- Canvas -->
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
</script>

Atribut Data

<div id="user" data-id="123" data-nama="John" data-role="admin">John Doe</div>
 
<script>
  // Cara mengakses dengan JavaScript
  var element = document.getElementById("user");
  var id = element.dataset.id; // "123"
  var nama = element.dataset.nama; // "John"
</script>

Karakter Khusus (Entity)

&lt; <!-- < -->
&gt; <!-- > -->
&amp; <!-- & -->
&quot; <!-- " -->
&apos; <!-- ' -->
&copy; <!-- © -->
&reg; <!-- ® -->
&trade; <!-- ™ -->
&nbsp; <!-- Spasi yang tidak bisa diputus -->