Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah memahami heading dan paragraph, saatnya kita belajar memformat teks agar lebih menarik dan informatif.
Kenapa Perlu Memformat Teks?
Teks polos tanpa format terlihat membosankan dan sulit dibaca. Dengan memformat teks — misalnya membuatnya tebal, miring, atau garis bawah — kamu bisa menonjolkan bagian penting dan membuat konten lebih mudah dipahami.
HTML menyediakan beberapa tag untuk memformat teks. Tag-tag ini dibagi menjadi dua kategori: semantic (makna) dan presentational (tampilan).
Tag Semantic vs Presentational
Sebelum masuk ke tag-nya, penting untuk memahami perbedaan dua pendekatan:
Semantic Tags
Tag semantic memberikan makna pada teks. Browser menampilkan format tertentu, tapi yang lebih penting, mesin pencari dan screen reader memahami arti dari teks tersebut.
Contoh: <strong> berarti “teks ini penting”, <em> berarti “teks ini ditekankan”.
Presentational Tags
Tag presentational hanya mengubah tampilan tanpa memberi makna tambahan. Contoh: <b> membuat tebal, <i> membuat miring.
Dalam pengembangan web modern, prioritaskan tag semantic karena lebih baik untuk SEO dan aksesibilitas.
Membuat Teks Tebal
Tag <strong> (Semantic)
Tag <strong> menandakan teks yang penting atau serius. Browser menampilkannya sebagai teks tebal.
<p>Peringatan: <strong>Jangan memberikan password kepada siapapun</strong>.</p>
Tag <b> (Presentational)
Tag <b> membuat teks tebal tanpa memberikan makna tambahan.
<p>Nama saya <b>Ahmad</b>.</p>
Kapan Menggunakan yang Mana?
- Gunakan
<strong>jika teks tersebut benar-benar penting dan perlu ditekankan secara semantik - Gunakan
<b>hanya untuk teks tebal yang tidak penting secara semantik, misalnya nama produk atau istilah khusus
Membuat Teks Miring
Tag <em> (Semantic)
Tag <em> menandakan teks yang ditekankan atau diucapkan dengan nada berbeda. Browser menampilkannya sebagai teks miring.
<p>Saya tidak pernah berkata <em>tidak mungkin</em>.</p>
Tag <i> (Presentational)
Tag <i> membuat teks miring tanpa makna tambahan.
<p>judul buku: <i>Laskar Pelangi</i></p>
Kapan Menggunakan yang Mana?
- Gunakan
<em>untuk penekanan makna dalam kalimat - Gunakan
<i>untuk istilah asing, judul, atau nama ilmiah yang memang secara tradisional ditulis miring
Membuat Teks dengan Garis Bawah
Tag <u> menambahkan garis bawah pada teks. Gunakan dengan hati-hati karena garis bawah sering diasosiasikan dengan hyperlink.
<p>Kata <u>href</u> adalah singkatan dari Hypertext Reference.</p>
Membuat Teks Coret
Tag <s> menampilkan teks dengan garis coret, menandakan teks yang tidak relevan lagi atau sudah tidak berlaku.
<p><s>Harga: Rp 100.000</s></p>
<p>Harga baru: Rp 75.000</p>
Tag <del> juga menampilkan garis coret tapi secara semantik menandakan teks yang dihapus dari dokumen.
<p>Rencana: <del>Bertemu jam 10</del> <ins>Bertemu jam 14</ins></p>
Membuat Teks Diberi Warna Kuning (Highlight)
Tag <mark> menandai teks dengan latar belakang kuning (atau warna highlight default browser).
<p>Cari kata kunci <mark>HTML</mark> untuk menemukan bagian yang relevan.</p>
Tag ini sangat berguna untuk menonjolkan hasil pencarian atau bagian penting dari teks panjang.
Membuat Teks Superskrip dan Subskrip
Tag <sup> untuk superskrip (huruf kecil di atas) dan <sub> untuk subskrip (huruf kecil di bawah).
<p>H<sub>2</sub>O adalah rumus air.</p>
<p>E=mc<sup>2</sup> adalah rumus Einstein.</p>
Penggunaan umum:
- Superskrip — Pernyataan matematika, satuan, catatan kaki
- Subskrip — Rumus kimia, indeks matematika
Membuat Teks yang Ditambahkan (Inserted)
Tag <ins> menampilkan teks dengan garis bawah (menandakan teks yang ditambahkan ke dokumen).
<p>Kami <ins>menambahkan fitur baru</ins> di versi terbaru.</p>
Contoh Penggunaan Gabungan
Berikut contoh yang menggabungkan berbagai tag formatting:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<title>Contoh Text Formatting</title>
</head>
<body>
<h1>Panduan Belajar HTML</h1>
<p>
<strong>HTML</strong> adalah bahasa markup untuk membuat halaman web.
Kamu perlu memahami <em>konsep dasar</em> sebelum lanjut ke materi lebih advanced.
</p>
<h2>Harga Kursus</h2>
<p>
<s>Harga normal: Rp 500.000</s><br />
<strong>Harga diskon: Rp 299.000</strong>
</p>
<p>
Daftar sebelum <mark>31 Desember 2026</mark> untuk mendapatkan harga spesial.
</p>
<h2>Catatan Kimia</h2>
<p>
Air terdiri dari 2 atom hidrogen dan 1 atom oksigen: H<sub>2</sub>O.
</p>
<p>
Energi sama dengan massa kali kecepatan cahaya kuadrat: E=mc<sup>2</sup>.
</p>
<h2>Revisi Dokumen</h2>
<p>
Pertemuan dijadwalkan <del>Senin</del> <ins>Rabu</ins> pukul 10.00 WIB.
</p>
</body>
</html>
Ringkasan
<strong>— Teks penting (tebal, semantic)<b>— Teks tebal (presentational)<em>— Teks ditekankan (miring, semantic)<i>— Teks miring (presentational)<u>— Teks garis bawah<s>— Teks tidak relevan (coret)<mark>— Teks highlight (warna kuning)<sub>— Subskrip (huruf kecil di bawah)<sup>— Superskrip (huruf kecil di atas)<del>— Teks dihapus (coret)<ins>— Teks ditambahkan (garis bawah)
Langkah Selanjutnya
Kamu sudah memahami cara memformat teks di HTML. Di artikel selanjutnya, kita akan belajar tentang comment di HTML — cara menulis komentar untuk dokumentasi kode.