Visualisasi Sederhana Struktur Dokumen Web
HTML, singkatan dari HyperText Markup Language, adalah tulang punggung (skeleton) dari setiap halaman web. Bahasa ini tidak sama dengan bahasa pemrograman seperti Python atau JavaScript; HTML adalah bahasa *markup* yang digunakan untuk mendefinisikan struktur konten pada sebuah halaman web. Dengan HTML, kita memberi tahu browser bagaimana teks, gambar, tautan, dan elemen lainnya harus disusun dan ditampilkan kepada pengguna.
Setiap elemen dalam HTML didefinisikan oleh *tag*. Tag ini biasanya muncul berpasangan: tag pembuka (misalnya, <p>) dan tag penutup (misalnya, </p>). Konten yang ingin kita format diletakkan di antara kedua tag tersebut.
Setiap dokumen HTML yang valid harus mengikuti struktur dasar tertentu agar dapat diproses dengan benar oleh browser. Berikut adalah kerangka dasarnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Judul Halaman Saya</title>
</head>
<body>
<!-- Konten yang akan dilihat pengguna diletakkan di sini -->
</body>
</html>
Mari kita bedah elemen-elemen penting dalam struktur di atas:
<!DOCTYPE html>: Deklarasi ini wajib diletakkan di baris paling atas. Ini memberi tahu browser bahwa dokumen ini adalah dokumen HTML5.<html>: Ini adalah elemen akar dari semua halaman HTML. Semua elemen lain harus berada di dalamnya.<head>: Bagian ini berisi metadata tentang dokumen, seperti karakter set (<meta charset="UTF-8">), judul halaman (<title>), tautan ke CSS, dan lainnya. Konten di sini tidak ditampilkan langsung di badan halaman.<body>: Semua konten yang terlihat oleh pengguna—teks, gambar, tautan, tabel—harus ditempatkan di dalam tag <body>.Untuk mulai membuat konten, kita perlu menguasai beberapa tag dasar. Penguasaan tag-tag ini adalah langkah awal yang krusial dalam mempelajari HTML.
HTML menyediakan enam tingkatan heading, dari yang paling penting (<h1>) hingga yang paling tidak penting (<h6>).
<h1>Judul Utama Halaman</h1>
<h2>Subjudul Bagian 1</h2>
<h3>Sub-subjudul</h3>
Sangat disarankan untuk hanya menggunakan satu <h1> per halaman untuk keperluan SEO dan struktur yang baik.
Tag <p> digunakan untuk mendefinisikan sebuah paragraf. Sementara itu, <br> digunakan untuk membuat pemisah baris (line break) di dalam teks, dan bersifat *self-closing* (tidak memerlukan tag penutup).
<p>Ini adalah paragraf pertama yang menjelaskan konsep dasar.</p>
<p>Ini baris pertama.<br>Ini adalah baris yang terpisah tanpa membuat paragraf baru.</p>
Tautan adalah inti dari World Wide Web. Tag <a> (anchor) digunakan untuk membuat hyperlink. Atribut yang paling penting adalah href (Hypertext Reference) yang menentukan tujuan tautan.
<a href="https://www.google.com" target="_blank">Kunjungi Google</a>
Atribut target="_blank" memastikan tautan terbuka di tab baru.
Gambar dimasukkan menggunakan tag <img>, yang juga merupakan tag *self-closing*. Dua atribut utama yang harus selalu ada adalah src (sumber file gambar) dan alt (teks alternatif).
<img src="logo.png" alt="Logo Perusahaan Kami" width="150">
Atribut alt sangat penting karena digunakan oleh pembaca layar (screen readers) dan ditampilkan jika gambar gagal dimuat.
Atribut memberikan informasi tambahan tentang elemen HTML. Atribut selalu ditulis di dalam tag pembuka dan biasanya muncul sebagai pasangan nama="nilai".
Selain href dan src yang sudah kita bahas, atribut penting lainnya adalah:
id: Digunakan untuk mengidentifikasi satu elemen unik (penting untuk CSS dan JavaScript).class: Digunakan untuk mengelompokkan beberapa elemen agar dapat diberi gaya yang sama menggunakan CSS.style: Digunakan untuk menambahkan styling inline (walaupun umumnya lebih baik menggunakan file CSS terpisah).Setelah menguasai struktur dasar dan tag-tag esensial di atas, langkah logis berikutnya dalam perjalanan web development Anda adalah mempelajari bagaimana membuat halaman Anda terlihat menarik. HTML hanya mendefinisikan konten dan struktur, sementara CSS (Cascading Style Sheets) bertugas untuk mendesain dan menata tampilannya.
Setelah itu, JavaScript akan Anda perlukan untuk menambahkan interaktivitas dinamis pada halaman Anda. Namun, jangan terburu-buru. Kuasai dulu fondasi HTML ini dengan membuat beberapa halaman statis sederhana. Praktik adalah kunci utama dalam penguasaan bahasa markup ini. Selamat belajar!