Pengantar HTML dan Elemen Dasar

Heru Iryanto
Heru Iryanto
Teacher, Content Creator and Full-Stack Developer
Web Programming HTML
2 March 2026
Pengantar HTML dan Elemen Dasar

1️⃣ Apa Itu HTML?

Banyak orang masih salah paham 🤔

HTML bukan bahasa pemrograman.

HTML adalah singkatan dari HyperText Markup Language, yaitu bahasa markup yang digunakan untuk membuat struktur dasar sebuah website.

Jika website diibaratkan seperti rumah:
🧱 HTML = kerangka bangunan
🎨 CSS = desain dan tampilan
⚡ JavaScript = fitur dan interaksi

Semua website yang ada di internet — baik itu blog, toko online, portal berita, maupun aplikasi web — pasti menggunakan HTML sebagai fondasinya.

Jadi, kalau Anda ingin belajar membuat website dari nol, maka langkah pertama adalah belajar HTML dasar.

2️⃣ Mengapa Harus Belajar HTML?

HTML adalah pondasi utama dalam dunia web development.

Dengan memahami HTML untuk pemula, Anda akan mampu:

  • Membuat halaman website sendiri
  • Memahami struktur website modern
  • Melanjutkan belajar ke CSS dan JavaScript dengan lebih mudah
  • Membuat project seperti landing page, blog, dan portofolio pribadi

Tanpa HTML, website tidak akan memiliki struktur.

3️⃣ Alat yang Dibutuhkan untuk Belajar HTML

Tenang, belajar HTML itu sangat sederhana 😄

Anda hanya membutuhkan:

1️⃣ Browser

Contohnya:

  • Google Chrome
  • Mozilla Firefox

Browser digunakan untuk membuka dan melihat hasil website yang kita buat.

2️⃣ Text Editor

Untuk menulis kode HTML, Anda bisa menggunakan:

💻 Laptop / PC:

📱 HP Android:

  • Acode
  • Spck Editor

Tidak perlu install software berat atau tools yang rumit. HTML bisa dipelajari dengan sangat simpel.

4️⃣ Cara Membuat File HTML Pertama

Sekarang kita praktik membuat file HTML pertama.

Langkah 1:

Buka Text Editor Anda.

Langkah 2:

Buat file baru dengan nama: index.html

⚠️ Penting:

  • Harus menggunakan ekstensi .html
  • Jangan sampai tersimpan sebagai .txt

Langkah 3:

  • Klik dua kali file tersebut.
  • File akan otomatis terbuka di browser.

Jika halaman masih kosong atau putih, itu normal 👍
Karena kita belum menambahkan struktur HTML di dalamnya.

5️⃣ Contoh Elemen HTML Dasar

Berikut contoh kode HTML paling sederhana:

<!DOCTYPE html>
<html>
<head>
    <title>Website Pertama Saya</title>
</head>
<body>
    <h1>Hello World</h1>
    <p>Ini adalah website pertama saya menggunakan HTML.</p>
</body>
</html>

Penjelasan elemen dasar:

  • <!DOCTYPE html> → Menentukan tipe dokumen HTML5
  • <html> → Elemen utama
  • <head> → Berisi informasi halaman
  • <title> → Judul di tab browser
  • <body> → Isi website
  • <h1> → Heading / judul besar
  • <p> → Paragraf

Inilah yang disebut sebagai struktur dasar dokumen HTML.

6️⃣ Kesimpulan

HTML adalah langkah pertama untuk menjadi web developer. Dengan memahami pengantar HTML dan elemen dasar HTML, Anda sudah memulai perjalanan membangun website dari nol.

Di materi berikutnya, kita akan membahas lebih dalam tentang struktur dokumen HTML secara detail, agar Anda benar-benar memahami bagaimana website bekerja.

Siap lanjut? 🚀

Next

💎 Materi