Lagi belajar coding HTML tapi bingung gimana cara bikin teks di website keliatan lebih kece? Jangan panik, bro! Artikel ini bakal bahas tuntas tentang HTML Formatting, yang bisa bikin teks di web lo lebih menarik, rapi, dan terstruktur.
Apa Itu HTML Formatting?
HTML Formatting itu semacam trik buat bikin teks lo tampil lebih keren dan berfungsi maksimal di website. Lo bisa ngebold teks, bikin miring, atau bahkan bikin teks lo terlihat beda banget. Cocok buat lo yang mau ngatur tampilan teks sesuai kebutuhan tanpa ribet.
Jenis-Jenis Formatting di HTML
Nah, HTML punya banyak elemen yang bisa lo pake buat formatting teks. Yuk, kita bahas satu per satu!
1. Bold (Cetak Tebal)
Mau nunjukin teks penting biar keliatan mencolok? Pake elemen <b> atau <strong>.
Contoh:
<p>Belajar HTML itu <b>penting banget</b></p>
<p><strong>Coding</strong> bikin lo lebih kreatif!</p>
Catatan:
<b>hanya mencetak tebal teks tanpa arti khusus. Kalau<strong>biasanya dipake buat nunjukin teks yang penting secara konteks.
Hasilnya:
2. Italic (Cetak Miring)
Buat lo yang mau bikin teks keliatan lebih santai atau halus, pake elemen <i> atau <em>.
Contoh:
<p>Teks ini pakai <i>italic</i>.</p>
<p>Kata ini punya arti yang <em>penting</em> banget.</p>
Hasilnya
3. Underline (Garis Bawah)
Bikin teks dengan garis bawah gampang banget pake <u>.
Contoh:
<p>Teks ini <u>bergaris bawah</u>.</p>
Hasilnya:
4. Strikethrough (Coret Teks)
Mau teks lo keliatan kayak udah dicoret? Pakai elemen <s> atau <del>.
Contoh:
<p>Teks ini udah <s>nggak relevan</s>.</p>
<p>Harga lama: <del>Rp50.000</del>. Harga baru: Rp40.000.</p>
Hasilnya:
5. Subscript dan Superscript
Kalau lo sering kerja sama angka atau formula, <sub> dan <sup> bakal jadi sahabat lo.
• Subscript:
<p>Kandungan air: H<sub>2</sub>O.</p>
Hasilnya:
• Superscript:
<p>2<sup>nd</sup> place adalah juara dua.</p>
Hasilnya:
6. Highlight Teks
Bikin teks lo keliatan ngejreng dengan elemen <mark>.
Contoh:
<p>Teks ini <mark>highlighted</mark>.</p>
Hasilnya:
Elemen Lain Buat Bikin Teks Rapi
Selain formatting buat gaya, ada juga elemen buat bantu teks lo keliatan lebih rapi dan enak dibaca:
1. Preformatted Text
Pakai <pre> buat nampilain teks persis kayak yang lo ketik, lengkap sama spasi dan tata letaknya.
Contoh:
<pre> Line 1 Line 2 Line 3 </pre>
Hasilnya:
2. Abbreviation (Singkatan)
Pakai <abbr> buat singkatan yang punya arti jelas.
Contoh:
<p><abbr title="HyperText Markup Language">HTML</abbr> adalah bahasa untuk bikin web.</p>
Hasilnya:
3. Quotation (Kutipan)
• Blockquote:
Buat kutipan panjang.
<blockquote> Ini adalah contoh kutipan panjang. </blockquote>
Hasilnya:
• Short Quote:
Pakai <q> buat kutipan pendek.
<p>Dia bilang, <q>Belajar itu penting!</q></p>
Hasilnya:
Kenapa Penting Ngerti Formatting?
Bukan cuma soal gaya, bro, formatting itu juga penting buat ngatur struktur teks di website lo biar:
- Teks keliatan lebih rapi dan menarik.
- Mudah dipahami user dan mesin pencari (SEO friendly).
- Meningkatkan aksesibilitas, terutama untuk pembaca dengan kebutuhan khusus.
Kesimpulan
Formatting teks di HTML itu kayak senjata buat bikin website lo lebih menarik dan enak dibaca. Mulai dari teks tebal, miring, garis bawah, sampai fitur tambahan kayak highlight atau kutipan, semuanya bikin website lo keliatan lebih profesional.
So, tunggu apa lagi? Langsung coba di project lo dan liat gimana bedanya! Selamat belajar dan keep coding, bro!
Komentar