Setiap orang yang berkecimpung dalam dunia pengembangan website, sudah tentu tak asing lagi dengan spasi HTML.
Pasalnya, kehadiran spasi dalam HTML bukan hanya ruang kosong tak terisi. Tapi, spasi di HTML ini menjadi elemen desain yang bisa membantu mengoptimalkan readability, menambah estetika, hingga menambah user experience di website.
Cara Menyisipkan Spasi HTML
Sekarang, kita berlanjut pada cara menyisipkannya, Sob. Penasaran bagaimana cara menyisipkan spasi HTML, kan? Begini caranya:
1. Menambahkan Spasi Entity & NBSP
Udah pasti paham dong kalau ada yang namanya Spasi Entity & NBSP? Ini adalah singkatan Non-Breaking Space yang artinya spasi tersebut tidak dipecah browser.
Bisa kami katakan, cara ini adalah yang paling dasar dalam penyisipan spasi tambahan pada HTML.
Contohnya dengan kode:
<p>Ini contoh dari menggunakan spasi entity & NBSP.</p>
Nantinya, akan muncul tiga spasi tambahan di antara kata ‘dari’ dan juga ‘menggunakan’. Kamu bisa mencobanya langsung di HTML, Sob.
Kemudian, bisa juga menggunakan entitas yang lain seperti:
- &emsp: spasi terlebar di HTML. Istilah lainnya adalah emphasize space.
- &ensp: spasi yang ukurannya setengah dari &emsp.
- &thinsp: biasa juga disebut thin space atau spasi yang lebih tipis.
2. Spasi Multiple Non-Breaking
Kamu juga bisa memakai entitas HTML seperti Multiple Non-Breaking space. Jika ingin menggunakannya, maka kode spasi HTML yang bisa kamu gunakan yakni:
<p>Ada dua spasi di antara kode ini words.</p>
<p>Ada empat spasi di antara kode ini words.</p>
Cobalah memasukkan kode tersebut dan kamu bisa melihat perbedaan jumlah spasi yang ada di hasilnya.
Meskipun begitu, jangan sampai menggunakannya secara berlebihan karena bisa mengakibatkan masalah saat merender konten pada browser.
3. Menggunakan Tag < pre >
Kemudian, ada istilah Tag < pre > yang tujuannya untuk menahan spasi sekaligus format pada teks di dalam HTML.
Metode ini, berguna kalau kamu mau menunjukkan kode maupun teks yang formatnya khusus.
Adapun kode untuk menambahkan spasi dalam HTML dengan Tag < pre > adalah
<pre>
Kode ini adalah
metode untuk mempertahankan spasi dan format khusus
</pre>
Kamu bisa mencobanya di HTML dan browser akan menampilkan format dan spasi yang tetap sebagaimana ketika kamu menuliskannya.
4. Pakai CSS Margin dan Padding
Cara membuat spasi di HTML selanjutnya bisa memakai margin dan padding pada CSS.
Dengan memakai konfigurasi kode ini, maka kamu bisa mengatur spasi pada bagian luar juga dalam elemen masing-masing.
Adapun contoh penggunaan kodenya adalah:
p {
margin: 20px;
padding: 15px;
}
Dengan memakai kode tersebut, maka kamu bisa memperoleh margin 20px dan juga padding 15px.
5. Menggunakan Tag <br> Saat Ingin Baris Baru
Selanjutnya, ada Tag <br> yang fungsinya guna menambahkan baris baru pada HTML.
Jadi, kamu akan terbantu jika ingin memisahkan antara teks dengan elemen lainnya.
Nah untuk kode spasi HTML yang bisa kamu gunakan yakni:
<p>satu dua tiga.<br>empat lima enam.</p>
Pada contoh ini, nantinya kamu akan mendapatkan baris yang baru.
Kalimat ‘satu dua tiga’ akan ada di baris pertama. Sedangkan ‘empat lima enam’ akan ada di baris kedua.
6. Memakai Kombinasi Spasi pada CSS
Jika ingin layouting dan desain website yang kompleks, maka kamu bisa mencoba kombinasi spasi dan juga CSS.
Contohnya, saat menggunakan kombinasi antara margin padding buat spasi antar elemen sekaligus tag < pre > maupun < br > guna menahan format dan spasi pada teks.
Soal penggunaannya, begini:
<pre>
Matahari bersinar
menutup keriangan rembulan
</pre>
<p style=”margin:20px; padding:15px;”>matahari beradu dengan nasib yang menderu
Kode Mana yang Harus Saya Gunakan?
Hal ini mungkin jadi pertanyaan karena ada banyak cara untuk menambahkan spasi pada HTML. Jika bingung, kamu bisa pakai pertimbangan ini:
1. Spasi dalam Teks
Gunakan   jika ingin menambahkan ekstra spasi pada teks. Misalnya untuk indentasi/pemisahan antar kata.
2. Teks Berformat
Jika mau menampilkan teks dengan format tertentu, maka tag < pre > menjadi pilihan yang pas.
3. Layout dan Desain
Saat ingin menyelesaikan layout dan desain kompleks, kamu bisa menggunakan CSS margin dan padding.
4. Baris Baru dalam Teks
Jika ingin menambahkan baris baru pada teks dan antar elemen, maka tag < br > bisa jadi pilihan yang pas.
FAQ
Bagaimana cara spasi di HTML?
Ada 6 cara yang bisa kamu gunakan seperti yang telah kami jelaskan, Sob.
Apa itu nbsp?
Merupakan singkatan dari Non-Breaking Space yang membuat spasi ruang tak terputus/spasi tetap.
Bagaimana cara membuat baris yang terpisah?
Gunakanlah tag < br > untuk menambahkan baris yang terpisah.
