Paragraf dan Format Teks

Analogi: Alinea di Karangan Bahasa Indonesia

Ingat pelajaran mengarang waktu SD? Guru selalu bilang: tiap gagasan baru tulis di alinea baru. Satu alinea membahas satu ide, lalu beri jarak sebelum alinea berikutnya. Pembaca jadi bisa bernapas dan mengikuti alur pikiranmu.

Paragraf di HTML (<p>) bekerja persis seperti itu. Tiap p adalah satu "gagasan teks". Browser otomatis memberi jarak antar paragraf, sama seperti alinea di buku. Dan sama seperti mengarang, kamu tidak menumpuk semua kalimat dalam satu alinea raksasa. Kamu memecahnya supaya enak dibaca. Bedanya, di web, "guru" yang menilai kerapianmu adalah pembaca manusia sekaligus mesin pencari.

Kenapa Tag Paragraf dan Format Ini Ada

Browser punya kebiasaan unik: ia menggabungkan semua spasi, tab, dan enter berlebih menjadi satu spasi saja. Kamu menekan enter lima kali di kode, hasilnya tetap satu spasi di layar. Tanpa tag paragraf, seluruh teks halaman akan tampil sebagai satu gumpalan kalimat tanpa jeda. Tag p lahir untuk memberi tahu browser: "ini satu blok teks yang utuh, beri jarak setelahnya."

Tag format seperti strong, em, del, dan ins lahir dari masalah yang lebih dalam: makna. Dulu orang menebalkan teks cuma supaya terlihat tegas, tapi mesin tidak tahu teks itu penting. HTML modern memisahkan makna dari tampilan. strong artinya "teks ini penting", bukan sekadar "teks ini tebal". Screen reader bisa membacanya dengan penekanan suara, dan mesin pencari memberi bobot lebih. Tampilan tebalnya hanyalah bonus bawaan browser.

Contoh 1: Paragraf dan Ganti Baris yang Sederhana

<p>Halo! Selamat datang di blog saya.</p>
<p>Di sini saya menulis tentang kopi dan koding.</p>
<p>Alamat warkop:<br />Jl. Merdeka No. 1<br />Bandung</p>

Perhatikan: dua paragraf pertama terpisah otomatis tanpa usaha apa pun. Paragraf ketiga memakai br untuk ganti baris di dalam satu gagasan yang sama (alamat). Aturannya sederhana: ganti gagasan pakai p baru, ganti baris dalam gagasan yang sama pakai br.

Contoh 2: Format Teks yang Bermakna

Sekarang contoh yang lebih realistis, misalnya pengumuman diskon di toko online:

<p>Promo <strong>akhir tahun</strong> telah tiba! Semua <em>pelanggan setia</em> dapat potongan spesial.</p>
<hr />
<p>Harga normal <del>Rp100.000</del> <ins>Rp75.000</ins> saja.</p>
<p><small>*Syarat dan ketentuan berlaku. Promo berakhir 31 Desember.</small></p>
<p>Rumus kimia air adalah H<sub>2</sub>O dan 2<sup>3</sup> = 8.</p>

Tiap tag dipilih karena maknanya: strong untuk info penting, em untuk penekanan, del untuk harga yang dicoret, ins untuk harga pengganti, small untuk catatan kaki, sub dan sup untuk rumus. Tag hr di tengah berarti "ganti topik", dari pengumuman ke rincian harga. Kalau suatu hari kamu mengganti tema situs, semua makna ini tetap benar walau tampilannya berubah total.

Kesalahan Umum Pemula

Salah: menumpuk br untuk membuat jarak antar paragraf.

<p>Paragraf satu.</p>
<br /><br /><br />
<p>Paragraf dua.</p>

Benar: biarkan paragraf terpisah sendiri, atur jaraknya pakai CSS.

<p>Paragraf satu.</p>
<p>Paragraf dua.</p>

Kenapa salah? br artinya "ganti baris", bukan "beri jarak". Menumpuknya sama seperti menekan enter berkali-kali di Word supaya teks turun: terlihat beres, tapi strukturnya bohong. Jarak antar paragraf adalah urusan tampilan, jadi atur dengan CSS (margin).

Salah: memakai b dan i untuk teks yang sebenarnya penting.

<p><b>Peringatan:</b> jangan <i>pernah</i> membagikan kata sandimu.</p>

Benar: pakai strong dan em kalau maknanya memang penting atau ditekankan.

<p><strong>Peringatan:</strong> jangan <em>pernah</em> membagikan kata sandimu.</p>

Kenapa salah? b dan i cuma mengubah tampilan tanpa makna. Screen reader membacanya datar saja, seolah tidak ada yang penting. strong dan em memberi tahu screen reader untuk memberi penekanan suara, dan mesin pencari menganggapnya lebih berbobot.

Salah: memakai hr sebagai garis hiasan.

<p>Selamat ulang tahun!</p>
<hr />
<hr />
<p>Semoga panjang umur.</p>

Benar: satu hr berarti pergantian topik, garis hiasan pakai CSS.

<p>Selamat ulang tahun!</p>
<hr />
<p>Menu makan malam: nasi goreng spesial.</p>

Kenapa salah? hr punya makna: "topik berganti". Memakainya dua kali berturut-turut sebagai hiasan sama seperti menaruh dua judul bab kosong di buku. Kalau butuh garis dekoratif, itu tugas CSS (border).

Catatan teknis: Tag mark (stabilo), del (coret), dan ins (sisipan) juga dibaca secara khusus oleh teknologi bantu. Misalnya screen reader bisa mengumumkan "dihapus" untuk teks dalam del, sehingga pengguna tunanetra tahu harga lama sudah tidak berlaku, bukan sekadar melihat coretan.