Halo teman-teman semuanya, di artikel sebelumnya, kita sudah belajar tentang heading, paragraf, dan cara membuat baris baru. Kali ini, kita akan fokus membahas format teks dalam HTML, seperti membuat teks tebal, miring, atau bahkan membuat tanda kutip dan highlight teks penting.
Format teks ini sangat penting untuk memberi penekanan pada informasi tertentu di halaman web kita.
1. Membuat Teks Tebal
Untuk menebalkan teks, kita bisa menggunakan tag <strong> atau <b>:
<p>Ini adalah <strong>teks penting</strong> yang ditebalkan.</p>
<p>Ini <b>juga tebal</b>, tapi tidak dianggap lebih penting secara makna.</p>
Catatan:
- Gunakan
<strong> jika teks tersebut memang penting secara makna (dibaca juga oleh screen reader).
- Gunakan
<b> hanya untuk penampilan visual saja.
2. Membuat Teks Miring
Untuk membuat teks miring, gunakan <em> atau <i>:
<p>Ini adalah <em>teks yang ditekankan</em> secara makna.</p>
<p>Ini <i>juga miring</i>, tapi hanya untuk gaya visual.</p>
Sama seperti <strong> vs <b>, tag <em> memiliki arti semantik, sedangkan <i> hanya gaya.
3. Garis Bawah dan Coret
Kadang kita juga ingin memberi garis bawah atau mencoret teks.
<p><u>Ini teks yang digarisbawahi.</u></p>
<p><s>Ini teks yang dicoret.</s></p>
<u>: underline (tidak disarankan untuk teks link karena bisa membingungkan)<s> atau <del>: untuk menunjukkan teks yang sudah tidak relevan
4. Superscript dan Subscript
Kalau kita ingin membuat teks naik atau turun seperti rumus matematika, gunakan <sup> dan <sub>:
<p>Contoh rumus: H<sub>2</sub>O</p>
<p>Matematika: x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>
5. Highlight dan Blok Kutipan
Untuk menandai bagian teks yang ingin disorot:
<p>Gunakan tag <mark>untuk menyorot teks</mark>.</p>
Untuk membuat kutipan blok:
<blockquote>
"Belajar HTML itu menyenangkan dan sangat berguna!"
</blockquote>
6. Contoh Lengkap Format Teks
<p><strong>HTML</strong> adalah <em>bahasa dasar</em> dari semua halaman web.</p>
<p>Air terdiri dari H<sub>2</sub>O dan rumus luas lingkaran adalah πr<sup>2</sup>.</p>
<p><u>Teks ini digarisbawahi</u> dan <s>teks ini dicoret</s>.</p>
<p>Gunakan <mark>highlight</mark> untuk memberi perhatian ekstra.</p>
<blockquote>
"Belajar sedikit setiap hari lebih baik daripada belajar banyak sekaligus lalu lupa."
</blockquote>
Kesimpulan
Dengan mempelajari format teks di HTML, sekarang kita bisa menampilkan konten dengan lebih jelas, menarik, dan bermakna.
Di artikel berikutnya, kita akan belajar tentang link (Anchor Tag), agar halaman HTML kita bisa lebih hidup dan interaktif.
Terima Kasih