Deni.dev
Back to Garden
21-05-2026
7 min read

Belajar HTML Dasar untuk Pemula: Panduan Lengkap dan Mudah Memahami Fondasi Web

#HTML#Web Development#Belajar Coding#Pemula

Belajar HTML Dasar untuk Pemula: Panduan Lengkap dan Mudah Memahami Fondasi Web

Pernahkah Anda penasaran bagaimana sebuah halaman website bisa menampilkan teks, gambar, tombol, hingga video? Semua hal menakjubkan yang Anda lihat di internet saat ini bermuara pada satu fondasi yang sama, yaitu HTML.

Jika Anda baru saja memutuskan untuk terjun ke dunia web development atau desain grafis web, HTML adalah gerbang pertama yang wajib Anda lalui. Kabar baiknya, HTML sama sekali tidak seseram yang dibayangkan. Artikel ini akan membimbing Anda memahami HTML dasar secara mendalam, santai, dan langsung bisa Anda praktikkan.

Apa Itu HTML?

HTML adalah singkatan dari Hypertext Markup Language. Di sini ada satu miskonsepsi yang sering terjadi di kalangan pemula: HTML bukanlah bahasa pemrograman.

HTML adalah bahasa markah (markup language). Tugas utamanya bukan mengolah logika atau menghitung matematika (seperti bahasa pemrograman Python atau JavaScript), melainkan untuk menstrukturkan dan menyusun konten pada sebuah halaman web.

Jika kita mengibaratkan sebuah website sebagai sebuah bangunan rumah:

  • HTML adalah pondasi, batu bata, dan kerangka dindingnya.
  • CSS adalah cat warna, dekorasi, dan desain interiornya.
  • JavaScript adalah sistem kelistrikan, pintu otomatis, dan fungsi-fungsi interaktif lainnya.

Tanpa HTML, tidak akan ada halaman web di internet.

Memahami Anatomi Elemen HTML

HTML bekerja menggunakan Tag (tanda markah) untuk memberi tahu browser bagaimana sebuah konten harus ditampilkan. Mari kita lihat anatomi dasar dari sebuah elemen HTML berikut:

<p class="deskripsi">Halo Dunia, saya sedang belajar HTML!</p>

Mari kita bedah satu per satu bagian di atas:

  1. Tag Pembuka (

    ): Menandakan awal dari sebuah elemen. Dalam contoh ini, p berarti paragraph (paragraf).

  2. Atribut (class="deskripsi"): Informasi tambahan yang disisipkan di dalam tag pembuka. Atribut memiliki nama (class) dan nilai ("deskripsi"), berguna untuk memberikan identitas yang nantinya bisa dihias menggunakan CSS.
  3. Konten (Halo Dunia...): Teks atau isi yang akan muncul di layar pengguna.
  4. Tag Penutup (

    )    : Menandakan akhir dari elemen. Cirinya adalah menggunakan tanda garis miring (/).

Struktur Dokumen HTML yang Wajib Ada

Setiap kali Anda membuat file HTML baru (biasanya disimpan dengan ekstensi .html), ada struktur standar yang wajib Anda tulis. Struktur ini menjadi kerangka utama agar browser tahu bahwa dokumen tersebut adalah dokumen web yang sah.

Berikut adalah boilerplate atau struktur dasar HTML5:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman HTML Pertamaku</title>
</head>
<body>
    <h1>Selamat Datang di Dunia Web Developer!</h1>
    <p>Ini adalah paragraf pertama yang saya buat menggunakan kode HTML dasar.</p>
</body>
</html>

Penjelasan Struktur:

  • : Deklarasi untuk memberi tahu browser bahwa dokumen ini menggunakan standar HTML5 terbaru.
  • : Tag utama yang membungkus seluruh konten web. Atribut lang="id" menandakan bahwa bahasa utama situs ini adalah bahasa Indonesia.
  • : Bagian "otak" dari web. Berisi informasi meta (metadata), judul halaman, dan tautan ke file CSS/JavaScript. Apa yang ditulis di dalam tidak akan muncul langsung di halaman utama web, kecuali elemen .</li> <li><body>: Bagian "tubuh" web. Semua teks, gambar, video, dan navigasi yang ingin Anda perlihatkan kepada pengunjung ditulis di dalam tag ini.</li> </ul> <hr> <h2>Tag HTML Dasar yang Paling Sering Digunakan</h2> <p>Sebagai pemula, Anda tidak perlu menghafal ratusan tag HTML yang ada. Cukup pahami dan kuasai beberapa tag inti berikut yang menjadi pilar utama sebuah website:</p> <h3>1. Tag Heading (<h1> sampai <h6>)</h3> <p>Heading digunakan untuk membuat judul dan sub-judul. Urutannya dimulai dari <h1> (terbesar dan paling penting) hingga <h6> (terkecil).</p> <pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">>Ini Judul Utama Artikel (H1)</</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8">## Ini Sub-bab Utama (H2)</span></span> <span class="line"><span style="color:#E1E4E8">### Ini Sub-dari Sub-bab (H3)</span></span></code></pre><blockquote> <p><strong>Tips SEO:</strong> Gunakan hanya satu <h1> dalam sebuah halaman web, biasanya untuk judul artikel atau nama toko. Ini sangat membantu Google memahami topik utama halaman Anda.</p> </blockquote> <h3>2. Tag Paragraf (<p>)</h3> <p>Digunakan untuk menulis blok teks atau artikel. Browser secara otomatis akan memberikan sedikit jarak (margin) di bawah setiap tag <p>.</p> <pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">>HTML itu ternyata sangat mudah dipelajari jika kita konsisten.</</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">></span></span></code></pre><h3>3. Tag Tautan/Link (<a>)</h3> <p>Link membuat halaman web saling terhubung (<em>hyperlink</em>). Tag ini menggunakan atribut href untuk menentukan alamat web tujuan.</p> <pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">a</span><span style="color:#B392F0"> href</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"https://www.google.com"</span><span style="color:#B392F0"> target</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"_blank"</span><span style="color:#E1E4E8">>Buka Google di Tab Baru</</span><span style="color:#85E89D">a</span><span style="color:#E1E4E8">></span></span></code></pre><p><em>Atribut target="_blank" berfungsi agar link terbuka di tab baru browser.</em></p> <h3>4. Tag Gambar (<img>)</h3> <p>Untuk menampilkan gambar, kita menggunakan tag <img>. Uniknya, tag ini termasuk <em>self-closing tag</em>, artinya tidak membutuhkan tag penutup </img>.</p> <pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">img</span><span style="color:#B392F0"> src</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"gambar-pemandangan.jpg"</span><span style="color:#B392F0"> alt</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"Pemandangan gunung saat matahari terbit"</span><span style="color:#B392F0"> width</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"500"</span><span style="color:#E1E4E8">></span></span></code></pre><ul> <li>src: Sumber atau lokasi file gambar.</li> <li>alt: Teks alternatif jika gambar gagal dimuat. Ini juga sangat penting untuk aksesibilitas penutur tunanetra dan SEO.</li> </ul> <h3>5. Tag Daftar/List (<ul> dan <ol>)</h3> <p>Ada dua jenis daftar yang sering digunakan:</p> <ul> <li><ul> (*Unordered List*): Daftar menggunakan simbol (bullet).</li> <li><ol> (*Ordered List*): Daftar menggunakan nomor/angka.</li> <li><li> (*List Item*): Konten di dalam daftar tersebut.</li> </ul> <pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#6A737D"><!-- Contoh Daftar Poin --></span></span> <span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">>Kopi Hitam</</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">>Teh Manis</</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"></</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#6A737D"><!-- Contoh Daftar Angka --></span></span> <span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">ol</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">>Buka Browser</</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">>Tulis Kode</</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">>Refresh Halaman</</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"></</span><span style="color:#85E89D">ol</span><span style="color:#E1E4E8">></span></span></code></pre><hr> <h2>Langkah Praktik: Membuat File HTML Pertama Anda</h2> <p>Teori tanpa praktik akan sia-sia. Yuk, buat halaman web pertama Anda sekarang juga dalam waktu kurang dari 5 menit!</p> <ol> <li><strong>Buka Aplikasi Text Editor</strong>: Anda bisa menggunakan Notepad (Windows), TextEdit (Mac), atau editor gratis yang sangat direkomendasikan seperti <strong>Visual Studio Code (VS Code)</strong>.</li> <li><strong>Salin Kode</strong>: Copy struktur dasar HTML yang ada di sub-bab sebelumnya, lalu paste ke dalam editor Anda.</li> <li><strong>Simpan File</strong>: Simpan file tersebut dengan nama index.html. Pastikan ekstensinya .html, bukan .txt.</li> <li><strong>Jalankan</strong>: Cari file index.html tersebut di file manager Anda, lalu klik dua kali. File akan terbuka otomatis di Google Chrome, Firefox, atau browser andalan Anda.</li> </ol> <p><em>Selamat! Anda baru saja berhasil membuat halaman web pertama Anda sendiri.</em></p> <hr> <h2>Langkah Selanjutnya Setelah Menguasai HTML Dasar</h2> <p>Menguasai HTML dasar adalah fondasi awal yang kokoh. Namun, perjalanan Anda tidak berhenti di sini. Jika Anda ingin membuat website Anda terlihat cantik dan interaktif, berikut peta jalan (<em>roadmap</em>) berikutnya yang bisa Anda pelajari:</p> <table> <thead> <tr> <th align="left">Tahapan</th> <th align="left">Teknologi</th> <th align="left">Fungsi Utama</th> </tr> </thead> <tbody><tr> <td align="left"><strong>Tahap 1</strong></td> <td align="left">HTML Lanjutan</td> <td align="left">Mempelajari struktur Form, Tabel, dan Semantic HTML (seperti <header>, <article>, <footer>).</td> </tr> <tr> <td align="left"><strong>Tahap 2</strong></td> <td align="left">CSS (Cascading Style Sheets)</td> <td align="left">Memberikan warna, mengatur tata letak (layout), memilih font, dan membuat web menjadi responsif di HP.</td> </tr> <tr> <td align="left"><strong>Tahap 3</strong></td> <td align="left">JavaScript</td> <td align="left">Menambahkan logika, animasi bergerak, pop-up interaktif, dan validasi data.</td> </tr> </tbody></table> <p>Kunci utama dalam belajar coding adalah konsistensi dan eksperimen. Jangan takut jika kode Anda eror; eror adalah cara terbaik bagi seorang <em>developer</em> untuk belajar dan berkembang. Selamat belajar HTML, dan sampai jumpa di proyek-proyek web keren buatan Anda!</p> </div><div class="flex flex-col items-center justify-center py-12 border-t border-border/40 mt-12 space-y-4"><p class="text-sm text-muted-foreground font-medium">Menikmati artikel ini? Berikan apresiasi Anda!</p><button disabled="" class="group relative flex items-center space-x-3 px-6 py-3 rounded-full border transition-all duration-300 shadow-lg bg-muted/40 border-border/40 text-muted-foreground hover:text-foreground hover:border-rose-500/40 hover:bg-rose-500/5 hover:shadow-rose-500/5" tabindex="0"><div class="absolute inset-0 rounded-full blur-md opacity-0 group-hover:opacity-40 transition-opacity duration-300 -z-10 bg-rose-500/10"></div><div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart h-5 w-5 transition-all duration-300 text-muted-foreground group-hover:text-rose-500 group-hover:fill-rose-500/20" aria-hidden="true"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path></svg></div><span class="font-mono text-sm font-bold"><span class="inline-block w-8 h-4 bg-muted-foreground/10 animate-pulse rounded"></span></span></button></div></article><!--$--><!--/$--></div></main><footer class="bg-background mt-20"><div data-orientation="horizontal" role="separator" aria-orientation="horizontal" data-slot="separator" class="shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch"></div><div class="container mx-auto px-4 md:px-8 py-8 flex flex-col md:flex-row items-center justify-between gap-4"><p class="text-sm text-muted-foreground">© <!-- -->2026<!-- --> Muh Deni Setiawan. All rights reserved.</p><div class="flex items-center space-x-4"><a class="text-muted-foreground hover:text-foreground transition-colors" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg><span class="sr-only">GitHub</span></a><a class="text-muted-foreground hover:text-foreground transition-colors" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect width="4" height="12" x="2" y="9"></rect><circle cx="4" cy="4" r="2"></circle></svg><span class="sr-only">LinkedIn</span></a></div></div></footer><button class="fixed bottom-6 right-6 z-40 flex items-center justify-center w-12 h-12 rounded-full bg-primary text-primary-foreground shadow-lg shadow-primary/20 hover:scale-105 active:scale-95 transition-all duration-300 group"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-terminal h-5 w-5 transition-transform group-hover:rotate-6" aria-hidden="true"><path d="M12 19h8"></path><path d="m4 17 6-6-6-6"></path></svg></button><section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section><script src="/_next/static/chunks/0ze4gu236oq96.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[27423,[\"/_next/static/chunks/066a4i89ndqqg.js\",\"/_next/static/chunks/05wtsnuuo8jlf.js\",\"/_next/static/chunks/0svp4fflm.scp.js\",\"/_next/static/chunks/0c_si9vlolndc.js\",\"/_next/static/chunks/07f7.l2gfr1cv.js\"],\"ThemeProvider\"]\n3:I[44565,[\"/_next/static/chunks/066a4i89ndqqg.js\",\"/_next/static/chunks/05wtsnuuo8jlf.js\",\"/_next/static/chunks/0svp4fflm.scp.js\",\"/_next/static/chunks/0c_si9vlolndc.js\",\"/_next/static/chunks/07f7.l2gfr1cv.js\"],\"SmoothScroller\"]\n4:I[3265,[\"/_next/static/chunks/066a4i89ndqqg.js\",\"/_next/static/chunks/05wtsnuuo8jlf.js\",\"/_next/static/chunks/0svp4fflm.scp.js\",\"/_next/static/chunks/0c_si9vlolndc.js\",\"/_next/static/chunks/07f7.l2gfr1cv.js\"],\"Navbar\"]\n5:I[39756,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"default\"]\n6:I[16868,[\"/_next/static/chunks/066a4i89ndqqg.js\",\"/_next/static/chunks/05wtsnuuo8jlf.js\",\"/_next/static/chunks/0svp4fflm.scp.js\",\"/_next/static/chunks/0c_si9vlolndc.js\",\"/_next/static/chunks/07f7.l2gfr1cv.js\",\"/_next/static/chunks/00s2dxijo_9fa.js\"],\"default\"]\n7:I[37457,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"default\"]\n8:I[29306,[\"/_next/static/chunks/066a4i89ndqqg.js\",\"/_next/static/chunks/05wtsnuuo8jlf.js\",\"/_next/static/chunks/0svp4fflm.scp.js\",\"/_next/static/chunks/0c_si9vlolndc.js\",\"/_next/static/chunks/07f7.l2gfr1cv.js\",\"/_next/static/chunks/04j0oa2_waxt4.js\"],\"default\"]\n9:I[58234,[\"/_next/static/chunks/066a4i89ndqqg.js\",\"/_next/static/chunks/05wtsnuuo8jlf.js\",\"/_next/static/chunks/0svp4fflm.scp.js\",\"/_next/static/chunks/0c_si9vlolndc.js\",\"/_next/static/chunks/07f7.l2gfr1cv.js\"],\"Footer\"]\na:I[8550,[\"/_next/static/chunks/066a4i89ndqqg.js\",\"/_next/static/chunks/05wtsnuuo8jlf.js\",\"/_next/static/chunks/0svp4fflm.scp.js\",\"/_next/static/chunks/0c_si9vlolndc.js\",\"/_next/static/chunks/07f7.l2gfr1cv.js\"],\"TerminalEmulator\"]\nb:I[13354,[\"/_next/static/chunks/066a4i89ndqqg.js\",\"/_next/static/chunks/05wtsnuuo8jlf.js\",\"/_next/static/chunks/0svp4fflm.scp.js\",\"/_next/static/chunks/0c_si9vlolndc.js\",\"/_next/static/chunks/07f7.l2gfr1cv.js\"],\"Toaster\"]\nd:I[97367,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"OutletBoundary\"]\ne:\"$Sreact.suspense\"\n11:I[97367,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"ViewportBoundary\"]\n13:I[97367,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"MetadataBoundary\"]\n15:I[68027,[\"/_next/static/chunks/066a4i89ndqqg.js\",\"/_next/static/chunks/05wtsnuuo8jlf.js\",\"/_next/static/chunks/0svp4fflm.scp.js\",\"/_next/static/chunks/0c_si9vlolndc.js\",\"/_next/static/chunks/07f7.l2gfr1cv.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/0f3dpchaugpzl.css\",\"style\"]\n:HL[\"/_next/static/chunks/0s1w4d62svzw9.css\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.09zddjkbdep5a.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/83afe278b6a6bb3c-s.p.0q-301v4kxxnr.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.09~u27dqhyhd6.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"blog\",\"belajar-html-dasar-untuk-pemula-panduan-lengkap-dan-mudah-memahami-fondasi-web?_rsc=Sx5S5H0NHr-lbl4v\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"blog\",{\"children\":[[\"slug\",\"belajar-html-dasar-untuk-pemula-panduan-lengkap-dan-mudah-memahami-fondasi-web\",\"d\",null],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0f3dpchaugpzl.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0s1w4d62svzw9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/066a4i89ndqqg.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/05wtsnuuo8jlf.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/0svp4fflm.scp.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/0c_si9vlolndc.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-4\",{\"src\":\"/_next/static/chunks/07f7.l2gfr1cv.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"scroll-smooth\",\"children\":[\"$\",\"body\",null,{\"className\":\"inter_b2991b2-module__9mH_6q__className min-h-screen flex flex-col bg-background text-foreground\",\"children\":[\"$\",\"$L2\",null,{\"attribute\":\"class\",\"defaultTheme\":\"dark\",\"enableSystem\":true,\"disableTransitionOnChange\":true,\"children\":[[\"$\",\"$L3\",null,{\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"flex-1\",\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{\"children\":[\"$\",\"$L7\",null,{}]}],\"templateStyles\":[],\"templateScripts\":[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/00s2dxijo_9fa.js\",\"async\":true}]],\"notFound\":[[\"$\",\"$L8\",null,{}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$L9\",null,{}]]}],[\"$\",\"$La\",null,{}],[\"$\",\"$Lb\",null,{\"richColors\":true,\"position\":\"top-right\"}]]}]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L7\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L7\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$Lc\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0w35azs2nd3k7.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"$e\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@f\"}]}]]}],{},null,false,null]},null,false,\"$@10\"]},null,false,\"$@10\"]},null,false,null],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L11\",null,{\"children\":\"$L12\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L13\",null,{\"children\":[\"$\",\"$e\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L14\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$15\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0f3dpchaugpzl.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0s1w4d62svzw9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"-xWsNZuUQOALNMq0pkk8o\"}\n"])</script><script>self.__next_f.push([1,"16:[]\n10:\"$W16\"\n"])</script><script>self.__next_f.push([1,"12:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"17:I[27201,[\"/_next/static/chunks/01xlw8hd842-c.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"IconMark\"]\nf:null\n"])</script><script>self.__next_f.push([1,"14:[[\"$\",\"title\",\"0\",{\"children\":\"Belajar HTML Dasar untuk Pemula: Panduan Lengkap dan Mudah Memahami Fondasi Web | Deni Setiawan\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Ingin terjun ke dunia web development? Jalur pertamamu adalah menguasai HTML. Yuk, pelajari konsep dasar, struktur, dan tag penting HTML dalam panduan ramah pemula ini!\"}],[\"$\",\"link\",\"2\",{\"rel\":\"author\",\"href\":\"https://github.com/KINGXDENI\"}],[\"$\",\"meta\",\"3\",{\"name\":\"author\",\"content\":\"Muh Deni Setiawan\"}],[\"$\",\"meta\",\"4\",{\"name\":\"keywords\",\"content\":\"Muh Deni Setiawan,Deni Setiawan,Full-Stack Developer,Flutter Developer Indonesia,Next.js Portfolio,KINGXDENI,Reverse Engineering API\"}],[\"$\",\"meta\",\"5\",{\"name\":\"creator\",\"content\":\"Muh Deni Setiawan\"}],[\"$\",\"meta\",\"6\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"7\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:title\",\"content\":\"Belajar HTML Dasar untuk Pemula: Panduan Lengkap dan Mudah Memahami Fondasi Web\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:description\",\"content\":\"Ingin terjun ke dunia web development? Jalur pertamamu adalah menguasai HTML. Yuk, pelajari konsep dasar, struktur, dan tag penting HTML dalam panduan ramah pemula ini!\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"11\",{\"property\":\"article:published_time\",\"content\":\"2026-05-21T21:52:12.586Z\"}],[\"$\",\"meta\",\"12\",{\"property\":\"article:author\",\"content\":\"Muh Deni Setiawan\"}],[\"$\",\"meta\",\"13\",{\"property\":\"article:tag\",\"content\":\"HTML\"}],[\"$\",\"meta\",\"14\",{\"property\":\"article:tag\",\"content\":\"Web Development\"}],[\"$\",\"meta\",\"15\",{\"property\":\"article:tag\",\"content\":\"Belajar Coding\"}],[\"$\",\"meta\",\"16\",{\"property\":\"article:tag\",\"content\":\"Pemula\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:title\",\"content\":\"Belajar HTML Dasar untuk Pemula: Panduan Lengkap dan Mudah Memahami Fondasi Web\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:description\",\"content\":\"Ingin terjun ke dunia web development? Jalur pertamamu adalah menguasai HTML. Yuk, pelajari konsep dasar, struktur, dan tag penting HTML dalam panduan ramah pemula ini!\"}],[\"$\",\"link\",\"20\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0x3dzn~oxb6tn.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"$L17\",\"21\",{}]]\n"])</script><script>self.__next_f.push([1,"18:I[59062,[\"/_next/static/chunks/066a4i89ndqqg.js\",\"/_next/static/chunks/05wtsnuuo8jlf.js\",\"/_next/static/chunks/0svp4fflm.scp.js\",\"/_next/static/chunks/0c_si9vlolndc.js\",\"/_next/static/chunks/07f7.l2gfr1cv.js\",\"/_next/static/chunks/0w35azs2nd3k7.js\"],\"ScrollProgress\"]\n19:I[76783,[\"/_next/static/chunks/066a4i89ndqqg.js\",\"/_next/static/chunks/05wtsnuuo8jlf.js\",\"/_next/static/chunks/0svp4fflm.scp.js\",\"/_next/static/chunks/0c_si9vlolndc.js\",\"/_next/static/chunks/07f7.l2gfr1cv.js\",\"/_next/static/chunks/0w35azs2nd3k7.js\"],\"BlogStatsProvider\"]\n1a:I[72472,[\"/_next/static/chunks/066a4i89ndqqg.js\",\"/_next/static/chunks/05wtsnuuo8jlf.js\",\"/_next/static/chunks/0svp4fflm.scp.js\",\"/_next/static/chunks/0c_si9vlolndc.js\",\"/_next/static/chunks/07f7.l2gfr1cv.js\",\"/_next/static/chunks/0w35azs2nd3k7.js\"],\"Button\"]\n1b:I[22016,[\"/_next/static/chunks/066a4i89ndqqg.js\",\"/_next/static/chunks/05wtsnuuo8jlf.js\",\"/_next/static/chunks/0svp4fflm.scp.js\",\"/_next/static/chunks/0c_si9vlolndc.js\",\"/_next/static/chunks/07f7.l2gfr1cv.js\",\"/_next/static/chunks/0w35azs2nd3k7.js\"],\"\"]\n1c:I[5014,[\"/_next/static/chunks/066a4i89ndqqg.js\",\"/_next/static/chunks/05wtsnuuo8jlf.js\",\"/_next/static/chunks/0svp4fflm.scp.js\",\"/_next/static/chunks/0c_si9vlolndc.js\",\"/_next/static/chunks/07f7.l2gfr1cv.js\",\"/_next/static/chunks/0w35azs2nd3k7.js\"],\"default\"]\n1d:I[47925,[\"/_next/static/chunks/066a4i89ndqqg.js\",\"/_next/static/chunks/05wtsnuuo8jlf.js\",\"/_next/static/chunks/0svp4fflm.scp.js\",\"/_next/static/chunks/0c_si9vlolndc.js\",\"/_next/static/chunks/07f7.l2gfr1cv.js\",\"/_next/static/chunks/0w35azs2nd3k7.js\"],\"BlogStatsHeader\"]\n"])</script><script>self.__next_f.push([1,"c:[[\"$\",\"$L18\",null,{}],[\"$\",\"$L19\",null,{\"slug\":\"belajar-html-dasar-untuk-pemula-panduan-lengkap-dan-mudah-memahami-fondasi-web\",\"initialViews\":0,\"initialLikes\":0,\"children\":[\"$\",\"article\",null,{\"className\":\"container mx-auto px-4 md:px-8 max-w-3xl py-20 min-h-screen relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute top-40 left-1/2 -translate-x-1/2 w-full max-w-2xl h-[300px] bg-primary/5 blur-[100px] rounded-full pointer-events-none -z-10\"}],[\"$\",\"$L1a\",null,{\"data-slot\":\"button\",\"className\":\"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [\u0026_svg]:pointer-events-none [\u0026_svg]:shrink-0 [\u0026_svg:not([class*='size-'])]:size-4 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 mb-8 rounded-full\",\"render\":[\"$\",\"$L1b\",null,{\"href\":\"/blog\",\"children\":[[\"$\",\"$L1c\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"m12 19-7-7 7-7\",\"key\":\"1l729n\"}],[\"path\",{\"d\":\"M19 12H5\",\"key\":\"x3x0zl\"}]],\"className\":\"lucide-arrow-left mr-2 h-4 w-4\"}],\" Back to Garden\"]}]}],[\"$\",\"div\",null,{\"className\":\"space-y-4 border-b border-border/60 pb-8 mb-10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-4 text-sm text-muted-foreground font-medium\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center space-x-2\",\"children\":[[\"$\",\"$L1c\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M8 2v4\",\"key\":\"1cmpym\"}],[\"path\",{\"d\":\"M16 2v4\",\"key\":\"4m81vk\"}],[\"rect\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\",\"key\":\"1hopcy\"}],[\"path\",{\"d\":\"M3 10h18\",\"key\":\"8toen8\"}]],\"className\":\"lucide-calendar h-4 w-4 text-primary/80\"}],[\"$\",\"span\",null,{\"children\":\"21-05-2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center space-x-2 text-primary font-mono text-xs font-bold bg-primary/5 px-2.5 py-1 rounded-full border border-primary/10 shadow-sm\",\"children\":[[\"$\",\"$L1c\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"circle\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\",\"key\":\"1mglay\"}],[\"path\",{\"d\":\"M12 6v6l4 2\",\"key\":\"mmk7yg\"}]],\"className\":\"lucide-clock h-3.5 w-3.5\"}],[\"$\",\"span\",null,{\"children\":\"7 min read\"}]]}],[\"$\",\"$L1d\",null,{}]]}],[\"$\",\"h1\",null,{\"className\":\"text-3xl md:text-5xl font-extrabold tracking-tight leading-tight bg-gradient-to-r from-foreground via-foreground/90 to-foreground/70 bg-clip-text\",\"children\":\"Belajar HTML Dasar untuk Pemula: Panduan Lengkap dan Mudah Memahami Fondasi Web\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2 pt-2\",\"children\":[[\"$\",\"span\",\"HTML\",{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3! [a]:hover:bg-secondary/80 bg-primary/5 text-primary text-xs font-medium border border-primary/10 rounded-full px-3 py-0.5\",\"children\":[\"#\",\"HTML\"]}],[\"$\",\"span\",\"Web Development\",{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3! [a]:hover:bg-secondary/80 bg-primary/5 text-primary text-xs font-medium border border-primary/10 rounded-full px-3 py-0.5\",\"children\":[\"#\",\"Web Development\"]}],\"$L1e\",\"$L1f\"]}]]}],\"$L20\",\"$L21\"]}]}]]\n"])</script><script>self.__next_f.push([1,"24:I[69070,[\"/_next/static/chunks/066a4i89ndqqg.js\",\"/_next/static/chunks/05wtsnuuo8jlf.js\",\"/_next/static/chunks/0svp4fflm.scp.js\",\"/_next/static/chunks/0c_si9vlolndc.js\",\"/_next/static/chunks/07f7.l2gfr1cv.js\",\"/_next/static/chunks/0w35azs2nd3k7.js\"],\"BlogLikeButton\"]\n1e:[\"$\",\"span\",\"Belajar Coding\",{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3! [a]:hover:bg-secondary/80 bg-primary/5 text-primary text-xs font-medium border border-primary/10 rounded-full px-3 py-0.5\",\"children\":[\"#\",\"Belajar Coding\"]}]\n1f:[\"$\",\"span\",\"Pemula\",{\"data-slot\":\"badge\",\"data-variant\":\"secondary\",\"className\":\"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026\u003esvg]:pointer-events-none [\u0026\u003esvg]:size-3! [a]:hover:bg-secondary/80 bg-primary/5 text-primary text-xs font-medium border border-primary/10 rounded-full px-3 py-0.5\",\"children\":[\"#\",\"Pemula\"]}]\n22:T513,leading-relaxed text-foreground/80 space-y-6 text-base md:text-lg [\u0026\u003eh2]:text-2xl [\u0026\u003eh2]:md:text-3xl [\u0026\u003eh2]:font-extrabold [\u0026\u003eh2]:tracking-tight [\u0026\u003eh2]:text-foreground [\u0026\u003eh2]:pt-6 [\u0026\u003eh2]:pb-2 [\u0026\u003eh3]:text-xl [\u0026\u003eh3]:md:text-2xl [\u0026\u003eh3]:font-bold [\u0026\u003eh3]:tracking-tight [\u0026\u003eh3]:text-foreground [\u0026\u003eh3]:pt-4 [\u0026\u003eh3]:pb-1 [\u0026\u003ep]:leading-relaxed [\u0026\u003ep]:text-muted-foreground/90 [\u0026\u003eul]:list-disc [\u0026\u003eul]:pl-6 [\u0026\u003eul]:space-y-2 [\u0026\u003eul]:text-muted-foreground/90 [\u0026\u003eol]:list-decimal [\u0026\u003eol]:pl-6 [\u0026\u003eol]:space-y-2 [\u0026\u003eol]:text-muted-foreground/90 [\u0026_strong]:font-semibold [\u0026_strong]:text-foreground /* Teks Kode Inline (Single Backtick) */ [\u0026\u003ep\u003ecode]:text-primary [\u0026\u003ep\u003ecode]:bg-primary/5 [\u0026\u003ep\u003ecode]:px-1.5 [\u0026\u003ep\u003ecode]:py-0.5 [\u0026\u003ep\u003ecode]:rounded-md [\u0026\u003ep\u003ecode]:text-sm [\u0026\u003ep\u003ecode]:font-mono [\u0026\u003ep\u003ecode]:border [\u0026\u003ep\u003ecode]:border-primary/10 [\u0026\u003eli\u003ecode]:text-primary [\u0026\u003eli\u003ecode]:bg-primary/5 [\u0026\u003eli\u003ecode]:px-1.5 [\u0026\u003eli\u003ecode]:py-0.5 [\u0026\u003eli\u003ecode]:rounded-md [\u0026\u003eli\u003ecode]:text-sm [\u0026\u003eli\u003ecode]:font-mono [\u0026\u003eli\u003ecode]:border [\u0026\u003eli\u003ecode]:border-primary/10 /* PERBAIKAN STYLING SHIKI TERMINAL BOX */ [\u0026_pre.shiki]:bg-[#24292e]! [\u0026_pre.shiki]:border [\u0026_pre.shiki]:border-border/60 [\u0026_pre.shiki]:rounded-2xl [\u0026_pre.shiki]:p-5 [\u0026_pre.shiki]:font-mono [\u0026_pre.shiki]:text-sm [\u0026_pre.shiki]:overflow-x-auto [\u0026_pre.shiki]:shadow-xl [\u0026_pre.shiki]:my-623:T3b4c,"])</script><script>self.__next_f.push([1,"\u003ch1\u003eBelajar HTML Dasar untuk Pemula: Panduan Lengkap dan Mudah Memahami Fondasi Web\u003c/h1\u003e\n\u003cp\u003ePernahkah Anda penasaran bagaimana sebuah halaman website bisa menampilkan teks, gambar, tombol, hingga video? Semua hal menakjubkan yang Anda lihat di internet saat ini bermuara pada satu fondasi yang sama, yaitu \u003cstrong\u003eHTML\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003eJika Anda baru saja memutuskan untuk terjun ke dunia \u003cem\u003eweb development\u003c/em\u003e atau desain grafis web, HTML adalah gerbang pertama yang wajib Anda lalui. Kabar baiknya, HTML sama sekali tidak seseram yang dibayangkan. Artikel ini akan membimbing Anda memahami HTML dasar secara mendalam, santai, dan langsung bisa Anda praktikkan.\u003c/p\u003e\n\u003chr\u003e\n\u003ch2\u003eApa Itu HTML?\u003c/h2\u003e\n\u003cp\u003e\u003cstrong\u003eHTML\u003c/strong\u003e adalah singkatan dari \u003cem\u003eHypertext Markup Language\u003c/em\u003e. Di sini ada satu miskonsepsi yang sering terjadi di kalangan pemula: \u003cstrong\u003eHTML bukanlah bahasa pemrograman.\u003c/strong\u003e \u003c/p\u003e\n\u003cp\u003eHTML adalah \u003cstrong\u003ebahasa markah (markup language)\u003c/strong\u003e. Tugas utamanya bukan mengolah logika atau menghitung matematika (seperti bahasa pemrograman Python atau JavaScript), melainkan untuk menstrukturkan dan menyusun konten pada sebuah halaman web.\u003c/p\u003e\n\u003cp\u003eJika kita mengibaratkan sebuah website sebagai sebuah bangunan rumah:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eHTML\u003c/strong\u003e adalah pondasi, batu bata, dan kerangka dindingnya.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCSS\u003c/strong\u003e adalah cat warna, dekorasi, dan desain interiornya.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eJavaScript\u003c/strong\u003e adalah sistem kelistrikan, pintu otomatis, dan fungsi-fungsi interaktif lainnya.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eTanpa HTML, tidak akan ada halaman web di internet.\u003c/p\u003e\n\u003chr\u003e\n\u003ch2\u003eMemahami Anatomi Elemen HTML\u003c/h2\u003e\n\u003cp\u003eHTML bekerja menggunakan \u003cstrong\u003eTag\u003c/strong\u003e (tanda markah) untuk memberi tahu \u003cem\u003ebrowser\u003c/em\u003e bagaimana sebuah konten harus ditampilkan. Mari kita lihat anatomi dasar dari sebuah elemen HTML berikut:\u003c/p\u003e\n\u003cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"\u003e\u003ccode\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003ep\u003c/span\u003e\u003cspan style=\"color:#B392F0\"\u003e class\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#9ECBFF\"\u003e\"deskripsi\"\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003eHalo Dunia, saya sedang belajar HTML!\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003ep\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003cp\u003eMari kita bedah satu per satu bagian di atas:\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003eTag Pembuka (\u003cp\u003e)\u003c/strong\u003e: Menandakan awal dari sebuah elemen. Dalam contoh ini, p berarti \u003cem\u003eparagraph\u003c/em\u003e (paragraf).\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eAtribut (class=\u0026quot;deskripsi\u0026quot;)\u003c/strong\u003e: Informasi tambahan yang disisipkan di dalam tag pembuka. Atribut memiliki nama (class) dan nilai (\u0026quot;deskripsi\u0026quot;), berguna untuk memberikan identitas yang nantinya bisa dihias menggunakan CSS.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eKonten (Halo Dunia...)\u003c/strong\u003e: Teks atau isi yang akan muncul di layar pengguna.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eTag Penutup (\u003c/p\u003e)\u003c/strong\u003e: Menandakan akhir dari elemen. Cirinya adalah menggunakan tanda garis miring (/).\u003c/li\u003e\n\u003c/ol\u003e\n\u003chr\u003e\n\u003ch2\u003eStruktur Dokumen HTML yang Wajib Ada\u003c/h2\u003e\n\u003cp\u003eSetiap kali Anda membuat file HTML baru (biasanya disimpan dengan ekstensi .html), ada struktur standar yang wajib Anda tulis. Struktur ini menjadi kerangka utama agar browser tahu bahwa dokumen tersebut adalah dokumen web yang sah.\u003c/p\u003e\n\u003cp\u003eBerikut adalah boilerplate atau struktur dasar HTML5:\u003c/p\u003e\n\u003cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"\u003e\u003ccode\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u0026#x3C;!\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003eDOCTYPE\u003c/span\u003e\u003cspan style=\"color:#B392F0\"\u003e html\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003ehtml\u003c/span\u003e\u003cspan style=\"color:#B392F0\"\u003e lang\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#9ECBFF\"\u003e\"id\"\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003ehead\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003emeta\u003c/span\u003e\u003cspan style=\"color:#B392F0\"\u003e charset\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#9ECBFF\"\u003e\"UTF-8\"\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003emeta\u003c/span\u003e\u003cspan style=\"color:#B392F0\"\u003e name\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#9ECBFF\"\u003e\"viewport\"\u003c/span\u003e\u003cspan style=\"color:#B392F0\"\u003e content\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#9ECBFF\"\u003e\"width=device-width, initial-scale=1.0\"\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003etitle\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003eHalaman HTML Pertamaku\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003etitle\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003ehead\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003ebody\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003eh1\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003eSelamat Datang di Dunia Web Developer!\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003eh1\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003ep\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003eIni adalah paragraf pertama yang saya buat menggunakan kode HTML dasar.\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003ep\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003ebody\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003ehtml\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003ch3\u003ePenjelasan Struktur:\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003c!DOCTYPE html\u003e: Deklarasi untuk memberi tahu browser bahwa dokumen ini menggunakan standar HTML5 terbaru.\u003c/li\u003e\n\u003cli\u003e\u003chtml lang=\"id\"\u003e: Tag utama yang membungkus seluruh konten web. Atribut lang=\"id\" menandakan bahwa bahasa utama situs ini adalah bahasa Indonesia.\u003c/li\u003e\n\u003cli\u003e\u003chead\u003e: Bagian \"otak\" dari web. Berisi informasi meta (metadata), judul halaman, dan tautan ke file CSS/JavaScript. Apa yang ditulis di dalam \u003chead\u003e tidak akan muncul langsung di halaman utama web, kecuali elemen \u003ctitle\u003e.\u003c/li\u003e\n\u003cli\u003e\u003cbody\u003e: Bagian \"tubuh\" web. Semua teks, gambar, video, dan navigasi yang ingin Anda perlihatkan kepada pengunjung ditulis di dalam tag ini.\u003c/li\u003e\n\u003c/ul\u003e\n\u003chr\u003e\n\u003ch2\u003eTag HTML Dasar yang Paling Sering Digunakan\u003c/h2\u003e\n\u003cp\u003eSebagai pemula, Anda tidak perlu menghafal ratusan tag HTML yang ada. Cukup pahami dan kuasai beberapa tag inti berikut yang menjadi pilar utama sebuah website:\u003c/p\u003e\n\u003ch3\u003e1. Tag Heading (\u003ch1\u003e sampai \u003ch6\u003e)\u003c/h3\u003e\n\u003cp\u003eHeading digunakan untuk membuat judul dan sub-judul. Urutannya dimulai dari \u003ch1\u003e (terbesar dan paling penting) hingga \u003ch6\u003e (terkecil).\u003c/p\u003e\n\u003cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"\u003e\u003ccode\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003eh1\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003eIni Judul Utama Artikel (H1)\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003eh1\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e## Ini Sub-bab Utama (H2)\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e### Ini Sub-dari Sub-bab (H3)\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003cblockquote\u003e\n\u003cp\u003e\u003cstrong\u003eTips SEO:\u003c/strong\u003e Gunakan hanya satu \u003ch1\u003e dalam sebuah halaman web, biasanya untuk judul artikel atau nama toko. Ini sangat membantu Google memahami topik utama halaman Anda.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003ch3\u003e2. Tag Paragraf (\u003cp\u003e)\u003c/h3\u003e\n\u003cp\u003eDigunakan untuk menulis blok teks atau artikel. Browser secara otomatis akan memberikan sedikit jarak (margin) di bawah setiap tag \u003cp\u003e.\u003c/p\u003e\n\u003cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"\u003e\u003ccode\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003ep\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003eHTML itu ternyata sangat mudah dipelajari jika kita konsisten.\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003ep\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003ch3\u003e3. Tag Tautan/Link (\u003ca\u003e)\u003c/h3\u003e\n\u003cp\u003eLink membuat halaman web saling terhubung (\u003cem\u003ehyperlink\u003c/em\u003e). Tag ini menggunakan atribut href untuk menentukan alamat web tujuan.\u003c/p\u003e\n\u003cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"\u003e\u003ccode\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003ea\u003c/span\u003e\u003cspan style=\"color:#B392F0\"\u003e href\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#9ECBFF\"\u003e\"https://www.google.com\"\u003c/span\u003e\u003cspan style=\"color:#B392F0\"\u003e target\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#9ECBFF\"\u003e\"_blank\"\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003eBuka Google di Tab Baru\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003ea\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cem\u003eAtribut target=\u0026quot;_blank\u0026quot; berfungsi agar link terbuka di tab baru browser.\u003c/em\u003e\u003c/p\u003e\n\u003ch3\u003e4. Tag Gambar (\u003cimg\u003e)\u003c/h3\u003e\n\u003cp\u003eUntuk menampilkan gambar, kita menggunakan tag \u003cimg\u003e. Uniknya, tag ini termasuk \u003cem\u003eself-closing tag\u003c/em\u003e, artinya tidak membutuhkan tag penutup \u003c/img\u003e.\u003c/p\u003e\n\u003cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"\u003e\u003ccode\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003eimg\u003c/span\u003e\u003cspan style=\"color:#B392F0\"\u003e src\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#9ECBFF\"\u003e\"gambar-pemandangan.jpg\"\u003c/span\u003e\u003cspan style=\"color:#B392F0\"\u003e alt\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#9ECBFF\"\u003e\"Pemandangan gunung saat matahari terbit\"\u003c/span\u003e\u003cspan style=\"color:#B392F0\"\u003e width\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#9ECBFF\"\u003e\"500\"\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003cul\u003e\n\u003cli\u003esrc: Sumber atau lokasi file gambar.\u003c/li\u003e\n\u003cli\u003ealt: Teks alternatif jika gambar gagal dimuat. Ini juga sangat penting untuk aksesibilitas penutur tunanetra dan SEO.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3\u003e5. Tag Daftar/List (\u003cul\u003e dan \u003col\u003e)\u003c/h3\u003e\n\u003cp\u003eAda dua jenis daftar yang sering digunakan:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cul\u003e (*Unordered List*): Daftar menggunakan simbol (bullet).\u003c/li\u003e\n\u003cli\u003e\u003col\u003e (*Ordered List*): Daftar menggunakan nomor/angka.\u003c/li\u003e\n\u003cli\u003e\u003cli\u003e (*List Item*): Konten di dalam daftar tersebut.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"\u003e\u003ccode\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#6A737D\"\u003e\u0026#x3C;!-- Contoh Daftar Poin --\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003eul\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003eli\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003eKopi Hitam\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003eli\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003eli\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003eTeh Manis\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003eli\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003eul\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#6A737D\"\u003e\u0026#x3C;!-- Contoh Daftar Angka --\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003eol\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003eli\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003eBuka Browser\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003eli\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003eli\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003eTulis Kode\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003eli\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003eli\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003eRefresh Halaman\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003eli\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#85E89D\"\u003eol\u003c/span\u003e\u003cspan style=\"color:#E1E4E8\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003chr\u003e\n\u003ch2\u003eLangkah Praktik: Membuat File HTML Pertama Anda\u003c/h2\u003e\n\u003cp\u003eTeori tanpa praktik akan sia-sia. Yuk, buat halaman web pertama Anda sekarang juga dalam waktu kurang dari 5 menit!\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003eBuka Aplikasi Text Editor\u003c/strong\u003e: Anda bisa menggunakan Notepad (Windows), TextEdit (Mac), atau editor gratis yang sangat direkomendasikan seperti \u003cstrong\u003eVisual Studio Code (VS Code)\u003c/strong\u003e.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSalin Kode\u003c/strong\u003e: Copy struktur dasar HTML yang ada di sub-bab sebelumnya, lalu paste ke dalam editor Anda.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSimpan File\u003c/strong\u003e: Simpan file tersebut dengan nama index.html. Pastikan ekstensinya .html, bukan .txt.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eJalankan\u003c/strong\u003e: Cari file index.html tersebut di file manager Anda, lalu klik dua kali. File akan terbuka otomatis di Google Chrome, Firefox, atau browser andalan Anda.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003e\u003cem\u003eSelamat! Anda baru saja berhasil membuat halaman web pertama Anda sendiri.\u003c/em\u003e\u003c/p\u003e\n\u003chr\u003e\n\u003ch2\u003eLangkah Selanjutnya Setelah Menguasai HTML Dasar\u003c/h2\u003e\n\u003cp\u003eMenguasai HTML dasar adalah fondasi awal yang kokoh. Namun, perjalanan Anda tidak berhenti di sini. Jika Anda ingin membuat website Anda terlihat cantik dan interaktif, berikut peta jalan (\u003cem\u003eroadmap\u003c/em\u003e) berikutnya yang bisa Anda pelajari:\u003c/p\u003e\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth align=\"left\"\u003eTahapan\u003c/th\u003e\n\u003cth align=\"left\"\u003eTeknologi\u003c/th\u003e\n\u003cth align=\"left\"\u003eFungsi Utama\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\u003ctr\u003e\n\u003ctd align=\"left\"\u003e\u003cstrong\u003eTahap 1\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"left\"\u003eHTML Lanjutan\u003c/td\u003e\n\u003ctd align=\"left\"\u003eMempelajari struktur Form, Tabel, dan Semantic HTML (seperti \u003cheader\u003e, \u003carticle\u003e, \u003cfooter\u003e).\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"left\"\u003e\u003cstrong\u003eTahap 2\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"left\"\u003eCSS (Cascading Style Sheets)\u003c/td\u003e\n\u003ctd align=\"left\"\u003eMemberikan warna, mengatur tata letak (layout), memilih font, dan membuat web menjadi responsif di HP.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"left\"\u003e\u003cstrong\u003eTahap 3\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"left\"\u003eJavaScript\u003c/td\u003e\n\u003ctd align=\"left\"\u003eMenambahkan logika, animasi bergerak, pop-up interaktif, dan validasi data.\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\n\u003cp\u003eKunci utama dalam belajar coding adalah konsistensi dan eksperimen. Jangan takut jika kode Anda eror; eror adalah cara terbaik bagi seorang \u003cem\u003edeveloper\u003c/em\u003e untuk belajar dan berkembang. Selamat belajar HTML, dan sampai jumpa di proyek-proyek web keren buatan Anda!\u003c/p\u003e\n"])</script><script>self.__next_f.push([1,"20:[\"$\",\"div\",null,{\"className\":\"$22\",\"dangerouslySetInnerHTML\":{\"__html\":\"$23\"}}]\n21:[\"$\",\"$L24\",null,{}]\n"])</script></body></html>