Apa itu HTML?
HTML (HyperText Markup Language) adalah bahasa markah untuk menyusun struktur konten web (judul, paragraf, gambar, link, form, dsb). Browser membaca HTML lalu merendernya jadi halaman.
Struktur dasar dokumen
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Judul Halaman</title>
</head>
<body>
<header>...</header>
<main>Konten utama</main>
<footer>...</footer>
</body>
</html>
Elemen & atribut
- Elemen:
<p>,<a>,<img>, dll. - Atribut: info tambahan pada elemen. Contoh:
<a href="https://contoh.com" target="_blank" rel="noopener">Link</a><img src="foto.jpg" alt="Deskripsi gambar" width="300">
Elemen semantik (HTML5)
Gunakan untuk makna & SEO/aksesibilitas:
<header>,<nav>,<main>,<section>,<article>,<aside>,<footer><figure>+<figcaption>untuk gambar/ilustrasi<time datetime="2025-08-25">25 Agustus 2025</time>
Teks & daftar
<h1>Judul</h1>
<p>Paragraf <strong>teks penting</strong> dan <em>penekanan</em>.</p>
<ul><li>Item</li><li>Item</li></ul>
<ol><li>Langkah 1</li><li>Langkah 2</li></ol>
Gambar, audio, video
<img src="kucing.jpg" alt="Kucing oranye tidur" />
<video controls src="video.mp4"></video>
<audio controls src="lagu.mp3"></audio>
Link & navigasi
- Link biasa:
<a href="#fitur">Ke fitur</a> - Navigasi:
<nav>
<ul>
<li><a href="/">Beranda</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
Form (input dari user)
<form action="/daftar" method="post">
<label>Nama <input name="nama" required></label>
<label>Email <input type="email" name="email" required></label>
<button type="submit">Kirim</button>
</form>
Tip: gunakan label yang terkait dengan input (via for/id) demi aksesibilitas.
Tabel (untuk data tabular)
<table>
<caption>Jadwal Kelas</caption>
<thead><tr><th>Hari</th><th>Jam</th></tr></thead>
<tbody><tr><td>Senin</td><td>08:00</td></tr></tbody>
</table>
Metadata penting di <head>
charset="utf-8": karakter Indonesia amanviewport: responsif di mobiletitle+meta name="description": SEO & pratinjau- Favicons:
<link rel="icon" href="/favicon.ico">
Aksesibilitas singkat (a11y)
- Selalu isi
altpada<img> - Struktur heading berurutan (
h1→h2→h3) - Kontras warna & fokus keyboard (ini di CSS, tapi strukturnya di HTML)
- Gunakan elemen semantik, hindari
<div>untuk semua hal
Praktik baik
- Valid, rapi, dan terindeks: tutup tag dengan benar, hindari atribut usang (
bgcolor,align) - Pisahkan struktur (HTML), presentasi (CSS), logika (JS)
- Minimal satu
<h1>per halaman - Hindari
<br>beruntun untuk spasi; pakai CSS
Perbedaan HTML vs. XHTML (singkat)
- XHTML lebih ketat (harus well-formed seperti XML). HTML5 lebih fleksibel dan umum dipakai saat ini.
API/fitur HTML5 yang sering dipakai (bareng JS)
<canvas>(grafik),<dialog>(modal),<template>&<slot>(Web Components),contenteditable(edit teks in-place), Form validation bawaan (required, pattern).
Contoh halaman mini responsif
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kartu Profil</title>
<style>
body { font: 16px/1.5 system-ui, sans-serif; margin: 0; padding: 2rem; }
.card { max-width: 680px; margin: auto; border: 1px solid #ddd; border-radius: 16px; padding: 1.5rem; }
.grid { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: center; }
img { display:block; width:96px; height:96px; border-radius:50%; object-fit:cover; }
@media (max-width: 480px) { .grid { grid-template-columns: 1fr; text-align:center; } }
</style>
</head>
<body>
<main class="card">
<section class="grid">
<img src="avatar.jpg" alt="Foto profil">
<div>
<h1>Farra</h1>
<p>Frontend enthusiast. Suka kopi & UI rapi.</p>
<p><a href="mailto:farra@example.com">farra@example.com</a></p>
</div>
</section>
</main>
</body>
</html>
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣤⣤⡶⠶⠶⠶⠶⠤⣶⣤⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣀⣀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢿⡏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠻⢶⣄⡀⠀⠀⠀⠀⠀⠀⢀⣴⡞⠋⠉⠉⠈⠛⢷⣦⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣤⣤⣽⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢙⣷⣖⡀⠀⣠⣾⠟⠁⠀⠀⠀⠀⠀⠀⠀⠹⣧⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣤⣶⣿⣿⣿⣿⣿⣿⣿⣷⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠻⠷⠛⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡟⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣾⠏⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠟⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⡿⠁⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⣴⣿⣿⣿⣿⣿⡿⠛⠉⠉⢻⣿⣿⣿⠏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣦⡀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣼⣿⣿⣿⣿⣿⡏⠀⠀⠀⠀⣸⣿⣿⣿⣦⣄⣀⣀⣀⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⢻⣆⠀⠀⠀⠀
⠀⠀⠀⠀⣼⣿⣿⣿⣿⣿⣿⣿⣦⣤⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⢳⡀⠀⠀
⠀⠀⠀⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⡄⠀
⠀⠀⣰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢳⡀
⠀⢀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⡧
⠀⢸⣿⣿⣿⣿⣿⣿⣿⠛⠉⠻⣿⣿⣿⣿⣿⣿⣿⡿⠋⠀⠀⠀⣽⣿⣿⣿⣿⡇⠀⠀⠀⠀⣀⣠⣶⣾⣿⣷⡀⠀⠀⠀⠀⠀⠀⠀⣴⣤⣀⠀⠀⠀⠀⠀⠀⣿
⠀⣿⣿⣿⣿⣿⣿⣿⠁⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⣼⣿⣿⣿⣿⣿⣿⣦⣤⣶⣿⣿⣿⣿⣿⣿⣿⣷⠀⠀⠀⠀⠀⠀⣼⣿⣿⣿⣿⣦⡀⠀⠀⠀⣿
⢸⣿⣿⣿⣿⣿⣿⣿⣄⠀⢀⣴⣿⣿⣿⣿⣿⣿⣿⣷⣦⣶⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣇⠀⠀⠀⠀⣸⣿⣿⣿⣿⣿⣿⣿⣷⡄⢠⡏
⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣆⠀⠀⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⠉⠋⠀
⣸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠛⠉⠀⠙⣿⣿⣿⣿⣿⣿⣿⣿⣷⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀
⢻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠿⠿⢿⣿⣿⣿⣿⣿⣿⣿⡁⠀⠀⠀⣠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠿⠿⣿⣿⣿⣿⣿⣿⣿⡿⠀⠀⠀
⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠏⠀⠀⠀⠀⣼⣿⣿⣿⣿⣿⣿⣷⣤⣤⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠁⠀⠀⢹⣿⣿⣿⣿⣿⣿⠇⠀⠀⠀
⢸⣿⣿⣿⣿⣿⣿⡿⠋⠙⢿⣿⣿⣿⣿⣿⣿⣿⡀⠀⠀⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⣾⣿⣿⣿⣿⣿⠇⠀⠀⠀⠀
⢸⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⣴⣿⣿⣿⣿⣿⣿⠏⠀⠀⠀⠀⠀
⢸⣿⣿⣿⣿⣿⣿⡆⠀⠀⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠏⠀⠀⠀⠀⠀⠀
⠈⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠟⠋⠉⠉⠻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠁⠀⠀⠀⠀⠀⠀⠀
⠀⢻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣇⠀⠀⠀⠀⣠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠈⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠋⠁⠀⠀⠙⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣶⣶⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠘⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣄⠀⠀⣀⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠟⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠈⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠛⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠉⠻⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠿⠟⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠛⠛⠻⠿⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠿⠛⠛⠛⠋⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
#FarraMingyu
Ok, good job, Farra. Baarakallahufiik…