⌘K

Command Palette

Search for a command to run...

Daftar

Cheat Sheet HTML

Rangkuman cepat elemen dan atribut HTML paling penting yang wajib diketahui oleh setiap web developer pemula. Simpan buat contekan!

Cheat Sheet HTML Esensial: Contekan Cepat Buat Ngoding!

Wih, udah banyak banget ya materi HTML yang kita lahap! Biar ilmunya makin nempel dan gampang diinget pas lagi ngoding, ini dia rangkuman singkat alias "cheat sheet" dari elemen-elemen dan atribut HTML yang paling sering kepake. Simpen baik-baik ya, bisa jadi contekan andalanmu!

Struktur Dasar Dokumen

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">
    <!-- Tambahan meta, link, atau script lain di sini -->
</head>
<body>
    <!-- Semua konten yang terlihat ada di sini -->
    <header>...</header>
    <nav>...</nav>
    <main>...</main>
    <aside>...</aside>
    <footer>...</footer>
 
    <script src="skrip.js"></script>
</body>
</html>
  • <!DOCTYPE html>: Deklarasi wajib HTML5.
  • <html>: Elemen root. Atribut lang untuk bahasa.
  • <head>: Metadata (info tentang dokumen).
    • <meta charset="UTF-8">: Set karakter (wajib).
    • <meta name="viewport" ...>: Untuk responsivitas (wajib).
    • <title>: Judul tab browser (wajib).
    • <link rel="stylesheet" href="...">: Hubungkan ke file CSS.
  • <body>: Konten yang terlihat di halaman.
  • <!-- Komentar -->: Catatan yang tidak diproses browser.

Elemen Semantik Utama (Struktur Layout)

  • <header>: Bagian kepala halaman/section (logo, judul, navigasi).
  • <nav>: Blok navigasi utama.
  • <main>: Konten utama dan unik halaman (hanya satu).
  • <article>: Konten mandiri (post blog, berita).
  • <section>: Pengelompokan tematik konten.
  • <aside>: Konten sampingan (sidebar, info terkait).
  • <footer>: Bagian kaki halaman/section (copyright, link).

Teks dan Paragraf

  • <h1> s.d. <h6>: Judul (Heading), <h1> paling penting.
    • Contoh: <h2>Sub Judul Penting</h2>
  • <p>: Paragraf teks.
    • Contoh: <p>Ini adalah sebuah paragraf.</p>
  • <br>: Pindah baris (Line Break). (Elemen kosong)
    • Contoh: Baris pertama.<br>Baris kedua.
  • <hr>: Garis horizontal pemisah. (Elemen kosong)
  • <strong>: Menandakan teks sangat penting (biasanya tebal).
    • Contoh: <strong>PENTING:</strong> Baca ini.
  • <em>: Menandakan penekanan pada teks (biasanya miring).
    • Contoh: Saya <em>sangat</em> setuju.
  • <span>: Pembungkus inline generik (biasanya untuk styling/scripting).
  • <pre>: Teks preformatted (spasi dan enter dipertahankan).
  • <code>: Potongan kode komputer.
  • <blockquote>: Kutipan panjang (blok). Atribut cite untuk sumber.
  • <q>: Kutipan pendek (inline).

Daftar (List)

  • <ul>: Unordered List (daftar tak berurut, pakai bullet).
    • <li>: List Item (item di dalam <ul> atau <ol>).
    • Contoh: <ul><li>Apel</li><li>Jeruk</li></ul>
  • <ol>: Ordered List (daftar berurut, pakai nomor/huruf).
    • Atribut: type (1, a, A, i, I), start, reversed.
    • Contoh: <ol type="a"><li>Langkah 1</li><li>Langkah 2</li></ol>
  • <dl>: Description List.
    • <dt>: Description Term (istilah).
    • <dd>: Description Details (penjelasan).
    • Contoh: <dl><dt>HTML</dt><dd>HyperText Markup Language</dd></dl>
  • <a href="URL_tujuan">Teks Link</a>: Membuat hyperlink.
    • href: Atribut wajib, berisi URL tujuan.
      • URL Absolut: https://www.google.com
      • URL Relatif: kontak.html, produk/baju.html, ../index.html
      • Fragment: #bagian-id
      • Email: mailto:email@contoh.com
      • Telepon: tel:+621234567
    • target="_blank": Buka link di tab/jendela baru. (Tambahkan rel="noopener noreferrer").
    • title="Info tambahan": Tooltip untuk link.

Gambar

  • <img src="path/ke/gambar.jpg" alt="Deskripsi gambar">: Menampilkan gambar. (Elemen kosong).
    • src: Atribut wajib, path atau URL gambar.
    • alt: Atribut wajib, teks alternatif jika gambar gagal load / untuk screen reader.
    • width="lebar_pixel": Lebar gambar.
    • height="tinggi_pixel": Tinggi gambar.
  • <figure>: Membungkus gambar/ilustrasi yang jadi satu kesatuan konten.
  • <figcaption>: Caption untuk <figure>.
    • Contoh: <figure><img src="grafik.png" alt="Grafik penjualan"><figcaption>Grafik Penjualan 2024</figcaption></figure>

Tabel

  • <table>: Pembungkus utama tabel.
    • <caption>: Judul tabel.
    • <thead>: Grup baris header tabel.
    • <tbody>: Grup baris isi/data tabel.
    • <tfoot>: Grup baris footer tabel.
    • <tr>: Baris tabel (Table Row).
    • <th>: Sel header tabel (Table Header). Atribut scope (col, row).
    • <td>: Sel data tabel (Table Data).
    • Atribut pada <th>/<td>: colspan (gabung kolom), rowspan (gabung baris).

Contoh Struktur Tabel:

html
<table>
    <caption>Data Siswa</caption>
    <thead>
        <tr><th scope="col">No</th><th scope="col">Nama</th><th scope="col">Nilai</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>Budi</td><td>85</td></tr>
        <tr><td>2</td><td>Ani</td><td>90</td></tr>
    </tbody>
</table>

Formulir (Form)

  • <form action="URL_proses" method="GET/POST">: Pembungkus formulir.
    • enctype="multipart/form-data" (jika ada input file).
  • <label for="id_input">Teks Label:</label>: Label untuk input field.
  • <input type="...">: Elemen input serbaguna. (Elemen kosong).
    • type: text, password, email, number, date, checkbox, radio, file, submit, reset, button, hidden, dll.
    • Atribut umum: name (penting!), value, id, placeholder, required, disabled, checked (u/ checkbox/radio), min, max, step.
    • Contoh Teks: <input type="text" name="username" id="user" placeholder="Nama Pengguna">
    • Contoh Submit: <input type="submit" value="Kirim">
  • <textarea name="pesan" rows="4" cols="50"></textarea>: Input teks multi-baris.
  • <select name="pilihan" id="pilih">: Dropdown list.
    • <option value="nilai_opsi">Teks Opsi</option>: Item pilihan. Atribut selected untuk default.
    • <optgroup label="Nama Grup">: Mengelompokkan <option>.
  • <button type="submit/reset/button">Teks Tombol</button>: Tombol.
  • <fieldset>: Mengelompokkan elemen form yang berhubungan.
  • <legend>: Judul untuk <fieldset>.

Multimedia

  • <audio src="audio.mp3" controls></audio>: Menyisipkan audio.
    • Atribut: autoplay, loop, muted, preload.
    • <source src="audio.ogg" type="audio/ogg"> (untuk format alternatif).
  • <video src="video.mp4" controls width="640" height="360"></video>: Menyisipkan video.
    • Atribut: autoplay, loop, muted, preload, poster="gambar.jpg".
    • <source src="video.webm" type="video/webm"> (untuk format alternatif).
    • <track kind="subtitles/captions" src="teks.vtt" srclang="id" label="Label">: Subtitle/caption.

iFrame

  • <iframe src="URL_eksternal" width="lebar" height="tinggi" title="Deskripsi iframe"></iframe>: Menyisipkan konten dari halaman lain.
    • Atribut: allowfullscreen, loading="lazy", frameborder="0" (atau via CSS border: none;).

Entitas HTML (Karakter Khusus)

  • &lt; untuk <
  • &gt; untuk >
  • &amp; untuk &
  • &quot; untuk "
  • &apos; untuk '
  • &nbsp; untuk spasi non-breaking
  • &copy; untuk © (copyright)
  • &reg; untuk ® (registered)

Atribut data-* & <details>/<summary> (Bonus)

  • Atribut data-*: Menyimpan data kustom.
    • Contoh: <div data-id-user="101" data-role="editor">Info</div>
    • Akses di JS: element.dataset.idUser
  • <details>: Konten yang bisa dibuka-tutup.
    • <summary>: Judul yang selalu terlihat dan bisa diklik.
    • Atribut open pada <details> agar terbuka default.
    • Contoh: <details><summary>FAQ</summary><p>Jawaban...</p></details>

Ingat, ini cuma sebagian kecil dari HTML, tapi ini adalah bagian yang paling sering kamu pakai dan jadi fondasi yang kuat. Jangan ragu buat balik lagi ke cheat sheet ini kapan pun kamu butuh pengingat cepat. Selamat ngoding!