HyperText Markup Language, atau yang lebih kita kenal dengan HTML, adalah tulang punggung dari hampir semua halaman web yang Anda lihat di internet. HTML berfungsi untuk mendefinisikan struktur konten—memberi tahu browser bahwa teks ini adalah judul, ini adalah paragraf, ini adalah tautan, dan ini adalah gambar. Memahami dasar-html contoh sangat krusial bagi siapa pun yang ingin terjun ke dunia pengembangan web.
Contoh visual representasi struktur dasar.
Setiap dokumen HTML yang valid harus memiliki struktur dasar yang konsisten. Struktur ini dimulai dengan deklarasi doctype, diikuti oleh elemen akar <html>, yang kemudian dibagi menjadi <head> (untuk metadata) dan <body> (untuk konten yang terlihat).
Berikut adalah html contoh kerangka standar yang wajib Anda ketahui:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman Saya</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini adalah paragraf pertama.</p>
</body>
</html>
Setelah memahami kerangka, kita perlu mengisi konten. HTML menggunakan berbagai tag untuk menandai jenis konten yang berbeda. Mari kita lihat beberapa tag penting lainnya yang sering digunakan.
Judul (Heading) sangat penting untuk hierarki konten, berkisar dari <h1> (paling penting) hingga <h6> (paling tidak penting). Teks biasa dibungkus dalam tag paragraf <p>.
<h2>Penggunaan Heading</h2>
<p>Ini adalah teks biasa. Kita bisa membuat teks menjadi <b>tebal</b> atau <i>miring</i>.</p>
<h3>Daftar Tak Berurutan</h3>
<ul>
<li>Item Pertama</li>
<li>Item Kedua</li>
</ul>
Web dikenal sebagai 'World Wide Web' karena kemampuannya menghubungkan halaman satu sama lain menggunakan tautan (link) dan menampilkan media visual seperti gambar.
Untuk tautan, kita menggunakan tag <a> (anchor) dengan atribut href (Hypertext Reference):
<p>Kunjungi situs resmi W3C: <a href="https://www.w3.org" target="_blank">W3C Homepage</a></p>
Untuk menampilkan gambar, kita menggunakan tag <img>. Tag ini bersifat *self-closing* dan memerlukan atribut src (sumber) dan alt (teks alternatif):
<img src="path/ke/gambar.jpg" alt="Deskripsi singkat mengenai gambar yang ditampilkan">
Atribut alt sangat penting untuk aksesibilitas dan SEO. Ini adalah teks yang akan dibaca oleh pembaca layar jika gambar gagal dimuat.
Salah satu aspek krusial dalam membuat halaman web yang rapi di perangkat mobile adalah penggunaan meta tag viewport. Tag ini memberi instruksi kepada browser bagaimana mengontrol dimensi dan skala halaman.
Tanpa meta tag ini, browser mobile akan mencoba menampilkan halaman seolah-olah dibuka di desktop, menghasilkan teks yang sangat kecil dan membutuhkan *zoom in* manual. Berikut adalah html contoh untuk viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Pengaturan width=device-width memastikan lebar halaman disesuaikan dengan lebar layar perangkat, dan initial-scale=1.0 mengatur tingkat zoom awal menjadi 100%.
HTML adalah fondasi. Meskipun saat ini kita sangat bergantung pada CSS untuk tampilan dan JavaScript untuk interaktivitas, struktur yang benar yang didefinisikan oleh tag HTML tetap menjadi prioritas utama. Dengan menguasai html contoh dasar di atas, Anda telah mengambil langkah signifikan pertama dalam perjalanan pengembangan web Anda. Ingatlah untuk selalu menjaga struktur tetap semantik, bersih, dan menggunakan atribut yang relevan seperti alt pada gambar untuk pengalaman pengguna yang optimal di semua perangkat, termasuk mobile.