Mengenal HTML
Pahami peran HTML sebagai pondasi setiap halaman web.
Dunia web & HTML
- 01Pahami konsepnya · 3
- 02Coba contoh kode · 1
- 03Latihan singkat
Mengenal HTML
HTML (HyperText Markup Language) adalah bahasa penanda untuk menyusun isi halaman web. Ia bukan bahasa pemrograman yang mengolah logika, melainkan cara memberi makna pada teks: bagian mana judul, mana paragraf, mana tautan, mana gambar. Setiap situs yang pernah kamu buka — dari portal berita sampai aplikasi web — membangun kerangkanya dari HTML.
Mengenal HTML
Ibarat rumah, HTML adalah pondasi dan rangka bangunannya. Dinding cat dan pewarnanya datang dari CSS, listrik dan pernak-pernik bergerak dari JavaScript — keduanya menempel pada kerangka HTML. Halaman yang hanya memakai HTML bersifat statis: isinya tetap sampai berkasnya diganti manual; halaman dinamis lahir saat HTML bekerja sama dengan CSS, JavaScript, dan bahasa server.
Mengenal HTML
Berkas HTML disimpan dengan akhiran .html dan dibuka langsung di peramban (browser) apa pun tanpa perlu alat khusus. Versi terkini, HTML5, membawa banyak kemampuan baru — video bisa diputar tanpa plugin tambahan, formulir punya jenis masukan lebih kaya, dan tersedia tag semantik untuk struktur yang lebih bermakna.
Mengenal HTML
Apa yang terjadi?
Dua baris ini sudah sah dibuka di browser: h1 menandai judul dan p menandai paragraf. Simpan sebagai berkas .html, klik dua kali, dan isi itu tampil — tanpa server, tanpa instalasi apa pun. Sepanjang kursus ini, semua contoh hidup dalam kerangka yang sama.
Latihan singkat
Mengenal HTML
Tulis tiga hal yang menurutmu bisa dibangun dengan HTML murni, dan satu hal yang pasti butuh bantuan CSS atau JavaScript.
Editor kode
Pratinjau
Siap dicoba
Lihat contoh kode materi
<h1>Selamat datang di web</h1>
<p>Ini paragraf pertamaku di HTML.</p>Editor dan browser
Siapkan dua alat utama: tempat menulis dan tempat melihat hasil.
Perlengkapan belajar
- 01Pahami konsepnya · 3
- 02Coba contoh kode · 1
- 03Latihan singkat
Editor dan browser
Menulis HTML hanya butuh dua perangkat lunak: editor teks dan browser. Editor teks adalah tempat menulis kode — murni teks, tanpa pemformatan dokumen seperti yang dilakukan pengolah kata. Browser-lah yang membaca berkas HTML-mu dan menggambarkannya menjadi halaman yang dilihat pengguna.
Editor dan browser
Editor bawaan sistem (Notepad di Windows, TextEdit di Mac) sudah cukup untuk memulai, tetapi editor pemrograman jauh lebih nyaman: warna sintaks membedakan tag dari isi, penomoran baris memudahkan menelusuri kesalahan, dan pelengkap otomatis mempercepat mengetik. Pilihan populer yang gratis antara lain Visual Studio Code, Sublime Text, dan Atom; semuanya berjalan di Windows, Mac, dan Linux.
Editor dan browser
Aturan praktisnya satu: editor untuk menulis, browser untuk memeriksa. Setiap selesai mengubah kode, simpan berkas lalu muat ulang halaman di browser (tombol F5) — siklus sunting-simpan-muat ulang inilah ritme kerja sehari-hari seorang web developer.
Editor dan browser
Apa yang terjadi?
Komentar HTML dibungkus <!-- dan --> serta tidak pernah tampil di halaman — berguna untuk membuat catatan pada kode. Empat langkah di atas adalah seluruh "instalasi" yang dibutuhkan kursus ini.
Latihan singkat
Editor dan browser
Pasang satu editor pemrograman pilihanmu, buat berkas latihan.html, tulis satu judul dan satu paragraf, lalu buka di browser.
Editor kode
Pratinjau
Siap dicoba
Lihat contoh kode materi
<!-- workflow harian: -->
<!-- 1. tulis / ubah kode di editor -->
<!-- 2. simpan berkas (Ctrl+S) -->
<!-- 3. muat ulang browser (F5) -->
<!-- 4. lihat hasilnya, ulangi -->Struktur dokumen HTML
Kenali kerangka yang dibutuhkan setiap halaman web.
Pengenalan HTML
- 01Pahami konsepnya · 3
- 02Coba contoh kode · 1
- 03Latihan singkat
Struktur dokumen HTML
HTML memberi makna pada isi halaman. Elemen html membungkus seluruh dokumen, head menyimpan informasi halaman, dan body berisi hal yang dilihat pengunjung. Gunakan satu h1 sebagai judul utama.
Struktur dokumen HTML
Bagian head tidak pernah tampil di halaman; isinya metafora "identitas" dokumen: judul tab browser (title), pengodean karakter, dan tautan ke berkas CSS. Semua yang ingin dilihat pengunjung — teks, gambar, tabel, formulir — ditulis di dalam body.
Struktur dokumen HTML
Baris pertama <!DOCTYPE html> memberi tahu browser bahwa dokumen ini memakai HTML versi modern. Tanpa doctype, browser bisa beralih ke mode tampilan lama yang tidak konsisten; dengan doctype, satu set aturan yang sama berlaku di semua browser.
Struktur dokumen HTML
Apa yang terjadi?
Simpan sebagai index.html lalu buka di browser. Judul pada title muncul di tab, sedangkan h1 dan p tampil di halaman. Nama index.html istimewa: server web menjadikannya halaman pembuka sebuah folder secara otomatis.
Latihan singkat
Struktur dokumen HTML
Ganti judul tab dan isi paragraf dengan perkenalan singkat tentang dirimu.
Editor kode
Pratinjau
Siap dicoba
Lihat contoh kode materi
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<title>Halaman Pertamaku</title>
</head>
<body>
<h1>Halo, dunia!</h1>
<p>Ini halaman HTML pertamaku.</p>
</body>
</html>Tag, elemen, dan atribut
Bongkar anatomi kode HTML menjadi tiga bagian intinya.
Anatomi HTML
- 01Pahami konsepnya · 3
- 02Coba contoh kode · 2
- 03Latihan singkat
Tag, elemen, dan atribut
Tag adalah penanda yang dibaca browser: dibuka dengan kurung sudut seperti <p> dan ditutup dengan garis miring seperti </p>. Isi yang diapit keduanya — teks, gambar, atau tag lain — itulah elemen. Jadi <p>Halo</p> adalah elemen paragraf yang dibangun dari tag pembuka, isi, dan tag penutup.
Tag, elemen, dan atribut
Atribut adalah informasi tambahan yang menempel pada tag pembuka, ditulis berpasangan nama="nilai". Contohnya href pada tautan yang menentukan alamat tujuan, atau src pada gambar yang menunjukkan lokasi berkasnya. Satu tag boleh membawa beberapa atribut sekaligus.
Tag, elemen, dan atribut
Beberapa tag bekerja tanpa pasangan penutup karena tidak memiliki isi: <img>, <br>, dan <meta> disebut tag kosong. Menyusun HTML pada dasarnya membalik logika itu: pilih tag yang tepat untuk tiap isi, beri atribut bila butuh informasi tambahan, dan biarkan browser yang menggambarkannya.
Tag, elemen, dan atribut
Apa yang terjadi?
Satu baris ini memuat ketiganya: tag a, dua atribut (href menentukan alamat, target="_blank" meminta tab baru), dan isi berupa teks tautan. Klik hasilnya di browser dan Google terbuka di tab terpisah.
Tag yang sering dipakai
Tag yang sering dipakai
Kumpulan ini mencakup mayoritas kebutuhan harian: kerangka teks (p, h1, strong), wadah (div), daftar (ul, li), tabel, gambar, dan tautan. Nama tag menuliskan fungsinya — membaca kode HTML pun jadi mirip membaca singkatan berbahasa Inggris.
Latihan singkat
Tag, elemen, dan atribut
Tulis satu elemen tautan lengkap dengan dua atribut, lalu identifikasi tag, atribut, dan isinya di kode milikmu sendiri.
Editor kode
Pratinjau
Siap dicoba
Lihat contoh kode materi
<a href="https://www.google.com" target="_blank">Cari di Google</a>
<!-- a = tag tautan
href = atribut alamat tujuan
target = atribut cara membuka
"Cari di Google" = isi elemen -->Heading
Susun jenjang judul halaman dari h1 sampai h6.
Heading
- 01Pahami konsepnya · 3
- 02Coba contoh kode · 2
- 03Latihan singkat
Heading
Heading menandai bagian penting sebuah halaman dan tersedia enam jenjang: h1 paling besar hingga h6 paling kecil. Ukurannya menurun berurutan — h2 lebih kecil dari h1, h3 lebih kecil dari h2, dan seterusnya — membentuk hierarki seperti daftar isi sebuah dokumen.
Heading
Konvensi pemakaiannya: h1 untuk judul utama halaman (cukup satu per halaman), h2 untuk judul bab, h3 untuk sub-bab dari h2, dan seterusnya mengikuti kedalaman isi. Mesin pencari dan pembaca layar membaca jenjang ini untuk memahami struktur halamanmu — heading bukan sekadar ukuran huruf.
Heading
Karena itu, jangan memilih heading berdasarkan tampilannya semata. Butuh teks menonjol yang bukan judul? Nanti CSS yang mengaturnya. Heading dipilih berdasarkan posisinya dalam struktur isi — itulah bedanya halaman yang rapi dan halaman yang sekadar besar kecil acak.
Heading
Apa yang terjadi?
Jenjang yang menurun membuat struktur halaman terbaca sekali lihat: judul, bab, sub-bab, isi. Coba buka enam heading berurutan h1-h6 di browser untuk merasakan perbedaan ukurannya secara langsung.
Heading di dalam elemen lain
Heading di dalam elemen lain
Heading boleh berada di dalam elemen lain — di sini h3 menjadi isi tautan, sehingga seluruh judulnya bisa diklik. Pola ini umum di kartu artikel dan daftar berita.
Latihan singkat
Heading
Susun halaman tentang hobi-mu dengan h1, dua h2, dan satu h3 di bawah h2 pertama, lalu isi tiap bagian satu paragraf.
Editor kode
Pratinjau
Siap dicoba
Lihat contoh kode materi
<h1>Judul Halaman</h1>
<h2>Bab Pertama</h2>
<h3>Sub-bab</h3>
<p>Isi mengikuti jenjang judulnya...</p>Paragraf dan perataannya
Tulis blok teks dengan p dan atur rata kanan-kirinya.
Paragraf
- 01Pahami konsepnya · 3
- 02Coba contoh kode · 2
- 03Latihan singkat
Paragraf dan perataannya
Tag p membungkus satu paragraf — blok teks yang dipisahkan jarak dari blok sebelum dan sesudahnya secara otomatis. Browser mengabaikan pemenggalan baris manual di dalam teks; satu spasi atau sepuluh, semuanya diratakan menjadi aliran teks tunggal. Memecah paragraf memang pekerjaan tag p, bukan tombol Enter.
Paragraf dan perataannya
Untuk perataan, cara modern adalah properti CSS text-align — bukan atribut align yang dulu dipakai di HTML lama. Nilainya: left (rata kiri), right (rata kanan), center (tengah), dan justify (rata kedua sisi). Menaruhnya di CSS menjaga HTML tetap murni "isi", sementara tampilan dikendalikan terpisah.
Paragraf dan perataannya
Butuh jeda baris di tengah paragraf — misalnya alamat atau baris puisi? Gunakan tag <br>; ia melompat satu baris tanpa memulai paragraf baru. Kombinasi p untuk blok dan br untuk jeda menutup hampir semua kebutuhan teks.
Paragraf dan perataannya
Apa yang terjadi?
Perataan diatur lewat kelas CSS (text-align) — perhatikan bahwa baris baru dalam teks ketiga tidak memutus paragraf; browser meratakannya sendiri. Bandingkan: tanpa class, paragraf pertama memang condong kiri secara bawaan.
Jeda baris dengan br
Jeda baris dengan br
Alamat dua baris ini tetap satu paragraf utuh — br hanya menurunkan baris. Tanpa br, "Bandung..." akan mengalir menyambung di baris yang sama.
Latihan singkat
Paragraf dan perataannya
Tulis tiga paragraf tentang kota asalmu: satu rata kiri, satu tengah, satu justify, lalu tambahkan satu alamat dua baris dengan br.
Editor kode
Pratinjau
Siap dicoba
Lihat contoh kode materi
<!doctype html>
<html>
<head>
<style>
.tengah { text-align: center; }
.rata { text-align: justify; }
</style>
</head>
<body>
<p>Paragraf pertama, rata kiri secara bawaan.</p>
<p class="tengah">Paragraf kedua, berada di tengah.</p>
<p class="rata">Paragraf ketiga rata kiri dan kanan sekaligus,
sehingga sisi kanannya terlihat rapi seperti kolom koran.</p>
</body>
</html>Format teks
Tebalkan, miringkan, dan tandai teks dengan tag format.
Format teks
- 01Pahami konsepnya · 3
- 02Coba contoh kode · 1
- 03Latihan singkat
Format teks
HTML menyediakan tag-tag kecil untuk memberi aksen pada teks: <strong> untuk penekanan penting (tampil tebal), <em> untuk penekanan nada (tampil miring), <b> dan <i> untuk tebal-miring sekadar visual, <u> garis bawah, <small> teks kecil, serta <mark> untuk stabilo.
Format teks
Ada pula pasangan untuk kasus khusus: <ins> menandai sisipan (garis bawah) dan <del> penandaan hapusan (dicoret) — berguna menampilkan revisi dokumen. Untuk kebutuhan ilmiah tersedia <sub> (subskrip, seperti H₂O) dan <sup> (superskrip, seperti m²).
Format teks
Pilihan modern condong ke strong dan em dibanding b dan i, sebab keduanya membawa makna — pembaca layar menekankan bacanya, mesin pencari menangkap bobotnya — sementara b dan i murnian tampilan. Tag format boleh bersarang: <strong><em>sangat penting</em></strong> sah-sah saja.
Format teks
Apa yang terjadi?
Perhatikan bahwa semua tag format menempel pada potongan teks di dalam paragraf — mereka mengapit kata, bukan menggantikan p. sub menurunkan angka 2, sup mengangkatnya; del mencoret dan ins menggarisbawahi sehingga revisi harga terlihat sebagai pasangan.
Latihan singkat
Format teks
Tulis satu paragraf penawaran yang memuat teks tebal, miring, harga lama dicoret, harga baru, dan penanda stabilo pada batas waktunya.
Editor kode
Pratinjau
Siap dicoba
Lihat contoh kode materi
<p>
Simpan berkas dengan nama <strong>wajib.html</strong>,
lalu <em>segera</em> jalankan.
</p>
<p>
H<sub>2</sub>O dan 5<sup>2</sup> = 25.<br>
<del>harga lama Rp50.000</del> <ins>harga baru Rp35.000</ins>
<mark>hari ini saja</mark>
</p>Hyperlink
Hubungkan halaman dan situs dengan tag a dan href.
Hyperlink
- 01Pahami konsepnya · 3
- 02Coba contoh kode · 2
- 03Latihan singkat
Hyperlink
Hyperlink — biasa disebut tautan atau link — adalah pintu antar halaman: teks atau gambar yang saat diklik membawa pengunjung ke alamat yang sudah ditentukan. Seluruh jaringan web tersambung karena tahuannya; nama "web" sendiri lahir dari anyaman tautan ini.
Hyperlink
Tautan dibuat dengan tag <a> dan alamatnya diletakkan pada atribut href. Isi elemen — teks atau gambar — menjadi bagian yang bisa diklik. Alamatnya bisa berupa halaman lain di situsmu (halaman.html), berbeda folder (folder/halaman.html), mundur satu folder (../halaman.html), atau situs mana pun di internet dengan alamat lengkap (https://...).
Hyperlink
Atribut pendukung yang sering dipakai: target="_blank" membuka tautan di tab baru, dan title memberi tooltip saat kursor melayang. Untuk melompat ke bagian dalam satu halaman, href diisi #nama-id dari elemen tujuan — teknik yang dipakai daftar isi panjang.
Hyperlink
Apa yang terjadi?
Tiga rasa tautan sekaligus: relatif ke berkas sendiri (tentang.html), situs luar lengkap dengan https dan tab baru, dan jangkar internal menuju id="kontak" di halaman yang sama. Klik yang ketiga dan layar melompat ke heading Kontak.
Tautan gambar dan email
Tautan gambar dan email
Isi tautan tidak harus teks — gambar di dalam a menjadi tombol yang bisa diklik. Awalan mailto: membuka aplikasi email pengunjung dengan alamat tujuan sudah terisi.
Latihan singkat
Hyperlink
Buat halaman dua bagian dengan daftar isi tautan jangkar di atasnya, lalu tambahkan satu tautan eksternal yang membuka tab baru.
Editor kode
Pratinjau
Siap dicoba
Lihat contoh kode materi
<p>
<a href="tentang.html">Tentang kami</a> —
<a href="https://www.google.com" target="_blank">Google (tab baru)</a> —
<a href="#kontak">Lompat ke kontak</a>
</p>
<h2 id="kontak">Kontak</h2>List
Susun daftar berurutan dan tak berurutan dengan ol dan ul.
Daftar
- 01Pahami konsepnya · 3
- 02Coba contoh kode · 2
- 03Latihan singkat
List
Daftar (list) menyajikan data berurutan ke bawah dan hadir dalam dua rasa. Ordered list <ol> memberi nomor pada tiap butirnya — cocok untuk langkah yang urutannya penting, seperti resep atau prosedur. Unordered list <ul> menandai butir dengan bulatan — cocok untuk kumpulan yang urutannya bebas, seperti daftar belanja.
List
Keduanya memakai tag yang sama untuk isiannya: <li> (list item). Satu li berisi satu butir; menaruh teks langsung di dalam ol atau ul tanpa li adalah kesalahan yang membuat struktur kacau. Browser merapikan penomoran dan bullet secara otomatis — kamu hanya menulis isinya.
List
Daftar bisa bersarang: letakkan ul atau ol baru di dalam sebuah li untuk membuat sub-daftar. Struktur inilah kerangka asli menu navigasi website — diberi sentuhan CSS, sebuah ul berubah menjadi menu horizontal atau dropdown.
List
Apa yang terjadi?
ol menomori 1-2-3 dengan sendirinya, ul memunculkan bullet pada tiap li. Ganti urutan langkah di ol dan penomoran ikut menyesuaikan tanpa perlu menyunting angka manual — keunggulan kecil yang sangat terasa pada daftar panjang.
Daftar bersarang
Daftar bersarang
Sub-daftar menempel DI DALAM li induknya, bukan setelahnya — perhatikan penutup </li> berada setelah sub-ul selesai. Kesalahan umum pemula justru meletakkan ul di luar li sehingga tingkatan tersasar.
Latihan singkat
List
Buat daftar bernomor rencana harianmu dengan satu sub-daftar tak bernomor di dalamnya, lalu tukar posisi dua butir utama dan amati penomorannya.
Editor kode
Pratinjau
Siap dicoba
Lihat contoh kode materi
<h3>Langkah memasak mie</h3>
<ol>
<li>Didihkan air</li>
<li>Masukkan mie</li>
<li>Tiriskan dan bumbui</li>
</ol>
<h3>Belanja bulanan</h3>
<ul>
<li>Beras</li>
<li>Minyak goreng</li>
<li>Kopi</li>
</ul>Tabel
Tampilkan data baris-kolom dengan table, tr, th, dan td.
Tabel
- 01Pahami konsepnya · 3
- 02Coba contoh kode · 2
- 03Latihan singkat
Tabel
Tabel menyajikan informasi dalam kisi baris dan kolom — tepat untuk data terstruktur: daftar harga, jadwal, hasil ujian. Kerangkanya: <table> membungkus semuanya, <tr> (table row) membuat satu baris, dan <td> (table data) menjadi sel isi di dalam baris tersebut.
Tabel
Baris kepala memakai <th> (table heading) alih-alih td — isinya tebal dan rata tengah secara bawaan, serta dibaca sebagai judul kolom oleh pembaca layar. Hitungannya lugas: tabel tiga kolom berarti setiap tr memuat tiga td/th.
Tabel
Garis tabel yang tampak pada contoh lama berasal dari atribut border="1" — cara usang yang kini digantikan CSS (properti border pada sel). Materi CSS akhir kursus ini sampai ke sana; untuk sekarang, bayangkan tabelmu berbingkai tipis.
Tabel
Apa yang terjadi?
Baris pertama berisi th karena kepala kolom; dua baris berikut td berisi data. Bayangkan sel-sel itu berbingkai: kolom rata karena jumlah td tiap baris sama. Tanpa CSS, tabel tampil tanpa garis — strukturnya tetap ada, tampilannya menyusul nanti.
Tampilan cepat berbingkai
Tampilan cepat berbingkai
Tiga baris CSS ini menempelkan garis pada tabel dan tiap selnya — versi modern dari border="1" zaman dulu. Cukup letakkan di dalam head untuk melihat tabelmu berbingkai saat mengembangkan materi ini.
Latihan singkat
Tabel
Buat tabel jadwal pelajaranmu: baris kepala hari, dua baris isi mata pelajaran, lalu beri bingkai dengan potongan CSS di atas.
Editor kode
Pratinjau
Siap dicoba
Lihat contoh kode materi
<table>
<tr>
<th>No</th>
<th>Nama</th>
<th>Kota</th>
</tr>
<tr>
<td>1</td>
<td>Badrul</td>
<td>Sumedang</td>
</tr>
<tr>
<td>2</td>
<td>Andi</td>
<td>Jakarta</td>
</tr>
</table>Menampilkan gambar
Sisipkan gambar dengan img, src, dan alt.
Gambar
- 01Pahami konsepnya · 3
- 02Coba contoh kode · 1
- 03Latihan singkat
Menampilkan gambar
Gambar membuat halaman hidup, dan HTML menampilkannya lewat tag kosong <img> — tidak punya penutup karena tidak berisi teks. Dua atribut kuncinya: src menunjuk lokasi berkas gambar (jpg, png, gif, webp), dan alt menuliskan deskripsi singkat isinya.
Menampilkan gambar
alt bukan hiasan: teks itulah yang dibacakan pembaca layar bagi pengguna tunanetra, dan yang tampil bila berkas gagal dimuat. Menulis alt yang jujur (misalnya "Suasana kelas belajar coding") adalah kebiasaan aksesibilitas sekaligus SEO yang baik; alt kosong alt="" justru menandakan gambar dekoratif yang boleh dilewati.
Menampilkan gambar
Ukuran diatur lewat atribut width dan height — nilainya piksel, cukup angkanya saja. Aturan lokasi berkas sama seperti tautan: nama berkas bila sefolder, folder/nama bila di dalam subfolder, ../nama bila di atasnya. Menyalakan latihan: gabungkan img di dalam a untuk membuat tombol gambar yang bisa diklik.
Menampilkan gambar
Apa yang terjadi?
Dua contoh src memperlihatkan aturan lokasi: pantai.jpg di folder yang sama, foto/profil.jpg di dalam subfolder foto. width menahan lebar tampilan; tinggi menyesuaikan proporsinya. Ganti src ke berkas milikmu sendiri dan perhatikan apa yang tampil bila alt-nya yang muncul.
Latihan singkat
Menampilkan gambar
Tampilkan dua gambar milikmu (satu sefolder, satu dari subfolder) dengan alt deskriptif dan lebar berbeda, lalu bungkus satu di antaranya menjadi tautan.
Editor kode
Pratinjau
Siap dicoba
Lihat contoh kode materi
<h2>Galeri latihan</h2>
<img src="pantai.jpg" alt="Matahari terbenam di pantai" width="320">
<img src="foto/profil.jpg" alt="Foto profil penulis" width="120">iframe
Tampilkan halaman lain di jendela dalam halamanmu.
iframe
- 01Pahami konsepnya · 3
- 02Coba contoh kode · 1
- 03Latihan singkat
iframe
iframe (inline frame) adalah jendela yang menyematkan halaman lain di dalam halamanmu — video YouTube, peta Google Maps, atau pratinjau situs lain tampil sebagai kotak di tengah konten tanpa pengunjung meninggalkan halamanmu.
iframe
Pemakaiannya sederhana: tag <iframe> dengan atribut src berisi alamat halaman yang ingin ditampilkan, serta width dan height untuk menentukan ukuran jendelanya. Konten di dalam iframe hidup di dunianya sendiri — CSS halamanmu tidak menjangkaunya.
iframe
Catatan penting: tidak semua situs mengizinkan disematkan; pemilik situs bisa memasang pembatasan X-Frame-Options sehingga iframe-nya kosong. Layanan besar seperti YouTube menyediakan kode iframe siap salin lewat menu "Sematkan" (Embed) — lengkap dengan ukuran yang bisa kamu sesuaikan.
iframe
Apa yang terjadi?
Jendela 560×315 ini memutar video YouTube tanpa pengunjung pindah situs. Atribut title menjelaskan isi iframe bagi pembaca layar — detail kecil yang kerap terlupa. Ganti kode setelah /embed/ dengan ID video pilihanmu sendiri.
Latihan singkat
iframe
Sematkan satu video atau peta ke halaman latihanmu, atur ukurannya, lalu uji tampilannya di layar sempit (perkecil jendela browser).
Editor kode
Pratinjau
Siap dicoba
Lihat contoh kode materi
<h2>Video pilihan</h2>
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
width="560" height="315"
title="Video pengantar">
</iframe>Elemen semantik
Susun halaman memakai header, main, article, dan footer.
Menyusun halaman HTML
- 01Pahami konsepnya · 3
- 02Coba contoh kode · 1
- 03Latihan singkat
Elemen semantik
Elemen semantik menjelaskan peran sebuah bagian, bukan sekadar tampilannya. Struktur ini memudahkan pembaca, mesin pencari, dan alat bantu aksesibilitas memahami halaman.
Elemen semantik
Keluarga lengkapnya: <header> untuk kepala halaman (logo, judul), <nav> untuk kumpulan tautan navigasi, <main> untuk konten inti (cukup satu per halaman), <article> untuk potongan mandiri seperti artikel blog, <section> untuk pengelompokan bertema, <aside> untuk konten samping, dan <footer> untuk kaki halaman (hak cipta, tautan kontak).
Elemen semantik
Aturan praktisnya: pakai div hanya bila tidak ada elemen semantik yang cocok. Halaman yang memakai semantik benar memetakan dirinya sendiri — pembaca layar bisa melompat main/article/footer langsung, dan mesin pencari menangkap bobot tiap bagian dengan lebih akurat.
Elemen semantik
Apa yang terjadi?
main berisi konten utama; article cocok untuk tulisan yang bisa berdiri sendiri. Gunakan div hanya bila tidak ada elemen semantik yang sesuai.
Latihan singkat
Elemen semantik
Tambahkan nav berisi tautan ke bagian “Beranda” dan “Tentang”.
Editor kode
Pratinjau
Siap dicoba
Lihat contoh kode materi
<header><h1>Catatan Belajar</h1></header>
<main>
<article>
<h2>Pelajaran hari ini</h2>
<p>Aku belajar elemen semantik HTML.</p>
</article>
</main>
<footer><p>Ditulis oleh Zaky</p></footer>Class dan id
Beri tanda pada elemen agar bisa diatur CSS dan JavaScript.
Class & id
- 01Pahami konsepnya · 3
- 02Coba contoh kode · 1
- 03Latihan singkat
Class dan id
Bayangkan lima kotak serupa di halamanmu dan kamu hanya ingin mengubah yang ketiga. Class dan id adalah sistem penamaan untuk itu: label yang dipasang pada elemen supaya bisa dipilih dan dimanipulasi — oleh CSS untuk tampilan, oleh JavaScript untuk perilaku.
Class dan id
Bedanya satu kalimat: class boleh dipakai banyak elemen sekaligus (satu nama, banyak pemakai), id hanya untuk satu elemen unik di seluruh halaman. Konsekuensinya di CSS: class dipanggil dengan tanda titik (.kotak) dan menimpa banyak elemen bersamaan, sedangkan id dipanggil dengan tanda pagar (#header) dan menunjuk tepat satu.
Class dan id
Praktik terbaiknya: gunakan class untuk gaya yang dipakai ulang (kartu, tombol, teks kecil) dan id untuk penanda unik seperti header halaman atau sasaran tautan jangkar. Satu elemen boleh memikul keduanya: <div id="berita" class="kartu"> sah dan lazim.
Class dan id
Apa yang terjadi?
Tiga kartu memakai class yang sama sehingga satu aturan .kartu mewarnai semuanya sekaligus; #sorotan hanya menyentuh satu kotak istimewa itu. Inilah pola pikir "satu gaya, banyak pemakai" versus "satu penanda, satu elemen".
Latihan singkat
Class dan id
Buat tiga paragraf bermerek class yang sama dan satu heading ber-id, lalu beri warna latar berbeda untuk keduanya lewat CSS.
Editor kode
Pratinjau
Siap dicoba
Lihat contoh kode materi
<div class="kartu">Kartu 1</div>
<div class="kartu">Kartu 2</div>
<div class="kartu">Kartu 3</div>
<div id="sorotan">Kartu spesial</div>
<style>
.kartu { background: orange; padding: 12px; width: 120px; }
#sorotan { background: blue; padding: 12px; width: 200px;
color: white; }
</style>Formulir dasar
Kumpulkan masukan dengan label dan input yang jelas.
Formulir HTML
- 01Pahami konsepnya · 3
- 02Coba contoh kode · 2
- 03Latihan singkat
Formulir dasar
Form mengelompokkan masukan yang akan dikirim. Hubungkan label dan input memakai atribut for dan id yang sama agar orang bisa mengklik label dan pembaca layar mengenali nama bidang.
Formulir dasar
Tag <form> adalah wadahnya, dan dua atributnya menentukan nasib data: action berisi alamat halaman yang memproses kiriman, method memilih cara pengiriman — get menempelkan data di URL (cocok untuk pencarian), post mengirimkannya tersembunyi dalam badan permintaan (wajib untuk kata sandi).
Formulir dasar
Isi form dibangun dari beberapa pelaku: <input> adalah bintangnya — satu tag yang berubah wujud menurut atribut type (text, password, email, number, checkbox, radio, submit). <textarea> menyediakan kotak teks panjang untuk alamat atau pesan; <select> bersama <option> menyajikan pilihan tarik-turun. Kombinasi lengkapnya satu halaman pendaftaran.
Formulir dasar
Apa yang terjadi?
required meminta nilai sebelum formulir dikirim. Halaman tujuan pada action perlu tersedia di aplikasi nyata.
Formulir lengkap
Formulir lengkap
Perhatikan tiga wujud input sekaligus: radio (pilih satu — atribut name sama mengikat kelompok), checkbox (pilih banyak), dan password yang menyamarkan ketikan. select menyajikan pilihan tetap, textarea menampung teks panjang. Atribut name pada tiap bidang menjadi kunci data saat formulir dikirim.
Latihan singkat
Formulir dasar
Tambahkan input nama beserta label yang terhubung benar, lalu tambahkan satu kelompok checkbox hobi.
Editor kode
Pratinjau
Siap dicoba
Lihat contoh kode materi
<form action="/contact" method="post">
<label for="email">Alamat email</label>
<input id="email" name="email" type="email" required />
<button type="submit">Kirim</button>
</form>Simbol khusus
Sisipkan simbol dengan kode entity dan number.
Simbol
- 01Pahami konsepnya · 3
- 02Coba contoh kode · 1
- 03Latihan singkat
Simbol khusus
Beberapa karakter tidak bisa atau tidak aman diketik langsung dalam HTML: tanda <, >, dan & punya peran khusus di kode; simbol seperti © atau € tidak selalu ada di papan ketik. Untuk itu tersedia dua bentuk kode: entity yang mudah diingat (© untuk ©, ♥ untuk ♥) dan number berbasis angka desimal/heksadesimal (© sama dengan ©).
Simbol khusus
Menggunakan kode bukan soal dekorasi semata — ia menjamin simbol tampil sama di semua perangkat dan pengodean. Daftar lengkapnya panjang (ribuan karakter Unicode), tetapi yang harian cukup segelintir: hak cipta ©, merek dagang ™, euro €, panah ← ↑ → ↓, dan simbol kartu ♠ ♣ ♥ ♦.
Simbol khusus
Kasus wajib yang paling sering dijumpai: menampilkan tanda kurung sudut sebagai teks biasa. Tulis < untuk < dan > untuk > — tanpa itu, browser menganggap kamu sedang membuka tag dan halaman jadi kacau.
Simbol khusus
Apa yang terjadi?
Baris kedua adalah kasus paling penting: <p> menampilkan <p> sebagai teks biasa, bukan dijalankan sebagai tag. — menghasilkan tanda pisah panjang, spasi tak-putus yang mencegah dua kata terpisah baris.
Latihan singkat
Simbol khusus
Tulis halaman "kebijakan situs" yang memuat simbol hak cipta, tanda euro, satu panah, dan contoh kode tag yang tampil sebagai teks.
Editor kode
Pratinjau
Siap dicoba
Lihat contoh kode materi
<p>Hak cipta © 2026 — merek ™ situsku</p>
<p>Tulis tag paragraf seperti ini: <p>teks</p></p>
<p>Panah: ← ↑ → ↓ Kartu: ♠ ♣ ♥ ♦</p>Gunakan tombol ← dan → untuk berpindah materiLihat kursus lain