Format Teks di HTML5

Pendahuluan

Kalian ingin memformat teks di dalam HTML tapi masih bingung dengan tag-tag-nya? Tenang, di sini aku akan bantu dengan tutorial lengkap dan mudah dipahami.
Ayo langsung kita mulai tutorialnya!

Isi Halaman Web

Basic Format

Kalian ingin memformat teks seperti bold, italic, underline, dan banyak lagi? Di bagian ini, kita akan bahas tag-tag dasar untuk memformat teks dalam HTML.

Format Text

Pertama, yang harus kalian lakukan adalah mengingat tag-tag di bawah ini ya!

Tag Fungsi
<b> Untuk memberikan efek bold atau menebalkan teks.
<i> Untuk memberikan efek italic atau memiringkan teks.
<del> Untuk menunjukkan konten yang telah dihapus / (delete) dari dokumen.
<u> Untuk memberikan efek underline atau garis bawah.
<mark> Untuk memberikan efek highlight atau penekanan teks.
<strong> Untuk memberikan efek bold yang menyatakan arti penting.
<em> Untuk memberikan penekanan makna pada teks atau italic.
<ins> Untuk menandai teks yang disisipkan dalam sebuah kalimat.
<small> Untuk membuat teks menjadi lebih kecil.
<sup> Untuk membuat teks menjadi kecil dan berada di atas.
<sub> Untuk membuat teks menjadi kecil dan berada di bawah.

Contoh penggunaan tag-tag di atas:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Document</title>
  </head>
  <body>
    <p>
      <br>Ini adalah <b>teks Bold</b>
      <br>Ini adalah <i>teks Italic</i>
      <br>Ini adalah <u>teks underline</u>
      <br>Ini adalah <mark>teks mark</mark>
      <br>Ini adalah <strong>teks strong</strong>
      <br>Ini adalah <em>teks em</em>
      <br>Ini adalah <ins>teks ins</ins>
      <br>Ini adalah <small>teks small</small>
      <br>Ini adalah <sup>teks sup</sup>
      <br>Ini adalah <sub>teks sub</sub>
    </p>
  </body>
</html>
Hasil :


Ini adalah teks Bold
Ini adalah teks Italic
Ini adalah teks underline
Ini adalah teks mark
Ini adalah teks strong
Ini adalah teks em
Ini adalah teks ins
Ini adalah teks small
Ini adalah teks sup
Ini adalah teks sub

Membuat List

Membuat List Pada HTML bisa menggunakan tag <ul> atau unordered list yang fungsinya mengurutkan daftar dengan menggunakan simbol tertentu pada HTML. Sedangkan <ol> fungsinya adalah mengurutkan dengan menggunakan huruf, angka, angka romawi, dan lainnya.

Jangan lupa untuk menambahkan <li> atau list item untuk menambahkan list pada tag <ul> maupun <ol>

Contoh cara kerja <ol> dan <ul> ada pada kode di bawah ini: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>ini adalah list item dari ul </li>
      <li>ini adalah list item dari ul </li>
    </ul>
    <ol>
      <li>ini adalah list item dari ol </li>
      <li>ini adalah list item dari ol </li>
    </ol>
  </body>
</html>

Hasil yang didapat adalah :

  • ini adalah list item dari ul
  • ini adalah list item dari ul
  1. ini adalah list item dari ol
  2. ini adalah list item dari ol

Membuat Anchor (Hyperlink)

Hyperlink? Pernah klik teks yang membuka halaman baru? Itulah hyperlink!

Fungsi utama: Menghubungkan antara dokumen, bagian dalam halaman, atau ke website lain.
Link External

Mengarah ke website lain:

<a href="https://muhfhri.github.io/-">Kunjungi Website</a>
Contoh Link
Link Internal

Mengarah ke halaman dalam website:

<a href="profile.html">Halaman Profile</a>
Contoh Link

Perbedaan: https:// vs .html

Styling Link

Buat link lebih menarik dengan CSS:

/*  Efek hover kreatif */
.link-khusus {
  color: #d63384;
  border-bottom: 2px dashed;
  transition: all 0.3s;
}
.link-khusus:hover {
  color: white;
  background: #d63384;
  text-decoration: none;
}

Coba hover:
Link Contoh

Link Dalam Halaman

Untuk scroll otomatis ke bagian tertentu:

<a href="#format"> Kembali ke bagian Format Text</a>
Kembali ke bagian Format Text