Format Teks Pada HTML

Format teks dalam HTML memungkinkan pengembang untuk mengatur gaya dan tampilan teks pada halaman web. Artikel ini menjelaskan berbagai tag HTML untuk memformat teks, seperti bold, italic, underline, serta cara menggunakan paragraf dan br untuk mengatur spasi. Dengan pemahaman tentang format teks, Anda dapat membuat halaman web yang lebih menarik dan terstruktur dengan baik.

HTML & CSS Dasar Febuari 19, 2025 0 59 Tambahkan ke Daftar Bacaan

Format Teks Pada HTML

HTML menyediakan berbagai tag yang dapat digunakan untuk memberi format pada teks. Ini memungkinkan kita untuk menampilkan teks dalam berbagai gaya dan format, seperti cetak tebal, miring, garis bawah, dan sebagainya. Di bawah ini adalah beberapa tag HTML yang digunakan untuk memberi format teks.

1. Tag untuk Menebalkan Teks

<b>: Tag ini digunakan untuk menampilkan teks dalam format tebal (bold).
<strong>: Tag ini juga digunakan untuk menebalkan teks, tetapi dengan makna semantik, yaitu menandakan bahwa teks tersebut penting.

Contoh penggunaan:

<b>Ini adalah teks yang tebal menggunakan <b></b></strong></b>
<strong>Ini adalah teks yang tebal menggunakan <strong></strong></strong>

2. Tag untuk Memiringkan Teks

<i>: Tag ini digunakan untuk memiringkan teks.
<em>: Tag ini digunakan untuk memiringkan teks, tetapi dengan makna semantik, yang berarti teks tersebut lebih penting atau ditekankan.

Contoh penggunaan:

<i>Ini adalah teks yang dimiringkan menggunakan <i></i></strong></i>
<em>Ini adalah teks yang dimiringkan menggunakan <em></em></strong>

3. Tag untuk Garis Bawah pada Teks

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

Contoh penggunaan:

<u>Ini adalah teks dengan garis bawah menggunakan <u></u></strong>

4. Tag untuk Menyusun Teks dalam Format Monospace

<code>: Tag ini digunakan untuk menampilkan teks dalam format monospace, biasanya digunakan untuk menampilkan potongan kode atau teks yang harus terlihat konsisten dalam setiap karakter.

Contoh penggunaan:

<code>print("Hello, World!")</code>

5. Tag untuk Menyusun Teks sebagai Judul

<h1> hingga <h6>: Tag ini digunakan untuk membuat heading atau judul, mulai dari <h1> (yang terbesar) hingga <h6> (yang terkecil).

Contoh penggunaan:

<h1>Ini adalah Heading 1 (Judul Utama)</h1>
<h2>Ini adalah Heading 2 (Subjudul)</h2>
<h3>Ini adalah Heading 3 (Sub-subjudul)</h3>

6. Tag untuk Membuat Teks Terdaftar atau List

<ul>: Tag ini digunakan untuk membuat daftar tak terurut (unordered list), yang menampilkan item dengan bullet.
<ol>: Tag ini digunakan untuk membuat daftar terurut (ordered list), yang menampilkan item dengan angka atau huruf.
<li>: Tag ini digunakan untuk setiap item dalam daftar.

Contoh penggunaan:

<ul>
    <li>Item pertama dalam daftar tak terurut</li>
    <li>Item kedua dalam daftar tak terurut</li>
</ul>

<ol>
    <li>Item pertama dalam daftar terurut</li>
    <li>Item kedua dalam daftar terurut</li>
</ol>

7. Tag untuk Menggunakan Teks yang Dicoret

<strike>: Tag ini digunakan untuk mencoret teks.
<s>: Tag ini juga digunakan untuk mencoret teks, namun dengan semantik yang sedikit berbeda.

Contoh penggunaan:

<strike>Ini adalah teks yang dicoret menggunakan <strike></strike></strong>

8. Tag untuk Memformat Teks dalam Blok

<blockquote>: Tag ini digunakan untuk menampilkan teks yang diambil dari sumber lain, biasanya digunakan untuk kutipan panjang.
<pre>: Tag ini digunakan untuk menampilkan teks yang sudah dipformat dengan spasi dan baris baru sesuai dengan yang ditulis dalam kode HTML.

Contoh penggunaan:

<blockquote>
    "Ini adalah kutipan panjang dari sumber lain."
</blockquote>

<pre>
    Ini adalah teks yang dipertahankan formatnya
    seperti indentasi dan baris baru
</pre>

9. Tag untuk Menambahkan Teks dengan Indentasi

<mark>: Tag ini digunakan untuk menandai teks yang relevan atau penting, biasanya dengan latar belakang berwarna kuning.
<small>: Tag ini digunakan untuk menampilkan teks dengan ukuran font yang lebih kecil.

Contoh penggunaan:

<mark>Ini adalah teks yang diberi tanda dengan <mark></mark></strong>
<small>Ini adalah teks dengan ukuran font yang lebih kecil menggunakan <small></small></strong>

10. Tag untuk Menambahkan Teks dengan Warna

<span style="color:red;">: Tag ini digunakan untuk memberikan warna pada teks dengan menggunakan atribut style.

Contoh penggunaan:

<span style="color:red;">Ini adalah teks dengan warna merah</span>

HTML memberikan berbagai cara untuk memberi format pada teks di halaman web. Anda bisa menebalkan, memiringkan, memberi garis bawah, atau menggunakan tag untuk menampilkan teks dalam berbagai gaya. Dengan menggunakan tag HTML yang tepat, Anda bisa menata dan memformat teks sesuai kebutuhan.