Cara membuat teks tebal di HTML
Bungkus teksnya dengan <strong> atau <b>. Keduanya membuat teks menjadi tebal:
Tampilannya sama persis. Perbedaannya ada pada apa yang mereka katakan tentang teks itu.
strong vs b
| Tag | Makna | Contoh |
|---|---|---|
<strong> | Konten yang penting, serius, atau mendesak | <strong>Do not</strong> share your password. |
<b> | Menonjol, tapi tanpa makna penting tambahan | Kata kunci dalam ringkasan, nama produk, kata pembuka sebuah artikel |
Pilih <strong> saat kamu akan mengeraskan suara atau ingin pembaca tidak melewatkannya. Pilih <b> saat huruf tebal adalah konvensi tampilan untuk jenis teks itu. Kalau keduanya tidak cocok dan kamu hanya ingin gaya, pakai <span> dengan class dan CSS.
Huruf miring: em dan i
Pasangan untuk huruf miring mengikuti ide yang sama:
| Tag | Makna | Contoh |
|---|---|---|
<em> | Penekanan: memindahkannya mengubah makna kalimat | I <em>never</em> said that. |
<i> | Suara yang berbeda: kata asing, istilah teknis, nama kapal, isi pikiran | <i lang="la">et cetera</i> |
Dua kalimat pertama di atas memakai kata yang sama tapi maknanya berbeda karena posisi <em>. Saat <i> menandai frasa dalam bahasa lain, tambahkan atribut lang supaya screen reader mengucapkannya dengan benar.
Beberapa tag lain tampil miring secara default: <cite> (judul sebuah karya), <dfn> (istilah yang sedang didefinisikan), <address> dan <var>. Pakai tag itu saat cocok dan biarkan gaya default-nya bekerja.
Tebal dan miring sekaligus
Taruh satu tag di dalam tag lainnya, lalu tutup dengan urutan terbalik:
<strong><em>text</strong></em> (ditutup dengan urutan yang salah) tetap tampil, tapi browser harus memperbaiki pohon elemennya dan bisa memecah elemenmu; lihat halaman tag untuk melihat seperti apa perbaikan itu.
Tebal dan miring dengan CSS
Saat gayanya murni tampilan (judul kartu, harga, label), pakai CSS di elemen itu sendiri, bukan menambahkan tag. font-weight mengatur huruf tebal dan font-style mengatur huruf miring:
Baris terakhir menunjukkan bahwa makna dan tampilan itu terpisah: <strong> tetap membawa maknanya sementara CSS memberinya gaya yang berbeda. Seluruh rentang ketebalan (100 sampai 900) dibahas di halaman CSS font-weight.
Aksesibilitas
Dengan pengaturan default, kebanyakan screen reader tidak mengubah suaranya untuk <strong> atau <em>, jadi huruf tebal dan miring terutama adalah petunjuk visual. Apa pun yang tidak boleh terlewat oleh pengguna (error, field wajib, tenggat waktu) harus jelas dari kata-katanya sendiri, bukan hanya dari gayanya. Hindari juga paragraf panjang yang miring atau tebal: teks seperti itu lebih sulit dibaca, terutama bagi pembaca dengan disleksia.
Kesalahan umum
- Memakai huruf tebal sebagai heading. Satu baris teks
<b>di atas sebuah bagian bukan heading bagi screen reader. Pakai<h2>atau<h3>lalu beri gaya. - Memakai
<strong>untuk styling. Kalau tidak ada yang penting dari teks itu, pakai<b>atau CSS. - Menebalkan seluruh paragraf. Penekanan berhasil kalau jarang dipakai. Tebalkan satu frasa, bukan satu paragraf.
- Menutup tag dengan urutan yang salah.
<b><i>x</i></b>, jangan pernah<b><i>x</b></i>. - Tag lama. Tag
<font>dari tutorial lama sudah usang. Pakai tag di atas ataufont-weight.
Pertanyaan yang sering diajukan
Bagaimana cara membuat teks tebal di HTML?
Bungkus teksnya dengan <strong> kalau kata-katanya penting (<strong>Warning:</strong>), atau dengan <b> kalau kamu hanya ingin teksnya menonjol tanpa makna penting tambahan, seperti nama produk. Keduanya tampil tebal secara default.
Apa perbedaan <strong> dan <b>?
<strong> berarti teksnya penting, serius, atau mendesak. <b> menarik perhatian ke teks tanpa menyiratkan bahwa teks itu penting, seperti kata kunci dalam sebuah ringkasan. Tampilannya sama; perbedaannya ada di makna, yang penting bagi screen reader, mesin pencari, dan developer lain.
Bagaimana cara membuat teks miring di HTML?
Pakai <em> untuk penekanan yang mengubah makna kalimat ("I did say that" dengan penekanan pada "did"), dan <i> untuk teks dengan suara yang berbeda: kata asing, istilah teknis, nama kapal, isi pikiran. Keduanya tampil miring.
Bagaimana cara membuat teks tebal dan miring sekaligus?
Tumpuk tag-nya: <strong><em>text</em></strong>. Tutup tag dengan urutan terbalik dari saat kamu membukanya. Dengan CSS, atur font-weight: bold dan font-style: italic sekaligus di satu elemen.
Bisakah aku membuat teks tebal dengan CSS?
Bisa: font-weight: bold (atau 700) di elemen apa pun. Pakai CSS saat tebalnya murni tampilan, seperti label tombol atau gaya header tabel, dan pakai tag HTML saat kata-katanya sendiri penting atau perlu ditekankan.
