Cara Membuat Spasi di HTML dengan 3 Metode

Cara Membuat Spasi di HTML dengan 3 Metode
Cara Membuat Spasi di HTML dengan 3 Metode

Ada beberapa cara membuat spasi di HTML yang bisa Anda coba. HTML adalah singkatan dari Hypertext Markup Language, bahasa markup utama untuk menyusun elemen website. Dalam pemrograman web, HTML adalah materi dasar yang pertama kali dipelajari.

Jika Anda membuat lebih dari 1 spasi di HTML, web browser hanya akan menampilkan 1 spasi saja. Perhatikan contoh di bawah:

  • <p>Cerita Media</p>
  • <p>Ceria     Media</p>

Contoh pertama hanya mengandung 1 spasi, sedangkan contoh kedua terdiri dari 5 spasi. Tapi saat dijalankan, kedua contoh di atas akan menampilkan teks yang sama, yaitu “Cerita Media” hanya dengan 1 spasi.

Karakteristik ini menjadi masalah saat Anda perlu menulis teks yang butuh lebih dari 1 spasi, misalnya untuk membuat indentasi.

Untuk mengatasinya, ceritamedia merangkum beberapa cara.

Cara Membuat Spasi di HTML

1. Menggunakan HTML

HTML menyediakan cara untuk membuat spasi sesuai kebutuhan programmer. Ini dilakukan agar programmer bisa menampilkan teks dengan lebih rapi sesuai standar kepenulisan.

Spasi Reguler

Jika Anda hanya membutuhkan 1 spasi, tidak perlu menggunakan teknik khusus. Cukup tulis teks yang ingin ditampilkan di dalam tag HTML lengkap dengan spasinya. Contohnya seperti ini:

Kedua contoh di atas akan menghasilkan teks yang tiap katanya dipisah oleh 1 spasi. Format di atas juga digunakan untuk tag lain seperti heading (<h1>, <h2>, dst.).

Spasi Ekstra

Jika Anda perlu membuat lebih dari 1 spasi, ada teknik khusus yang bisa digunakan. Yang paling umum adalah non-breaking space. Contohnya:

  • <p>belajar &nbsp; html</p>
  • <p>spasi &nbsp; ganda</p>

kedua contoh di atas akan menghasilkan teks yang tiap katanya dipisah dengan spasi ganda. Jika Anda membutuhkan lebih banyak spasi, tinggal tambahkan &nbsp; sesuai jumlah spasi yang Anda kehendaki.

Selain &nbsp;, Anda juga bisa menggunakan &#160. Keduanya sama-sama menampilkan spasi ganda di dalam teks.

Indentasi

Indentasi digunakan untuk membuat format teks yang lebih rapi. Selain dengan &nbsp;, Anda bisa menggunakan 2 jenis spacing lain untuk membuat indentasi.

  • Dua spasi: &ensp;

Contoh: <p>dua &ensp; spasi</p>

  • Empat spasi: &emsp;

Contoh: <p>empat &emsp; spasi</p>

Contoh pertama digunakan untuk membuat 2 spasi menggunakan &ensp;. Sedangkan &emsp; dipakai untuk membuat 4 spasi seperti pada contoh kedua.

Cobalah membuat file html untuk mencoba setiap metode di atas. Gunakan lebih banyak spacing untuk mengetahui cara kerjanya secara keseluruhan.

Pre-Formatted Text

Cara membuat spasi di HTML yang lain adalah dengan pre-formatted text. Sesuai namanya, tag ini digunakan untuk menampilkan teks dengan format yang sama persis seperti yang Anda tulis. Lihat contoh berikut:

  • <pre>satu spasi</pre>
  • <pre>dua  spasi</pre>
  • <pre>tiga   spasi</pre>

Jika Anda hanya menggunakan tag <p> biasa, spasi ekstra akan dipotong menjadi 1 spasi. Sehingga ketiga contoh di atas akan menampilkan hasil yang sama.

Tapi kalau Anda menggunakan <pre>, teks akan ditampilkan secara utuh dan persis. Coba jalankan ketiga contoh di atas untuk melihat perbedaannya.

2. Menggunakan CSS

HTML dan CSS adalah dua bagian penting dalam pemrograman web. HTML berfungsi untuk menyusun elemen, sedangkan tugas CSS adalah mempercantiknya. CSS bisa dipahami sebagai bahasa desain untuk mengatur tampilan setiap elemen website.

CSS bisa ditulis dalam 1 file bersama dengan HTML. Jika Anda menggunakan cara ini, maka CSS harus diletakkan antara tag <head> dan </head>.

Cara lainnya adalah menulis CSS di file terpisah, kemudian memanggilnya dari file HTML. Cara ini dinilai lebih efektif karena HTML dan CSS ditulis di 2 file berbeda. Maintenance pun lebih mudah dilakukan.

Untuk mengatur spacing, gunakan salah satu dari 3 tag berikut:

  • jumlah spasi = p {text-indent: 4em;}
  • persentase = {text-indent: 10%;}
  • satuan unit = p {text-indent: 4mm;}

Contoh pertama adalah indentasi sesuai jumlah spasi. Jadi ‘4em’ setara dengan 4 kali spasi. Ukurannya sesuai ukuran font yang Anda tentukan.

Indentasi juga bisa ditulis berdasarkan persentase seperti pada contoh kedua. Atau dengan satuan unit seperti di contoh terakhir.

Cobalah membuat file HTML yang mengandung CSS, kemudian masukkan salah satu tag di atas ke dalamnya. Jalankan dan lihat hasilnya di web browser. Coba setiap opsi indentasi mulai dari em, %, sampai satuan unit. Ubah nilainya untuk memahami cara kerja masing-masing opsi.

Cara Membuat Spasi di HTML Paling Praktis

Semua metode yang kami bahas di atas sebenarnya punya satu tujuan yang sama. Memilih teknik yang tepat perlu disesuaikan dengan jenis elemen. Untuk heading misalnya, menggunakan &nbsp;, &ensp;, atau &emsp; lebih disarankan. Tapi untuk paragraf, tentu saja <pre> yang lebih praktis.

Jadilah programmer yang konsisten. Kalau Anda sudah memilih salah satu cara, usahakan untuk tetap menggunakan cara tersebut di setiap jenis operasi yang sama. Ini akan memudahkan programmer lain dalam membaca dan merawat kode yang Anda tulis.

Pada akhirnya, pilihan tetap berada di tangan progammer. Ambil salah satu cara membuat spasi di HTML yang menurut Anda paling mudah untuk dibuat dan dirawat.