Cara Membuat Tulisan Miring dan Tebal di HTML dengan Mudah

Di dalam dokumen HTML, tentunya ada tulisan yang dimiringkan dan ditebalkan sesuai dengan keperluan dan ketentuan penulisan yang berlaku. HTML sendiri memiliki banyak elemen dalam pemformatan teks agar ditampilkan di browser dalam bentuk cetak tebal, miring, bergaris bawah, dan sebagainya.

Pada materi kali ini, saya akan menjelaskan cara membuat tulisan miring dan tebal di HTML. Pada umunya, pemformatan tulisan dalam bentuk cetak tebal (bold) dapat menggunakan tag dan tag sedangkan untuk pemformatan tulisan dalam bentuk cetak miring (italic) dapat menggunakan tag dan tag .

Meskipun tag dan tag sama – sama menampilkan bentuk cetak tebal di browser tetapi tentunya cara dan maksud penggunaannya berbeda. Hal itu sama dengan penggunaan tag dan tag . Penggunaan tag , , dan didukung oleh banyak browser diantaranya adalah Google Chrome, Mozilla firefox, Internet Explorer, Safari dan lain sebagainya.

Secara umum, elemen di dalam formatting ada dua yaitu Logical Formatting dan Physical Formatting. Physical Formatting digunakan untuk memformat teks secara karakteristik teks sedangkan Logical Formatting untuk memformat teks menurut kandungan atau isi teks. Tag dan tag merupakan Physical Formatting sedangkan tag dan tag merupakan Logical Formatting. Untuk lebih jelasnya mengenai keempat tag diatas, simaklah penjelasan dibawah ini :

A. Tag dan tag

Sebelumnya tag pernah disarankan tidak digunakan lagi karena sudah digantikan dengan CSS yang berfungsi menangani tampilan. Tapi sejak kemunculan HTML5, tag dianggap sebagai “stylistically offset” yaitu sebagai penanda sebuah kata kunci ataupun teks lain yang dianggap perlu dibedakan dengan teks lain. Sedangkan strong pada HTML5 digunakan untuk menandakan teks itu penting dan menjadi kata kunci di search engine (mesin pencari). Namun, pada HTML 4.01, tag digunakan untuk mendefinisikan penekanan yang kuat pada suatu teks (emphasis).

Berikut contoh kode penggunaan tag dan tag :

<!DOCTYPE html>
<html>
 <head>
  <title> Penggunaan Format Tulisan Cetak Tebal<title>
 </head>
 <body>
  <b>Kekinian</b> adalah sebuah website yang terdiri atas berbagai <strong>artikel seputar
IT</strong>.
 </body>
 </html>

Hasilnya setelah ditampilkan di browser :

Disini saya membuat Kekinian dengan tag karena dianggap sebagai kata kunci dan sebagai kata yang perlu dibedakan dari yang lainnya. Sedangkan “kumpulan karangan menarik” dibuat dengan tag karena dianggap sebagai text yang penting dan dan dijadikan kata kunci/ keyword di search engine.

Pada CSS, umumnya browser menampilkan elemen dan dengan nilai tetap yaitu
font-weight : bold.

B. Tag dan tag

Sama halnya dengan tag dan tag , sejak kemunculan HTML5, tag diakui kembali tetapi sebagai tanda bahwa teks tersebut berbeda dengan yang lain seperti untuk menulis judul buku, penerbit, kata adaptasi, dan sebagainya.

Sedangkan tag memiliki arti stress emphasis yaitu dinyatakan sebagai teks yang perlu mendapatkan penekanan atau perhatian khusus. Penggunaan tag sangat penting sebagai kata kunci di Search Engine.

Berikut contoh kode penggunaan tag dan tag :

<!DOCTYPE html>
<html>
 <head>
  <title>Bentuk Teks Cetak Miring di HTML</title>
 </head>
 <body>
  <i>Indonesia Bersatu</i> adalah judul buku yang mengajarkan kepada kita arti
  <em>nasionalisme</em>
 </body>
</html>

Hasilnya setelah ditampilkan di browser :

Dari gambar diatas terlihat bahwa “Indonesia Bersatu” ditulis miring dengan menggunakan tag karena merupakan sebuah judul buku. Sedangkan, kata “nasionalisme” ditulis miring dengan menggunakan tag karena merupakan kata yang perlu penekanan dan dianggap penting.

Pada CSS, umumnya browser menampilkan elemen dan dengan nilai tetap yaitu font- style: italic. Jika anda sudah paham fungsi dari keempat tag tersebut, silakan simak tutorial HTML berikutnya mengenai cara membuat tulisan dengan garis bawah dan tercoret di HTML.