Banyak orang mengira belajar membuat website itu sulit dan butuh waktu berbulan-bulan. Padahal, langkah pertamanya sangat sederhana: menulis satu file teks dan membukanya di browser. Itulah inti dari belajar HTML pemula — kamu tidak butuh software mahal, server, atau kemampuan coding tingkat lanjut. HTML (HyperText Markup Language) adalah bahasa markup yang menjadi fondasi setiap halaman web di internet. Tanpa HTML, browser tidak akan tahu cara menampilkan teks, gambar, tautan, atau elemen apa pun di layar. Artikel ini akan memandumu membuat halaman HTML pertamamu dari nol: menyiapkan tools, memahami struktur dasar dokumen, mengenal tag-tag penting, sampai latihan membuat halaman profil sederhana. Semua contoh mengikuti standar resmi dari MDN Web Docs, jadi kamu belajar dengan referensi yang kredibel sejak awal.
Menyiapkan Tools untuk Belajar HTML
Sebelum menulis kode HTML pertama, siapkan dua hal: teks editor untuk menulis kode dan browser untuk melihat hasilnya. Tidak ada biaya tambahan — keduanya gratis dan sudah tersedia di hampir semua komputer.
Pilihan Teks Editor
Kamu bisa menggunakan Notepad++, software gratis yang dirancang khusus untuk menulis kode program. Notepad++ punya fitur syntax highlighting yang membuat kode HTML berwarna-warni sehingga lebih mudah dibaca. Ada juga Visual Studio Code (VS Code) dari Microsoft yang sangat populer di kalangan developer, serta Sublime Text yang ringan dan cepat.
Jika tidak ingin menginstal software tambahan, Notepad bawaan Windows pun sudah cukup untuk mulai belajar HTML pemula. Yang terpenting: kamu mulai menulis kode. Editor canggih bisa menyusul nanti.
Browser yang Digunakan
Untuk melihat hasil kode HTML, kamu bisa memakai browser apa saja: Google Chrome, Mozilla Firefox, Microsoft Edge, atau Safari. Setiap browser punya fitur Developer Tools yang bisa diakses dengan menekan F12 atau klik kanan lalu pilih Inspect. Fitur ini akan sangat membantumu saat debugging nanti.
Struktur Dasar Dokumen HTML
Setiap dokumen HTML punya struktur baku yang wajib dipahami. Berikut struktur dasar yang harus ada di setiap file HTML sesuai standar HTML5:
HTML Snippet
HTML
<!DOCTYPE html>
<html lang="id">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Judul Halaman Saya</title>
</head>
<body> <!-- Konten halaman web ditulis di sini -->
</body>
</html>Penjelasan masing-masing bagian:
<!DOCTYPE html>— Memberitahu browser bahwa dokumen ini menggunakan HTML5. Ini harus selalu menjadi baris pertama.<html lang="id">— Tag pembuka dokumen HTML. Atributlang="id"menandakan konten dalam bahasa Indonesia, yang juga membantu aksesibilitas dan SEO.<head>— Berisi informasi tentang dokumen, seperti encoding karakter, viewport untuk responsivitas, dan judul halaman. Konten di sini tidak terlihat oleh pengunjung.<body>— Berisi semua konten yang terlihat oleh pengunjung: teks, gambar, tautan, form, dan lainnya.
Menulis Kode HTML Pertama
Sekarang saatnya praktik. Buka teks editor favoritmu, ketik kode berikut:
HTML Snippet
HTML
<!DOCTYPE html>
<html lang="id">
<head> <meta charset="UTF-8"> <title>HTML Pertamaku</title>
</head>
<body> <h1>Apa Kabar Dunia!!!</h1>
</body>
</html>Simpan file tersebut dengan nama pertamax.html. Pastikan ekstensi filenya .html, bukan .txt. Kemudian klik dua kali file tersebut untuk membukanya di browser.
Tampilan browser akan menunjukkan tulisan “Apa Kabar Dunia!!!” dengan ukuran besar dan tebal. Selamat — kamu baru saja membuat halaman web pertamamu!
Mengenal Tag Heading dalam HTML
Tag <h1> sampai <h6> digunakan untuk membuat judul atau heading. <h1> adalah yang paling besar dan penting, sedangkan <h6> yang paling kecil. Struktur heading ini membantu mesin pencari memahami hierarki konten, yang sangat penting untuk SEO.
HTML Snippet
HTML
<h1>Ini Heading Utama (H1)</h1>
<h2>Ini Sub Heading (H2)</h2>
<h3>Ini Sub Sub Heading (H3)</h3>
<h4>Ini Heading Level 4 (H4)</h4>
<h5>Ini Heading Level 5 (H5)</h5>
<h6>Ini Heading Level 6 (H6)</h6>Aturan pakainya: gunakan <h1> hanya sekali sebagai judul utama halaman, lalu <h2> untuk bagian-bagian utama, dan <h3> untuk sub-bagian di dalamnya. Jangan lompat-lompat level — hierarki yang rapi lebih mudah dibaca manusia dan mesin pencari.
Text Formatting: Memanipulasi Tampilan Teks
Salah satu kemampuan dasar HTML yang penting adalah text formatting — mengubah cara teks ditampilkan di browser. Berikut tag-tag formatting yang perlu kamu kuasai saat belajar HTML pemula:
| Tag HTML | Fungsi | Contoh Penggunaan |
|---|---|---|
<strong> | Menebalkan huruf | Penting untuk penekanan |
<em> | Memiringkan huruf | Penekanan halus |
<ins> | Menggarisbawahi huruf | Teks yang baru ditambahkan |
<del> | Mencoret huruf | Teks yang sudah tidak berlaku |
<kbd> | Menampilkan teks keyboard | Instruksi penekanan tombol |
<sub> | Membuat huruf subscript | Notasi kimia: H2O |
<sup> | Membuat huruf superscript | Pangkat: x2 |
Setiap tag HTML punya pembuka dan penutup. Tag pembuka ditulis dengan tanda kurung sudut, misalnya <strong>, sedangkan tag penutup ditambah garis miring, misalnya </strong>. Teks yang akan diformat diletakkan di antara keduanya.
Contoh Lengkap Text Formatting
Berikut contoh penggunaan semua tag formatting sekaligus:
HTML Snippet
HTML
<p><strong>Apa Kabar Dunia!!!</strong></p>
<p><em>Apa Kabar Dunia!!!</em></p>
<p><ins>Apa Kabar Dunia!!!</ins></p>
<p><del>Apa Kabar Dunia!!!</del></p>
<p><kbd>Apa Kabar Dunia!!!</kbd></p>
<p>H<sub>2</sub>O adalah rumus air</p>
<p>E = mc<sup>2</sup></p>Tag <p> digunakan untuk membungkus setiap baris dalam paragraf terpisah agar tidak bertumpuk jadi satu.
Membuat Paragraf dan Line Break
Paragraf dibuat dengan tag <p>. Browser akan otomatis memberikan jarak antar paragraf. Untuk membuat jeda baris tanpa paragraf baru, gunakan tag <br> (break). Tag <br> adalah tag self-closing — tidak memerlukan tag penutup.
HTML Snippet
HTML
<p>Ini adalah paragraf pertama saya. HTML sangat menyenangkan untuk dipelajari.</p>
<p>Ini adalah paragraf kedua saya. Saya akan terus belajar setiap hari.</p>
<p>Baris pertama<br>Baris kedua<br>Baris ketiga</p>Membuat Tautan dan Gambar
Dua fitur paling fundamental dari HTML adalah kemampuan membuat tautan (hyperlink) dengan tag <a> dan menampilkan gambar dengan tag <img>.
Tag Tautan (Anchor)
HTML Snippet
HTML
<a href="https://example.com" target="_blank" rel="noopener">Kunjungi Situs Contoh</a>Atribut href berisi URL tujuan, target="_blank" membuka tautan di tab baru, dan rel="noopener" adalah standar keamanan yang mencegah halaman tujuan mengakses window pembuka.
Tag Gambar
HTML Snippet
HTML
<img src="https://via.placeholder.com/300x200" alt="Deskripsi Gambar" width="300" height="200">Tag <img> juga self-closing. Atribut alt sangat penting untuk aksesibilitas dan SEO — berikan deskripsi yang jelas tentang gambar. Jika gambar gagal dimuat, teks alt yang akan ditampilkan.
Daftar (List) dalam HTML
HTML menyediakan dua jenis daftar: ordered list (bernomor) dengan tag <ol> dan unordered list (berpoin) dengan tag <ul>. Item daftar dibuat dengan tag <li>.
HTML Snippet
HTML
<!-- Daftar Bernomor -->
<ol> <li>Langkah pertama: Instal text editor</li> <li>Langkah kedua: Buat file HTML</li> <li>Langkah ketiga: Buka di browser</li>
</ol> <!-- Daftar Berpoin -->
<ul> <li>HTML adalah fondasi web</li> <li>CSS mengatur tampilan</li> <li>JavaScript menambah interaktivitas</li>
</ul>Best Practice saat Belajar HTML Pemula
Beberapa kebiasaan baik yang sebaiknya kamu terapkan sejak awal:
- Selalu gunakan DOCTYPE — Pastikan
<!DOCTYPE html>ada di baris pertama dokumen. - Tulis HTML dengan indentasi yang rapi — Gunakan spasi atau tab untuk menandai hierarki tag. Ini memudahkan debugging.
- Gunakan huruf kecil untuk nama tag — Meskipun HTML tidak case-sensitive, konvensi standar menggunakan huruf kecil.
- Tutup semua tag — Kecuali tag self-closing seperti
<br>dan<img>, pastikan setiap tag punya penutup. - Gunakan atribut alt pada gambar — Ini penting untuk SEO dan aksesibilitas pengguna screen reader.
- Validasi kode kamu — Gunakan W3C Markup Validation Service untuk memastikan kode HTML tidak ada kesalahan.
Latihan: Membuat Halaman Profil Sederhana
Sekarang cobalah membuat halaman profil sederhana menggunakan semua yang sudah kamu pelajari. Berikut contohnya:
HTML Snippet
HTML
<!DOCTYPE html>
<html lang="id">
<head> <meta charset="UTF-8"> <title>Profil Saya</title>
</head>
<body> <h1>Profil Budi Santoso</h1> <img src="https://via.placeholder.com/150" alt="Foto Profil Budi"> <p>Halo! Nama saya <strong>Budi Santoso</strong>. Saya adalah seorang <em>mahasiswa</em> yang sedang belajar web development.</p> <h2>Hobi Saya</h2> <ul> <li>Membaca buku pemrograman</li> <li>Bermain game</li> <li>Menulis blog</li> </ul> <h2>Rencana Belajar</h2> <ol> <li>HTML & CSS</li> <li>JavaScript</li> <li>PHP</li> </ol> <p>Kunjungi <a href="https://example.com" target="_blank" rel="noopener">website saya</a> untuk info lebih lanjut.</p>
</body>
</html>Simpan file sebagai profil.html dan buka di browser. Kamu akan melihat halaman profil lengkap dengan foto, teks terformat, daftar, dan tautan.
Selanjutnya: Belajar CSS
Setelah menguasai dasar HTML, langkah berikutnya adalah belajar CSS (Cascading Style Sheets) untuk mengatur warna, font, layout, dan tampilan visual halaman web. HTML bertanggung jawab atas struktur, sedangkan CSS bertanggung jawab atas penampilan.
Selanjutnya setelah paham HTML dasar, coba baca juga tentang Strategi Website Performance Optimization atau lihat tutorial WordPress.
Kamu sudah membuat fondasi yang kuat dengan belajar HTML pemula. Teruslah berlatih, coba buat halaman web yang lebih kompleks, dan jangan takut bereksperimen dengan tag-tag baru. Dunia web development menunggumu!
Hal yang sering ditanyakan seputar Belajar HTML Pemula
Apa peran HTML dalam struktur halaman website?
HTML adalah kerangka dasar (markup) yang menyusun seluruh elemen konten web seperti teks, judul, gambar, tabel, dan tautan.
Apa tag HTML wajib dalam struktur dokumen HTML5?
, , ,