Tutorial HTML/CSS 16 : Text Formatting HTML, Cara Menambahkan Variasi Text Khusus

Last Updated on October 27, 2021 by

Jika Anda bekerja dengan HTML/CSS, mungkin Anda ingin menambahkan variasi teks khusus ke dalam projek Anda. Artikel ini ditujukan untuk Anda. Artikel Codekey kali ini akan membahas tentang Text Formatting HTML yang digunakan untuk menambahkan variasi teks.

Formatting HTML adalah sebuah proses dari formatting teks untuk tampilan yang lebih baik. Jika Anda ingin tahu lebih banyak tentang text formatting HTML, simak artikel ini sampai habis.

Text Formatting HTML

HTML menyediakan Anda kemampuan untuk memformat teks tanpa menggunakan CSS. Ada banyak formatting tag yang ada di HTML. Tools text formatting pada HTML mirip dengan teks editor yang seringkali Anda gunakan seperti Microsoft Word.

Tag ini digunakan untuk menebalkan huruf (text bold), mencetak miring huruf (italicized), dan menggarisbawahi teks (underlined). Untuk tampilan yang lebih baik, Anda juga dapat menggunakan CSS Styling. Ada hampir 14 opsi yang tersedia untuk memunculkan teks di HTML dan XHTML.

Dalam HTML, formatting tag dibagi menjadi dua kategori sebagai berikut:

1. Physical tag: Tag ini digunakan untuk menyediakan visual appreance pada teks.
2. Logical tag: Tag ini digunakan untuk menambahkan beberapa nilai logika dan semantik ke teks.

Untuk menambahkan dasar-dasar text formatting HTML, semua yang Anda butuhkan adalah menyelimuti konten yang ingin Anda modifikasi dalam tag yang sesuai. Berikut adalah cara untuk mencetak miring text HTML sebagai berikut:

<h2>Kuda nil memiliki <em>kerabat terdekat</em> yakni mamalia paus </h2>

Text Formatting Tag pada HTML

Beberapa tag yang ada di HTML untuk melakukan HTML Formatting akan kami jelaskan pada ulasan berikut ini.

1. Tag <em>

Tag <em> digunakan untuk emphasizing atau menekankan. Sebagian besar browser membuat teks HTML miring di dalam tag ini namun, elemen ini tidak hanya menyampaikan makna visual tetapi juga makna semantik:

<em>Teks ini Menggunakan tag emphasis</em>

2. Tag <i>

Untuk mencetak miring teks di HTML tanpa makna semantik, maka gunakan tag <i> seperti berikut ini:

<i>Teks ini menggunakan tag italic untuk tulisan miring.<i>

3. Tag <strong>

Kemudian, tag <strong> untuk mendefinisikan teks penting. Browser akan menampilkannya sebagai teks yang ditebalkan namun tag itu juga membawa sebuah makna semantic:

<p>Ini merupakan contoh <strong>cetak tebal</strong> dalam text.</p>

4. Tag <u>

Untuk menebalkan huruf tanpa makna semantic maka gunakan tag <b> seperti di bawah ini:

Contoh Tulisan <u>bergaris bawah</u>

5. Tag <small>

Tag <small> ini dapat digunakan untuk membuat teks lebih kecil tanpa mengubah tinggi dari garis. Tag ini pun sangat berguna untuk menambahkan catatan atau hal lainnya tidak sebagai informasi penting yang esensial.

<p>Paragraf dengan <small>tulisan kecil</small> didalamnya.</p>

6. Tag <mark>

Tag ini berguna untuk menonjolkan teks HTML dalam warna kuning terang untuk menyerupai penggunaan highlighter pen.

<p>Mark Tag <mark>sangat berguna</mark> untuk memberikan tanda dalam text.</p>

7. Tag <del>

Tag <del> berguna untuk mencoret teks HTML Anda untuk menandainya sebagai bagian yang sudah dihapus.

<p>tag ini digunakan untuk <del>mencoret teks yang tidak penting</del></p>

8. Tag <s>

Tag <s>  dibuat mirip dengan tag <del> sebelumnya, namun memiliki perbedaan makna semantik. Tag ini berguna untuk mendefinisikan sebuah teks yang tidak lagi relevan.

9. Tag <ins>

Tag <ins> berguna untuk menambahkan HTML teks.

<ins>Teks ini telah ditambahkan</ins>

10. Tag <sub>

Tag ini dibuat untuk buat teks subskrip yang berukuran setengah dari teks biasa dan juga memiliki garis bawah:

<p>teks ini mengandung <sub>subscript text.</sub></p>

11. Tag <sup>

Tag ini berguna untuk mendefinisikan sebuah teks subskrip pada HTML. Tag tersebut membuat teks lebih kecil, hanya sebagai subkrip namun juga meningkatkan garis teks yang ditulis dalam:

<p>teks ini menggunakan<sup>superscript</sup></p>

12. Tag <q>

Tag ini merepresentasikan inline quotes. Kebanyakan browser secara otomatis menambahkan tanda kuotasi di sekitar teks.

<p>Semua Orang Tahu
  <q cite="codekey.com">HTML adalah kepanjangan dari Hypertext Markup Language.</q>
</p>

13. Tag <blockquote>

Quote juga dapat ditampilkan dalam sebuah block element. Untuk melakukannya, Anda perlu menggunakan tag <blockquote> seperti di bawah ini:

<p>Contoh dari Blockqoute</p>

<blockquote cite="http://www.codekey.com">
HTML adalah singkatan dari HyperText Markup Language
</blockquote>

Demikianlah penjelasan tentang beragam teks yang ada di HTML. Beberapa tips yang dapat Anda lakukan ketika menerapkan HTML Text Formatting:

1. Semua tag pemformatan teks HTML digunakan untuk memodifikasi kontennya. Oleh karena itu, tag tersebut tidak dapat mendefinisikan elemen kosong. Hal ini berarti Anda tidak dapat menghilangkan tag penutup.
2. Perlu Anda ingat bahwa sebagian besar pembaca layar mengenali tag semantik dan mengucapkan kontennya dengan nada yang berbeda.
3. Berhati-hatilah saat Anda menggarisbawahi teks dalam HTML, karena pembaca mungkin dengan mudah mengacaukannya dengan hyperlink.

Jika Anda ingin belajar tentang HTML/CSS, kunjungi seri artikel tutorial HTML/CSS di situs Codekey. Codekey menyediakan berbagai artikel tutorial, materi, pembahasan, tips, dan trik untuk Anda belajar HTML/CSS. Tidak hanya HTML/CSS, Codekey juga menyediakan bahasa pemrograman lainnya. Jangan lupa untuk dapatkan update terbaru dari Codekey.