Memahami Coding Dasar HTML untuk Pemula

HyperText Markup Language, atau yang lebih dikenal sebagai HTML, adalah tulang punggung dari setiap halaman web yang Anda lihat di internet. Memahami coding dasar HTML adalah langkah pertama dan paling krusial bagi siapa pun yang ingin terjun ke dunia pengembangan web. HTML bukanlah bahasa pemrograman; melainkan bahasa markup yang digunakan untuk menyusun struktur konten di web.

Struktur Dasar Dokumen HTML <!DOCTYPE html> <html> <head> (Metadata) <body> Konten Terlihat... </html>

Elemen Inti dari Setiap Dokumen HTML

Setiap halaman web berbasis HTML memiliki struktur dasar yang wajib diikuti. Tanpa struktur ini, peramban (browser) mungkin tidak dapat menampilkannya dengan benar. Memahami struktur ini adalah pondasi kuat dalam coding dasar HTML.

1. Deklarasi Dokumen (DOCTYPE)

Baris pertama pada setiap file HTML harus berupa deklarasi <!DOCTYPE html>. Deklarasi ini memberi tahu peramban versi HTML mana yang digunakan. Saat ini, kita selalu menggunakan HTML5.

2. Tag Akar (Root Tag)

Semua konten lain harus berada di dalam tag <html>. Ini adalah wadah utama seluruh halaman.

3. Bagian Head dan Body

Di dalam tag <html>, terdapat dua bagian utama:

Elemen Konten Paling Penting

Setelah memahami kerangka dasarnya, fokus selanjutnya adalah pada elemen yang membentuk isi konten.

Heading (Judul)

HTML menyediakan enam tingkat judul, dari yang paling penting (<h1>) hingga yang kurang penting (<h6>). Sangat disarankan untuk hanya menggunakan satu <h1> per halaman untuk tujuan SEO dan struktur.

<h1>Judul Utama Halaman</h1>
<h2>Sub Judul Bagian A</h2>
<h3>Sub Bagian dari Bagian A</h3>

Paragraf dan Pemformatan Teks

Teks biasa dibungkus dalam tag paragraf <p>. Untuk penekanan, kita menggunakan tag seperti <strong> (penting/tebal) atau <em> (penekanan/miring).

<p>Ini adalah kalimat biasa di dalam paragraf.</p>
<p>Beberapa kata perlu diberi <strong>penekanan kuat</strong> atau <em>penekanan ringan</em>.</p>

Hyperlink (Tautan)

HTML menjadi sangat kuat karena kemampuannya menautkan satu halaman ke halaman lain menggunakan tag jangkar <a> dan atribut href (Hypertext Reference).

<a href="https://www.contoh.com">Kunjungi Situs Contoh</a>

Memasukkan Gambar

Gambar disisipkan menggunakan tag <img>. Penting untuk diingat bahwa tag ini adalah *self-closing* (tidak memerlukan tag penutup </img>) dan memerlukan dua atribut wajib: src (sumber gambar) dan alt (teks alternatif untuk aksesibilitas dan saat gambar gagal dimuat).

<img src="path/ke/gambar.jpg" alt="Deskripsi singkat tentang gambar tersebut">

Kesimpulan

Menguasai coding dasar HTML bukanlah tentang menghafal ratusan tag, melainkan memahami bagaimana menggunakan tag-tag struktural inti seperti <html>, <head>, <body>, <p>, dan <a> secara logis. Setelah fondasi ini kuat, Anda dapat melanjutkan ke CSS untuk styling dan JavaScript untuk interaktivitas, mengubah struktur statis ini menjadi pengalaman web yang dinamis. Teruslah berlatih menyusun dokumen HTML sederhana, dan Anda akan membangun kebiasaan coding yang baik.