Dasar Pemrograman Web dengan HTML

Apa Itu HTML? Fondasi Utama

HTML, singkatan dari HyperText Markup Language, adalah bahasa standar yang digunakan untuk membuat dan menyusun konten di World Wide Web. Ketika Anda mengunjungi sebuah situs web, yang pertama kali diproses oleh browser Anda adalah struktur yang didefinisikan oleh HTML. HTML bukan bahasa pemrograman seperti JavaScript atau Python; ia adalah bahasa markah (markup language) yang tugasnya adalah mendeskripsikan struktur semantik dari halaman web, seperti paragraf, judul, tautan, gambar, dan tabel.

Tanpa HTML, halaman web hanyalah teks biasa tanpa format yang jelas. HTML bekerja berdampingan dengan CSS (untuk gaya dan tampilan) dan JavaScript (untuk interaktivitas). Namun, HTML tetap menjadi tulang punggung; ia mendefinisikan 'apa' isinya, sementara dua lainnya mendefinisikan 'bagaimana' tampilannya dan 'bagaimana' ia bereaksi terhadap tindakan pengguna. Menguasai HTML adalah langkah pertama dan paling krusial dalam perjalanan menjadi pengembang web.

Simbol Struktur HTML

Visualisasi sederhana struktur hierarkis dalam web.

Sintaks Dasar dan Elemen Penting

Setiap dokumen HTML dimulai dengan deklarasi <!DOCTYPE html> yang menginformasikan browser bahwa dokumen tersebut adalah HTML5. Struktur dasar halaman web terdiri dari tiga elemen utama: <html>, <head>, dan <body>.

Bagian <head> berisi metadata—informasi tentang dokumen yang tidak ditampilkan secara langsung di halaman, seperti judul tab (<title>), tautan ke file CSS, dan deskripsi untuk mesin pencari. Sementara itu, <body> berisi semua konten yang dilihat oleh pengguna.

Contoh Struktur Minimal HTML:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Halaman Pertamaku</title>
</head>
<body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
</body>
</html>
            

Elemen di HTML didefinisikan oleh tag. Kebanyakan elemen memiliki tag pembuka (misalnya, <p>) dan tag penutup (misalnya, </p>). Beberapa elemen, seperti elemen gambar (<img>) atau pemisah baris (<br>), bersifat mandiri (self-closing).

Semantik: Membuat Konten yang Bermakna

Versi modern dari HTML, yaitu HTML5, sangat menekankan pada semantik. Tag semantik membantu mesin pencari dan teknologi bantu (seperti pembaca layar) memahami struktur dan arti dari konten. Daripada menggunakan tag generik seperti <div> untuk segalanya, pengembang didorong untuk menggunakan tag yang menjelaskan tujuan konten tersebut.

Beberapa tag semantik penting meliputi:

Penggunaan tag semantik yang tepat sangat meningkatkan aksesibilitas dan optimasi mesin pencari (SEO), menjadikan pemrograman web dengan HTML lebih dari sekadar menata teks.

Atribut dan Tautan (Hyperlinks)

Atribut memberikan informasi tambahan tentang elemen HTML dan ditempatkan di tag pembuka. Contoh paling umum adalah atribut src (source) untuk gambar dan href (hypertext reference) untuk tautan.

Tautan adalah inti dari konsep "Web" (jaring). Tautan dibuat menggunakan tag jangkar <a>:

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

Di sini, href menentukan tujuan tautan, dan target="_blank" memastikan tautan terbuka di tab baru, memberikan pengalaman pengguna yang lebih baik saat mengarahkan pengguna ke sumber eksternal. Menguasai cara membangun struktur yang kuat menggunakan tag dan atribut yang tepat adalah fondasi kuat dalam pemrograman web.