Format Teks (bold, italic, underline, dll.)
HTML menyediakan berbagai tag untuk memformat teks agar tampil sesuai kebutuhan, baik untuk penekanan, penandaan, atau tujuan estetika. Berikut adalah tag-tag umum yang digunakan:
Bold (Cetak Tebal)
- Tag:
<b>atau<strong><b>: Hanya mengubah tampilan teks menjadi tebal (tanpa makna semantik).<strong>: Menandakan teks penting atau kritis (memiliki makna semantik untuk SEO dan aksesibilitas).
- Contoh
<b>Teks tebal</b> atau <strong>Teks penting</strong>Italic (Cetak Miring)
- Tag:
<i>atau<em><i>: Mengubah teks menjadi miring (misal: istilah asing atau judul karya).<em>: Menunjukkan penekanan pada teks (memiliki makna semantik).
- Contoh
<i>Terminologi teknis</i> atau <em>Penekanan</em>Underline (Garis Bawah)
- Tag:
<u>- Digunakan untuk menggarisbawahi teks, tetapi jarang dipakai karena bisa disalahartikan sebagai hyperlink.
- Contoh
<u>Teks bergaris bawah</u>Format Tambahan
- Highlight:
<mark>- Menandai teks seperti stabilo.
<mark>Teks ditandai</mark>
- Menandai teks seperti stabilo.
- Small Text:
<small>- Menampilkan teks dengan ukuran lebih kecil.
<small>Teks kecil</small>
- Menampilkan teks dengan ukuran lebih kecil.
- Deleted Text:
<del>- Menunjukkan teks yang dihapus/dicoret.
<del>Teks dicoret</del>
- Menunjukkan teks yang dihapus/dicoret.
- Inserted Text:
<ins>- Menunjukkan teks yang baru ditambahkan (garis bawah).
<ins>Teks baru</ins>
- Menunjukkan teks yang baru ditambahkan (garis bawah).
- Subscript:
<sub>- Teks kecil di bawah garis dasar (misal: rumus kimia H₂O).
H<sub>2</sub>O
- Teks kecil di bawah garis dasar (misal: rumus kimia H₂O).
- Superscript:
<sup>- Teks kecil di atas garis dasar (misal: pangkat matematika x²).
x<sup>2</sup>
- Teks kecil di atas garis dasar (misal: pangkat matematika x²).
- Code/Preformat:
<code>dan<pre><code>: Menampilkan kode program dalam font monospace.<pre>: Mempertahankan format spasi dan baris (untuk kode).
<code>console.log("Hello World");</code>
<pre> function contoh() { return "Halo"; } </pre>Catatan Penting
- Semantik vs. Presentasional:
- Prioritaskan tag semantik (seperti
<strong>,<em>,<mark>) untuk aksesibilitas dan SEO. - Hindari penggunaan tag seperti
<b>atau<i>hanya untuk tujuan estetika (lebih baik gunakan CSS).
- Prioritaskan tag semantik (seperti
- Kombinasi Tag:
Tag bisa digabungkan untuk efek yang lebih kompleks.
Contoh:
<p><strong><em>Teks penting dan ditekankan</em></strong></p>Contoh Implementasi Lengkap
<!DOCTYPE html>
<html>
<head>
<title>Contoh Format Teks</title>
</head>
<body>
<p>
<b>Teks tebal</b>, <strong>penting</strong>, <i>miring</i>, <em>penekanan</em>,
<u>garis bawah</u>, <mark>ditandai</mark>, <small>kecil</small>,
<del>dicoret</del>, <ins>ditambahkan</ins>, H<sub>2</sub>O, x<sup>2</sup>.
</p>
<pre><code>console.log("Hello World");</code></pre>
</body>
</html>Dengan memahami format teks, pembaca dapat membuat konten yang lebih terstruktur, mudah dipahami, dan ramah bagi mesin pencari.
Sumber : DeepSeek
Leave a Reply