Struktur Fundamental untuk Web Modern
Visualisasi struktur dasar HTML.
HTML, singkatan dari HyperText Markup Language, adalah tulang punggung dari setiap halaman web yang kita kunjungi. Meskipun dunia web terus berkembang dengan adanya CSS untuk gaya visual dan JavaScript untuk interaktivitas, HTML tetap menjadi penentu struktur dan makna konten. Codepolitan sering menekankan pentingnya penguasaan HTML karena tanpanya, tidak ada yang bisa ditampilkan di peramban (browser).
Berbeda dengan bahasa pemrograman seperti Python atau Java yang fokus pada logika eksekusi, HTML adalah bahasa markup. Ini berarti kita menggunakan serangkaian "tag" untuk memberi tahu peramban bagaimana konten harus diorganisir. Misalnya, menggunakan tag <h1> untuk judul utama, <p> untuk paragraf, dan <a> untuk membuat tautan (link).
Setiap elemen HTML umumnya terdiri dari tag pembuka, konten, dan tag penutup. Contoh standarnya adalah: <p>Ini adalah paragraf.</p>. Perlu diperhatikan juga adanya elemen kosong (self-closing tags) yang tidak memerlukan tag penutup, seperti tag untuk gambar <img> atau pemisah baris <br>.
Struktur dokumen HTML yang valid selalu dimulai dengan deklarasi DOCTYPE, diikuti oleh elemen akar <html>. Di dalamnya, terdapat dua bagian utama: <head> dan <body>.
<head>: Berisi metadata tentang dokumen—informasi yang tidak terlihat langsung oleh pengguna namun penting untuk peramban, mesin pencari, dan perangkat lain (seperti judul halaman, tautan ke CSS, atau deskripsi meta).<body>: Ini adalah wadah untuk semua konten yang terlihat, termasuk teks, gambar, tabel, dan tautan.
Penggunaan atribut dalam tag juga krusial. Atribut memberikan informasi tambahan tentang elemen. Contoh paling umum adalah href pada tag jangkar (<a>) untuk menentukan tujuan tautan, atau src pada tag gambar (<img>) untuk menentukan sumber gambar.
Seiring evolusi web, komunitas pengembang, termasuk yang didukung Codepolitan, sangat menganjurkan penggunaan HTML Semantik (Semantic HTML). Semantik berarti menggunakan tag yang mendeskripsikan maknanya, bukan hanya tampilannya.
Dulu, banyak pengembang menggunakan tag umum seperti <div> untuk segala hal. Namun, tag semantik seperti <header>, <nav> (navigasi), <main>, <article>, <section>, dan <footer> membantu meningkatkan aksesibilitas (terutama bagi pembaca layar) dan SEO (Search Engine Optimization). Mesin pencari lebih mudah memahami hierarki dan konten utama situs Anda jika strukturnya didefinisikan secara semantik.
Meskipun secara visual mungkin tidak ada perbedaan antara <div> dan <section> tanpa CSS, di balik layar, maknanya sangat berbeda bagi teknologi bantu. Menguasai praktik ini adalah langkah wajib bagi setiap developer web modern.
Untuk memastikan situs web Anda terlihat baik di perangkat mobile, elemen dasar HTML yang harus Anda ingat adalah tag meta viewport di dalam <head>. Tag ini memberitahu peramban perangkat mobile bagaimana cara mengontrol dimensi dan skala halaman.
Kode kuncinya adalah:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Tanpa baris ini, peramban mobile sering kali akan merender halaman seolah-olah dilihat di desktop, kemudian mengecilkannya secara drastis, membuat teks hampir tidak terbaca. Pengaturan width=device-width memastikan lebar halaman sesuai dengan lebar layar perangkat, dan initial-scale=1.0 mengatur tingkat zoom awal yang ideal. Ini adalah fondasi HTML yang memastikan desain Anda siap untuk era mobile-first.