Formatting Teks dalam HTML

Dalam pembuatan halaman web, teks merupakan elemen yang paling sering digunakan untuk menyampaikan informasi kepada pengunjung. Namun, menampilkan teks secara polos tanpa penekanan atau struktur yang jelas dapat membuat konten menjadi sulit dibaca. Oleh karena itu, HTML menyediakan berbagai tag formatting teks yang berfungsi untuk mengubah tampilan atau memberikan penekanan pada bagian tertentu dari teks.

📋 Daftar Isi

Formatting teks dalam HTML memungkinkan kita untuk membuat teks menjadi tebal, miring, bergaris bawah, ditandai, atau memiliki arti khusus secara semantik. Dengan menggunakan formatting yang tepat, kita dapat membantu pembaca memahami bagian penting dari suatu konten dengan lebih mudah.

Selain itu, penggunaan formatting teks juga membantu struktur konten menjadi lebih jelas, sehingga baik pengguna maupun mesin pencari dapat memahami informasi yang disampaikan dengan lebih baik.

📚 Baca Juga

Mengapa Formatting Teks Penting?

Ada beberapa alasan mengapa formatting teks sangat penting dalam pengembangan website.

Pertama, formatting membantu meningkatkan keterbacaan konten. Teks yang memiliki penekanan tertentu akan lebih mudah dipahami dibandingkan teks yang seluruhnya memiliki gaya yang sama.

Kedua, formatting membantu memberikan hierarki informasi. Misalnya, kata penting dapat dibuat tebal atau miring sehingga pembaca langsung memperhatikan bagian tersebut.

Ketiga, beberapa tag formatting dalam HTML memiliki makna semantik. Artinya, tag tersebut tidak hanya mengubah tampilan teks, tetapi juga memberi tahu browser dan mesin pencari tentang arti dari teks tersebut.

Beberapa Tag Formatting Teks dalam HTML

HTML memiliki banyak tag yang dapat digunakan untuk memformat teks. Berikut beberapa tag yang paling sering digunakan.

1. Teks Tebal (<b>)

Tag <b> digunakan untuk membuat teks menjadi tebal.

Contoh:

<p>Belajar <b>HTML</b> adalah langkah pertama menjadi web developer.</p>

Hasilnya, kata HTML akan ditampilkan dengan teks tebal.

2. Penekanan Penting (<strong>)

Tag <strong> juga membuat teks terlihat tebal, tetapi memiliki makna semantik bahwa teks tersebut sangat penting.

Contoh:

<p><strong>Penting:</strong> Selalu tutup tag HTML dengan benar.</p>

Perbedaannya dengan <b> adalah <strong> memberi tahu browser dan mesin pencari bahwa teks tersebut memiliki tingkat kepentingan lebih tinggi.

3. Teks Miring (<i>)

Tag <i> digunakan untuk membuat teks menjadi miring (italic).

Contoh:

<p>HTML adalah dasar dari <i>web development</i>.</p>

Biasanya digunakan untuk:

  • istilah asing
  • judul karya
  • penekanan ringan

4. Penekanan (<em>)

Tag <em> juga membuat teks miring, tetapi memiliki makna penekanan secara semantik.

Contoh:

<p>Kamu harus <em>memahami dasar HTML</em> sebelum belajar CSS.</p>

Browser biasanya menampilkan <em> dalam bentuk miring, tetapi yang paling penting adalah arti penekanan pada teks tersebut.

5. Teks Bergaris Bawah (<u>)

Tag <u> digunakan untuk memberi garis bawah pada teks.

Contoh:

<p>Pelajari <u>dasar HTML</u> sebelum lanjut ke CSS.</p>

Namun dalam praktik modern, penggunaan <u> jarang digunakan untuk desain karena garis bawah sering diasosiasikan dengan link.

6. Teks Dicoret (<del>)

Tag <del> digunakan untuk menunjukkan bahwa teks tersebut telah dihapus atau tidak berlaku lagi.

Contoh:

<p>Harga lama: <del>Rp200.000</del></p>
<p>Harga baru: Rp150.000</p>

Hasilnya akan terlihat seperti ini:

Harga lama: Rp200.000

Harga baru: Rp150.000

Tag ini sering digunakan dalam:

  • halaman e-commerce
  • revisi dokumen
  • perubahan informasi

7. Teks Ditambahkan (<ins>)

Tag <ins> digunakan untuk menunjukkan teks yang baru ditambahkan.

Contoh:

<p>Kursus ini sekarang mencakup <ins>JavaScript dasar</ins>.</p>

Biasanya browser menampilkan teks ini dengan garis bawah.

8. Teks Disorot (<mark>)

Tag <mark> digunakan untuk menyorot teks seperti stabilo.

Contoh:

<p>HTML adalah <mark>bahasa markup</mark> untuk membuat halaman web.</p>

Tag ini sering digunakan untuk pencarian atau penekanan informasi penting.

Contoh Penggunaan Formatting Teks

Berikut contoh penggunaan beberapa tag formatting dalam satu paragraf.

<p>
Belajar <strong>HTML</strong> adalah langkah pertama untuk menjadi 
<b>web developer</b>. Kamu harus memahami konsep dasar seperti 
<em>tag</em>, <i>atribut</i>, dan struktur halaman web.
</p>

Formatting teks merupakan fitur penting dalam HTML yang memungkinkan kita menampilkan konten dengan penekanan dan struktur yang lebih jelas. Dengan menggunakan berbagai tag formatting, kita dapat membuat teks menjadi lebih mudah dibaca dan dipahami oleh pengguna.

Selain itu, beberapa tag seperti <strong> dan <em> juga memiliki makna semantik, yang membantu browser dan mesin pencari memahami konteks dari teks tersebut.

Tag Formatting Teks Lainnya: Small, Sub, Sup, dan Kode

Selain tag dasar seperti <b>, <i>, <strong>, dan <em>, HTML menyediakan beberapa tag tambahan untuk format teks khusus yang sering digunakan dalam dokumentasi, matematika, ilmu pengetahuan, atau kode. Tag ini memberikan kontrol visual dan semantik pada konten teks.

Berikut pembahasan masing-masing tag:

1. Teks Kecil (<small>)

Tag <small> digunakan untuk menampilkan teks dalam ukuran lebih kecil dibanding teks normal. Biasanya digunakan untuk:

  • catatan kaki
  • disclaimer
  • copyright

Contoh:

<p>
Website ini © <small>2026 Authemic. All rights reserved.</small>
</p>

Hasilnya, teks di dalam <small> akan lebih kecil dan membantu menekankan bahwa teks tersebut informasi tambahan atau tidak utama.

2. Teks Subscript (<sub>)

Tag <sub> digunakan untuk menampilkan teks lebih rendah dari garis dasar normal, cocok untuk:

  • rumus kimia
  • indeks matematika

Contoh:

<p>
Rumus air: H<sub>2</sub>O
</p>

Hasilnya akan seperti ini:

Rumus air: H2O

3. Teks Superscript (<sup>)

Tag <sup> digunakan untuk menampilkan teks lebih tinggi dari garis dasar, biasanya untuk:

  • pangkat matematika
  • notasi ilmiah

Contoh:

<p>
2<sup>3</sup> = 8
</p>
<p>
Jumlah populasi bumi sekitar 7 x 10<sup>9</sup>
</p>

Hasilnya:

23 = 8

Jumlah populasi bumi sekitar 7 x 109

4. Teks Kode (<code>)

Tag <code> digunakan untuk menampilkan kode program atau perintah komputer. Browser biasanya menampilkan teks ini dengan font monospace.

Contoh:

<p>
Untuk menampilkan teks di halaman web, gunakan tag <code>&lt;p&gt;</code> dalam HTML.
</p>

Manfaat <code>:

  • Memberikan penekanan semantik bahwa ini adalah kode
  • Memudahkan pembaca memahami instruksi pemrograman
  • Mesin pencari bisa mengenali konten kode untuk indexing

5. Teks Preformatted (<pre>)

Tag <pre> digunakan untuk menampilkan teks dengan format asli, termasuk spasi dan baris baru. Ini sangat berguna untuk:

  • menampilkan contoh kode panjang
  • teks yang membutuhkan format tertentu

Contoh:

<pre>
function helloWorld() {
    console.log("Hello, Authemers!");
}
</pre>

Teks akan ditampilkan apa adanya, termasuk indentasi dan baris baru, sehingga cocok untuk tutorial kode.

Contoh Penggunaan Semua Tag Formatting Lanjutan

<p>
Contoh ilmiah: H<sub>2</sub>O adalah air, sedangkan 2<sup>3</sup> = 8. 
Kamu bisa menulis kode HTML menggunakan <code>&lt;p&gt;</code> dan 
format teks tambahan dengan <small>catatan kaki</small>.
</p>

<pre>
<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Preformatted</title>
  </head>
  <body>
    <p>Hello, Authemers!</p>
  </body>
</html>
</pre>

Manfaat Formatting Teks Lanjutan untuk SEO

  1. Semantik yang jelas
    Tag seperti <code>, <sub>, <sup> membantu mesin pencari memahami konteks konten. Misalnya, <code> menandakan bagian kode, <sub> menandakan rumus ilmiah.
  2. Meningkatkan keterbacaan
    Penggunaan <small> atau <pre> membuat konten lebih mudah dibaca dan dipahami pengguna, meningkatkan pengalaman pengunjung.
  3. Memudahkan indexing konten spesifik
    Mesin pencari bisa membedakan teks utama, catatan, dan kode sehingga konten tutorial menjadi lebih relevan untuk pencarian.

Pada Bab selanjutnya kita akan membahas Gambar dan Multimedia dalam HTML.

Artikel terkait