Tutorial Formating Text HTML: Cara Membuat Huruf Miring di HTML

Halo gan. Di postingan sebelumnya, kita sudah membahas perbedaan antara block element dengan inline element.

Kita review sedikit. Block element akan membuat baris baru dan memisahkan diri dari tag di sekitarnya. Sedangkan inline element tidak membuat baris baru dan menyatu dengan tag di sekitarnya.

Pembahasan perbedaan block element dan inline element menandakan berakhirnya sesi Tutorial HTML Lanjutan. Selanjutnya, kita masuk ke sesi Tutorial Formating Text HTML.

Dan postingan pertama di sesi Tutorial Formating Text HTML ini akan membahas cara membuat huruf miring di HTML.

Membuat huruf miring di HTML dapat dilakukan dengan 2 cara. Cara pertama menggunakan tag <i> dan cara kedua adalah menggunakan tag <em>.

membuat huruf miring di HTML

Membuat huruf miring dengan tag <i>

Tag <i> merupakan singkatan dari italic. Italic tersebut adalah sebutan untuk teks yang ditulis miring. Awalnya, tag <i> tidak memiliki arti struktur apa-apa. Bahkan, pernah berstatus deprecated yang artinya tidak disarankan untuk digunakan lagi.

Kenapa bisa seperti itu? Karena, tag <i> ini hanya semata-mata membuat huruf menjadi miring atau italic.

Nah, karena tag-nya hanya bertujuan membuat efek tampilan semata-mata, sebagian programmer berpendapat bahwa sebaiknya tidak dipakai dan dialihkan ke CSS.

Di era HTML5 sekarang ini, tag <i> tetap dipertahankan. Hanya saja, penggunaannya berubah menjadi "alternative voice". 

Alternative voice ditujukan untuk menandai bagian teks yang pengucapan atau maknanya berbeda, seperti untuk menandai kata ilmiah atau yang berasal dari bahasa asing.

Tag <i> adalah salah satu tag berjenis inline element. Karena, tag <i> tidak membuat blok dan baris baru, dan mengikuti alur tag yang ada.

Kita coba buat teks yang miring dengan tag <i>
<!DOCTYPE html>
<html>
  <head>
    <title>Membuat huruf miring di HTML dengan element i</title>
  </head>
  <body>
    <p>HTML merupakan singkatan dari <i>Hypertext Markup Language</i></p>
  </body>
</html>

Simpan lalu jalankan. Seperti ini jadinya.

membuat huruf miringi di html

Membuat huruf miring dengan tag <em>

Tag <em> merupakan singkatan dari Stresses Emphasis. Stresses Emphasis berguna untuk menandai teks yang perlu diberi penekanan. 

Saat tampil di web browser, tag <em> akan menampilkan huruf miring, sehingga mirip dengan tag <i>.

Sama seperti tag <i>, tag <em> juga termasuk dalam tag berjenis inline element, yang akan menyatu dengan tag yang ada di sekitarnya.

Kita coba kodingannya.
<!DOCTPYE html>
<html>
  <head>
    <title>Membuat huruf miring dengan tag <em></title>
  </head>
  <body>
    <p>Dalam belajar membuat web, yang pertama kali harus dipelajari adalah <em>HTML</em>
  </body>
</html>


membuat huruf miring di html

Meski sama tampilannya, menjadi miring hurufnya, keduanya punya maksud tujuan masing-masing. Tag <i> untuk kata atau istilah asing, sedangkan tag <em> digunakan untuk penekanan kata.

Tak masalah juga bila ingin menggunakan salah satu saja, atau keduanya, atau campuran untuk membuat huruf miring. Sebaiknya gunakan yang lebih familiar untuk kita.

Seperti itulah cara membuat huruf miring di HTML. Huruf miring dapat kita buat dengan tag <i> dan tag <em>. Kedua tag itu akan menampilkan hasil yang sama walaupun sebenarnya punya maksud tujuan yang berbeda.

Selanjutnya, kita akan bahas cara membuat huruf tebal di HTML.


0 Komentar untuk "Tutorial Formating Text HTML: Cara Membuat Huruf Miring di HTML"