Tutorial Text HTML Part 6: Cara Menulis Persamaan Matematis di dalam HTML (tag sup dan tag sub)

Dalam membuat konten web, kadang kita perlu membuat dan memasukkan persamaan matematika ke dalam HTML, seperti pangkat, rumus kimia, dll. Cara penulisan ini misalnya 23 atau H2O. Pada tutorial kali ini kita akan membahas Cara Menulis Persamaan Matematis di dalam HTML dengan tag <sup> dan tag <sub>.


Tag <sup> Untuk Membuat Text Superscript

Tag <sup> adalah singkatan dari superscript, yaitu sebutan untuk karakter kecil diatas text. Umumnya superscript digunakan didalam persamaan matematika seperti dalam pembuatan pangkat. Dalam angka 32 , angka 2 adalah superscript. Penulisan HTML untuk hal ini adalah 3<sup>2</sup>.

Tag <sup> masuk ke dalam tipe tag inline, yang akan mengikuti alur text yang ada.

Berikut adalah contoh cara penulisan dan penggunaan tag <sub> di dalam HTML:

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Duniailkom</title>
</head>

<body>
<h3>Saya sedang belajar HTML di Duniailkom.com</h3>
<p>3<sup>2</sup> + 5<sup>3</sup> = 9 + 125 = 134</p>
</body>

</html>

Contoh Cara Membuat Huruf SuperScript dalam HTML - tag sup


Tag <sub> untuk membuat text Subscript

Tag <sub> adalah singkatan untuk Subscript. Subscript adalah penyebutan untuk karakter kecil yang diletakkan sedikit di bawah baris karakter normal. Biasanya subscript digunakan untuk formula kimia seperti H2O. H2O di dalam tag HTML ditulis dengan H<sub>2</sub>O.

Tag <sub> masuk ke dalam tipe tag inline, yang akan mengikuti alur text yang ada.

Berikut adalah contoh cara penulisan dan penggunaan tag <sub> di dalam HTML:

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Duniailkom</title>
</head>

<body>
<h3>Saya sedang belajar HTML di Duniailkom.com</h3>
<p>Dalam rumus kimianya, air ditulis sebagai H<sub>2</sub>O</p>
</body>

</html>

Contoh Cara Membuat Huruf SubScript dalam HTML - tag sub

Untuk membuat efek yang sama seperti tag <sub> dan tag <sup> melalui CSS agak sedikit sulit, karena CSS tidak memiliki style khusus untuk superscript dan subscript. Untuk membuat efeknya, anda bisa menggabungkan beberapa 'trik' seperti berikut ini untuk mendapatkan efek superscript di CSS:

position: relative; top: -0.5em; font-size: 80%;

Baik tag <sup> maupun tag <sub> kemungkinan akan jarang kita gunakan, kecuali jika anda membuat artikel matematika atau kimia. Untuk persamaa matematika yang cukup rumit, harus menggunakan bahasa pemrograman web lain seperti JavaScript dan menggunakan notasi LaTeX.

36 Comments

  1. Dira89
    27 Oct 14
    • Dira89
      27 Oct 14
      • Andre
        31 Oct 14
  2. IMIieN
    28 Mar 15
    • IMIieN
      28 Mar 15
      • Andre
        29 Mar 15
  3. nanana
    25 Apr 15
    • onetsmile
      02 Aug 16
      • Andre
        03 Aug 16
  4. edwin
    26 Jun 15
    • Andre
      27 Jun 15
      • roni
        25 Nov 15
        • Andre
          27 Nov 15
      • angga
        23 Apr 18
        • Andre
          24 Apr 18
        • Angga
          24 Apr 18
        • Andre
          24 Apr 18
      • Irda
        16 Dec 19
        • Andre
          17 Dec 19
  5. myu
    09 Oct 16
    • Andre
      09 Oct 16
  6. Dandy Alfaz
    25 Jan 17
  7. kevin amrulloh
    08 Jan 18
  8. angga
    23 Apr 18
    • Andre
      24 Apr 18
  9. Alexandromeo Lawrence Gunawan
    29 Jun 18
    • Andre
      30 Jun 18
  10. Dirext
    08 Aug 18
  11. Zkwx
    21 Oct 18
    • Andre
      22 Oct 18
      • harryanto_d
        09 Aug 22
  12. unliroom
    30 Sep 19
    • Andre
      01 Oct 19
  13. Marlina
    11 Apr 20
  14. achmad
    05 Jul 20

Add Comment

Leave a Reply to kevin amrulloh Cancel reply