Learn/ Coding/ HTML Tags Dasar
Cheat Sheet · HTML

HTML Tags Dasar 🌐

Referensi lengkap tag HTML yang paling sering digunakan. Dari struktur halaman hingga formulir dan tabel — semua ada di sini!

🏗️ Struktur Wajib HTML

<!-- Struktur dasar setiap halaman 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>
</head>
<body>
    <!-- Konten halaman di sini -->
</body>
</html>

📝 Teks & Heading

<h1> - <h6>

Judul halaman, h1 paling besar, h6 paling kecil. Gunakan berurutan!

<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Sub-sub Judul</h3>

✨ Hasil tampilan:

Judul Utama (h1)

Sub Judul (h2)

Sub-sub Judul (h3)

<p>

Paragraf teks. Tag paling sering digunakan untuk konten.

<p>Ini adalah sebuah paragraf teks biasa.</p>

✨ Hasil tampilan:

Ini adalah sebuah paragraf teks biasa. Paragraf membuat teks tampil dengan jeda vertikal yang rapi.

<strong> / <b>

Teks tebal. lebih semantik (penting), hanya visual.

Teks <strong>penting</strong> dan teks <b>tebal</b>.

✨ Hasil tampilan:

Teks penting dan teks tebal.

<em> / <i>

Teks miring. untuk penekanan semantik, hanya visual.

Kata <em>ditekankan</em> dan teks <i>miring</i>.

✨ Hasil tampilan:

Kata ditekankan dan teks miring.

<br>

Baris baru (line break). Tag tunggal, tidak perlu penutup.

Baris pertama.<br>Baris kedua.

✨ Hasil tampilan:

Baris pertama.
Baris kedua.

<hr>

Garis horizontal pembatas. Tag tunggal.

<p>Bagian 1</p><hr><p>Bagian 2</p>
<span>

Container inline untuk styling bagian teks tertentu.

Teks <span style="color:red">merah</span> di sini.

✨ Hasil tampilan:

Teks merah di sini.

🔗 Link & Gambar

<a href="...">

Tautan/hyperlink. href berisi URL tujuan. target="_blank" buka di tab baru.

<a href="https://google.com">Pergi ke Google</a>
<a href="halaman-lain.html" target="_blank">Buka Tab Baru</a>
<a href="#bagian-bawah">Link ke Bagian Ini</a>

✨ Hasil tampilan:

Pergi ke Google  |  Buka Tab Baru

<img>

Menampilkan gambar. src=sumber file, alt=teks alternatif (wajib untuk aksesibilitas).

<img src="foto.jpg" alt="Deskripsi foto" width="300">
<img src="https://via.placeholder.com/150" alt="Gambar placeholder">

✨ Hasil tampilan:

Contoh gambar

📋 List (Daftar)

<ul> + <li>

Unordered list — daftar dengan bullet point (titik/lingkaran).

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

✨ Hasil tampilan:

  • Item pertama
  • Item kedua
  • Item ketiga
<ol> + <li>

Ordered list — daftar bernomor (1, 2, 3...).

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

✨ Hasil tampilan:

  1. Langkah pertama
  2. Langkah kedua
  3. Langkah ketiga

📦 Container & Layout

<div>

Container blok serbaguna untuk mengelompokkan elemen. Tidak punya makna semantik.

<div class="kotak">
  <h2>Judul Kotak</h2>
  <p>Isi kotak ini.</p>
</div>

✨ Hasil tampilan:

Judul Kotak

Isi kotak ini dikelompokkan dalam satu div.

<header>

Kepala halaman — biasanya berisi logo dan navigasi. Semantik HTML5.

<header>
  <h1>Nama Website</h1>
  <nav>...</nav>
</header>
<main>

Konten utama halaman. Hanya boleh ada satu per halaman.

<main>
  <h2>Artikel Utama</h2>
  <p>Isi artikel...</p>
</main>
<footer>

Bagian bawah halaman — copyright, link, kontak.

<footer>
  <p>&copy; 2025 Nama Saya</p>
</footer>
<section>

Bagian/seksi konten yang bisa berdiri sendiri dengan judul.

<section id="tentang">
  <h2>Tentang Kami</h2>
  <p>Deskripsi...</p>
</section>
<article>

Konten mandiri yang bisa dipublikasikan sendiri (posting blog, berita).

<article>
  <h2>Judul Artikel</h2>
  <p>Isi artikel...</p>
</article>

📊 Tabel

<table>

Membuat tabel. Terdiri dari baris (), header (), dan data ().

<table border="1">
  <thead>
    <tr>
      <th>Nama</th>
      <th>Nilai</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Budi</td>
      <td>90</td>
    </tr>
    <tr>
      <td>Ani</td>
      <td>85</td>
    </tr>
  </tbody>
</table>

✨ Hasil tampilan:

NamaNilai
Budi90
Ani85

📝 Formulir (Form)

<form>

Wadah untuk input pengguna. action=tujuan pengiriman, method=GET atau POST.

<form action="proses.php" method="POST">
  <!-- Isi form di sini -->
  <button type="submit">Kirim</button>
</form>

✨ Hasil tampilan:

<input>

Field input. type menentukan jenisnya: text, email, password, number, checkbox, radio.

<input type="text" name="nama" placeholder="Nama kamu">
<input type="email" name="email" placeholder="Email">
<input type="password" name="pass" placeholder="Password">
<input type="number" name="umur" min="1" max="100">
<input type="checkbox" name="setuju" value="ya"> Setuju?
<input type="submit" value="Kirim">

✨ Hasil tampilan:

<textarea>

Area input teks multi-baris. rows dan cols mengatur ukuran.

<textarea name="pesan" rows="5" cols="40"
  placeholder="Tulis pesanmu di sini...">
</textarea>
<select>

Dropdown pilihan. Setiap pilihan menggunakan 

<select name="kelas">
  <option value="">-- Pilih Kelas --</option>
  <option value="7">Kelas 7</option>
  <option value="8">Kelas 8</option>
  <option value="9">Kelas 9</option>
</select>

✨ Hasil tampilan:

<label>

Label untuk elemen form. for harus sama dengan id input — penting untuk aksesibilitas!

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

Coba Langsung!

Buka codepen.io atau buat file .html baru di VS Code. Ketik struktur dasar HTML, lalu coba semua tag di atas. Klik F12 di browser untuk melihat struktur HTML dengan DevTools!