Contoh Bahasa Pemrograman HTML

Apa Itu HTML?

HTML (HyperText Markup Language) bukanlah bahasa pemrograman dalam artian menjalankan logika kompleks seperti JavaScript atau Python. Sebaliknya, HTML adalah bahasa markup yang digunakan untuk menyusun struktur dan konten dari sebuah halaman web. Setiap elemen pada laman web, mulai dari teks, gambar, tautan, hingga formulir, didefinisikan menggunakan tag HTML.

Peran utama HTML adalah memberikan semantik—makna—kepada konten. Ketika mesin pencari atau perangkat bantu lainnya membaca dokumen HTML, mereka dapat menginterpretasikan bagian mana yang merupakan judul utama (menggunakan <h1>), mana yang merupakan paragraf (<p>), dan mana yang merupakan daftar (<ul> atau <ol>).

Struktur Dasar Sebuah Dokumen HTML

Setiap dokumen HTML yang valid harus mengikuti kerangka dasar tertentu agar dapat dikenali dengan benar oleh browser. Berikut adalah contoh bahasa pemrograman HTML yang paling fundamental:

<!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>Selamat Datang di Dunia Web</h1>
    <p>Ini adalah paragraf pertama.</p>
</body>
</html>

Penjelasan Elemen Kunci:

<!DOCTYPE html>: Ini bukan tag, melainkan deklarasi yang memberitahu browser bahwa dokumen ini ditulis menggunakan standar HTML versi terbaru (HTML5).
<html>: Elemen akar dari semua halaman HTML. Atribut lang="id" menunjukkan bahasa utama halaman adalah Indonesia.
<head>: Bagian ini berisi metadata tentang dokumen, seperti judul halaman (yang muncul di tab browser), tautan ke CSS, dan set karakter. Konten di sini tidak ditampilkan langsung di halaman utama.
<body>: Bagian ini berisi semua konten yang terlihat oleh pengguna, seperti teks, gambar, video, dan tautan.

Contoh Tag HTML untuk Konten Umum

Penggunaan tag yang tepat sangat krusial untuk struktur yang baik. Berikut adalah beberapa contoh bahasa pemrograman HTML yang sering digunakan dalam membangun konten:

1. Heading (Judul)

HTML menyediakan enam tingkatan heading, dari yang paling penting <h1> hingga yang paling tidak penting <h6>.

<h1>Judul Utama (Hanya Satu per Halaman)</h1>
<h2>Sub Judul Bagian</h2>
<h3>Judul Topik Lebih Spesifik</h3>

2. Tautan (Hyperlink)

Digunakan untuk menghubungkan satu halaman ke halaman lain atau ke sumber daya eksternal menggunakan atribut href.

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

3. Gambar

Tag <img> adalah tag mandiri (self-closing) yang membutuhkan atribut src (sumber gambar) dan alt (teks alternatif) untuk aksesibilitas.

<img src="logo.png" alt="Logo Perusahaan Kami" width="150">

4. Daftar (List)

Daftar ada dua jenis utama: Ordered List (<ol> untuk urutan) dan Unordered List (<ul> untuk poin-poin).

<h3>Bahan Utama:</h3>
<ul>
    <li>Gula</li>
    <li>Tepung Terigu</li>
    <li>Telur</li>
</ul>

Perkembangan HTML dan Peran Modern

Seiring berkembangnya web, HTML juga berevolusi. HTML5 memperkenalkan banyak elemen semantik baru yang memudahkan penataan tata letak tanpa perlu mengandalkan pembungkus <div> yang berlebihan. Elemen seperti <header>, <nav>, <section>, <article>, dan <footer> membantu mesin pencari dan pengembang memahami hierarki konten dengan lebih baik.

Dalam konteks pengembangan web modern, HTML bekerja bahu-membahu dengan dua teknologi inti lainnya: CSS (Cascading Style Sheets) untuk presentasi dan gaya visual, serta JavaScript untuk interaktivitas dan perilaku dinamis. HTML menyediakan kerangka dasarnya, CSS memberikannya estetika, dan JavaScript memberikannya 'otak'. Menguasai contoh bahasa pemrograman HTML adalah langkah pertama yang mutlak bagi siapa pun yang ingin terjun ke dunia pengembangan web.