Belajar Dasar HTML untuk Pemula

Selamat datang di dunia pengembangan web! Jika Anda baru memulai perjalanan ini, HTML (HyperText Markup Language) adalah fondasi utama yang harus Anda kuasai. HTML bukanlah bahasa pemrograman; sebaliknya, ini adalah bahasa markup yang digunakan untuk menyusun konten di halaman web. Bayangkan HTML sebagai kerangka atau struktur tulang punggung dari sebuah bangunan digital.

Visualisasi Struktur Dasar HTML

Apa Itu Elemen dan Tag?

Inti dari HTML adalah tag. Tag biasanya muncul berpasangan: tag pembuka (<tag>) dan tag penutup (</tag>). Segala sesuatu yang berada di antara kedua tag ini disebut elemen.

Contoh paling dasar adalah paragraf:

<p>Ini adalah isi dari sebuah paragraf.</p>

Namun, ada juga elemen yang tidak memerlukan tag penutup, yang dikenal sebagai elemen kosong (self-closing), seperti tag pemisah baris <br> atau tag gambar <img>.

Struktur Dokumen HTML Wajib

Setiap halaman web HTML yang valid harus memiliki struktur dasar tertentu. Struktur ini memberitahu browser bagaimana cara menginterpretasikan konten Anda.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Judul Halaman Saya</title>
</head>
<body>
    <h1>Halo Dunia!</h1>
    <p>Ini konten utama.</p>
</body>
</html>

Penjelasan Struktur Kunci:

<!DOCTYPE html>: Deklarasi ini mendefinisikan bahwa dokumen ini adalah HTML5. Ini harus selalu menjadi baris pertama.
<html>: Elemen akar yang membungkus seluruh konten halaman.
<head>: Berisi metadata tentang dokumen, seperti karakter set (<meta charset="UTF-8">) dan judul halaman (yang muncul di tab browser).
<body>: Berisi semua konten yang terlihat oleh pengguna, seperti teks, gambar, tautan, dan tabel.

Elemen Konten Paling Umum untuk Pemula

Setelah memahami kerangka, mari kita lihat beberapa tag yang paling sering digunakan untuk menampilkan informasi:

1. Judul (Headings)

HTML menyediakan enam tingkatan judul, dari yang paling penting (<h1>) hingga yang paling tidak penting (<h6>). Gunakan <h1> hanya sekali per halaman untuk judul utama.

2. Tautan (Links)

Untuk membuat tautan (hyperlink), kita menggunakan tag anchor <a>. Atribut href (Hypertext Reference) menentukan tujuan tautan.

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

3. Gambar (Images)

Menampilkan visual menggunakan tag <img>. Tag ini self-closing dan memerlukan dua atribut utama: src (sumber gambar) dan alt (teks alternatif yang dibaca oleh screen reader atau jika gambar gagal dimuat).

<img src="path/gambar.jpg" alt="Deskripsi singkat gambar ini">

Atribut: Memberi Informasi Tambahan

Atribut memberikan informasi tambahan tentang elemen HTML dan biasanya ditempatkan di dalam tag pembuka. Mereka selalu terdiri dari pasangan nama/nilai, seperti nama="nilai".

Contoh atribut lain yang sering digunakan adalah atribut class dan id. Atribut ini sangat penting karena menjadi jembatan antara HTML (struktur) dan CSS (gaya) serta JavaScript (interaktivitas).

<p id="paragraf-utama" class="teks-penting">Ini adalah paragraf yang terstruktur.</p>

Langkah Selanjutnya

HTML adalah langkah pertama yang luar biasa. Setelah Anda menguasai cara menyusun konten menggunakan elemen dasar ini, tantangan berikutnya adalah membuat konten tersebut terlihat menarik. Untuk itu, Anda perlu mempelajari CSS (Cascading Style Sheets). Namun, jangan terburu-buru. Kuasai fondasi HTML ini terlebih dahulu. Konsistensi dalam latihan membuat tag dan elemen ini menjadi otomatis dalam pikiran Anda. Selamat mencoba membuat halaman web pertama Anda!

Teruslah membangun, satu tag pada satu waktu.