Cheat Sheet HTML
Terakhir diperbarui
Struktur dokumen
Setiap halaman HTML dimulai dengan kerangka ini.
| Elemen | Kegunaan |
|---|---|
<!DOCTYPE html> | Menyatakan dokumen sebagai HTML5 (baris pertama) |
<html lang="en"> | Elemen root; lang menentukan bahasa |
<head> | Metadata: judul, link, script, tidak ditampilkan di halaman |
<meta charset="UTF-8"> | Encoding karakter (selalu sertakan) |
<meta name="viewport" content="width=device-width, initial-scale=1"> | Skala responsif di perangkat mobile |
<title> | Judul halaman yang tampil di tab browser dan hasil pencarian |
<body> | Semua yang terlihat di halaman ada di sini |
Teks & heading
| Elemen | Kegunaan |
|---|---|
<h1> … <h6> | Heading, <h1> paling penting (satu per halaman) |
<p> | Paragraf teks |
<br> | Pindah baris (tanpa tag penutup) |
<hr> | Pemisah tematik / garis horizontal |
<strong> | Teks penting (tebal) |
<em> | Teks yang ditekankan (miring) |
<span> | Container inline untuk memberi gaya pada sebagian teks |
<code> | Kode inline |
<pre> | Teks yang sudah diformat (spasi dipertahankan) |
<blockquote> | Blok kutipan |
Link & gambar
| Elemen | Sintaks |
|---|---|
| Link | <a href="https://coddy.tech">Coddy</a> |
| Buka di tab baru | <a href="..." target="_blank" rel="noopener"> |
| Anchor (lompat ke id) | <a href="#section">Jump</a> |
| Gambar | <img src="cat.png" alt="A cat" width="200"> |
| Gambar responsif | <img src="..." srcset="..." sizes="..."> |
| Gambar dengan keterangan | <figure><img ...><figcaption>…</figcaption></figure> |
List
| Elemen | Kegunaan |
|---|---|
<ul> | List tidak berurutan (berpoin) |
<ol> | List berurutan (bernomor) |
<li> | Item list (di dalam <ul> atau <ol>) |
<dl> | List deskripsi |
<dt> / <dd> | Istilah deskripsi / detail deskripsi |
Tabel
| Elemen | Kegunaan |
|---|---|
<table> | Container tabel |
<thead> / <tbody> / <tfoot> | Kelompok kepala, isi, dan kaki tabel |
<tr> | Baris tabel |
<th> | Sel header (tebal, rata tengah) |
<td> | Sel data |
colspan / rowspan | Menggabungkan sel antar kolom / baris |
Form & input
Komponen dasar dari setiap form yang mengumpulkan input.
| Elemen | Sintaks / tujuan |
|---|---|
| Form | <form action="/submit" method="post"> |
| Input teks | <input type="text" name="q" placeholder="Search"> |
| Email / kata sandi | <input type="email">, <input type="password"> |
| Checkbox / radio | <input type="checkbox">, <input type="radio"> |
| Angka / tanggal | <input type="number">, <input type="date"> |
| Label | <label for="q">Search</label> |
| Teks beberapa baris | <textarea rows="4"></textarea> |
| Dropdown | <select><option>One</option></select> |
| Tombol | <button type="submit">Send</button> |
| Kolom wajib | <input required> |
Tag semantik & tata letak
Pakai tag ini sebagai ganti <div> generik agar browser, pembaca layar, dan mesin pencari memahami halamanmu.
| Elemen | Yang ditandai |
|---|---|
<header> | Bagian atas halaman atau section (logo, navigasi) |
<nav> | Link navigasi |
<main> | Konten utama (satu per halaman) |
<section> | Pengelompokan konten berdasarkan tema |
<article> | Konten mandiri (postingan, kartu) |
<aside> | Sidebar / konten pendukung |
<footer> | Bagian bawah halaman atau section |
<div> | Container blok generik (tanpa makna) |
Atribut global yang umum
| Atribut | Kegunaan |
|---|---|
id | Pengenal unik untuk sebuah elemen |
class | Satu atau beberapa nama class (untuk CSS / JS) |
style | CSS inline (pakai seperlunya) |
title | Teks tooltip saat kursor diarahkan |
data-* | Atribut data kustom, misalnya data-id="42" |
hidden | Menyembunyikan elemen |
Semua tag dan atribut HTML yang sering kamu pakai, dikelompokkan menurut fungsinya. Cheat sheet HTML ini mencakup kerangka halaman, teks dan link, gambar dan media, list, tabel, form, dan tag semantik yang memberi makna pada markupmu.
Semuanya adalah HTML5 standar dan berjalan di semua browser modern. Salin sebuah tag, atau buka playground HTML untuk mengeditnya dengan pratinjau langsung, tanpa perlu persiapan. Sedang membuat halaman pertamamu? Kursus HTML interaktif gratis dari Coddy dimulai dari dasar.
FAQ cheat sheet HTML
Apakah cheat sheet HTML ini gratis?
Ya. Cheat sheet HTML ini gratis dipakai tanpa perlu daftar. Simpan di bookmark dan kembali kapan pun kamu perlu mencari tag atau atribut.
Apa perbedaan <section> dan <div>?
<section> adalah tag semantik: tag ini memberi tahu browser dan pembaca layar bahwa isinya adalah kelompok bertema yang bermakna, dan biasanya punya heading. <div> tidak membawa makna apa pun dan hanya container generik untuk styling atau scripting. Pakai tag semantik (<section>, <article>, <nav>) jika ada yang cocok, dan gunakan <div> hanya jika tidak ada.Apakah semua tag HTML butuh tag penutup?
<p>...</p>), tetapi beberapa elemen "void" tidak, karena elemen ini tidak bisa berisi apa pun: <img>, <br>, <hr>, <input>, <meta>, dan <link>. Di HTML5 kamu bisa menulisnya dengan atau tanpa garis miring di akhir.Bisakah saya berlatih HTML secara online?
Bisa. Buka playground HTML untuk menulis HTML di browsermu dengan pratinjau langsung, tanpa perlu instalasi. Kalau kamu ingin belajar terarah, kursus HTML interaktif gratis dari Coddy mengajarkan tag, form, dan tata letak langkah demi langkah.
Apakah cheat sheet ini cocok untuk pemula?
Cocok. Isinya dimulai dari kerangka halaman dan tag sehari-hari yang akan pertama kali kamu pakai, lalu berlanjut ke form dan markup semantik, jadi kamu bisa memakai bagian atas sejak hari pertama.
Sumber terkait
Cheat sheet lainnya
