Pernah nggak kamu buka sebuah website lalu langsung ogah baca karena teksnya kayak dinding batu — panjang, padat, tanpa jeda, tanpa judul? Itu bukan salah penulisnya. Itu salah HTML-nya. Nah, di sinilah tag teks HTML5 jadi pahlawan tanpa jubah.
Di artikel kedua dari Seri Belajar HTML5 From Zero to Zorro ini, kamu bakal belajar cara bikin teks yang nggak cuma bisa dibaca — tapi juga enak dibaca. Mulai dari heading dan paragraf HTML, pemformatan tebal-miring, sampai tag-tag kecil yang sering dilupain tapi efeknya luar biasa untuk SEO dan aksesibilitas. Yuk mulai!
1. Heading HTML: Hierarki Judul yang Bikin Konten Tertata
Bayangkan kamu lagi baca koran. Ada headline utama yang gede banget, lalu ada sub-judul yang lebih kecil, terus ada judul rubrik yang lebih kecil lagi. Itulah konsep heading dan paragraf HTML — sebuah sistem hirarki judul dari yang terbesar (h1) sampai yang terkecil (h6).
Tag Heading adalah tag HTML yang digunakan untuk mendefinisikan judul dan sub-judul konten. Terdapat 6 tingkatan: h1 (terpenting, paling besar) hingga h6 (terendah, paling kecil). Setiap halaman sebaiknya hanya memiliki satu tag h1 — ini penting untuk SEO!
Heading bukan cuma soal ukuran font yang berbeda-beda. Bagi mesin pencari seperti Google, heading adalah peta isi konten. Google membaca h1 kamu untuk tahu "ini artikel tentang apa?" dan membaca h2, h3 untuk tahu "bagian-bagiannya apa aja?"
| Tag | Nama | Ukuran Default | Penggunaan Umum |
|---|---|---|---|
<h1> |
Heading 1 | ~32px | Judul utama halaman (1x saja) |
<h2> |
Heading 2 | ~24px | Sub-judul utama / section besar |
<h3> |
Heading 3 | ~18px | Sub-section, judul contoh |
<h4> |
Heading 4 | ~16px | Judul sub-sub-section |
<h5> |
Heading 5 | ~13px | Jarang dipakai, sub-detail |
<h6> |
Heading 6 | ~11px | Sangat jarang, legal/footnote |
<h1>Resep Nasi Goreng Istimewa</h1> <h2>Bahan-Bahan yang Dibutuhkan</h2> <h3>Bumbu Halus</h3> <h3>Bahan Pelengkap</h3> <h2>Cara Memasak</h2>
Satu halaman = satu h1. Jangan pakai h3 kalau di atasnya belum ada h2. Pikirkan heading seperti daftar isi buku — harus logis, urut, dan terstruktur. Google dan screen reader akan berterima kasih padamu!
2. Tag Paragraf & Pemformatan Teks HTML5 yang Wajib Kamu Tahu
Kalau heading adalah "kerangka", maka tag paragraf adalah "dagingnya". Di HTML5, konten teks utama ditulis dalam tag <p> — singkatan dari paragraph. Tapi HTML punya banyak tag teks HTML5 lain yang bisa bikin tulisanmu lebih ekspresif dan bermakna.
<p> — ParagrafTag paling dasar untuk teks. Browser otomatis menambahkan jarak antar paragraf. Semua teks biasa wajib dibungkus <p>, bukan dilepas begitu saja di dalam <body>.
<strong> vs <b> — Teks Tebal<strong> artinya "ini penting secara semantik" — screen reader dan Google menganggap isinya penting. <b> hanya bikin tebal secara visual tanpa makna khusus. Untuk SEO dan aksesibilitas, selalu pakai <strong>.
<em> vs <i> — Teks Miring<em> (emphasis) memberikan penekanan intonasi — seperti saat kamu benar-benar menekankan sesuatu saat bicara. <i> untuk istilah teknis, nama ilmiah, atau kata asing. Bedakan konteksnya!
<br> dan <hr> — Jeda & Garis<br> adalah line break — pindah baris tanpa membuat paragraf baru. Cocok untuk alamat atau puisi. <hr> menampilkan garis horizontal pemisah bagian. Keduanya adalah self-closing tag — tidak butuh tag penutup.
<mark>, <small>, <del>, <ins><mark> bikin teks ter-highlight kuning kayak stabilo. <small> untuk catatan kaki / copyright. <del> bikin efek coret (harga lama), dan <ins> untuk teks yang ditambahkan (harga baru). Tag-tag ini baru populer di HTML5!
Di HTML5, ada konsep "semantic HTML" — artinya tag bukan cuma soal tampilan, tapi soal makna. Tag <strong> secara harfiah bilang ke browser: "ini teks penting!" Sedangkan <b> cuma bilang: "ini teks tebal." Google lebih menghargai tag yang semantik untuk peringkat pencarian!
<p> Ini adalah paragraf biasa. Tapi ada kata yang <strong>sangat penting</strong> dan ada yang <em>ditekankan dengan lembut</em>. </p> <p> Harga normal: <del>Rp 500.000</del> Harga promo: <ins>Rp 299.000</ins> 🎉 </p> <p> Jangan lupa <mark>deadline-nya besok!</mark> </p> <!-- Garis pemisah --> <hr> <!-- Pindah baris tanpa paragraf baru --> <p> Jl. Merdeka No. 17<br> Jakarta Pusat<br> 10110 </p>
3. Cara Praktis Menggunakan Tag Teks HTML5 — Step by Step
Teori sudah, saatnya praktek! Kita akan bikin halaman profil sederhana yang menggunakan berbagai tag teks HTML5 yang sudah kita pelajari. Ikuti langkah-langkahnya:
Buat file baru dengan nama profil.html. Pastikan ekstensinya .html, bukan .txt.
Masukkan boilerplate dari artikel sebelumnya: <!DOCTYPE html>, <html>, <head>, dan <body>.
Gunakan <h1> untuk nama kamu, <h2> untuk "Tentang Saya", dan <p> untuk isi deskripsinya.
Coba pakai <strong> untuk skill utamamu, <em> untuk motto, dan <mark> untuk highlight prestasi.
Klik dua kali file .html-mu, dan browser akan membukanya. Selamat — kamu baru saja membuat halaman web dengan teks terformat pertamamu! 🎉
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <title>Profil Saya</title> </head> <body> <h1>Budi Santoso</h1> <h2>Tentang Saya</h2> <p> Saya adalah <strong>Web Developer</strong> yang <em>passionate</em> dalam dunia teknologi. Motto saya: <mark>belajar setiap hari!</mark> </p> <hr> <h2>Kontak</h2> <p> Jl. Coding No. 5<br> Jakarta Selatan<br> <small>© 2026 Budi Santoso</small> </p> </body> </html>
HTML mengabaikan spasi berlebih dan enter di dalam kode. Artinya, mengetik 10 spasi berturutan atau 5 baris kosong di kode HTML-mu tidak akan mengubah tampilan browser. Untuk jeda visual, kamu perlu tag HTML atau CSS — bukan spasi!
Kesalahan umum pemula: pakai <h1> bukan karena itu judul, tapi karena mau teks besar. Ini salah! Gunakan heading sesuai hirarki konten, bukan sesuai ukuran yang kamu mau. Untuk ukuran teks, gunakan CSS nanti.
<b>Judul Artikel</b> <br><br> <i>Teks penting</i>
Google dan screen reader bingung membaca ini. Tidak ada informasi "makna" dari konten.
<h1>Judul Artikel</h1> <p> <strong>Teks penting</strong> </p>
Google tahu ini judul utama dan teks penting. Aksesibel untuk semua pengguna.
No comments:
Post a Comment