Format Teks HTML untuk Membuat Teks Lebih Terstruktur

Teks di halaman web memang bisa ditulis begitu saja, tetapi hasilnya akan terasa datar jika semua bagian diperlakukan sama. Di sinilah Format Teks HTML punya peran penting, karena HTML bukan cuma mengatur bagaimana teks terlihat, tetapi juga memberi makna pada bagian tertentu dari sebuah dokumen.

Kalau baru belajar HTML, bagian ini memang agak menjebak. Saya dulu pun mudah mengira <b> dan <strong>, atau <i> dan <em>, hanyalah pasangan tag dengan tampilan yang sama. Padahal secara semantik keduanya punya tujuan yang berbeda.

Di blog Adi Prayitno, pembahasan ini dibuat dari dasar supaya kamu tidak sekadar hafal tag HTML, tetapi tahu kapan harus menggunakannya.

Format Teks HTML untuk Membuat Teks Lebih Terstruktur

Apa Itu Format Teks HTML?

Format Teks HTML adalah penggunaan elemen HTML untuk memberi struktur, penekanan, anotasi, atau makna tertentu pada teks di halaman web.

HTML menyediakan berbagai elemen teks, seperti <strong>, <em>, <mark>, <small>, <del>, <ins>, <sub>, <sup>, <blockquote>, <q>, <code>, dan beberapa elemen lainnya. Masing-masing mempunyai fungsi yang berbeda.

Hal yang menarik, beberapa tag memang terlihat mirip ketika dibuka di browser. Namun HTML modern lebih menekankan makna atau semantik, bukan sekadar bentuk visualnya.

Kenapa Tidak Langsung Menggunakan CSS?

Ini salah satu kebingungan yang cukup sering dialami pemula.

CSS memang digunakan untuk mengatur tampilan, seperti ukuran huruf, warna, ketebalan, jarak, dan jenis font. Sementara HTML sebaiknya digunakan untuk memberikan struktur dan arti pada konten.

Misalnya, <strong> secara semantik menunjukkan bahwa sebuah teks memiliki tingkat kepentingan yang kuat. Browser biasanya menampilkannya dengan huruf tebal, tetapi ketebalan tersebut bukan alasan utama mengapa elemen itu digunakan.

Jadi, jangan memilih tag hanya karena "yang ini kelihatan tebal". Pilih berdasarkan maksud teksnya.

1. Tag <strong> untuk Teks yang Penting

<strong> digunakan untuk menunjukkan teks yang mempunyai tingkat kepentingan lebih kuat.

Contohnya:

<p>
  <strong>Penting:</strong> Simpan file HTML sebelum membukanya di browser.
</p>

Hasilnya akan terlihat seperti:

Penting: Simpan file HTML sebelum membukanya di browser.

Tag ini cocok untuk peringatan, bagian penting dari instruksi, atau informasi yang memang perlu mendapat perhatian lebih.

<strong> Bukan Sekadar Bold

Kesalahan yang sering terjadi adalah memakai <strong> setiap kali ingin membuat tulisan tebal.

Kalau tujuannya hanya mengubah tampilan menjadi tebal, CSS font-weight lebih tepat. HTML sebaiknya tetap menyampaikan makna konten.

2. Tag <em> untuk Penekanan

<em> digunakan untuk memberikan penekanan pada bagian tertentu dari kalimat.

Contoh:

<p>
  Kamu <em>harus</em> memahami struktur HTML sebelum lanjut ke CSS.
</p>

Hasil:

Kamu harus memahami struktur HTML sebelum lanjut ke CSS.

Menurut dokumentasi MDN, <em> menunjukkan stress emphasis. Jadi penggunaannya berkaitan dengan penekanan makna kalimat, bukan sekadar membuat teks miring.

3. Tag <mark> untuk Menyorot Teks

Ingin menyorot kata tertentu seperti menggunakan stabilo? Gunakan <mark>.

<p>
  Pelajari <mark>HTML dasar</mark> sebelum masuk ke CSS.
</p>

Hasilnya:

Pelajari HTML dasar sebelum masuk ke CSS.

Elemen <mark> memang ditujukan untuk menandai bagian teks yang relevan dalam konteks tertentu. Salah satu contoh penggunaannya adalah menyorot kata yang cocok dengan pencarian.

Jangan memakai <mark> untuk membuat syntax highlighting kode. Untuk kebutuhan tersebut, MDN menyarankan pendekatan menggunakan <span> dengan CSS.

4. Tag <small> untuk Keterangan Tambahan

<small> digunakan untuk teks seperti catatan kecil, keterangan, atau informasi tambahan yang sifatnya tidak menjadi bagian utama dari konten.

Contoh:

<p>
  Harga dapat berubah sewaktu-waktu.
  <small>Terakhir diperbarui Agustus 2026.</small>
</p>

Browser biasanya menampilkan teks <small> dengan ukuran lebih kecil. Namun lagi-lagi, ukuran visual bukan tujuan utamanya. Elemen tersebut mempunyai makna sebagai side comment atau teks kecil yang berdiri sebagai informasi tambahan.

5. Tag <del> untuk Teks yang Dihapus

<del> digunakan untuk menunjukkan teks yang sudah dihapus dari sebuah dokumen.

Contoh:

<p>
  Harga lama: <del>Rp100.000</del>
</p>

Hasilnya biasanya berupa teks yang dicoret:

Harga lama: Rp100.000

Elemen ini juga dapat digunakan dalam konteks perubahan dokumen atau track changes. Untuk teks yang ditambahkan, HTML menyediakan pasangan semantiknya, yaitu <ins>.

6. Tag <ins> untuk Teks yang Ditambahkan

Kalau <del> menunjukkan bagian yang dihapus, <ins> menunjukkan bagian yang ditambahkan.

<p>
  Harga baru: <ins>Rp75.000</ins>
</p>

Contoh penggunaannya cukup masuk akal untuk artikel yang menjelaskan perubahan harga, revisi informasi, atau pembaruan isi dokumen. Elemen <ins> juga mendukung atribut seperti cite dan datetime untuk memberikan informasi tambahan mengenai perubahan tersebut.

7. Tag <sub> untuk Subscript

<sub> membuat teks berada sedikit lebih rendah dari garis teks normal.

Contohnya pada rumus kimia:

<p>Rumus air adalah H<sub>2</sub>O.</p>

Hasil:

Rumus air adalah H₂O.

Penggunaan seperti ini bukan sekadar permainan ukuran font. <sub> memang memiliki makna tipografi sebagai teks subscript.

8. Tag <sup> untuk Superscript

Kebalikan dari <sub>, elemen <sup> menampilkan teks sedikit lebih tinggi.

Contoh:

<p>Contoh: 2<sup>2</sup> = 4.</p>

Hasil:

Contoh: 2² = 4.

Elemen ini berguna untuk pangkat matematika, catatan kaki, atau informasi lain yang memang membutuhkan posisi teks di atas garis normal.

9. Tag <s> untuk Teks yang Sudah Tidak Relevan

<s> digunakan untuk teks yang sudah tidak lagi relevan atau tidak lagi akurat.

Contohnya:

<p>
  Harga normal <s>Rp150.000</s> Rp99.000.
</p>

Hasilnya biasanya menampilkan teks yang dicoret.

Yang perlu diperhatikan, <s> tidak sama dengan <del>. Jika konteksnya adalah perubahan atau penghapusan dari sebuah dokumen, <del> lebih tepat. Sementara <s> digunakan ketika informasi tersebut sudah tidak relevan atau tidak akurat lagi.

10. Tag <q> untuk Kutipan Pendek

<q> digunakan untuk kutipan singkat yang berada di dalam sebuah paragraf.

<p>
  Dia berkata, <q>Belajar HTML perlu banyak latihan.</q>
</p>

Hasilnya biasanya ditampilkan dengan tanda kutip oleh browser.

Untuk kutipan yang panjang dan berdiri sebagai blok tersendiri, gunakan <blockquote>.

11. Tag <blockquote> untuk Kutipan Panjang

Contoh:

<blockquote>
  Belajar HTML bukan tentang menghafal semua tag,
  tetapi memahami fungsi dan struktur dokumen.
</blockquote>

<blockquote> memang ditujukan untuk kutipan yang lebih panjang, sedangkan <q> digunakan untuk kutipan pendek di dalam teks. HTML juga memungkinkan sumber kutipan ditunjukkan melalui atribut cite.

12. Tag <code> untuk Potongan Kode

Kalau sedang menulis tutorial pemrograman, <code> sangat berguna untuk menunjukkan potongan kode di dalam kalimat.

Contoh:

<p>
  Gunakan <code>&lt;h1&gt;</code> untuk heading utama.
</p>

Hasilnya akan membedakan potongan kode dari teks biasa.

Untuk kode yang lebih panjang atau beberapa baris, biasanya digunakan kombinasi <pre> dan <code>.

13. Tag <pre> untuk Teks yang Mempertahankan Format

<pre> berguna ketika spasi dan baris baru dalam teks perlu dipertahankan.

Contoh:

<pre>
Nama  : Adi
Blog  : Adi Prayitno
Topik : HTML
</pre>

Elemen ini sering ditemukan pada artikel tutorial pemrograman karena format teks di dalamnya dapat dipertahankan. Untuk contoh kode, <pre><code>...</code></pre> merupakan pola yang umum digunakan.

Perbedaan <b> dan <strong>

Ini salah satu pertanyaan yang hampir pasti muncul saat belajar HTML.

Keduanya biasanya terlihat tebal, tetapi maknanya berbeda.

Jadi, jangan terpaku pada tampilan browser. MDN menjelaskan bahwa <b> dan <strong> sama-sama valid, tetapi mempunyai tujuan semantik berbeda.

Perbedaan <i> dan <em>

Hal yang sama terjadi pada <i> dan <em>.

Keduanya biasanya terlihat miring, tetapi <em> memberikan makna penekanan, sedangkan <i> digunakan untuk teks yang berada dalam nada atau konteks berbeda, seperti istilah teknis, istilah asing, atau penggunaan tertentu yang bukan penekanan.

Contoh:

<p>
  Saya <em>sangat</em> menyarankan latihan setiap hari.
</p>

<p>
  Istilah <i>responsive design</i> sering digunakan dalam pengembangan web.
</p>

Perbedaannya memang kecil ketika dilihat mata, tetapi penting ketika kita mulai memahami HTML secara semantik.

Contoh Format Teks HTML dalam Satu Artikel

Sekarang kita gabungkan beberapa elemen sekaligus.

<h2>Belajar HTML Dasar</h2>

<p>
  HTML digunakan untuk membuat <strong>struktur halaman web</strong>.
  Kamu bisa memberikan <em>penekanan</em> pada teks tertentu.
</p>

<p>
  Kamu juga dapat menyorot <mark>informasi penting</mark>
  atau menampilkan contoh kode seperti
  <code>&lt;p&gt;</code>.
</p>

<blockquote>
  Struktur HTML yang baik membuat konten lebih mudah dipahami.
</blockquote>

<p>
  Rumus air adalah H<sub>2</sub>O dan contoh pangkat adalah
  2<sup>2</sup>.
</p>

Potongan tersebut menunjukkan bahwa satu halaman bisa menggunakan beberapa elemen teks sesuai kebutuhan. Yang penting, setiap tag dipilih berdasarkan fungsi dan maknanya, bukan sekadar bentuk visual.

Apakah Format Teks HTML Membantu SEO?

Format teks HTML bukan tombol ajaib yang membuat artikel langsung masuk halaman pertama Google.

Namun struktur HTML yang jelas membantu halaman menyampaikan makna konten dengan lebih baik. Google sendiri menekankan pentingnya membuat konten yang bermanfaat bagi manusia serta menggunakan kata-kata yang memang dipakai orang untuk mencari informasi, termasuk pada bagian yang deskriptif seperti judul dan heading.

Karena itu, jangan memenuhi artikel dengan <strong>, <mark>, atau tag lainnya hanya demi memasukkan kata kunci. SEO yang sehat dimulai dari konten yang berguna dan struktur yang masuk akal.

Kesalahan Pemula Saat Memformat Teks HTML

Ada beberapa kebiasaan yang sebaiknya mulai ditinggalkan sejak belajar HTML.

Menggunakan <b> untuk Semua Teks Penting

Tidak semua teks tebal berarti penting secara semantik. Tentukan dulu apakah kamu benar-benar ingin menunjukkan kepentingan sebuah teks atau hanya ingin mengubah tampilannya.

Menggunakan <em> Hanya Karena Ingin Huruf Miring

Kalau hanya ingin mengatur gaya tulisan, CSS lebih tepat. Gunakan <em> ketika teks tersebut memang membutuhkan penekanan dalam makna kalimat.

Memakai <br> untuk Membuat Jarak

<br> digunakan untuk membuat line break, bukan sebagai alat untuk mengatur jarak antarbagian halaman.

Untuk jarak dan tata letak, gunakan CSS. Ini kelihatannya sepele, tetapi kebiasaan seperti ini akan terasa menyebalkan ketika proyek HTML mulai besar.

Terlalu Banyak Memberi Penekanan

Kalau hampir semua kata dibuat tebal, miring, atau diberi highlight, akhirnya tidak ada yang benar-benar terlihat penting.

Ini juga berlaku pada artikel blog. Pembaca datang mencari informasi, bukan menghadiri festival stabilo.

Tips Format Teks HTML yang Lebih Baik

Kalau kamu masih pemula, saya sarankan pegang beberapa aturan sederhana ini:

1. Pilih tag berdasarkan maknanya, bukan tampilannya.
2. Gunakan CSS untuk mengatur visual.
3. Gunakan <strong> untuk informasi yang benar-benar penting.
4. Gunakan <em> untuk penekanan dalam kalimat.
5. Gunakan <mark> hanya ketika teks memang perlu ditandai.
6. Gunakan <code> untuk potongan kode.
7. Gunakan <blockquote> untuk kutipan panjang.
8. Jangan memenuhi artikel dengan format yang tidak diperlukan.
9. Periksa hasil HTML di browser setelah membuat perubahan.
10. Biasakan membaca dokumentasi HTML ketika menemukan tag yang belum dipahami.

Kebiasaan sederhana ini jauh lebih berguna daripada menghafal puluhan tag HTML sekaligus.

Kesimpulan

Format Teks HTML bukan sekadar cara membuat tulisan menjadi tebal, miring, kecil, tercoret, atau berwarna. Elemen-elemen HTML seperti <strong>, <em>, <mark>, <del>, <ins>, <sub>, <sup>, <code>, dan <blockquote> membantu memberikan struktur serta makna pada konten.

Buat kamu yang sedang belajar HTML, jangan buru-buru mengejar tampilan yang keren. Pahami dulu kenapa sebuah tag digunakan. Dari pengalaman yang sering dialami pemula, pemahaman semantik seperti inilah yang nantinya membuat belajar CSS, JavaScript, aksesibilitas, dan pengembangan web terasa jauh lebih masuk akal.

Kalau artikel Adi Prayitno ini membantu kamu memahami format teks HTML, coba praktikkan beberapa tag di file HTML sendiri. Kalau menemukan tag yang masih membingungkan atau punya contoh penggunaan yang menarik, tuliskan di kolom komentar dan bagikan artikel ini kepada teman yang sedang belajar HTML.