adydetra_
1 Jul 2025

Format Teks HTML

Setelah memahami elemen dan atribut HTML, kini saatnya kita belajar bagaimana memformat teks di halaman web. HTML menyediakan berbagai elemen untuk mengatur tampilan teks agar lebih menarik dan informatif.

Struktur Dasar

Masih menggunakan struktur HTML seperti sebelumnya. Semua contoh bisa kamu tempatkan di dalam tag <body> berikut:

index.html
<!doctype html>
<html>
  <head>
    <title>blog.adydetra.my.id</title>
  </head>
  <body>
    <!-- Tempatkan semua contoh format teks di sini -->
  </body>
</html>

Teks Tebal dengan <strong> dan <b>

Keduanya membuat teks menjadi tebal, namun <strong> menekankan arti penting secara semantik.

<p>Ini adalah <strong>teks penting</strong> dan ini <b>hanya tebal biasa</b>.</p>

Teks Miring dengan <em> dan <i>

<em> memberikan penekanan semantik, sedangkan <i> hanya memberi efek miring.

<p>Kata ini <em>harus diperhatikan</em> dan ini <i>hanya miring biasa</i>.</p>

Garis Bawah dengan <u>

Memberi efek underline pada teks.

<p><u>Ini adalah teks dengan garis bawah</u></p>

Teks Dicoret dengan <s> dan <del>

Menandai teks yang tidak lagi relevan atau dihapus.

<p><s>Harga lama: Rp50.000</s> Harga baru: Rp35.000</p>

<p><del>Fitur ini sudah tidak tersedia</del></p>

Teks Superscript dan Subscript

Digunakan untuk notasi ilmiah atau matematika.

<p>Air = H<sub>2</sub>O</p>
<p>3<sup>2</sup> = 9</p>

Teks Kecil dengan <small>

Mengecilkan ukuran teks secara visual.

<p>Hak cipta © 2025 <small>Sandbox Academia</small></p>

Teks Ditandai dengan <mark>

Menandai teks seperti stabilo.

<p>Kata kunci <mark>penting</mark> perlu diperhatikan.</p>

Teks Monospace dengan <code>

Digunakan untuk menampilkan potongan kode program.

<p>Gunakan tag <code>&lt;br&gt;</code> untuk membuat baris baru.</p>

Garis Horizontal dengan <hr>

Digunakan sebagai pemisah antar bagian.

<p>Paragraf pertama</p>
<hr>
<p>Paragraf kedua setelah garis</p>

Elemen Baris Baru dengan <br>

Memecah teks ke baris baru tanpa membuat paragraf baru.

<p>Baris pertama<br>Baris kedua<br>Baris ketiga</p>

Kombinasi Format

Kamu bisa menggabungkan beberapa elemen dalam satu kalimat:

<p><strong><em>Teks ini tebal dan miring</em></strong></p>

Kesimpulan

Dengan memanfaatkan elemen-elemen format teks di HTML, kamu bisa membuat konten yang lebih informatif dan menarik secara visual.

Pada bagian selanjutnya, kita akan membahas tentang tautan (link) dan navigasi, yang merupakan jantung dari pengalaman menjelajah web.