Sebelum deretan kode rumit dan tampilan web yang memukau tercipta, semuanya selalu berawal dari satu berkas sederhana: sebuah file HTML pertama. Di sanalah fondasi sebuah halaman web diletakkan, baris demi baris, tag demi tag. Mungkin tampaknya sepele-hanya teks biasa dengan beberapa tanda kurung sudut-namun justru dari sinilah struktur, tata letak, hingga konten sebuah situs mulai dibangun.

Artikel ini akan mengajakmu melangkah pelan tapi pasti: mengenal apa itu HTML, memahami elemen dasarnya, lalu menyusun file pertamamu dari nol hingga bisa dibuka di browser. Tanpa perlu latar belakang teknis yang rumit, kamu akan melihat bagaimana sebuah halaman web lahir, dimulai dari satu dokumen kosong yang perlahan berubah menjadi sesuatu yang dapat kamu lihat dan gunakan. Ini adalah pintu masukmu ke dunia pengembangan web-dan ia dimulai dengan satu langkah awal yang sederhana.

Memahami Struktur Dasar HTML dari Doctype hingga Penutup Tag

Bagian paling atas dari file HTML itu ibarat “kartu identitas” dokumenmu. Dimulai dari yang memberi tahu browser kalau ini adalah dokumen HTML5, lalu diikuti tag yang membungkus seluruh isi halaman. Di dalamnya ada dua “ruangan” utama: dan . berisi informasi yang tidak langsung muncul di layar, seperti judul tab dan meta data, sementara adalah panggung tempat semua konten tampil. Supaya lebih kebayang, perhatikan alur sederhananya:

• Bagian deklarasi:
• Pembungkus utama: ...
• Info tersembunyi: ...
• Konten utama: ...

Begitu masuk ke dalam , kamu bakal sering berurusan dengan pasangan tag pembuka dan penutup, misalnya

untuk judul besar atau

untuk paragraf. Intinya, hampir semua elemen HTML bekerja dalam format tag pembuka → isi → tag penutup. Yang sering bikin pemula bingung adalah lupa menutup tag atau menumpuk tag tidak rapi, padahal kerapian struktur ini penting supaya browser mudah membaca dan halaman tampil stabil. Untuk permulaan, kamu bisa pegang pola dasar seperti ini:

• Gunakan satu


  untuk judul utama halaman

• Susun teks dengan

  agar paragraf rapi dan mudah dibaca

• Pakai list
  dan
  • untuk poin-poin penting
  • Pastikan semua tag dibuka dan ditutup dengan pasangan yang benar

  Menyusun Kerangka Halaman dengan Elemen Semantik yang Tepat

  Judul Situs

  Selamat Datang

  Ini area isi utama yang ingin kamu tonjolkan.

  Menata Konten Utama Menggunakan Heading Paragraf dan Daftar yang Terstruktur

  Di bagian isi, pikirkan struktur seperti kerangka pikiran: ada judul besar, subjudul, lalu penjelasan yang mengalir rapi. Gunakan

  untuk judul utama halaman, lalu turunkan dengan

  dan

  untuk mengelompokkan topik. Konten yang berupa penjelasan panjang bisa kamu bungkus dengan

  , sementara informasi yang berderet rapi-seperti langkah, fitur, atau poin penting-lebih enak dibaca kalau disusun pakai daftar. Untuk halaman yang cukup panjang, struktur yang jelas bukan cuma bikin enak dilihat, tapi juga memudahkan pembaca melompat ke bagian yang mereka butuhkan.

  Kalau kamu ingin menampilkan ringkasan isi, kombinasi daftar dan tabel bisa bikin halaman terasa lebih “niat”. Misalnya, kamu bisa membuat daftar utama seperti ini:

  • Bagian Header – berisi judul dan deskripsi singkat.
  • Bagian Konten – berisi paragraf, gambar, dan daftar.
  • Bagian Footer – informasi penutup atau hak cipta.

  Elemen	Fungsi Singkat
  	Subjudul utama bagian
  	Isi paragraf penjelasan
  	Daftar poin bebas urutan

  Kurang lebih strukturnya di HTML bisa terlihat seperti ini:

  Judul Halaman

  Bagian Pertama

  Paragraf pembuka yang menjelaskan topik utama.

  Subtopik Penting

  • Poin penjelasan pertama
  • Poin penjelasan kedua

  Bagian Kedua

  Paragraf lanjutan dengan detail tambahan.

  Menerapkan Praktik Terbaik Penamaan File dan Organisasi Folder Proyek HTML Pertama

  Bayangkan struktur proyekmu seperti lemari arsip kecil: kalau dari awal sudah rapi, nanti pas proyek makin besar kamu nggak pusing sendiri. Mulailah dengan membuat satu folder utama, misalnya projek-pertama, lalu di dalamnya buat subfolder seperti css, js, dan images. Hindari nama folder yang membingungkan seperti cobacoba atau new folder, karena tiga minggu lagi kamu sendiri bisa lupa isinya apa. Untuk file HTML, pakai nama yang jelas dan singkat, misalnya index.html sebagai halaman utama, lalu halaman lain seperti tentang.html atau kontak.html. Pola ini bakal memudahkan kamu saat memanggil file di dalam kode, dan juga kalau suatu hari harus kerja bareng orang lain.

  • Gunakan huruf kecil semua pada nama file dan folder.
  • Ganti spasi dengan tanda minus (-), misalnya tentang-kami.html.
  • Hindari karakter aneh seperti @ # % * di nama file.
  • Beri nama deskriptif, misalnya style-utama.css daripada style1.css.
  • Kelompokkan aset (gambar, script, style) di folder terpisah.

  Jenis File	Nama Disarankan	Disimpan di Folder
  Halaman utama	index.html	projek-pertama/
  CSS utama	style-utama.css	projek-pertama/css/
  JavaScript	script-utama.js	projek-pertama/js/
  Logo	logo-situs.png	projek-pertama/images/

  Supaya makin kebayang, struktur dasarnya bisa kamu mulai seperti ini:

  “`txt
  projek-pertama/
  ├─ index.html
  ├─ tentang.html
  ├─ css/
  │ └─ style-utama.css
  ├─ js/
  │ └─ script-utama.js
  └─ images/
  └─ logo-situs.png
  “`

  To Wrap It Up

  Pada akhirnya, menyusun file HTML pertamamu bukan soal seberapa rumit kode yang kamu tulis, melainkan keberanian untuk memulai satu baris pertama. Dari `` hingga ``, kamu baru saja membuka sebuah pintu ke dunia web yang selama ini mungkin hanya kamu lihat dari sisi pengguna.

  Setelah ini, kamu bisa mulai bereksperimen: mengganti judul halaman, menambah paragraf, menyisipkan gambar, atau bermain-main dengan tautan. Setiap perubahan kecil yang kamu buat dan tampil di browser adalah bukti nyata bahwa kamu sedang membangun sesuatu.

  Biarkan file HTML pertamamu menjadi fondasi, bukan akhir. Simpan, coba, salah, perbaiki, dan ulangi. Dari satu halaman sederhana, siapa tahu nantinya akan tumbuh menjadi sebuah situs penuh ide dan cerita versimu sendiri.