Cara Mengindent Teks Menggunakan HTML

HTML pada dasarnya dirancang untuk mengatur struktur halaman, bukan untuk menyusun tata letak. Meski begitu, bahasa ini menyediakan beberapa cara untuk menambahkan indentasi pada teks. Komunitas Web Consortium (W3C) menganjurkan penggunaan CSS untuk tujuan ini, namun HTML tetap menawarkan metode sederhana melalui entitas atau karakter khusus.

Non‑Breaking Spaces

Entitas ruang tak terputus ( ) berfungsi seperti spasi biasa pada keyboard. Untuk menambahkan indentasi tanpa menekan tombol spasi, cukup ketik entitas tersebut. Misalnya, untuk menambahkan lima spasi sebelum baris, masukkan kode berikut:

     Teks Anda di sini

Tag Blockquote

Tag <blockquote> biasanya dipakai untuk menyoroti kutipan. Sebagai efek samping, tag ini akan menggeser semua baris di dalamnya ke kanan, biasanya sekitar lima spasi. Namun, template atau aplikasi web sering menambahkan gaya CSS (latar belakang, border, padding) yang tidak selalu diinginkan. Anda dapat menimpa gaya default dengan CSS in-line, misalnya:

<blockquote style="border:none;">
  Teks yang ingin diindentasi
</blockquote>

Tag <pre>

Tag <pre> memaksa browser menampilkan teks persis seperti yang Anda ketik, termasuk spasi dan tab. Dengan menggunakan spasi atau tombol tab, Anda dapat menyesuaikan indentasi sesuai keinginan. Perlu diingat bahwa editor HTML biasanya mengonversi tab menjadi spasi, dan jumlah spasi yang ditampilkan bisa berbeda dari jumlah yang diketik.

Indentasi dengan CSS

Metode paling fleksibel adalah menggunakan CSS. Untuk men-indentasi baris pertama paragraf, gunakan properti text-indent:

<p style="text-indent:10px;">
  Paragraf pertama akan digeser 10 piksel.
</p>

Jika Anda ingin menggeser semua baris di dalam elemen, gunakan margin-left:

<p style="margin-left:10px;">
  Semua baris akan memiliki jarak 10 piksel dari sisi kiri.
</p>

Untuk menerapkan aturan ini ke semua paragraf di situs, tambahkan CSS berikut ke stylesheet internal atau eksternal:

p {
  text-indent:10px;
}