HTML

Kenali HTML, bahasa markup yang menyusun struktur setiap halaman web, beserta contoh dokumen pertama Anda.

Ikuti perjalanan dokumen HTML dari server ke browser: request, parsing byte menjadi node, hingga halaman tampil.

Pahami posisi HTML dalam kerja sehari-hari front-end, back-end, dan full-stack beserta contoh alur kerja nyata.

Kenali sejarah versi HTML hingga model Living Standard dari WHATWG dan artinya bagi pembelajar web.

Petakan teknologi web di sekitar HTML: CSS, JavaScript, HTTP, browser, engine, server, dan DNS.

Pilih code editor pertama kita: kriteria untuk pemula, perbandingan VS Code, Sublime Text, dan Notepad++.

Pasang browser untuk menguji halaman web kita dan pahami perannya sebagai runtime halaman HTML.

Buat file .html dengan ekstensi, encoding UTF-8, dan penamaan yang benar di dalam folder kerja yang rapi.

Buka file HTML lewat double-click, drag, atau Ctrl+O, lalu bangun siklus kerja edit-simpan-refresh.

Kenali browser DevTools: panel Elements, Console, dan Styles untuk menginspeksi halaman web secara langsung.

Pahami fungsi deklarasi doctype, perbedaan quirks mode dan standards mode, serta aturan penulisannya di baris pertama.

Kenali elemen html sebagai akar dokumen beserta atribut lang untuk bahasa dan dir untuk arah teks.

Pahami elemen head sebagai wadah metadata dokumen, isi yang sah di dalamnya, dan bedanya dengan elemen header.

Pahami elemen body sebagai wadah seluruh konten halaman, pemulihan parser, dan atribut lama yang telah usang.

Terapkan metadata dasar: charset UTF-8, viewport untuk mobile, description, author, dan meta refresh dengan aman.

Rakit anatomi dokumen HTML yang valid, kenali kesalahan struktur umum, dan cara validator mendeteksinya.

Pelajari anatomi elemen HTML: opening tag, konten, closing tag, elemen dengan atribut, dan beda tag dengan elemen.

Pelajari anatomi atribut HTML: pasangan nama dan nilai, konvensi tanda kutip, atribut boolean, serta kesalahan umum.

Kenali global attributes pada semua elemen: id, class, style, title, lang, hidden, data-*, tabindex, contenteditable.

Pelajari aturan elemen bersarang: nesting yang benar, bahaya tag menyilang, serta batasan konten model blok dan inline.

Kenali void elements: elemen tanpa konten dan closing tag, daftar resmi WHATWG, serta kebiasaan self-closing slash.

Pelajari character reference HTML: entitas bernama dan numerik, simbol copyright, non-breaking space, dan ampersand URL.

Susun dokumen dengan heading h1 sampai h6: hierarki yang benar, hubungan dengan outline, SEO, dan contoh artikel.

Kenali elemen p: satu ide per paragraf, whitespace collapsing yang sering disalahpahami, dan isi yang sah di dalamnya.

Pakai br untuk pindah baris dalam paragraf dan hr sebagai perubahan tema, lengkap dengan contoh alamat dan puisi.

Bedakan em, i, strong, b, dan mark: penekanan suara, kepentingan, istilah asing, dan highlight berdasarkan makna.

Kutip dengan benar: blockquote untuk kutipan blok, q untuk kutipan inline, dan cite untuk judul karya.

Jelajahi elemen teks inline: code, kbd, samp, var, abbr, time, del dan ins, sub serta sup, beserta contohnya.

Simpan format asli teks dengan pre: whitespace dipertahankan, kombinasi pre dan code, serta contoh blok kode.

Buat hyperlink dengan elemen a dan atribut href: teks deskriptif, link absolut, hingga link yang membungkus gambar.

Bedah struktur URL lalu bandingkan absolute URL, relative URL, dan penulisan path naik-turun folder beserta kegunaannya.

Lompat ke bagian tertentu dalam satu halaman memakai fragment identifier dan id sebagai target dengan daftar isi.

Hubungkan beberapa halaman menjadi satu situs kecil dengan menu nav, daftar ul, dan relative path antar folder.

Buka link di tab baru dengan aman: atribut target _blank, risiko tabnabbing, dan pasangan rel noopener noreferrer.

Sediakan link email dan telepon: skema mailto dengan subject dan body, skema tel, serta perilakunya di tiap perangkat.

Tulis link yang aksesibel: teks bermakna untuk screen reader, atribut hreflang dan type, serta link vs button.

Tampilkan gambar dengan elemen img: atribut src dan alt, format umum, ukuran intrinsik, serta atribut width dan height.

Tulis atribut alt yang bermanfaat: teks pengganti gambar, gambar dekoratif dengan alt kosong, dan gambar fungsional.

Sajikan satu gambar untuk semua layar dengan srcset dan sizes: browser memilih file yang paling sesuai kondisinya.

Gunakan elemen picture dan source untuk art direction serta fallback format gambar modern ke format klasik.

Sematkan audio dengan elemen audio: controls, loop, preload, format MP3 dan OGG, serta beberapa sumber alternatif.

Sematkan video dengan elemen video: controls, poster, autoplay yang berpasangan dengan muted, dan pemilihan sumber.

Tambahkan teks pita pada media dengan elemen track dan format WebVTT agar video ramah bagi semua pengunjung.

Susun media dengan fallback berlapis: source bertipe, teks cadangan, onerror pada img, dan alt sebagai pengganti.

Susun item dengan urutan bebas memakai ul dan li: aturan isi, bullet bawaan browser, dan contoh daftar belanja Siti.

Nomori langkah yang urutannya bermakna memakai ol dan li, lengkap dengan atribut start, reversed, type, dan value.

Pasangkan istilah dengan penjelasannya memakai dl, dt, dan dd untuk glosarium, metadata produk, dan FAQ singkat.

Susun daftar di dalam daftar dengan menempatkan ul atau ol di dalam li, dari dua hingga tiga tingkat kedalaman.

Pilih ul, ol, atau dl dari semantik konten, bukan tampilan, lengkap matriks keputusan dan studi kasus tiga penyajian.

Kenali elemen table, tr, dan td untuk menyajikan data dua dimensi, beserta batasan kapan tabel layak dipakai.

Gunakan th sebagai sel judul baris dan kolom, pahami perbedaannya dengan td, serta tampilan bawaan browser.

Beri judul tabel dengan caption dan pertegas cakupan setiap header melalui atribut scope.

Kelompokkan baris tabel dengan thead, tbody, dan tfoot agar struktur per grup lebih jelas dan mudah distyling.

Gabungkan sel dengan colspan dan rowspan, lengkap dengan cara menghitung keseimbangan sel setiap baris.

Rangkum praktik tabel yang aksesibel: caption, scope, headers dan id, hingga pengujian pembaca layar.

Pahami makna semantik dalam HTML, manfaatnya bagi aksesibilitas dan SEO, serta peta elemen struktur HTML5.

Gunakan header dan footer sebagai pembuka serta penutup kontainer, baik level halaman maupun level artikel.

Tandai konten inti halaman dengan main: aturan satu elemen, larangan penempatan, dan kaitannya dengan skip link.

Kelola blok navigasi dengan nav: menu situs, breadcrumb, dan pagination, termasuk penamaan bila nav lebih dari satu.

Bedakan article sebagai komposisi mandiri dan section sebagai pengelompokan tematik, termasuk kapan div lebih tepat.

Tempatkan konten tangensial pada aside, dari catatan di dalam artikel sampai sidebar halaman, beserta peran landmarknya.

Bungkus gambar, kode, atau tabel yang dirujuk sebagai satu unit dengan figure dan beri keterangan lewat figcaption.

Rangkum section Semantic HTML: pohon keputusan elemen, tabel ringkasan, anti-pattern, dan studi kasus halaman berita.

Kenali elemen form sebagai wadah kontrol, anatomi form minimal, dan pasangan pertama label dengan input.

Hubungkan label dengan input lewat for dan id atau pembungkusan, serta pahami kontrak aksesibilitas di baliknya.

Gunakan input text dan password beserta value, autocomplete, serta perbedaan readonly dan disabled.

Kenali input email, url, dan number beserta min, max, step, dan multiple untuk menerima data berformat.

Buat pilihan mandiri dengan checkbox dan kelompok pilih satu dengan radio, lengkap dengan checked dan value.

Susun dropdown pilihan dengan select, option, optgroup, serta opsi multi-select dan placeholder.

Terima teks panjang dengan textarea: nilai awal antar-tag, rows dan cols, maxlength, wrap, serta resize.

Kenali elemen button beserta tipe submit, reset, dan button, serta cara tombol terasosiasi dengan form.

Kelompokkan kontrol form yang berkaitan dengan fieldset dan beri judul grup menggunakan elemen legend.

Kenali input type=file untuk mengunggah berkas beserta accept, multiple, capture, dan enctype multipart.

Kenali lima tipe input tanggal dan waktu, format nilainya, atribut min, max, step, dan fallback browser.

Atur tujuan dan cara pengiriman data form: atribut action, method GET versus POST, enctype, dan target.

Pahami pasangan name=value yang dikirim browser, termasuk jebakan kontrol tanpa atribut name.

Tandai kolom wajib dengan required dan gunakan placeholder sebagai petunjuk format tanpa menggantikan label.

Batasi panjang isian dengan minlength dan maxlength, dari pemotongan karakter hingga penolakan saat submit.

Tetapkan rentang nilai sah pada input number, date, dan range dengan atribut min, max, dan step.

Periksa bentuk teks dengan atribut pattern, sintaks regex dasar, dan title sebagai penjelas pola.

Pahami cara browser menjalankan constraint validation, memakai novalidate, formnovalidate, dan pseudo-class.

Kenali pesan kesalahan bawaan browser, keterbatasannya, dan cara menyusun markup yang ramah pesan.

Pahami batas validasi HTML di sisi klien, alasan validasi server wajib ada, dan ringkasan atributnya.

Tulis title dan meta description yang tepat panjang, menarik tanpa clickbait, dan unik untuk setiap halaman.

Pahami aturan 1024 byte untuk charset, arti width=device-width dan initial-scale, serta urutan aman di head.

Tunjuk versi utama halaman dengan rel canonical agar variasi URL tidak dihitung sebagai konten duplikat.

Atur pengindeksan halaman dengan meta robots: noindex, nofollow, noarchive, nosnippet, dan bedanya dengan robots.txt.

Pasang favicon dengan link rel icon, format SVG dan ICO, apple-touch-icon untuk iOS, dan konvensi favicon.ico.

Susun kartu pratinjau berbagi di media sosial dengan meta property Open Graph dan pelengkap twitter:card.

Kenali structured data JSON-LD dengan kosakata schema.org yang membuka akses rich results di mesin pencari.

Rangkum metadata head yang berdampak nyata, buang yang tidak berguna, dan rakit checklist head final yang rapi.

Definisi accessibility, tiga kategori penerima manfaat, empat prinsip WCAG POUR, dan HTML semantik sebagai fondasinya.

Susun heading h1 sampai h6 sebagai peta navigasi screen reader: satu h1, tanpa lompatan, dan teks yang deskriptif.

Pelajari tombol keyboard bawaan, urutan focus yang mengikuti DOM, penggunaan tabindex, dan focus yang terlihat.

Pahami accessible name yang dibacakan screen reader beserta urutan prioritas sumbernya, dari aria-label hingga label.

Tulis alt text yang tepat per kategori gambar WAI: informasional, dekoratif, fungsional, dan kompleks.

Rakit form aksesibel: label eksplisit, fieldset, petunjuk aria-describedby, penanda wajib, dan token autocomplete.

Bedah tabel dari sisi screen reader: caption, th scope, serta headers dan id untuk tabel kompleks dua tingkat.

Kenali ARIA sebagai lapisan semantik tambahan: aturan pertamanya, atribut utama, dan contoh disclosure.

Uji accessibility berlapis: alat otomatis, walkthrough keyboard, screen reader, pengguna nyata, dan checklist evaluasi.

Pahami pembagian tugas HTML dan CSS, alasan keduanya dipisah, dan konsep cascade dalam bekal CSS minimum.

Hubungkan file CSS dengan elemen link rel stylesheet, atur path relatif, dan manfaatkan caching.

Kenali tiga cara menyisipkan CSS: file eksternal, internal style, dan inline style beserta waktu tepatnya.

Gunakan selector element, class, ID, descendant, dan pseudo-class untuk menyasar elemen secara presisi.

Atur warna teks dan latar dengan hex, rgb(), hsl(), background-image, serta jaga kontras teks WCAG.

Atur jenis huruf dengan font-family, ukuran px dan rem, font-weight, line-height, hingga perataan teks.

Pahami box model: margin mengatur jarak luar elemen dan padding mengatur jarak dalam, lengkap dengan shorthand.

Berikan garis tepi dan sudut membulat pada elemen dengan border dan border-radius, dari kartu hingga avatar bulat.

Atur lebar dan tinggi elemen dengan width, height, max-width, dan box-sizing agar tata letak tetap terkendali.

Kenali perilaku block, inline, inline-block, dan none, lalu ubah tata letak elemen HTML menggunakan properti display.

Gunakan class dan id dengan tepat: pola berulang, variasi class, konvensi penamaan, dan target unik dalam dokumen.

Kenali tanda siap memperdalam CSS, peta topik lanjutan, rute belajar yang dianjurkan, dan jembatan menuju JavaScript.

Kenali JavaScript sebagai lapisan perilaku halaman web dan buat interaksi pertama pada halaman HTML.

Hubungkan file JavaScript lewat elemen script src, bandingkan inline dan eksternal, serta kenali type module.

Pelajari urutan eksekusi script classic, defer, dan async, lalu pilih mode yang tepat untuk setiap kebutuhan.

Pilih elemen HTML dari JavaScript dengan getElementById, querySelector, dan querySelectorAll beserta jebakan null.

Ubah teks elemen dengan textContent, kenali risiko innerHTML, atur value input, dan susun teks dengan template literal.

Kelola tampilan lewat classList: add, remove, toggle, dan contains, dengan pola tema gelap terang sederhana.

Pasang pendengar klik dengan addEventListener, bandingkan dengan atribut onclick, dan bangun penghitung klik.

Bedah event input dan change pada elemen form, baca nilai lewat e.target.value, dan buat penghitung karakter.

Bandingkan atribut hidden, class display none, dan style.display, lengkap dengan aria-expanded dan contoh FAQ.

Lengkapi validasi native dengan JavaScript: event submit, preventDefault, checkValidity, dan ValidityState.

Kenali tanda siap memperdalam JavaScript, peta topik lanjutan, rute belajar resmi, dan peta jalan satu file.

Bentuk disclosure tanpa JavaScript dengan pasangan details dan summary, atribut open, hingga contoh FAQ ringkas.

Tampilkan jendela modal dan non-modal dengan elemen dialog, method showModal, styling ::backdrop, serta returnValue.

Pakai button sebagai pemicu interaksi di luar form: type button, pola dialog dan popover, serta aria-pressed.

Pelajari pola disclosure WAI-ARIA APG dan bandingkan versi native details dengan versi custom tombol dan aria-expanded.

Bedakan progress sebagai indikator tugas berjalan dan meter sebagai pengukuran skalar, plus pembaruan via JavaScript.

Rangkum aksesibilitas komponen interaktif: native dulu, fokus pada dialog, ARIA untuk pola custom, dan checklist audit.

Sematkan dokumen HTML lain ke dalam halaman dengan elemen iframe, dari atribut dasar hingga lazy loading.

Beri nama iframe melalui atribut title agar screen reader mengumumkan frame dengan konteks yang jelas.

Batasi kemampuan iframe pihak ketiga dengan atribut sandbox dan pahami makna tiap token allowlist-nya.

Kenali elemen embed dan object, warisan era plugin yang kini lazim untuk pratinjau PDF dengan fallback.

Pahami same-origin policy, penolakan embed, dan biaya kinerja yang menyertai konten sematan.

Kenali SVG, format gambar vektor berbasis XML yang tetap tajam di segala ukuran, beserta struktur file dan contohnya.

Tuliskan svg langsung di dalam dokumen HTML untuk ikon yang dapat di-style CSS, diakses DOM, dan hemat permintaan.

Sajikan file svg lewat img dan picture: caching, isolasi keamanan, fallback, beserta batasan styling dari halaman.

Pelajari elemen canvas: kanvas piksel yang digambar JavaScript, mode immediate, use case, dan strategi aksesibilitasnya.

Panduan memilih SVG atau canvas: matriks keputusan, tabel perbandingan, keputusan inline versus img, dan studi kasus.

Ikuti perjalanan dokumen HTML di dalam browser: dari byte, karakter, token, hingga DOM yang siap dirender.

Kenali DOM sebagai pohon objek hasil parsing, sifatnya yang live, dan kondisi ketika DOM berbeda dari markup.

Bedakan view-source yang menampilkan file sumber mentah dengan inspector yang menampilkan DOM live halaman.

Telusuri constraint validation dari sudut pandang engine: waktu berjalan, urutan cek, novalidate, dan ValidityState.

Ikuti alur data form dari validasi, form data set, encoding, hingga request GET dan POST yang teramati di DevTools.

Pahami progressive enhancement: fondasi HTML untuk semua, lapisan CSS dan JavaScript sebagai penambah pengalaman.

Perkecil payload halaman lewat gambar seukuran tampil, kompresi ringkas, dan atribut pencegah layout shift.

Pilih webp, avif, atau svg untuk memangkas byte gambar, lalu susun fallback picture agar browser lama tetap terlayani.

Tunda unduhan gambar dan iframe di bawah layar dengan loading=lazy, dan ketahui kapan eager lebih tepat untuk LCP.

Susun head yang ramah performa: strategi defer, async, dan module, serta preconnect untuk script pihak ketiga.

Pangkas div-soup, nesting berlebih, komentar, dan inline style agar dokumen kecil, cepat diurai, dan ringan diunduh.

Kenali metrik LCP, CLS, dan INP, petakan teknik HTML yang menggerakkannya, lalu audit halaman dengan Lighthouse.

Rangkum sisi keamanan link eksternal: reverse tabnabbing, rel noopener noreferrer, dan pemilihan skema https.

Rangkum lapisan perlindungan iframe: sandbox least privilege, referrerpolicy, sumber terpercaya, dan X-Frame-Options.

Pahami risiko input pengguna yang dirender sebagai HTML, contoh payload onerror, dan prinsip escape saat render.

Definisi XSS, tiga jenisnya, dampak bagi pengunjung, serta mitigasi escape karakter dan Content-Security-Policy.

Pahami batas keamanan HTML murni: tanpa autentikasi, tanpa enkripsi, sumber terbuka, dan posisi lapisan lain.

Kenali HTML validator W3C, tiga cara memeriksa dokumen, dan batasan pemeriksaannya dalam menjaga kualitas markup.

Baca laporan validator dengan lancar: format pesan, arti error dan warning, pesan umum, serta urutan memperbaikinya.

Rapikan markup dengan indentasi dua spasi, pemenggalan baris, dan kebiasaan format yang nyaman dibaca seluruh tim.

Bangun kebiasaan penamaan class, tanda kutip, urutan atribut, dan pola penulisan yang seragam agar markup mudah dirawat.

Telusuri markup bermasalah secara teratur: dari gejala di layar, DOM di panel Elements, hingga laporan validator.

Rangkum seluruh standar course HTML dalam satu checklist praktis yang dilalui sebelum halaman dinyatakan siap terbit.

Ubah daftar konten menjadi struktur semantik: inventaris, pengelompokan, wireframe level HTML, dan urutan heading.

Kenali pola layout umum — satu kolom, header-konten-sidebar, header-nav-footer — dan petakan ke elemen semantik.

Bangun kerangka halaman yang dapat dipakai ulang: konsep template dan partial, penamaan file, komentar penanda.

Rakit situs multi halaman: pohon folder, navigasi global, path relatif antar folder, title unik per halaman.

Terapkan pola konten yang konsisten: content model, manfaat bagi pembaca dan screen reader, plus checklist.

Bangun halaman profil pribadi lengkap dengan struktur dokumen yang benar, konten, styling dasar, dan interaksi sederhana.

Bangun website portofolio satu halaman dengan navigasi antar-section, styling dasar, dan interaksi navigasi yang halus.

Bangun halaman artikel yang nyaman dibaca: struktur artikel semantik, navigasi dan metadata, styling dasar, serta interaksi tambahan.

Bangun formulir pendaftaran yang aksesibel dengan validasi HTML, styling form, dan umpan balik menggunakan JavaScript.

Bangun katalog produk dengan struktur yang rapi, gambar dan deskripsi, styling dasar, serta filter sederhana berbasis JavaScript.

Bangun website restoran dengan struktur halaman yang menggugah, menu dan kontak, styling dasar, serta interaksi pemesanan sederhana.

Bangun halaman dokumentasi yang mudah dinavigasi: struktur dokumentasi, navigasi sidebar, styling dasar, dan pencarian sederhana.

Bangun landing page yang fokus pada konversi: struktur konten, call-to-action, styling dasar, dan interaksi sederhana.

Jadikan MDN Web Docs sebagai rujukan utama HTML: struktur situs, alur mencari halaman elemen, dan cara membaca tabelnya.

Mengenal HTML Living Standard dari WHATWG: struktur multipage, cara membaca definisi spec, dan kapan merujuknya.

Menelusuri indeks elemen HTML di MDN per kategori dan memahami isi tiap halaman elemen: content model, atribut, contoh.

Memetakan referensi atribut MDN: indeks atribut, global attributes, dan cara menelusuri atribut asing.

Menjelajah hub resmi aksesibilitas web: tutorial WAI, kriteria WCAG 2.2, dan pola komponen ARIA dari APG.

Menutup course dengan Nu Html Checker: cara memvalidasi, membaca laporan error dan warning, opsi CLI, dan batasannya.