Memilih Elemen Teks

Kita telah mengenal belasan elemen teks, dan di titik ini muncul keterampilan yang sesungguhnya: memilih. Dua penulis bisa menghasilkan tampilan yang sama persis, tetapi markup yang satu hidup di alat pembantu sedangkan yang lain tidak.

Kuncinya ada pada satu pertanyaan yang selalu diajukan sebelum mengetik tag. Chapter ini melatih pertanyaan tersebut lewat baga keputusan, tabel situasi umum, dan satu contoh paragraf campuran yang dibedah.

Pertanyaan Kunci: Makna atau Tampilan #

Pertanyaan yang benar bukan “teks ini mau tampil bagaimana?”, melainkan “teks ini apa maknanya?”. Tampilan adalah urusan CSS: teks bisa dibuat besar, merah, atau miring tanpa mengubah satu tag pun. Sebaliknya, elemen memikul makna yang dibaca pembaca layar, mesin pencari, dan penulis CSS.

Contoh kekeliruan klasiknya: sebuah kalimat dibungkus heading karena ingin tampil besar, padahal kalimat itu bukan judul. Pembaca layar lalu mengumumkannya sebagai judul bagian dan kerangka halaman menjadi menyesatkan. Pertanyaan “apa maknanya?” mencegah hal itu sejak awal.

Baga Keputusan Sederhana #

Uraikan peran teks berikut pertanyaan sampai ketemu elemennya:

Apa peran teks ini?
├── Judul halaman atau bagian? ................. heading (h1–h6)
├── Kalimat lengkap biasa? ..................... p
├── Kata dengan bobot penting? ................ strong
├── Tekanan nada dalam kalimat? ................ em
├── Kutipan panjang dari sumber lain? .......... blockquote
├── Kutipan pendek di dalam kalimat? ........... q
├── Singkatan atau akronim? .................... abbr
├── Potongan kode, tombol, atau keluaran? ...... code, kbd, samp, var
├── Spasi dan baris harus persis? .............. pre
├── Tanggal atau jam? .......................... time
├── Kontak pemilik dokumen? .................... address
└── Tidak bermakna khusus, hanya perlu
    pengelompokan atau styling? ............... div, span

Cara membacanya: turuni daftar dari atas, berhenti pada peran pertama yang cocok. Cabang terakhir adalah tempat terakhir — div dan span baru dipakai setelah semua pertanyaan di atasnya terjawab “tidak”.

Sepuluh Situasi Umum #

Baris b perlu catatan: b hanya menonjolkan tanpa makna penting — jika teksnya benar-benar penting, pilihan jatuh ke strong. Pembeda strong, em, b, dan i dibahas tuntas pada chapter masing-masing.

Contoh Paragraf Campuran #

Satu paragraf nyata sering memuat beberapa makna sekaligus:

<p>Pada <time datetime="2026-10-18">hari Minggu</time>, Budi menulis:
<q>Kopi tubruk adalah kopi paling jujur</q>, lalu menyimpan
kutipan itu di berkas <code>catatan-kopi.txt</code> karena kutipan
tersebut <strong>penting diingat</strong>.</p>

Mari kita telaah kode di atas:

1. <time datetime="2026-10-18">: tanggal tersimpan terbaca mesin, teks tampilnya tetap manusiawi.
2. <q>: kalimat kutipan pendek di dalam paragraf — tanda kutipnya otomatis ditambahkan browser.
3. <code>: nama berkas komputer ditandai sebagai kode.
4. <strong>: bobot penting diberikan pada frasa yang memang perlu diingat, bukan pada seluruh kalimat.

Paragraf itu dirender berikut, dilengkapi satu kalimat tambahan yang memakai em dan abbr — keduanya juga anggota baga keputusan di atas. Arahkan kursor ke singkatan KKS untuk melihat kepanjangannya muncul sebagai tooltip:

Semua elemen menampilkan dirinya lewat perilaku bawaan browser — tanda kutip pada q, garis putus-putus pada abbr, huruf lebar pada code — tanpa satu baris CSS pun.

Perhatikan polanya: satu kalimat, empat keputusan makna, nol keputusan tampilan. Ukuran huruf, warna, dan tanda kutip semuanya bisa diatur CSS — tugas kita hanya memilih wadah yang benar.

Ringkasan #

• Tanyakan “apa maknanya?”, bukan “mau tampil bagaimana?”.
• Baga keputusan dituruni dari atas; div dan span adalah pilihan terakhir.
• Tabel situasi umum mempercepat pemilihan sehari-hari.
• Satu paragraf boleh memuat beberapa elemen inline sekaligus.

Chapter terakhir Section ini menggabungkan semuanya menjadi satu latihan menyusun artikel utuh dengan struktur teks yang sehat.