Home » HTML » Formatting di HTML: Elemen dan Contoh Sintaknya

Formatting di HTML: Elemen dan Contoh Sintaknya

by Hanifah Nurbaeti
by Hanifah Nurbaeti

HTML memiliki beberapa elemen formatting teks untuk mendefinisikan suatu teks.

Contoh :

<!DOCTYPE html>
<html>
<body>

<p><b>Teks huruf tebal</b></p>
<p><i>Teks huruf miring</i></p>
<p>Teks<sub> subscript</sub> dan <sup>superscript</sup></p>

</body>
</html>

Elemen Formatting di HTML

Dibawah ini merupakan format text yang sering digunakan di HTML :

  • <b> – Teks tebal/bold text
  • <strong> – Teks penting/important text mirip seperti bold text
  • <i> – Teks miring/italic text
  • <em> – Teks yang ditekankan/emhasized text mirip seperti italic text
  • <mark> – Teks yang ditandai/marked text
  • <small> – Teks yang lebih kecil/smaller text
  • <del> – Teks yang dihapus/deleted text
  • <ins> – Teks yang disisipkan/inserted text
  • <sub> – Teks subskrip/subscripted text
  • <sup> – Teks superskrip/superscripted text

Elemen HTML <b> dan <strong>

Elemen HTML <b> mendefinisikan teks tebal, tanpa kepentingan apapun.

Contoh :

<b>Ini Teks Tebal biasa</b>

Sedangkan, elemen HTML <strong> mendefinisikan teks yang sangat penting. Teks yang penting biasanya ditampilkan dengan huruf tebal.

Contoh :

<strong>Teks ini sangat penting!</strong>

Keduanya sama-sama menampilkan huruf yang tebal jadi kita bisa menggunakan element HTML <b> atau <strong> dan bisa juga menggunakan keduanya dalam suatu paragraf yang sama.

Elemen HTML <i> dan <emp>

Elemen HTML <i> mendefinisikan bagian teks alternatif. Konten di dalamnya biasanya ditampilkan dalam huruf miring.

Tip: Tag sering digunakan untuk menunjukkan istilah teknis, frase dari bahasa lain, pemikiran, nama kapal, dll.

Contoh :

<i>Text ini miring </i>

Sedangkan, elemen HTML <emp> mendefinisikan teks yang ditekankan. Konten di dalamnya biasanya ditampilkan dalam huruf miring.

Tip: Pembaca layar akan mengucapkan kata-kata dengan penekanan, menggunakan tekanan verbal.

Contoh :

<em>Text ini menggunakan penekanan!</em>

Keduanya sama-sama menampilkan huruf miring jadi kita bisa menggunakan element HTML <i> atau <emp> dan bisa juga menggunakan keduanya dalam suatu paragraf yang sama.

Element HTML <small>

Elemen HTML<small>mendefinisikan teks dengan font yang lebih kecil :

Contoh :

<small>Teks ini huruf yang lebih kecil.</small>

Element HTML <mark>

Elemen HTML <mark> mendefinisikan teks yang ditandai atau di sorot :

Contoh :

<p>Teks ini merupakan teks yang <mark>ditandai</mark> .</p>

Element HTML <del>

Elemen HTML <del> mendefinisikan teks yang telah dihapus dari dokumen. Browser biasanya akan membuat teks seperti di coret :

Contoh :

<p>Teks ini  <del>salah</del> benar.</p>

Element HTML <ins>

Elemen HTML <ins> mendefinisikan teks yang telah dimasukkan ke dalam dokumen. Browser biasanya akan menggarisbawahi teks yang disisipkan:

Contoh :

<p>Warna favorit saya <del>hitam</del> <ins>putih</ins>.</p>

Element HTML <sub>

Elemen HTML <sub> mendefinisikan teks subskrip(pangkat di bawah). Teks subskrip biasanya berada setengah karakter di bawah garis normal dan ditampilkan dalam font yang lebih kecil. Teks subskrip dapat digunakan untuk rumus kimia, seperti H2O:

Contoh :

<p>Contoh teks <sub>subskrip</sub>.</p>

Element HTML <sub>

Elemen HTML <sub> mendefinisikan teks superskrip(pangkat di atas). Teks superskrip biasanya berada setengah karakter di atas garis normal dan ditampilkan dalam font yang lebih kecil. Teks superskrip dapat digunakan untuk catatan kaki, seperti WWW [1]:

Contoh :

<p>Contoh teks  <sup>superskrip</sup>.</p>

You may also like