Tutorial Text HTML Part 2: Cara Membuat Huruf Miring dalam HTML (tag i dan tag em)

Merubah format text seperti membuat huruf miring, merupakan hal biasa yang kita lakukan dalam aplikasi text processing, misalnya Microsoft Word. Dalam tutorial kali ini, kita akan membahas Cara Membuat Huruf Miring dalam HTML dengan tag <i> dan <em>.


Tag <i> Untuk Membuat Huruf Miring dalam HTML

Tag <i> adalah singkatan dari italic. Italic merupakan sebutan untuk karakter text yang ditulis miring. Pada awalnya, tag <i> tidak memiliki arti struktur apa-apa, dan pernah berstatus deprecated yang artinya disarankan untuk tidak digunakan lagi.

Hal ini terjadi karena tag <i> semata-mata bertujuan untuk membuat huruf italics, atau garis miring. Sebagian programmer berpendapat bahwa tag yang bertujuan visual seperti ini sebaiknya tidak dipakai dan dialihkan kepada CSS.

Pada era HTML5 saat ini, tag <i> tetap dipertahankan, namun defenisinya diganti menjadi “alternative voice”. Alternative Voice dimaksudkan untuk menandai bagian artikel yang ‘pengucapan’ atau ‘mood‘-nya berbeda, seperti untuk menandai kata atau kalimat yang berasal dari bahasa asing.

Tag <i> masuk ke dalam tipe tag inline, yang akan mengikuti alur text yang ada.

Berikut adalah contoh cara penulisan dan penggunaan tag <i> di dalam HTML:

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Duniailkom</title>
</head>

<body>
<h3>Saya sedang belajar HTML di Duniailkom.com</h3>
<p>HTML adalah singkatan dari <i>Hypertext Markup Language</i></p>
</body>

</html>

Contoh Cara Membuat Huruf Miring dalam HTML - tag i


Tag <em> Untuk Stresses Emphasis Text HTML

Tag <em> adalah singkatan dari Stresses Emphasis. Stresses Emphasis ditujukan untuk menandai bagian text yang perlu di tekankan. Dalam implementasinya, tag <em> akan ditampilkan dengan huruf miring, sehingga mirip dengan tag <i>.

Tag <em> masuk ke dalam tipe tag inline, yang akan mengikuti alur text yang ada.

Berikut adalah contoh cara penulisan dan penggunaan tag <em> di dalam HTML:

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Duniailkom</title>
</head>

<body>
<p>Saya sedang belajar <em>HTML</em> di Duniailkom.com</p>
<p>HTML adalah singkatan dari Hypertext Markup Language</p>
</body>

</html>

Contoh Cara Membuat Huruf Miring dalam HTML - tag em

Walaupun keduanya sama-sama ditampikan dengan garis miring, tag <i> dan tag <em> dimaksudkan untuk tujuan yang berbeda. Tag <em> digunakan untuk penekanan kata, sedangkan tag <i> digunakan untuk kata asing yang pengucapannya berbeda.

Dalam penggunaan sehari-hari, kedua tag ini sering dipertukarkan. Bahkan tag <i> lebih sering digunakan dibandingkan dengan tag <em>. Beberapa programmer juga berpendapat bahwa kita tidak harus mengikuti aturan perbedaan ini, dan menggunakan apa yang lebih familiar selama hal itu tidak menjadi masalah.

Untuk membuat hasil huruf mirng di dalam CSS, kita bisa menggunakan:

font-style: italics;


Tutorial Terkait:

12 Comments

  1. Asep celik
    05 Aug 14
    • Andre
      15 Aug 14
  2. Robert Dirk Raranta
    22 Apr 15
    • Zuhri Nurhuda
      24 Apr 15
  3. Ipan Dias Damara
    26 Jul 15
    • Andre
      28 Jul 15
  4. Nietzian
    15 Jun 16
    • Andre
      16 Jun 16
  5. Muhammad Arifin
    26 Sep 16
    • Andre
      26 Sep 16
  6. Ahmad Alfan T
    17 Oct 16
    • Andre
      17 Oct 16

Add Comment