Home / HTML / Belajar HTML – Emphasis, Strong, Bold, dan Italic Element

Belajar HTML – Emphasis, Strong, Bold, dan Italic Element

Keempat element diatas digunakan untuk menghasilkan efek huruf tebal dan huruf miring dari text. Untuk mendapatkan efek huruf miring, kita bisa menggunakan tag <em> (emphasis element) atau tag <i> (italic element), sedangkan untuk efek huruf tebal, bisa menggunakan tag <strong> (strong importance) atau tag <b> (bold element).

Keempat element ini termasuk inline level element, sehingga akan mengikuti alur yang ada (tidak tampil pada baris baru). Biasanya tag-tag ini digunakan di dalam paragraf (di dalam tag <p>). Akan tetapi, kenapa masing-masing efek diwakilkan dengan 2 buah element? Ini berawal dari kisah sejarah penggunaan HTML.

Tag <b> dan tag <i> telah tersedia sejak HTML versi awal. Namun pada era HTML 4.01, keduanya dianggap tidak cocok dan berstatus deprecated. Alasannya, kedua tag ini memiliki ‘nama’ dengan efek visual, dan tidak mencerminkan struktur.

Tag <i>yang merupakan singkatan dari italics dianggap tidak cocok untuk ‘nama’ struktur. W3C berpendapat seharusnya sebuah kata ditulis dengan huruf miring karena kata tersebut perlu penekanan, bukan karena seseorang ingin huruf tersebut tampil miring.

Oleh karena itu, pada HTML 4.01 tag <i> dinyatakan deprecated dan digantikan dengan tag <em> yang merupakan singkatan dari emphasis (bahasa inggris: ‘penekanan kata’).

Belajar HTML - Emphasis, Strong, Bold, dan Italic Element

Sama seperti tag <i>, tag <b> yang merupakan singkatan dari bold juga dianggap tidak mencerminkan struktur. Dalam HTML 4.01, tag <b> dinyatakan deprecated dan diganti dengan tag <strong> yang memiliki kepanjangan ‘strong importance’ (bahasa inggris: ‘kata yang penting’).

Seperti yang anda lihat, alasan dibalik ‘dibuangnya’ tag <i> dan tag <b> karena ‘salah nama’. Walaupun demikian, web browser tetap mendukung penuh kedua tag ini, dan banyak web developer tetap menggunakannya karena lebih praktis dan singkat.

Peseteruan antara tag <i> vs <em> dan tag <b> vs <strong> sering menjadi bahan diskusi di setiap kesempatan yang membahas tentang cara memiringkan huruf dengan HTML.

Ketika WHATWG merancang HTML5, alih-alih memilih tag <em> dan <strong>, mereka secara resmi kembali ‘merestui’ penggunaan tag <i> dan tag <b> (yang dahulu ingin dibuang oleh W3C). Namun kali ini keduanya memiliki fungsi baru.

Dalam standar HTML5, tag <i> digunakan untuk menandai kata-kata yang tidak memerlukan penekanan, tetapi ingin ditulis miring, seperti bahasa asing dan istilah teknis. Sedangkan tag <b> digunakan untuk menandai kata yang tidak terlalu penting, tapi biasanya ditulis tebal seperti nama produk atau nama merk.

Jadi, tag mana yang digunakan untuk memiringkan atau menebalkan huruf? jawabannya: terserah 🙂 Keempat tag ini didukung penuh oleh semua web browser, terlebih lagi HTML5 merestui penggunaan keempatnya.

Tetapi jika anda mengikuti standar HTML5, maka untuk kata-kata yang penting dan ingin ditekankan maknanya, gunakan <em> atau <strong>. Sedangkan untuk kata yang tidak terlalu penting, tapi ingin ditulis miring atau tebal, gunakan <i> atau <b>.

Berikut adalah contoh penggunaan keempat tag ini:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar Emphasis, Strong, Bold, dan Italic Element</title>
</head>
<body>
<p>
<strong>Kabar gembira</strong>, saat ini sudah dibuka gerai
<i>Alfamart</i> baru di daerah <b>Kemang</b>.
Hari ini mereka mengadakan discount besar-besaran,
<em>tunggu apa lagi?</em>
</p>
</body>
</html>

Belajar HTML - Emphasis, Strong, Bold, dan Italic Element

About admin

Check Also

Sejarah dan Perkembangan Bahasa HTML

Belajar HTML – Style Element

Tag <style> digunakan untuk menginput kode style ke dalam halaman HTML. Kode style yang umumnya …

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *