Estimasi Waktu Baca: 3 menit

Apa itu Pemformatan Teks HTML?

Pemformatan teks atau text formatting meliputi bagaimana cara kita mengatur dan membuat suatu teks menjadi tebal, miring, bergaris bawah, dan lain-lain.

Membuat Teks Tebal

Menampilkan teks secara tebal pada dasarnya berfungsi untuk mempertegas suatu teks. Dengan mencetaknya secara tebal maka teks terkait bisa jadi akan lebih diperhatikan oleh pengguna.

Dalam HTML ada dua tag yang dapat melakukan hal ini, yaitu tag <b> dan tag <strong>.


<p>Teks ini dengan tag <b>bold</b></p>

<p>Teks ini dengan tag <strong>strong</strong></p>

Keluaran:

Meskipun keduanya terbilang sama karena output yang dihasilkan sama-sama bercetak tebal, namun nyatanya keduanya memiliki perbedaan.

Teks yang dicetak dengan tag <b> tidak memiliki kepentingan apa-apa, tag <b> hanya sekedar digunakan untuk mencetak tebal.

Sedangkan teks yang dicetak tebal menggunakan tag <strong> menunjukkan bahwa teks tersebut benar-benar penting atau memiliki arti.

Beberapa sumber menyatakan bahwa teks yang dicetak dengan tag <strong> bisa jadi bermanfaat pada penerapan SEO, karena walaupun di mata pengguna tag <b> dan <strong> terlihat sama namun tidak dengan mesin yang menganggap keduanya berbeda. Mesin akan menganggap bahwa teks yang diberi tag <strong> memiliki bobot yang tidak bisa diabaikan.

Meskipun tag <strong> bisa jadi bermanfaat untuk SEO, namun kita sangat tidak dianjurkan untuk sering menggunakannya dalam satu halaman.

Membuat Teks Miring

Dalam HTML ada dua tag yang dapat membuat teks menjadi miring yaitu tag <i> yang merupakan singkatan dari italic dan <em> untuk emphasized.


<p>Teks ini dengan tag <i>italic</i></p>

<p>Teks ini dengan tag <em>emphasized</em></p>

Keluaran:

Sama seperti tag <b> dan <strong>. Tag <i> dan <em> juga memiliki perbedaan dari segi kegunaan, terutama pada penerapan CEO.

Walaupun hasil yang ditampilkan sama-sama membuat teks menjadi miring. Namun kenyataannya tag <i> hanya digunakan untuk membuat teks menjadi miring saja tanpa arti apa-apa.

Sedangkan tag <em> selain membuat teks menjadi miring, namun juga membuat teks tersebut memiliki arti penting.

Membuat Teks Bergaris Bawah

Membuat teks agar memiliki garis bawah dapat dilakukan dengan tag <u> (underline) dan <ins> (insert).


<p>Teks ini dengan tag <u>underline</u></p>

<p>Teks ini dengan tag <ins>insert</ins></p>

Keluaran:

Sama seperti tag untuk mempertebal dan memiringkan teks sebelumnya. Perbedaan dari kedua tag ada pada kegunaan. Tag <u> digunakan hanya untuk menampilkan garis bawah pada suatu teks dan tidak memiliki arti apa-apa.

Sedangkan tag <ins> untuk menampilkan garis dan menandakan bahwa teks tersebut memiliki arti penting.

Membuat Teks Tercoret

Teks yang dicoret menandakan bahwa teks tersebut tidak digunakan atau dihapus. Untuk membuat teks yang tercoret ini bisa dengan tag <s> dan tag <del>.


<p>Teks ini dengan tag <s>strikethrough</s></p>

<p>Teks ini dengan tag <del>delete</del></p>

Keluaran:

Perbedaan dari keduanya adalah bila tag <s> hanya diperuntukkan untuk membuat coretan saja. Sedangkan tag <del> diperuntukkan untuk teks yang akan dikoreksi selanjutnya.

Membuat Teks Berpangkat

Perpangkatan sering digunakan pada rumus matematika. Ada dua jenis pangkat yang bisa dibuat di HTML yaitu pangkat atas dan pangkat bawah. Keduanya diwakili oleh tag berikut

  • sup – Singkatan dari superscript. Digunakan untuk membuat pangkat yang berada di atas.
  • sub – Singkatan dari subscript. Digunakan untuk membuat pangkat yang berada di bawah.

<p>Teks ini dengan tag <sup>superscript</sup></p>

<p>Teks ini dengan tag <sub>subscript</sub></p>

Keluaran:

Membuat Teks Berspidol

Untuk membuat teks seperti ditandai dengan spidol atau stabilo maka bisa gunakan tag <mark>.


<p>Teks ini dengan tag <mark>mark</mark></p>

Keluaran:

Tag ini nantinya akan menandai suatu teks dengan membuat warna pada background teks yang dimaksud, seperti saat kita memberi stabilo pada buku. Warna default dari tag <mark> adalah kuning.

Meskipun begitu kita masih bisa merubah warnanya dengan menggunakan sentuhan CSS.

Membuat Teks Berukuran Kecil

Untuk membuat teks berukuran kecil kita dapat menggunakan tag <small>


<p>Teks ini dengan tag <small>small</small></p>

Keluaran: