Setiap halaman website — sesederhana apa pun tampilannya — dibangun di atas kerangka HTML yang sama. Memahami tag-tag dasarnya bukan cuma berguna untuk yang ingin belajar coding dari nol, tapi juga membantu pemilik website WordPress yang sesekali perlu menyunting kode lewat custom HTML block tanpa merusak struktur halaman.

Ringkasan Cepat

Dokumen HTML tersusun dari kerangka tetap: <!DOCTYPE html>, <html>, <head> untuk metadata, dan <body> untuk konten yang tampil ke pengunjung. Di dalam body, tag heading (<h1> sampai <h6>) menyusun hierarki isi halaman secara berjenjang, bukan sekadar untuk mengatur ukuran teks.

DOCTYPEHead vs BodyHierarki HeadingSemantic Tag

Apa Itu HTML dan Kenapa Strukturnya Penting

HTML (HyperText Markup Language) adalah bahasa markup yang mendefinisikan struktur dan makna konten di sebuah halaman web — bukan tampilannya. Tampilan visual (warna, jarak, tata letak) adalah tugas CSS, sedangkan interaktivitas adalah tugas JavaScript. HTML sendiri berfokus pada satu hal: memberi label yang benar untuk setiap bagian konten, supaya browser, mesin pencari, dan alat bantu seperti screen reader bisa memahami apa yang sedang dibaca.

Struktur yang berantakan — misalnya seluruh halaman hanya ditulis dengan tag <div> tanpa heading yang jelas — tetap bisa tampil normal di browser, tapi menyulitkan mesin pencari memahami mana bagian judul, mana isi utama, dan mana navigasi. Inilah kenapa struktur HTML yang rapi berpengaruh langsung ke SEO, bukan hanya ke kerapian kode.

Kerangka Dasar Sebuah Dokumen HTML

Setiap halaman HTML, sekompleks apa pun, dimulai dari kerangka yang sama:

<!-- Deklarasi versi HTML -->
<!DOCTYPE html>
<html lang="id">
  <head>
    <!-- Metadata: tidak tampil ke pengunjung -->
  </head>
  <body>
    <!-- Konten yang tampil ke pengunjung -->
  </body>
</html>

<!DOCTYPE html> memberi tahu browser bahwa dokumen ini menggunakan standar HTML5, versi HTML yang berlaku saat ini. Tag <html lang="id"> membungkus seluruh dokumen, dengan atribut lang yang menandai bahasa utama konten — penting untuk aksesibilitas karena screen reader menggunakan atribut ini untuk menentukan cara melafalkan teks.

Tag di Dalam Head: Metadata Halaman

Bagian <head> tidak menampilkan apa pun secara langsung ke pengunjung, tapi berisi informasi penting tentang halaman:

  • <meta charset="UTF-8"> — menentukan encoding karakter agar teks (termasuk huruf dengan aksen atau emoji) tampil benar di semua perangkat.
  • <title> — judul yang muncul di tab browser dan menjadi salah satu elemen yang ditampilkan di hasil pencarian.
  • <meta name="description"> — ringkasan halaman yang sering ditampilkan sebagai cuplikan di hasil pencarian.
  • <link rel="stylesheet"> — menghubungkan file CSS eksternal untuk mengatur tampilan halaman.
  • <meta name="viewport"> — memberi instruksi bagaimana halaman menyesuaikan diri di layar perangkat mobile.

Tag di Dalam Body: Konten yang Tampil

Semua yang dilihat pengunjung berada di dalam <body>. Beberapa tag paling dasar yang membentuk isi halaman:

TagFungsi
<h1>–<h6>Judul dan sub-judul, menyusun hierarki isi halaman
<p>Paragraf teks biasa
<a href="">Tautan ke halaman lain atau bagian lain di halaman yang sama
<img src="">Menampilkan gambar
<ul> / <ol> / <li>Daftar tak berurutan, daftar berurutan, dan item di dalamnya
<div>Kontainer generik tanpa makna semantik — pembungkus untuk keperluan styling/layout

Tag <div> memang paling fleksibel, tapi justru karena itu ia tidak memberi informasi apa pun tentang makna kontennya. Jika sebuah halaman hanya berisi tumpukan <div> tanpa tag yang lebih spesifik, browser dan mesin pencari harus menebak-nebak struktur halaman — itulah alasan tag semantik seperti <header>, <nav>, <main>, dan <footer> lebih disarankan ketika memang sesuai konteksnya.

100+elemen HTML standar yang tersedia menurut spesifikasi resmi
6tingkatan heading yang tersedia, dari h1 sampai h6
1tag html yang boleh ada dalam satu dokumen, sebagai elemen akar
Sumber: MDN Web Docs — Referensi Elemen HTML.

Hierarki Heading yang Benar

Tag heading bukan alat untuk mengatur ukuran teks — itu tugas CSS. Heading adalah penanda struktur: <h1> untuk judul utama halaman (idealnya hanya satu per halaman), lalu <h2> untuk bagian utama di bawahnya, <h3> untuk sub-bagian dari h2, dan seterusnya secara berjenjang tanpa melompati level.

Benar

H1 → H2 → H3

Urutan berjenjang, setiap level anak berada tepat satu tingkat di bawah induknya.

Salah

H1 → H4 langsung

Melompati level membuat struktur dokumen sulit dipahami mesin pencari dan screen reader.

Salah

H1 untuk teks kecil

Memilih tag heading hanya karena ukuran visualnya cocok, bukan karena makna strukturnya.

Mitos vs Fakta Seputar HTML

MitosTag <div> dan <section> pada dasarnya sama saja, tinggal pilih salah satu.
Fakta<section> membawa makna "bagian konten yang berdiri sendiri", sedangkan <div> tidak membawa makna apa pun.
MitosBoleh menggunakan beberapa tag <h1> dalam satu halaman selama ukurannya berbeda.
FaktaIdealnya hanya ada satu <h1> per halaman yang mewakili topik utama keseluruhan konten.

Checklist Struktur HTML yang Sehat

  • Dokumen dimulai dengan <!DOCTYPE html> dan atribut lang pada tag html sudah terisi.
  • Hanya ada satu <h1> di setiap halaman.
  • Urutan heading berjenjang tanpa melompati level (h2 sebelum h3, bukan langsung h4).
  • Tag semantik (<header>, <nav>, <main>, <footer>) dipakai sesuai konteksnya, bukan diganti <div> semua.
  • Setiap <img> memiliki atribut alt yang mendeskripsikan gambar.
#HTML#WebDevelopment#SemanticHTML#Aksesibilitas#Pemula
BP

Bimo Prasetya

Developer WordPress, 6 tahun

Membangun dan merawat puluhan situs WordPress skala kecil-menengah, termasuk kustomisasi tema dan penulisan custom HTML block. Artikel ini dipublikasikan pada 4 September 2026 dan akan ditinjau ulang mengikuti perkembangan standar HTML.

Sumber Rujukan Artikel Ini