Belajar HTML - Elemen Teks dan Blok Dasar
Episode ini membedah elemen teks dan blok dasar: heading h1 sampai h6, paragraf, elemen format teks seperti strong dan em, serta div dan span sebagai elemen pembungkus generik.
#Pendahuluan
Setelah kerangka dokumen berdiri di episode 2, sekarang kita mengisi body dengan konten nyata. Episode 3 membahas elemen teks dan blok dasar — bahan utama hampir semua halaman web: heading, paragraf, dan elemen pembungkus. Menguasai elemen-elemen ini berarti kalian sudah bisa menulis halaman yang terbaca dengan baik.
Kita juga akan membedah konsep kunci yang sering membingungkan pemula: perbedaan elemen block dan inline. Pemahaman ini menentukan bagaimana elemen-elemen tersusun di halaman sebelum CSS bekerja.
#Block vs Inline
#Dua Kelas Elemen
Setiap elemen HTML termasuk dalam dua kategori perilaku tampilan:
- Block: memulai baris baru dan melebar penuh. Contoh:
h1,p,div. - Inline: mengalir di dalam baris yang sama dengan teks di sekitarnya. Contoh:
strong,em,span.
Block membentuk kotak utuh yang menumpuk ke bawah; inline mengalir ke samping. Ketika CSS datang di episode 13, perilaku ini bisa diubah — tapi struktur yang benar sejak awal akan membuat segalanya lebih mudah.
#Heading: Menandai Judul dan Subjudul
#Hirarki h1 sampai h6
HTML menyediakan enam level heading, dari h1 untuk judul utama hingga h6 untuk judul paling rendah. Heading menandai struktur konten, bukan sekadar ukuran font.
<h1>Judul Utama Halaman</h1>
<h2>Bagian Pertama</h2>
<h3>Sub Bagian dari Bagian Pertama</h3>
<h2>Bagian Kedua</h2>Satu halaman sebaiknya hanya punya satu h1, dan heading tidak boleh melompat level tanpa alasan — misalnya dari h2 langsung ke h5. Aturan ini penting untuk aksesibilitas dan SEO, dan akan kita perdalam di episode 12.
#Paragraf dan Format Teks
#Elemen p
Elemen p menandai sebuah paragraf. Browser menambahkan jarak di antara paragraf secara otomatis, jadi jangan memakai br berulang untuk membuat jarak.
<p>Ini paragraf pertama. Browser memberi jarak antar paragraf secara otomatis.</p>
<p>Ini paragraf kedua, masih satu paragraf yang utuh dan mengalir.</p>#Elemen Format Teks
Beberapa elemen inline untuk menandai makna teks:
stronguntuk teks yang penting, biasanya dirender tebal.emuntuk penekanan, biasanya dirender miring.markuntuk teks yang disorot.bruntuk ganti baris di dalam paragraf.hruntuk pemisah tematik antar bagian.
<p>
Pelajari <strong>struktur dokumen</strong> dengan <em>sungguh-sungguh</em>.
<br>
Ini baris baru di dalam paragraf yang sama.
</p>Perhatikan bahwa strong dan em punya makna semantik, bukan sekadar gaya tebal atau miring. Makna inilah yang dibaca oleh screen reader dan search engine.
#div dan span
#Elemen Pembungkus Generik
div dan span adalah elemen tanpa makna spesifik — murni pembungkus untuk keperluan layout dan styling. div bersifat block, span bersifat inline.
<div class="kartu">
<h2>Kartu Produk</h2>
<p>Harga: <span class="harga">Rp150.000</span></p>
</div>Meski div sangat berguna, jangan jadikan kebiasaan membungkus semuanya dengan div. Di episode 7 kalian akan belajar elemen semantik yang lebih tepat untuk banyak kasus. Gunakan div hanya ketika tidak ada elemen dengan makna yang cocok.
#Latihan: Halaman Profil
Gabungkan semuanya menjadi halaman profil sederhana:
<!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>Profil Saya</h1>
<h2>Tentang</h2>
<p>Saya sedang belajar HTML dan suka <strong>membangun web</strong>.</p>
<h2>Keahlian</h2>
<p>Markup dasar, struktur dokumen, dan <em>semangat belajar</em>.</p>
<div class="catatan">
<p>Catatan: halaman ini akan terus berkembang sepanjang series.</p>
</div>
</body>
</html>Simpan sebagai index.html, lalu buka lewat server dan amati di DevTools bagaimana heading, paragraf, dan div tersusun. Perintah python3 -m http.server 8080 dari episode 2 tetap bisa dipakai untuk melihat hasilnya.
#Kesalahan Umum dan Solusinya
#Memakai Heading untuk Ukuran Font
Jangan memakai h1 hanya karena ingin teks besar. Heading menandai struktur; ukuran diatur oleh CSS. Kalau butuh teks besar tanpa makna judul, gunakan p atau span lalu atur ukurannya dengan CSS.
#br Berulang untuk Jarak
Memakai tiga br berturut-turut untuk membuat ruang kosong adalah tanda struktur yang salah. Ruang antar blok adalah pekerjaan CSS margin, bukan br.
#Penutup
Episode 3 mengisi body dengan elemen dasar: heading yang berhirarki, paragraf yang mengalir, format teks yang bermakna, serta div dan span sebagai pembungkus generik. Konsep block versus inline menjadi lensa untuk membaca bagaimana elemen tersusun.
Inti yang harus dibawa pulang:
- Elemen block memulai baris baru; elemen inline mengalir di dalam baris.
- Satu
h1per halaman dan heading tidak boleh melompat level. strongdanemmembawa makna, bukan sekadar gaya.divdanspanadalah pembungkus generik; pakai hanya saat tidak ada elemen yang lebih tepat.- Hindari
brberulang dan heading untuk sekadar mengubah ukuran.
Di episode 4 selanjutnya kita akan membahas daftar, tabel, dan konten terstruktur — ul, ol, li, serta table lengkap dengan thead, tbody, dan th. Konten kalian akan mulai terorganisasi dalam struktur yang mudah dibaca mesin dan manusia.