Belajar HTML: Panduan Lengkap HTML Dasar Untuk Pemula

Belajar HTML adalah langkah pertama untuk memahami cara membuat website dari nol. Dengan belajar HTML untuk pemula, Anda bisa mengetahui struktur dasar halaman web, menampilkan teks, gambar, hingga link, sehingga menjadi bekal penting sebelum melanjutkan ke CSS atau JavaScript.

Artikel ini merupakan bagian dari seri pembelajaran HTML dari Rumahweb, yang akan terus berlanjut untuk membantu Anda menguasai pembuatan website secara bertahap. Oleh karena itu, pelajari setiap part yang kami buat agar kemampuan programming HTML Anda semakin meningkat.

Apa itu HTML?

HTML merupakan singkatan dari Hypertext Markup Language. HTML adalah bahasa markup standart yang digunakan untuk menampilkan dokumen atau membuat halaman website agar dapat ditampilkan dibrowser.

Pemrograman HTML digunakan sebagai bahasa dasar pembuatan website dan berperan sebagai struktur sebuah website. HTML digambarkan dengan tag ditulis menggunakan kurung sudut ( < ), seperti <p> digunakan untuk menulis teks dokumen. Contoh lain <H1> digunakan untuk judul sebuah dokumen atau halaman website.

Jika dipadukan dengan Cascading Style Sheets (CSS) dan JavaScript, HTML adalah tampilan sebuah website, CSS untuk mempercantik tampilan website, sedangkan JavaScript membuat website lebih dinamis.

Sejarah Singkat HTML

Ide pertama HTML dimulai pada tahun 1980 oleh Tim Berners-Lee yang bekerja di CERN (Organisasi Eropa untuk Riset Nuklir), mengusulkan sebuah sistem yang digunakan untuk berbagi dokumen sesama ilmuan di CERN.

Pada akhir tahun 1990 Tim Berners-Lee menspesifikasikan HTML dan menulis jaringan beserta perangkat lunaknya. Masih ditahun sama, Berners-Lee dan Robert Cailliau, insinyur sistem data CERN berkolaborasi, namun tidak diterima secara resmi oleh CERN.

Dalam perkembangannya, akhir tahun 1991 Tim menjelaskan secara umum dari HTML adalah dokumen yang disebut “Tanda HTML”. Tanda ini menggambarkan 18 elemen awal mula, versi sederhana dari HTML.

Ada beberapa versi HTML awal hingga saat ini, yaitu;

HTML 1.0 – versi pertama HTML yang dirilis tahun 1991 dengan fitur sangat terbatas.
HTML 2.0 – standar resmi pertama yang disahkan tahun 1995.
HTML 3.2 – diperkenalkan tahun 1997, menambahkan tabel, skrip, dan applet.
HTML 4.01 – dirilis tahun 1999, membawa dukungan CSS lebih luas.
XHTML – adaptasi HTML berbasis XML yang lebih ketat dalam penulisan.
HTML5 – versi terbaru dan saat ini digunakan secara luas, mendukung video, audio, canvas, hingga API modern.

Struktur Dasar HTML

Berikut contoh struktur HTML dari kode yang dibuat:

Penulisan HTML diawali dengan deklarasi !DOCTYPE , dilanjutkan tag pembuka <html> yang didalamnya terdapat <head> dan <body>.

Jika kita sederhanakan, struktur HTML ada tiga, yaitu:

Deklarasi

Penulisan kode HTML diawali dengan kode <!DOCTYPE html>. Ini adalah tag deklarasi yang menyatakan format dokumen html dengan versi HTML 5.

Berbeda lagi saat dulu masih memakai HTML 4, tag deklarasinya lumayan panjang.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Sebenarnya kita bisa saja tidak menyertakan tag deklarasi ini didalam struktur kode HTML yang kita buat. Tetapi akan melanggar standar aturan oleh W3C.

Setelah menuliskan tag deklarasi <!DOCTYPE html> , dibawahnya terdapat tag pembuka HTML.

<html lang="en">

Tag pembuka <html> wajib ada setiap menulis kode html. Di dalam tag HTML kita tambahkan attribut lang=”en” , untuk menyatakan dokumen ini dibuat menggunakan bahasa inggris.

Setelah tag pembuka HTML, selanjutnya ada tag <head>, <body>, bagian terakhir diisi tag penutup HTML </html>.

Head

Bagian head diawali dengan tag <head> dan ditutup dengan </head>. Didalam tag head ini biasanya kita menyematkan kode-kode yang dibaca oleh mesin, seperti

Meta tag SEO
Meta tag untuk verifikasi
Tag <title>
CSS & JavaScript
Dll

Tag head - Belajar HTML part 1 — Tag head

Body

Pada bagian body ini yang nantinya ditampilkan pada browser atau peramban. Penulisan tag nya dimulai dengan <body> dan penutup </body>.

Didalam tag body nantinya kita akan menulis kode html dengan berbagai macam tag. Misalnya <p> </p> digunakan untuk membuat paragraf.

Contoh tag lain, element, atribut dan cara memakainya akan kami lanjutkan pada artikel selanjutnya.

Tag HTML yang Paling Sering Digunakan

Dalam belajar HTML untuk pemula, memahami tag-tag dasar adalah langkah penting. Tag ini digunakan untuk memberi tahu browser bagaimana cara menampilkan konten pada halaman web. Berikut beberapa tag HTML yang paling sering digunakan, lengkap dengan contoh singkatnya:

1. Tag <h1> sampai <h6>

Digunakan untuk judul atau heading, mulai dari paling besar <h1> hingga paling kecil <h6>.

<h1>Judul Artikel</h1>
<h2>Sub Judul</h2>

2. Tag <p>

Digunakan untuk membuat paragraf.

<p>Ini adalah paragraf pertama saya.</p>

3. Tag <a>

Digunakan untuk membuat hyperlink ke halaman lain atau url website lain.

<a href="https://www.rumahweb.com">Kunjungi Rumahweb</a>

4. Tag <img>

Menampilkan gambar pada halaman web.

<img src="gambar.jpg" alt="Contoh Gambar" width="300">

5. Tag <ul>, <ol>, dan <li>

Digunakan untuk membuat daftar, baik tidak berurutan (unordered list) maupun berurutan (ordered list).

<ul>
  <li>Item pertama</li>
  <li>Item kedua</li>
</ul>

<ol>
  <li>Langkah pertama</li>
  <li>Langkah kedua</li>
</ol>

Persiapan Belajar HTML

Berikut adalah beberapa persiapan yang perlu Anda lakukan sebelum memulai belajar HTML.

1. Teks editor untuk menulis kode HTML

Teks editor seperti Notepad, Notepad++, Visual Studio Code sebagai alat pertama yang harus disiapkan. Selain itu, Teks editor digunakan untuk menulis kode HTML. Selain tiga teks editor tersebut, Anda bisa memakai aplikasi lainnya dengan fungsi yang sama

Pada artikel ini kita akan menggunakan teks editor Visual Studio Code

2. Browser untuk membuka HTML

Browser atau peramban digunakan untuk membuka halaman HTML yang sudah dibuat. Anda bisa memakai Google Chrome, Mozilla Firefox, Safari, Opera, maupun browser lain.

Belajar Menulis File HTML

Setelah mengenal tag-tag dasar, langkah selanjutnya dalam belajar HTML untuk pemula adalah mulai menulis file HTML sendiri. Proses ini sangat mudah karena hanya membutuhkan editor teks dan browser. Berikut langkah-langkahnya:

1. Pilih Editor Teks

Anda bisa menggunakan aplikasi sederhana seperti Notepad (Windows) atau TextEdit (Mac). Namun, untuk pengalaman yang lebih nyaman, gunakan editor modern seperti Visual Studio Code, Sublime Text, atau Notepad++ yang memiliki fitur highlight kode.

2. Tulis Kode HTML Dasar

Berikut contoh struktur HTML paling sederhana:

<!DOCTYPE html>
<html>
<head>
  <title>Halaman Pertama Saya</title>
</head>
<body>
  <h1>Selamat Datang</h1>
  <p>Ini adalah halaman HTML pertama saya!</p>
</body>
</html>

3. Simpan File dengan Ekstensi .html

Klik File > Save As
Pilih lokasi penyimpanan
Beri nama file, misalnya index.html
Pastikan format file disimpan sebagai All Files (bukan .txt).

4. Buka File di Browser

Cukup klik dua kali file index.html tadi, maka file akan otomatis terbuka di browser default (Chrome, Firefox, Edge, dll).

Tips Membuat file HTML untuk pemula

Berikut adalah beberapa tips dalam membuat file HTML untuk pemula.

1. Extension file HTML

Jika memakai notepad, pilih save as type: All Files kemudian simpanlah file dengan extention “.html”

2. Nama khusus untuk halaman depan atau homepage

Jika ingin membuat file untuk halaman depan atau homepage website. Sangat disarankan menamai dengan nama index.html . Karena file index.html otomatis dibuka saat membuka halaman website.

Sebagai contoh, saat membuka website www.rumahweb.com , maka tampilanya sama saat kita membuka www.rumahweb.com/index.html

3. Penamaan file

Dalam penamaan file HTML, hindari menamainya dengan karakter aneh, karakter lebay, dan nama file dengan spasi. Karena kurang bagus untuk dibaca manusia maupun oleh mesin.

penamaan file dalam HTML - Dasar-dasar HTML

Tips Mempercepat Belajar HTML

Belajar HTML untuk pemula bisa jadi terasa membingungkan jika tidak tahu harus mulai dari mana. Agar proses belajar lebih cepat dan efektif, berikut beberapa tips yang bisa Anda terapkan:

Mulai dari Dasar, Jangan Langsung Kompleks
Pahami struktur dasar HTML (tag <html>, <head>, <body>) sebelum mencoba hal-hal rumit seperti CSS atau JavaScript.
Praktik Sambil Belajar
Jangan hanya membaca teori. Cobalah langsung menulis kode HTML sederhana dan buka hasilnya di browser. Dengan begitu, Anda lebih cepat memahami fungsi setiap tag.
Gunakan Editor dengan Fitur Highlighting
Pilih editor teks seperti Visual Studio Code atau Notepad++ yang bisa memberi warna pada kode. Ini membantu mengenali kesalahan dengan lebih mudah.
Baca Dokumentasi Resmi dan Tutorial Terpercaya
Sumber seperti MDN Web Docs atau tutorial dari platform belajar coding dapat memberi penjelasan mendalam.
Ikut Latihan atau Challenge HTML
Banyak website menyediakan latihan coding gratis, misalnya W3Schools atau FreeCodeCamp. Semakin sering berlatih, semakin cepat Anda menguasainya.
Bangun Proyek Kecil
Cobalah membuat halaman sederhana, seperti profil diri atau daftar produk. Proyek nyata akan membuat Anda lebih terbiasa dengan alur kerja HTML.
Belajar Konsisten Sedikit Demi Sedikit
Luangkan waktu belajar 30–60 menit per hari. Konsistensi jauh lebih efektif daripada belajar dalam jumlah banyak tapi jarang.

Selain itu, kami sarankan agar dokumentasikan setiap tag atau kode yang sudah dipelajari dalam catatan pribadi. Ini akan memudahkan saat ingin mengingat kembali.

Kelas Belajar HTML untuk Pemula

Seperti sudah disampaikan sebelumnya, artikel ini adalah bagian dari seri belajar HTML untuk pemula. Berikut beberapa artikel lanjutan yang bisa Anda ikuti:

Penutup

Belajar HTML adalah langkah untuk pemula sebelum mendalami bahasa pemrograman web lainnya. Dengan memahami dasar-dasar HTML, Anda sudah memiliki fondasi kuat untuk membuat website sederhana hingga mengembangkan proyek web yang lebih kompleks.

Jangan khawatir jika di awal terasa sulit, karena dengan latihan konsisten, Anda akan semakin mahir.

Ikuti juga seri belajar HTML dari Rumahweb untuk mendapatkan panduan lengkap, mulai dari teori, contoh praktis, hingga tips lanjutan yang akan membantu perjalanan Anda menjadi seorang web developer.