Belajar HTML #06: Text Formatting di HTML (Bold, Italic, Underline, dll) ~ SRI RAHAYU,S.Kom

Coba perhatikan kedua paragraf ini:

Kamu lebih tertarik baca yang mana?

..yang terformat, atau yang polos (plain text)?

Teks yang terformat akan lebih mudah dibaca, karena ada penegasan seperti teks tebal, miring, dan garis bawah.

Saat kita mencari kata atau kalimat penting.. mata kita akan lebih mudah menemukannya pada teks yang terformat dibandingkan plain text.

Karena itu, dalam membuat web.. ada baiknya menggunakan format teks.

Nah, di HTML terdapat tag-tag yang khusus digunakan untuk text formatting.

Apa saja itu?

Mari kita bahas..

Membuat Teks Tebal

Teks tebal biasanya digunakan untuk memberikan penegasan pada teks tertentu, misalnya seperti judul, subjudul, huruf penting, dll.

Tag yang digunakan untuk membuat teks tebal di HTML adalah tag  (bold) dan tag . Kamu bebas mau pakai yang mana saja, hasilnya akan sama-sama tebal.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Tebal di HTML</title>
</head>
<body>
  <h1>Text Tebal di HTML</h1>
  <p>
    <strong>Teks formatting itu penting!</strong> Karena dapat membuat tulisan 
    terlihat lebih menarik sehingga akan membuat <b>pengunjung senang</b> 
    membacanya.
  </p>
</body>
</html>

Hasilnya:

Membuat Teks Miring

Teks miring biasanya digunakan untuk menegaskan sebuah kata atau istilah baru. Teks miring di HTML dapat kita buat dengan tag  (italic) dan juga tag  (emphasis).

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Miring di HTML</title>
</head>
<body>
  <h1>Text Miring di HTML</h1>
  <p>
    Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks,
    sehingga akan <em>menarik perthatian</em> pembaca. Biasanya
    digunakan pada <i>istilah asing</i> atau kata serapan dari 
    <em>bahasa daerah</em>.
  </p>
</body>
</html>

Hasilnya:

Membuat Garis Bawah pada Teks

Garis bawah biasanya digunakan untuk menandai teks yang disisipkan atau teks yang mimiliki arti penting dibandingkan teks normal lainnya.

Garis bawah di HTML dapat kita buat dengan tag  (underlaine) atau juga tag <ins> (insert).

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Garis Bawah di HTML</title>
</head>
<body>
  <h1>Garis Bawah di HTML</h1>
  <p>
    <u>Text formatting itu penting</u>, karena dapat membuat teks terlihat
    lebih menarik dibandingkan <del>text biasa</del> <ins>plain text</ins>.
  </p>
</body>
</html>

Hasilnya:

Pada contoh di atas, kita menggunakan tag <del> untuk membuat teks tercoret. Lalu diikuti dengan teks yang ditambahkan (insert).

Membuat Teks Tercoret

Teks tercoret memiliki arti teks yang dihapus. Biasanya untuk memberitahu pembaca bahwa teks tersebut tidak dipakai atau dihapus.

Tag untuk membuat teks tercoret di HTML adalah tag <s> (strikethrough) atau bisa juga dengan tag <del> (delete).

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Tercoret di HTML</title>
</head>
<body>
  <h1>Text Tercoret di HTML</h1>
  <p>
    Coretlah teks yang tidak <s>dibutuhkan</s> terpakai, ini bisa memberitahu 
    pembaca tentang perbaikan dari teks tersebut. Kadang juga teks <del>tercoret</del> 
    <ins>yang dicoret</ins>, diperbaiki dengan menambahkan teks dengan garis bawah.
  </p>
</body>
</html>

Hasilnya:

Membuat Pangkat di HTML

Pangkat biasanya digunakan pada rumus. Ada dua jenis pangkat yang bisa dibuat di HTML, yakni pangkat yang berada di atas (superscript) dan pangkat di bawah (subscript).

Tag untuk membuat pangkat di HTML adalah tag  dan .

 untuk membuat pangkat di atas
 untuk membuat pangkat di bawah

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Membuat Pangkat di HTML</title>
</head>
<body>
  <h1>Membuat Pangkat di HTML</h1>
  <p>
    Rumus luas persegi adalah S<sup>2</sup>, dimana <i>S</i> adalah sisi dari 
    persegi. Lalu O<sub>2</sub> adalah rumus kimia dari oksigen.
  </p>
</body>
</html>

Hasilnya:

SRI RAHAYU,S.Kom