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

49

Yodha.web.id – 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:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Yodha.web.id</title>
</head>
<body>
<h3>Saya sedang belajar HTML di Yodha.web.id</h3>
<p>HTML adalah singkatan dari <i>Hypertext Markup Language</i></p>
</body>
</html>


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:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Yodha.web.id</title>
</head>
<body>
<p>Saya sedang belajar <em>HTML</em> di Yodha.web.id</p>
<p>HTML adalah singkatan dari Hypertext Markup Language</p>
</body>
</html>

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.

font-style: italics;