Belajar HTML - Struktur Dasar Dokumen HTML
Episode ini membedah kerangka dokumen HTML: peran doctype, elemen html, head, dan body, metadata penting seperti charset dan viewport, serta aturan penulisan markup yang benar lewat dokumen lengkap pertama.
#Pendahuluan
Setiap halaman web dimulai dari kerangka yang sama. Setelah memahami peran HTML di episode 1, sekarang saatnya membangun struktur dasar dokumen HTML — tulang punggung yang akan dipakai di seluruh series ini. Dokumen yang terstruktur dengan benar memudahkan browser, search engine, dan pengembang lain membaca halaman kalian.
Episode 2 membedah empat bagian utama dokumen: <!DOCTYPE html>, elemen html, elemen head, dan elemen body. Kita juga akan membahas metadata penting yang harus ada di dalam head, plus aturan penulisan markup yang benar.
#Anatomi Dokumen HTML
#Kerangka Empat Bagian
Setiap dokumen HTML valid terdiri dari empat bagian berurutan:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Judul Halaman</title>
</head>
<body>
<h1>Konten utama</h1>
</body>
</html>Perhatikan urutannya: DOCTYPE di baris pertama, lalu elemen html yang membungkus seluruh dokumen, di dalamnya ada head untuk metadata dan body untuk konten yang terlihat.
#Peran DOCTYPE
Baris pertama <!DOCTYPE html> bukan tag — ini adalah deklarasi yang memberi tahu browser bahwa dokumen memakai standar HTML5. Tanpa DOCTYPE, browser masuk ke quirks mode, mode kompatibilitas untuk halaman lama yang membuat rendering menjadi tidak konsisten antar browser.
Selalu tulis <!DOCTYPE html> persis seperti itu, di baris pertama, sebelum elemen apapun.
#Elemen html, head, dan body
#Elemen html
Elemen html adalah akar dokumen — membungkus semua elemen lainnya. Berikan atribut lang untuk menunjukkan bahasa konten:
<html lang="id">Atribut lang penting untuk screen reader (pengucapan) dan search engine (pemahaman bahasa). Kode id berarti bahasa Indonesia; untuk Inggris gunakan en.
#Elemen head
Elemen head berisi metadata — informasi tentang dokumen yang tidak terlihat langsung di halaman: judul, charset, viewport, deskripsi, dan tautan ke stylesheet. Semua metadata yang akan kita bahas di episode 16 diletakkan di sini.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar HTML - Struktur Dasar</title>
</head>Urutan umum di dalam head: meta charset paling awal agar browser tahu encoding sebelum membaca sisanya, lalu meta viewport untuk halaman responsif, lalu title.
#Elemen body
Elemen body memuat semua konten yang tampak: judul, paragraf, gambar, tautan, formulir, dan seterusnya. Segala sesuatu yang akan kalian pelajari dari episode 3 hingga 22 sebagian besar berada di dalam body.
#Metadata Penting di dalam head
#Charset dan Viewport
Dua meta yang wajib ada di hampir semua halaman modern:
meta charset="UTF-8"menetapkan pengkodean karakter UTF-8, yang mendukung hampir semua bahasa termasuk tulisan latin dan karakter khusus.meta name="viewport"mengatur lebar area pandang agar halaman tampil proporsional di layar kecil — kunci dasar web responsif yang akan kita perdalam di episode 20.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Tanpa viewport, halaman di ponsel akan tampil mengecil seolah layar desktop — pengguna harus zoom untuk membaca.
#Elemen title
Elemen title menentukan judul tab browser dan judul hasil pencarian. Judul yang jelas dan deskriptif penting untuk SEO dan pengalaman pengguna. Panjang ideal sekitar 50 sampai 60 karakter.
#Aturan Penulisan yang Benar
#Tag Berpasangan dan Bersarang
Sebagian besar elemen HTML terdiri dari tag pembuka, konten, dan tag penutup. Elemen yang tidak punya konten, seperti meta dan img, disebut void element dan tidak membutuhkan tag penutup.
Penulisan harus bersarang dengan benar — elemen yang dibuka terakhir ditutup paling dulu:
<p>Ini <strong>teks tebal</strong> dalam paragraf.</p>Penulisan bersilangan seperti membuka strong sebelum menutup p adalah kesalahan umum yang akan mengacaukan struktur dokumen.
#Konsistensi Format
Ikuti beberapa konvensi agar kode mudah dibaca:
- Tulis tag dengan huruf kecil.
- Beri indentasi dua spasi per level.
- Pakai tanda kutip ganda untuk atribut.
- Sertakan atribut
langdi elemenhtml.
#Latihan: Dokumen Lengkap Pertama
Gabungkan semua yang sudah dipelajari ke dalam index.html:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profil Saya</title>
</head>
<body>
<h1>Halo, saya sedang belajar HTML</h1>
<p>Ini adalah paragraf pertama dalam dokumen lengkap.</p>
</body>
</html>Simpan file, lalu buka lewat server lokal:
python3 -m http.server 8080Buka http://localhost:8080 dan perhatikan panel Elements di DevTools — struktur yang tampil di sana harus persis sama dengan yang kalian tulis. Perintah python3 -m http.server 8080 di atas dipakai lagi dan lagi sepanjang series ini, jadi biasakan sejak sekarang.
#Kesalahan Umum dan Solusinya
#Lupa DOCTYPE
Tanpa <!DOCTYPE html>, browser masuk quirks mode dan halaman bisa dirender dengan jarak serta ukuran font yang berbeda. Selalu mulai dokumen dengan deklarasi tersebut.
#Meta di Tempat Salah
meta dan title harus berada di dalam head, bukan body. Browser tetap memprosesnya, tapi dokumen jadi tidak valid dan hasil SEO tidak optimal.
#Penutup
Episode 2 membangun kerangka yang akan kalian pakai di semua halaman: DOCTYPE, elemen html dengan atribut lang, head yang berisi charset dan viewport, serta body untuk konten. Kalian juga sudah mengenal aturan nesting dan konsistensi format.
Inti yang harus dibawa pulang:
<!DOCTYPE html>harus di baris pertama agar browser memakai mode standar.htmladalah akar dokumen; gunakan atributlanguntuk bahasa.headberisi metadata;bodyberisi konten yang terlihat.meta charset="UTF-8"danmeta viewportwajib di halaman modern.- Selalu tulis tag berpasangan dengan nesting yang benar.
Di episode 3 selanjutnya kita akan membahas elemen teks dan blok dasar — paragraf, heading, span, div, serta elemen format teks seperti strong dan em — lengkap dengan perbedaan antara elemen block dan inline. Kerangka dokumen kalian akan mulai terisi dengan konten nyata.