Format Text HTML

code
format_bold

Format Text HTML

Pelajari cara memformat teks dalam HTML dengan berbagai tag styling. Mulai dari bold, italic, underline, hingga hyperlink yang interaktif.

school Pendahuluan

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

list Daftar Isi Tutorial

format_bold Format Text

HTML menyediakan berbagai tag untuk memformat teks. Berikut adalah tag-tag yang paling sering digunakan:

Tag Fungsi Contoh
<b> Memberikan efek bold atau menebalkan teks Teks Bold
<strong> Bold dengan penekanan semantik penting Teks Penting
<i> Memberikan efek italic atau memiringkan teks Teks Italic
<em> Italic dengan penekanan semantik Teks Emphasized
<u> Memberikan efek underline atau garis bawah Teks Underline
<mark> Memberikan efek highlight atau penekanan Teks Highlighted
<del> Menunjukkan konten yang telah dihapus Teks Deleted
<ins> Menandai teks yang disisipkan Teks Inserted
<small> Membuat teks menjadi lebih kecil Teks Small
<sup> Teks kecil di atas (superscript) E = mc2
<sub> Teks kecil di bawah (subscript) H2O

play_circle Interactive Showcase

<b> Bold Text - Teks tebal untuk penekanan visual
<i> Italic Text - Teks miring untuk penekanan
<u> Underline Text - Teks dengan garis bawah
<mark> Highlighted Text - Teks yang disorot

Contoh Kode Lengkap:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Format Text Demo</title>
  </head>
  <body>
    <h1>Contoh Format Text</h1>
    
    <p>Ini adalah <b>teks Bold</b></p>
    <p>Ini adalah <strong>teks Strong</strong></p>
    <p>Ini adalah <i>teks Italic</i></p>
    <p>Ini adalah <em>teks Emphasized</em></p>
    <p>Ini adalah <u>teks Underline</u></p>
    <p>Ini adalah <mark>teks Highlighted</mark></p>
    <p>Formula: E = mc<sup>2</sup></p>
    <p>Rumus air: H<sub>2</sub>O</p>
  </body>
</html>

Contoh Format Text

Ini adalah teks Bold

Ini adalah teks Strong

Ini adalah teks Italic

Ini adalah teks Emphasized

Ini adalah teks Underline

Ini adalah teks Highlighted

Formula: E = mc2

Rumus air: H2O

format_list_bulleted Membuat List

HTML menyediakan dua jenis list utama untuk mengorganisir informasi:

format_list_bulleted Unordered List (<ul>)

Daftar dengan bullet points atau simbol. Tidak ada urutan khusus.

Menggunakan <li>

format_list_numbered Ordered List (<ol>)

Daftar dengan nomor atau huruf. Ada urutan yang spesifik.

Menggunakan <li>

Contoh Kode:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>List Demo</title>
  </head>
  <body>
    <h2>Daftar Bahasa Pemrograman (Unordered)</h2>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Python</li>
    </ul>
    
    <h2>Langkah Belajar Web (Ordered)</h2>
    <ol>
      <li>Pelajari HTML dasar</li>
      <li>Kuasai CSS untuk styling</li>
      <li>Tambahkan JavaScript untuk interaktivitas</li>
      <li>Pelajari framework modern</li>
    </ol>
  </body>
</html>

Daftar Bahasa Pemrograman (Unordered)

  • HTML
  • CSS
  • JavaScript
  • Python

Langkah Belajar Web (Ordered)

  1. Pelajari HTML dasar
  2. Kuasai CSS untuk styling
  3. Tambahkan JavaScript untuk interaktivitas
  4. Pelajari framework modern

💡 Tips: Gunakan <ul> untuk daftar item yang tidak memiliki urutan khusus, dan <ol> untuk daftar dengan urutan penting seperti langkah-langkah atau ranking.

link Membuat Hyperlink

help Apa itu Hyperlink?

Hyperlink adalah elemen yang memungkinkan pengguna berpindah dari satu halaman ke halaman lain, atau ke bagian tertentu dalam halaman yang sama. Hyperlink inilah yang membuat web menjadi "terhubung".

open_in_new Link External

Mengarah ke website lain atau halaman di luar domain Anda.

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

tag Link Internal

Mengarah ke bagian tertentu dalam halaman yang sama.

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

Contoh Lengkap Hyperlink:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Hyperlink Demo</title>
  </head>
  <body>
    <h1 id="atas">Halaman Utama</h1>
    
    <!-- Link External -->
    <p>
      Kunjungi <a href="https://google.com" target="_blank">Google</a> 
      untuk mencari informasi.
    </p>
    
    <!-- Link Internal -->
    <p>
      Pergi ke <a href="#bawah">bagian bawah halaman</a>.
    </p>
    
    <!-- Link Email -->
    <p>
      Kirim email ke <a href="mailto:contoh@email.com">kontak kami</a>.
    </p>
    
    <h2 id="bawah">Bagian Bawah</h2>
    <p>Ini adalah bagian bawah halaman.</p>
    
    <a href="#atas">Kembali ke atas</a>
  </body>
</html>

tips_and_updates Tips Lanjutan

  • target="_blank" - Membuka link di tab baru
  • href="mailto:email@domain.com" - Link untuk kirim email
  • href="tel:+628123456789" - Link untuk panggilan telepon
  • href="#id-element" - Link ke elemen dengan ID tertentu
  • title="Deskripsi" - Tooltip saat hover