Text Formatting HTML
Pemformatan teks atau text formatting merupakan salah satu aspek penting yang perlu diperhatikan saat membuat halaman HTML.
Misalnya menebalkan (bold) menggunakan tag <strong> memberikan sinyal kepada pembaca bahwa itu adalah teks penting.
Bukan hanya soal visual.
Alat pembaca layar yang membantu orang-orang dengan gangguan penglihatan (tunanetra) akan memperlakukan teks tersebut dengan cara yang berbeda.
Misalnya, ketika kita menggunakan tag <strong>, pembaca layar akan memberikan penekanan ketika menemukan teks yang dibungkus tag tersebut.
Dengan menggunakan format teks yang baik, semua orang dapat membaca halaman HTML kita dengan nyaman.
Lantas, bagaimana cara membuatnya?
Mari kita pelajari.
Pemformatan Text HTML
Untuk saat ini kita akan mempelajari beberapa tag yang paling sering digunakan untuk memformat teks, termasuk teks tebal, miring, teks dan garis bawah dan lain sebagainya.
Sebagian besar tag yang kita gunakan disini mendukung atribut global, termasuk atribut style untuk menyisipkan CSS.
Mari kita pelajari satu per satu.
Teks Tebal
Ada dua tag HTML yang bisa kita gunakan untuk menebalkan teks, yaitu:
<b>: untuk teks tidak penting.<strong>: untuk teks penting.
Pemula umumnya menganggap kedua tag ini sama, karena secara visual hasilnya memang sama. Tapi sebetulnya keduanya dibuat untuk tujuan yang berbeda.
Kapan menggunakan <b> dan <strong>?
Gunakan tag <strong> ketika Anda ingin mempertebal teks yang penting, tag <b> untuk teks yang tidak penting.
Penggunaan tag <strong> akan membuat pembaca layar membaca teks dengan penekanan, sementara teks dengan tag <b> dibaca normal.
Contoh:
<p>
Ini adalah paragraf, ini adalah teks <strong>penting</strong>, sedang ini
<b>tidak penting</b>.
</p>
Hasil:
Teks Miring
Sama seperti teks tebal, ada dua tag yang bisa Anda gunakan untuk membuat teks miring (itacil), yaitu:
<i>: teks miring tanpa penekanan.<em>: teks miring dengan penekanan.
Secara visual, kedua tag menghasilkan tampilan yang sama, ini akan membuat teks menjadi miring. Tapi secara semantik, memiliki makna yang berbeda.
Kapan menggunkaan <i> dan <em>?
Gunakan tag <i> ketika teks mengacu pada definisi kata bukan makna semantik, bahasa asing, kata normal, karater fiksi dan sebagainya. Sedangkan tag <em> untuk membuat teks miring dengan penekanan.
Contoh penggunaan tag <i>:
"KRI Ahmad Yani berlayar tadi malam.".
Di sini kata "KRI Ahmad Yani" tidak diberi penekanan, ini diindikasikan bahwa "KRI Ahmad Yani" bukanlah nama seseorang, tapi nama kapal.
Contoh pengguna tag <em>:
"Kapal itu harus menjaga perairan Indonesia."
Di sini kata "harus" diberi penekanan, pembaca dan alat pembaca layar akan membacanya dengan penekanan.
<p>
<i>KRI Ahmad Yani</i> berlayar tadi malam. Kapal itu <em>harus</em> menjaga
perairan Indonesia.
</p>
Hasil:
Teks dengan Garis Bawah
Untuk membuat teks dengan garis bawah, kita bisa menggunakan tag <u>.
Tag ini tidak lagi digunakan di HTML4, tapi diperkenalkan kembali di HTML5 dengan makna yang berbeda. Teks yang dibungkus dengan tag ini menunjukkan bahwa teks tersebut memiliki penjelasan non-tekstual.
Jangan gunakan tag ini untuk tujuan dekorasi, sebagai gantinya gunakan CSS.
Tag ini umumnya digunakan untuk menandai teks dengan kesalahan ejaan dan proper name mark.
Contoh:
<p>
Proper name mark <u>专名号</u>. Yang benar adalah analisis bukan
<u>analisa</u>.
</p>
Hasil:
Teks Ditambahkan dan Dihapus
Untuk menandai teks yang telah dihapus, gunakan tag <del> (delete). Sedangkan untuk teks yang baru ditambahkan, gunakan tag <ins> (insert).
Sekilas, tag <ins> memiliki tampilan visual yang mirip dengan tag <u>. Jangan disalahgunakan, gunakan tag yang sesuai dengan fungsinya.
<ins>: teks yang ditambahkan.<del>: teks yang dihapus.
Contoh:
<del>
<p>Ini ada teks yang telah dihapus</p>
</del>
<ins>
<p>Ini adalah teks yang telah ditambahkan</p>
</ins>
Hasil:
Teks Marker
Untuk membuat teks HTML yang disorot atau ditandai seperti alat tulis marker di dunia nyata, kita bisa menggunakan tag <mark>.
Sama seperti di dunia nyata, tag ini berfungsi untuk menandai atau menyorot teks penting atau relevan dengan aktivitas pengguna saat ini, termasuk untuk tujuan referensi.
Contoh:
<p>
Dalam ilmu komputer, pemrograman fungsional adalah
<mark>paradigma pemrograman deklaratif</mark> di mana definisi fungsi adalah
pohon ekspresi yang masing-masing mengembalikan nilai, bukan urutan pernyataan
imperatif yang mengubah status program.
</p>
Hasil:
Subskrip dan Superskrip
Saat menulis HTML terkadang kita perlu menempatkan teks di bawah (subskrip) atau di atas (superskirp).
Misalnya, ketika kita ingin menulis pangkat matematika atau rumus kimia.
Untuk membuat teks subskrip di HTML kita bisa menggunkaan tag <sub>, sedangkan superskrip menggunakan tag <sup>.
<sub>: untuk membuat teks di bawah.<sup>: untuk membuat teks di atas.
Contoh:
<p>H<sub>2</sub>O adalah rumus kimia dari air.</p>
<p>3<sup>5</sup> hasilnya adalah 243.</p>
Hasil:
Teks yang Mewakili Kode Komputer
Ada beberapa tag yang bisa kita gunakan untuk menandai kode komputer di dalam dokumen HTML.
Diantaranya:
<code>: untuk menandai kode komputer.<pre>: untuk mempertahankan spasi, teks yang dibungkus dengan tag ini ditampilkan apa adanya.<var>: untuk menandai nama variabel.<kbd>: untuk menandai input keyboard.<samp>: untuk menandai output program komputer.
Contoh:
<pre>
<code>
const sapa = (nama) => {
console.log(`Hi, ${nama}`)
}
const nama = "reza";
sapa(nama);
</code>
</pre>
<p>Pada contoh kode diatas, <var>nama</var> adalah nama variabel</p>
<p>
<code>var</code>, <code>let</code>, dan <code>const</code> untuk membuat
variabel JavaScript.
</p>
<p><kbd>Ctrl</kbd> + <kbd>C</kbd> adalah shortcut untuk menyalin.</p>
<pre>
$ <code>ping -c 3 kodealgo.com</code>
<samp>
PING kodealgo.com (76.76.21.21) 56(84) bytes of data.
64 bytes from 76.76.21.21 (76.76.21.21): icmp_seq=1 ttl=121 time=6.64 ms
64 bytes from 76.76.21.21 (76.76.21.21): icmp_seq=2 ttl=121 time=6.04 ms
64 bytes from 76.76.21.21 (76.76.21.21): icmp_seq=3 ttl=121 time=6.41 ms
--- kodealgo.com ping statistics ---
3 packets transmitted, 3 received, 0% packet loss, time 2002ms
rtt min/avg/max/mdev = 6.044/6.362/6.636/0.243 ms
</samp>
</pre>
Hasil:
Menggabungkan Pemformatan Teks
Bolehkah kita menggabungkan format teks? Menulis tag untuk memformat teks di dalam tag lain?
Tentu saja boleh. Tapi, ini sebetulnya jarang dilakukan.
Yang perlu diperhatikan adalah fungsi dari masing-masing tag yang ingin digabungkan.
Misalnya jika kita menggabungkan tag <strong> dengan <i>, pastikan teks itu penting, memerlukan penekanan, dan mengacu pada definisi kata.
Contoh:
<p>
<strong><i>KRI Ahmad Yani</i></strong> adalah kapal penjaga perairan
Indonesia.
</p>
Hasil:
Selain itu, perhatikan juga struktur tag bersarang yang digabungkan.
Contoh baik:
<p>
<strong><i>KRI Ahmad Yani</i></strong>
</p>
Contoh buruk:
<p>
<strong><i>KRI Ahmad Yani</strong></i>
</p>