Selamat datang kembali di seri Belajar HTML! Setelah kita belajar cara membuat struktur halaman dengan heading di artikel sebelumnya, kini saatnya kita mengisi struktur tersebut dengan konten yang lebih kaya. Sebuah halaman web tidak akan lengkap tanpa teks.

Di artikel ini, kita akan fokus pada tag-tag HTML yang paling sering digunakan untuk memformat teks, seperti membuat paragraf, menebalkan tulisan, dan banyak lagi.

Paragraf: Wadah Utama Teks Anda

Elemen paling fundamental untuk menampilkan blok teks adalah paragraf, yang dibuat menggunakan tag <p>. Setiap kali Anda ingin memulai sebuah paragraf baru, Anda harus membungkusnya dengan tag <p> dan </p>. Browser secara otomatis akan memberikan jarak (margin) di atas dan di bawah elemen paragraf, memisahkannya dari konten lain.

Contoh:

<p>Ini adalah paragraf pertama. HTML menggunakan tag ini untuk mengelompokkan teks menjadi blok-blok paragraf yang rapi dan mudah dibaca.</p>
<p>Ini adalah paragraf kedua. Perhatikan bagaimana browser akan membuat baris baru dan memberikan sedikit spasi di antara kedua paragraf ini.</p>

Pentingnya Makna: Tag Semantik vs. Fisik

Sebelum kita lanjut ke tag pemformatan lainnya, penting untuk memahami perbedaan antara tag semantik dan tag fisik.

• Tag Semantik: Tag yang memberikan makna atau arti penting pada konten yang dibungkusnya. Contohnya adalah <strong>.
• Tag Fisik: Tag yang hanya memberikan efek visual tanpa menambahkan arti khusus pada konten. Contohnya adalah <b>.

Meskipun <strong> dan <b> sama-sama menghasilkan teks tebal, <strong> memberitahu browser dan mesin pencari bahwa teks tersebut memiliki penekanan atau kepentingan yang kuat. Aturan praktisnya, selalu utamakan penggunaan tag semantik.

Menebalkan dan Memiringkan Teks

Berikut adalah tag-tag yang paling umum untuk memberikan penekanan pada teks:

• <strong> (Semantic): Digunakan untuk menandai teks yang sangat penting. Tampilannya tebal.
• <b> (Physical): Hanya untuk membuat teks menjadi tebal tanpa makna khusus.
• <em> (Semantic): Singkatan dari “emphasis,” digunakan untuk memberikan penekanan pada teks. Tampilannya miring.
• <i> (Physical): Hanya untuk membuat teks menjadi miring (italic), sering digunakan untuk istilah teknis atau nama asing.

Contoh:

<p>Saat belajar HTML, Anda <strong>harus</strong> memahami perbedaan antara tag. Ini adalah poin yang <em>sangat krusial</em>. Tag <b>bold</b> dan <i>italic</i> juga ada, tapi gunakanlah dengan bijak.</p>

Tag Pemformatan Umum Lainnya

HTML juga menyediakan berbagai tag lain untuk kebutuhan pemformatan yang lebih spesifik.

• Mark (Menandai): Gunakan tag <mark> untuk <mark>menyorot teks</mark> seolah-olah ditandai dengan spidol stabilo.
• Underline (Garis Bawah): Gunakan tag <u> untuk memberikan <u>garis bawah</u> pada teks. Hindari penggunaannya pada teks biasa karena bisa disalahartikan sebagai link.
• Strikethrough (Coret): Gunakan tag <s> untuk menampilkan teks yang <s>dicoret</s>, biasanya untuk menandakan sesuatu yang sudah tidak relevan atau salah.
• Subscript & Superscript:
  • <sub>: Membuat teks menjadi sedikit lebih rendah (subscript), berguna untuk notasi kimia seperti H₂O.
  • <sup>: Membuat teks menjadi sedikit lebih tinggi (superscript), berguna untuk notasi matematika seperti E=MC² atau catatan kaki.

Contoh Gabungan

Mari kita lihat bagaimana semua tag ini bisa bekerja sama dalam satu blok paragraf:

<p><strong>PEMBERITAHUAN PENTING:</strong> Promo spesial <s>diskon 50%</s> sekarang menjadi <mark>diskon 75%</mark>! Ini adalah kesempatan <em>terbaik</em> tahun ini. Syarat dan ketentuan berlaku<sup>1</sup>.</p>

Kesimpulan

Anda sekarang telah mengenal perangkat utama untuk memformat teks di HTML. Dengan menguasai tag paragraf, heading, dan tag-tag pemformatan seperti <strong> dan <em>, Anda sudah bisa membuat halaman web dengan konten yang terstruktur dan mudah dibaca.

Di artikel selanjutnya, kita akan membahas salah satu fitur paling kuat dari web: cara membuat tautan atau hyperlink untuk menghubungkan satu halaman dengan halaman lainnya. Selamat mencoba!