Selamat datang di dunia pemrograman web! Jika Anda ingin membuat website sendiri, langkah pertama yang wajib dan tak bisa ditawar adalah Belajar HTML. Tanpa HTML, tidak ada website seperti Facebook, Google, atau blog ini.
Dalam panduan ini, kita tidak akan berteori panjang lebar. Kita akan langsung belajar struktur dasar, tag-tag penting, dan cara membuat file HTML pertama Anda. Siapkan kopi Anda, dan mari kita mulai coding!
1. Apa Itu HTML?
HTML singkatan dari HyperText Markup Language. Ingat kata kuncinya: Markup Language (Bahasa Penanda). Ini bukan bahasa pemrograman seperti Python atau Java yang rumit dengan logika matematika.
HTML bekerja dengan cara memberikan "tanda" (tag) pada konten agar browser tahu cara menampilkannya. Misalnya:
- Tag
<h1>memberitahu browser: "Ini adalah Judul Besar". - Tag
<p>memberitahu browser: "Ini adalah paragraf teks". - Tag
<img>memberitahu browser: "Tampilkan gambar di sini".
2. Persiapan: Tools Wajib
Berita baiknya, Anda tidak perlu komputer super canggih. Anda hanya butuh dua hal:
- Text Editor: Tempat menulis kode. Saya sangat menyarankan Visual Studio Code (VS Code) karena gratis, ringan, dan banyak fitur canggih.
- Web Browser: Tempat melihat hasil kode. Gunakan Google Chrome, Firefox, atau Edge terbaru.
3. Struktur Dasar Dokumen HTML
Setiap file HTML wajib memiliki kerangka standar seperti ini. Tanpa kerangka ini, website Anda mungkin error atau tidak valid di mata mesin pencari.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman Web Saya</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini adalah website pertama saya.</p>
</body>
</html>Penjelasan Singkat:
<!DOCTYPE html>: Memberitahu browser kita pakai HTML versi 5.<head>: Bagian "otak" halaman. Berisi meta data, judul tab, link CSS, dll. Tidak terlihat langsung di layar.<body>: Bagian "badan" halaman. Semua yang Anda lihat (tulsian, gambar, tombol) ada di sini.
4. Tag-Tag HTML yang Wajib Dihafal
Ada ratusan tag HTML, tapi Anda hanya perlu menguasai sekitar 10-15 tag ini untuk bisa membuat 90% jenis website:
Heading (Judul)
Digunakan untuk judul dan sub-judul. Ada 6 level: <h1> (paling besar/penting) sampai <h6> (paling kecil).
<h1>Judul Utama</h1>
<h2>Sub Judul</h2>Paragraf & Format Teks
Gunakan <p> untuk paragraf. Untuk menebalkan teks gunakan <strong> atau <b>. Untuk miring gunakan <em> atau <i>.
Link (Tautan)
Gunakan tag anchor <a> untuk membuat link.
<a href="https://google.com" target="_blank">Ke Google</a>Gambar
Gunakan tag image <img>. Tag ini spesial karena tidak punya penutup.
<img src="foto-saya.jpg" alt="Foto Profil Saya">Tips SEO: Selalu isi atribut alt dengan deskripsi gambar agar ramah mesin pencari.
List (Daftar)
Ada dua jenis:
- Unordered List (
<ul>): Daftar dengan bullet points. - Ordered List (
<ol>): Daftar dengan nomor urut (1, 2, 3).
5. Semantic HTML: Kunci SEO Modern
Di HTML5, kita diperkenalkan dengan Semantic Tags. Ini adalah tag yang memiliki "makna". Daripada menggunakan <div> untuk semua elemen, gunakan tag yang lebih deskriptif:
<header>: Bagian kepala website (logo, menu).<nav>: Menu navigasi.<main>: Konten utama.<article>: Artikel blog atau berita.<footer>: Kaki website (copyright, link sosial).
Menggunakan semantic tags membantu Google memahami struktur konten Anda, yang sangat berdampak pada SEO On-Page.
6. Form dan Input
Interaksi pengguna terjadi melalui formulir. Contoh form login sederhana:
<form action="/login" method="POST">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" required>
<button type="submit">Login</button>
</form>Langkah Selanjutnya?
Selamat! Anda sudah memahami dasar HTML. Tapi website murni HTML akan terlihat polos dan membosankan. Langkah selanjutnya adalah mempercantik tampilan menggunakan CSS (Cascading Style Sheets).
Jika Anda serius ingin berkarir sebagai Web Developer, pelajari juga skill digital lainnya yang menunjang karir Anda.
Pertanyaan Sering Diajukan (FAQ)
Apakah saya perlu internet untuk belajar HTML?
Tidak. Anda bisa menulis dan menjalankan file HTML di browser secara offline (tanpa koneksi internet). Anda hanya butuh internet untuk mendownload text editor atau melihat referensi online.
Apa bedanya HTML dan HTML5?
HTML5 adalah versi terbaru dari standar HTML. Ia mendukung fitur modern seperti video, audio, canvas (untuk game), dan penyimpanan lokal yang tidak ada di versi lama.
