Pemformatan Teks

Mempelajari cara memberikan penekanan visual pada teks menggunakan elemen b dan i dalam HTML.
Author : Celvine
Last Update : 27 February 2026

Memberikan Penekanan pada Teks

Seringkali dalam sebuah paragraf, ada kata atau frasa yang ingin kita tonjolkan agar pembaca langsung menangkap poin pentingnya. HTML menyediakan elemen khusus untuk mengubah tampilan teks secara visual tanpa harus menggunakan CSS terlebih dahulu.

1. Elemen Bold (<b>)

Tag <b> (singkatan dari Bold) digunakan untuk menebalkan teks. Secara teknis, elemen ini digunakan untuk menarik perhatian pembaca ke bagian tertentu tanpa memberikan kepentingan khusus secara makna (semantik).

example.html
<p>Halo, selamat datang di kursus <b>Web Development</b> dasar.</p>

2. Elemen Italic (<i>)

Tag <i> (singkatan dari Italic) digunakan untuk memiringkan teks. Biasanya digunakan untuk istilah teknis, kata dari bahasa asing, atau judul karya yang ingin dibedakan dari teks utama.

Sintaks:

example.html
<p>Istilah <i>coding</i> sudah tidak asing lagi di telinga masyarakat modern.</p>

Perbedaan Penting: Visual vs Semantik

Tag <b> dan <i>, memiliki tag lain yang sama persis tapi memiliki fungsi semantik untuk mesin pencarian dan screen reader

Tag VisualTag SemantikKegunaan
<b> (Bold)<strong>Memberikan penekanan yang sangat penting (Urgent/Important).
<i> (Italic)<em>Memberikan penekanan pada nada bicara atau stres kata (Emphasis).

Contoh Implementasi Lengkap

example.html
<!DOCTYPE html>
<html lang="id">
<head>
    <title>Pemformatan Teks</title>
</head>
<body>
    <p>
        Belajar HTML itu <b>seru dan mudah</b> jika dilakukan dengan konsisten. 
        Jangan lupa untuk selalu <i>update</i> pengetahuan Anda tentang standar W3C.
    </p>
    
    <p>
        <strong>Peringatan:</strong> Pastikan Anda menutup setiap tag yang telah dibuka 
        agar struktur dokumen tetap <em>valid</em>.
    </p>
</body>
</html>

Catatan

Gunakan <b> dan <i> jika Anda hanya ingin mengubah tampilan demi estetika. Namun, jika teks tersebut memiliki nilai kepentingan tinggi (seperti peringatan atau instruksi krusial), gunakanlah <strong> atau <em> agar mesin pencari lebih mudah memahami konteks kontennya.

On this page