Beranda / MATERI / HTML | | 2 menit baca

Formatting Teks

Tag Format Teks di HTML

HTML memiliki berbagai tag khusus untuk memberikan gaya, makna, atau penekanan pada teks tanpa harus menggunakan CSS.


1. Penekanan & Cetak Tebal / Miring

Tag Fungsi Makna Semantik
<b> Cetak tebal (Bold) Hanya tampilan visual tanpa penekanan khusus
<strong> Cetak tebal + Penting Menunjukkan bahwa kata/kalimat ini sangat penting
<i> Cetak miring (Italic) Digunakan untuk istilah asing, judul buku, dsb.
<em> Cetak miring + Penekanan Menunjukkan penekanan (Emphasis) saat dibaca

Contoh:

<p>Ini adalah kata <b>tebal biasa</b> dan ini kata <strong>sangat penting</strong>.</p>
<p>Ini adalah kata <i>italic biasa</i> dan ini kata <em>dengan penekanan</em>.</p>

2. Text Highlighting, Small, Superscript & Subscript

<!-- Tag <mark> untuk menyorot teks (stabilo kuning) -->
<p>Jangan lupa membawa <mark>kartu identitas</mark> saat ujian.</p>

<!-- Tag <small> untuk teks berukuran kecil (misal: footnote / copyright) -->
<p><small>&copy; 2026 Hak Cipta Dilindungi Undang-Undang.</small></p>

<!-- Tag <sub> untuk teks subscript (bawah) -->
<p>Rumus air adalah H<sub>2</sub>O.</p>

<!-- Tag <sup> untuk teks superscript (atas) -->
<p>Persamaan kuadrat: x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>.</p>

3. Coret Teks (<del> & <ins>)

Tag <del> digunakan untuk menandai teks yang dihapus/direvisi, sedangkan <ins> untuk teks baru yang disisipkan.

<p>Harga promo: <del>Rp 150.000</del> <ins>Rp 99.000</ins>!</p>

4. Kutipan (<blockquote> & <q>)

  • <blockquote>: Digunakan untuk kutipan panjang (blok kutipan).
  • <q>: Digunakan untuk kutipan pendek di dalam baris kalimat (inline).
<p>Bung Karno pernah berkata:</p>
<blockquote cite="https://id.wikipedia.org">
    "Beri aku 1.000 orang tua, niscaya akan kucabut semeru dari akarnya. Beri aku 10 pemuda niscaya akan kuguncangkan dunia."
</blockquote>

<p>Albert Einstein pernah berujar: <q>Imajinasi lebih penting daripada pengetahuan.</q></p>

5. Kode Komputer (<code> & <pre>)

  • <code>: Menampilkan potongan kode secara inline (font monospace).
  • <pre>: Menampilkan teks sesuai format aslinya (mempertahankan spasi dan ganti baris).
<p>Gunakan perintah <code>console.log()</code> untuk menampilkan output di JS.</p>

<pre>
function hello() {
    console.log("Hello World!");
}
</pre>
Penulis
Angga Saputra

ANGGA SAPUTRA Penulis

@makloheker

Lihat Profil

Komentar & Diskusi

Status: Terbuka