Selamat datang di perjalanan Anda mempelajari HTML (HyperText Markup Language)! HTML adalah bahasa fondasi utama dari setiap halaman web yang Anda lihat di internet. Tanpa HTML, sebuah situs hanyalah teks tanpa struktur. Bagi pemula, memahami HTML adalah langkah krusial sebelum menyelami CSS (untuk gaya) dan JavaScript (untuk interaktivitas).
Artikel ini dirancang khusus untuk memberikan panduan komprehensif namun mudah dicerna mengenai dasar-dasar HTML.
Apa Itu HTML dan Mengapa Penting?
HTML adalah bahasa markah standar yang digunakan untuk mendefinisikan struktur konten di laman web. Ia menggunakan serangkaian 'tag' untuk memberi tahu browser bagaimana menampilkan teks, gambar, tautan, dan elemen lainnya. Bayangkan HTML sebagai kerangka bangunan sebuah rumah.
Struktur Dasar Sebuah Dokumen HTML
Setiap dokumen HTML yang valid harus memiliki struktur dasar tertentu. Ini adalah fondasi yang wajib Anda ketahui:
1. Deklarasi Dokumen: Memberi tahu browser versi HTML yang digunakan (saat ini HTML5).
<!DOCTYPE html>
2. Elemen Akar (Root): Elemen utama yang membungkus seluruh konten.
<html lang="id"> ... </html>
3. Kepala (Head): Berisi metadata tentang dokumen, seperti judul halaman, tautan ke CSS, dan pengaturan karakter.
<head> ... </head>
4. Tubuh (Body): Berisi semua konten yang terlihat oleh pengguna, seperti teks, gambar, dan paragraf.
<body> ... </body>
Berikut adalah contoh kerangka lengkap:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Judul Halaman Saya</title>
</head>
<body>
<h1>Selamat Datang di Website Saya</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>
Tag-Tag HTML Esensial untuk Pemula
Tag adalah kata kunci yang diapit oleh kurung siku (seperti <p>). Kebanyakan tag memiliki tag pembuka dan tag penutup, seperti <p> dan </p>.
1. Headings (Judul)
Digunakan untuk menandai judul dari yang paling penting (<h1>) hingga yang paling tidak penting (<h6>). Gunakan <h1> hanya sekali per halaman.
<h1>Judul Utama</h1>
<h2>Sub Judul Bagian</h2>
2. Paragraf dan Teks
Tag paling umum untuk teks biasa adalah paragraf:
<p>Ini adalah teks dalam paragraf.</p>
Untuk pemformatan teks sederhana:
- Tebal:
<strong>atau<b> - Miring:
<em>atau<i>
3. Membuat Tautan (Hyperlinks)
Tautan adalah cara pengguna berpindah antar halaman atau situs. Tag utamanya adalah <a> (anchor) dengan atribut href (hypertext reference) yang menentukan tujuan tautan.
<a href="https://www.google.com">Kunjungi Google</a>
4. Menyematkan Gambar
Gambar dimasukkan menggunakan tag penutup diri (self-closing tag), yaitu <img>. Tag ini membutuhkan atribut wajib:
src: Lokasi atau URL sumber gambar.alt: Teks alternatif jika gambar gagal dimuat (sangat penting untuk SEO dan aksesibilitas).
<img src="gambar-saya.jpg" alt="Deskripsi singkat tentang gambar ini">
Atribut: Memberi Informasi Tambahan
Atribut memberikan informasi tambahan tentang elemen HTML. Mereka selalu diletakkan di dalam tag pembuka dan terdiri dari pasangan nama="nilai". Contohnya adalah href pada tautan dan src pada gambar.
Daftar (Lists)
HTML menyediakan dua jenis daftar utama:
Daftar Tak Berurutan (Unordered List)
Menggunakan poin-poin (<ul> dan <li>).
<ul>
<li>Item pertama</li>
<li>Item kedua</li>
</ul>
Daftar Berurutan (Ordered List)
Menggunakan penomoran (<ol> dan <li>).
<ol>
<li>Langkah satu</li>
<li>Langkah dua</li>
</ol>
Langkah Selanjutnya Setelah Menguasai Dasar
Setelah Anda nyaman dengan struktur dasar dan tag-tag di atas, langkah selanjutnya dalam belajar web development adalah beralih ke dua pilar utama lainnya:
- CSS (Cascading Style Sheets): Untuk membuat tampilan halaman Anda indah, responsif, dan sesuai dengan desain yang Anda inginkan. Tanpa CSS, HTML terlihat sangat polos.
- JavaScript (JS): Untuk menambahkan perilaku dinamis, seperti validasi form, animasi kompleks, dan interaksi pengguna yang lebih dalam.
Ingat, HTML adalah tentang struktur. Latihan adalah kunci. Cobalah buat struktur halaman sederhana seperti CV online Anda sendiri menggunakan tag-tag yang telah dipelajari. Selamat mencoba!