Pemformatan Teks Pada HTML : Fungsi Tag b, i, u

Pemformatan teks yang dibahas pada tutorial HTML dasar ini diantaranya adalah membuat teks tebal, miring, garis bawah, coret dan penggunaan sup atau sub pada penulisan persamaan matematika. Format teks tersebut sering digunakan dalam penulisan artikel sehari-hari. Sebab itu, kita akan membahasnya satu-persatu penerapannya dalam HTML.

Cara Membuat Huruf Tebal di HTML

Untuk membuat huruf tebal pada HTML kita dapat menggunakan tag <b> atau tag <strong>. Kedua tag HTML tersebut menghasilkan tampilan yang sama yaitu huruf yang ada di dalam tag tersebut menjadi tebal namun penggunaan keduanya berbeda. Lalu apa perbedaannya?

Perbedaan tag <b> dan tag <strong>

Perbedaan antara keduanya terdapat pada fungsinya yaitu tag <b> dari kata bold digunakan untuk sekedar membuat huruf tebal saja, sedangkan tag <strong> digunakan untuk menunjukkan bahwa teks atau huruf tersebut lebih penting dari yang lainnya.

Agar lebih jelas, berikut ini contoh penggunannya:

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan b dan strong</title>
 </head> 
<body>
  <p>Distributor harus berhati-hati dalam mengantarkan paket dari <b>ASUS</b>. Dimohon untuk <strong>tidak membanting dan menghindari air</strong> agar komponen tidak rusak.</p>
 </body>
</html>

Hasil tampilan pada browser:

Perbedaan tag b dan strong di HTML

Penjelasan kode: Secara tampilan tag <b> dan <strong> memiliki tampilan yang sama. Namun pada penggunaannya seperti pada contoh di atas, tag <b> digunakan untuk sekedar menebalkan nama brand, sedangkan tag <strong> digunakan untuk menebalkan teks yang penting dalam kalimat tersebut.

Cara Membuat Tulisan Miring di HTML

Untuk membuat tulisan miring pada HTML kita bisa menggunakan tag <i> atau tag <em>. Seperti 2 tag sebelumnya, kedua tag ini juga memiliki tampilan yang sama namun terdapat perbedaan dalam penggunaannya.

Perbedaan tag <i> dan tag <em>

Kedua tag ini memiliki perbedaan pada fungsi yaitu tag <i> yang merupakan singkatan dari italic digunakan dengan tujuan untuk mencetak tuisan miring saja tanpa ada maksud di dalamnya. Sedangkan tag <em> dari kata emphasis digunakan untuk penekanan terhadap teks yang tertentu (stress emphasis).

Contoh:

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan i dan em</title>
 </head> 
<body>
  <p><i>Rumah Merah Putih</i> merupakan salah satu film yang sangat direkomendasikan untuk pemuda agar menumbuhkan rasa <em>cinta tanah air</em>.</p>
 </body>
</html>

Hasilnya:

Penggunaan tag i dan em di HTML

Penjelasan kode: Pada contoh di atas kita menambahkan tag <i> untuk judul film hanya untuk membedakan cara penulisan dengan teks lainnya. Sedangkan untuk tag <em> kita tekankan pada kata “cinta tanah air” dengan tujuan menekan kalimat tersebut. Seperti contoh sebelumnya, jika dilihat dari tampilan hasil, kedua tag tersebut menghasilkan tampilan yang sama yaitu teks tercetak miring.

Cara Membuat Huruf Garis Bawah di HTML

Kita bisa menggunakan tag <u> ataupun tag <ins> untuk membuat tulisan garis bawah pada HTML. Secara tampilan kedua tag tersebut menghasilkan tampilan yang sama. Namun sebenarnya terdapat perbedaan dalam penggunaannya.

Perbedaan tag <u> dan tag <ins>

Tag <u> dari kata underline digunakan untuk mencetak huruf atau teks dengan garis bawah tanpa ada maksud lainnya. Hal tersebut sama dengan tag <b> dan <i> yang hanya bertujuan pada visual. Sedangkan tag <ins> dari kata insert digunakan untuk membuat huruf atau teks dengan garis bawah dengan tujuan menunjukkan bahwa teks tersebut baru saja ditambahkan.

Jika ada fungsi untuk menambahkan tulisan maka tentu terdapat juga tag yang berfungsi untuk mendefinikan tulisan yang dihapus (dicoret) yaitu tag <del>.

Untuk lebih jelasnya berikut ini contohnya:

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan u, ins dan del</title>
 </head> 
<body>
  <p>Inilah <i>versi HTML terbaru</i>:</p>
  <p><del>Versi terbaru HTML adalah versi 4.0</del> <ins>Versi terbaru HTML adalah versi 5</ins></p>
 </body>
</html>

Hasilnya:

Perbedaan tag u dan ins di HTML

Penjelasan kode: Pada kode di atas kita gunakan tag <i> hanya sekedar menggaris bawahi kata “versi HTML tertentu” sebagai pembeda tampilan judul. Sedangkan tag <del> kita gunakan untuk mendefinisikan bahwa versi 4.0 yang sebelumnya adalah versi terbaru sekarang sudah tidak berlaku lagi karena sudah ada versi 5 yang kita definisikan dengan tag <ins>.

Cara Membuat Huruf Tercoret pada HTML

Untuk membuat huruf yang dicoret di HTML dapat menggunakan tag <s> ataupun tag <del>. Persamaan kedua tag tersebut adalah pada tampilannya yang sama-sama menghasilkan teks tercoret. Lalu apa perbedaannya?

Perbedaan tag <s> dan tag <del>

Tag <s> dari kata strikethrough hanya digunakan untuk mencetak huruf yang dicoret secara visual tanpa tujuan tertentu. Sedangkan tag <del> dari kata delete berfungsi mendefinisikan bahwa teks tersebut sudah tidak berlaku lagi. Berikut ini contohnya:

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan s dan del</title>
 </head> 
<body>
  <p>Ini hanya style <s>penulisan html</s>.</p>
  <p>Versi HTML terbaru adalah versi <del>4.0</del> <ins>5</ins></p>
 </body>
</html>

Hasilnya:

Penggunaan tag s dan del di HTML

Penjelasan kode: Tag <s> pada contoh di atas digunakan hanya untuk style saja. Sedangkan tag <del> digunakan untuk meralat atau merevisi tulisan yang sudah tidak berlaku, dalam hal ini adalah versi HTML dan diupdate dengan tulisan baru dengan memasukkan versi terbarunya.

Cara Menulis Persamaan Matematika di HTML

Persamaan dan rumus matematika atau kimia memiliki pangkat atas dan bawah. Untuk menulisnya pada HTML dapat menggunakan tag <sup> atau tag <sub>.

Tag <sup> dari kata superscript digunakan untuk membuat pangkat kecil yang berada di atas.

Tag <sub> dari kata Subscript digunakan untuk membuat pangkat kecil yang berada di bawah.

Agar lebih jelas, berikut ini contohnya:

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan sup dan sub</title>
 </head> 
<body>
  <p>Persamaan segitiga siku-siku: a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>.</p>
  <p>Penulisan rumus kimia Asam sulfat adalah H<sub>2</sub>SO<sub>4</sub></p>
 </body>
</html>

Hasilnya:

Penggunaan tag sub dan sup di HTML

Penjelasan Kode: Penulisan pangkat 2 pada segitiga siku-siku menggunakan tag <sup> yaitu <sup>2</sup>. Sedangkan penulisan pangkat bawah menggunakan tag <sub> contohnya <sub>4</sub>.

Simak juga: pemahaman tentang apa itu HTML secara mendalam.

Sebenarnya terdapat banyak tag-tag lain untuk memformat teks dengan fungsinya masing-masing. Namun, tag yang telah kita pelajari pada materi ini adalah yang paling sering digunakan. Kita akan mempelajari tag lainnya pada pembahasan tag masing-masing jika diperlukan. Selanjutnya, jika ada pertanyaan tentang materi ini, silahkan kirim melalui kolom komentar yang ada.

M. Hernawan
Web developer yang juga suka dengan dunia sysadmin. Pernah belajar Teknik Informatika di Indonesia.

Kirim Komentar