Tutorial HTML/CSS 11 : Space HTML Tag, Cara Membuat Space pada HTML dengan Mudah

Last Updated on November 8, 2021 by

Pada artikel sebelumnya, Codekey telah membahas tentang cara membuat simbol serta contoh-contoh simbol pada HTML. Kali ini, Codekey akan mengajak Anda untuk memahami tentang space pada HTML.

Ada beberapa cara untuk menerapkan HTML. Jika Anda tertarik untuk tahu, pastikan Anda membaca artikel ini sampai selesai.

Cara Terbaik Menerapkan Space pada HTML

Ada beberapa cara dan tips yang kami sarankan untuk Anda ikuti ketika menerapkan space pada HTML:

1. Anda dapat menggunakan pintasan untuk menambahkan spasi yang tidak dapat dipecahkan di sebagian besar pengolah kata. Coba Option + Spasi untuk MacOS, Ctrl + Shift + Spasi untuk MS Word atau OpenOffice, dan Ctrl + Alt + Spasi untuk Windows (sebagai alternatif, Anda dapat menahan Alt dan menekan 0160 pada papan angka).
2. Anda juga dapat memasukkan dua atau empat spasi sekaligus dengan mengetik & ensp; atau & emsp;.
3. Spasi yang tidak dapat dipecahkan juga dapat berguna dalam tabel HTML. Menambahkan satu ke sel yang kosong dapat mencegah tabel runtuh di browser yang tidak mendukung sel kosong.
4. Jika Anda memutuskan untuk menggunakan properti CSS untuk menambahkan ruang kosong, hindari menentukan nilai dalam unit absolut. Mereka tidak akan beradaptasi dengan perubahan font atau ukuran layar, jadi gunakan persentase dan unit em untuk respon yang lebih baik.

Berikut kami jelaskan tentang jenis space HTML yaitu non-breakable space.

Non-Breakable Space di HTML

Saat Anda menulis teks, katakanlah, Microsoft Word, Anda dapat dengan mudah menambahkan beberapa spasi dalam satu baris.

Namun, pada HTML Anda tidak dapat melakukan itu sehingga HTML memiliki fitur yang disebut whitespace collapse, tidak peduli berapa banyak spasi yang Anda ketik, browser akan menguranginya menjadi satu spasi.

Lantas, bagaimana cara menambahkan spasi di HTML? Opsi termudah adalah entitas ruang yang tidak dapat dipecahkan, dan ada dua cara untuk menambahkannya.

 
 

Anda dapat memasukkannya untuk menambahkan spasi kosong HTML yang tidak dapat diciutkan di antara kata, gambar, atau elemen halaman lainnya. Hal ini juga akan mencegah jeda baris yang tidak diinginkan.

Misalnya, dalam cuplikan kode di bawah ini, Anda dapat melihat cara menambahkan spasi di nomor HTML sebagai pemisah ribuan, dan juga memastikan browser tidak memecahnya.

Belajar HTML Bersama Codekey.

Anda dapat memasukkannya untuk menambahkan spasi kosong HTML yang tidak dapat diciutkan di antara kata, gambar, atau elemen halaman lainnya. Ini juga akan mencegah jeda baris yang tidak diinginkan. Misalnya, dalam cuplikan kode di bawah ini, Anda dapat melihat cara menambahkan spasi di nomor HTML sebagai pemisah ribuan, dan juga memastikan browser tidak memecahnya.

Opsi Lain dalam HTML untuk Space

Dalam beberapa kasus, Anda mungkin ingin menambahkan spasi di HTML untuk memisahkan bagian teks Anda. Non-breakable space sebenarnya bukan pilihan dalam kasus ini.

Anda harus menggunakan space html tag <br> untuk jeda baris atau membungkus paragraf Anda dengan space html tag <p> untuk mendefinisikannya sebagai terpisah. Anda dapat menerapkannya sebagai berikut:

<span>Belajar HTML Bersama Codekey</span><br>
<span>Selamat Belajar!</span>

Satu cara lagi untuk menyimpan semua ruang kosong HTML yang Anda ketikkan adalah memformat teks Anda dengan membungkusnya dalam space html tag <pre>:

<pre>
         A
         |||
        |||||
       |||||||
      |||||||||
     [|||||||||]
<pre>

Teks pra-pemformatan mempertahankan semua spasi HTML dan baris kosong seperti yang Anda ketikkan. Jadi, ini berguna saat Anda perlu menyampaikan makna visual. Pada contoh di atas, Anda melihat gambar ASCII.

Anda juga dapat menggunakan <pre> untuk menulis alamat, puisi, dan teks lain yang mengikuti format tertentu. Secara default, browser menampilkan teks yang telah diformat sebelumnya dalam font dengan lebar tetap. Namun, Anda dapat mengubahnya menggunakan CSS.

Alternatif CSS untuk HTML Kosong

Cara-cara menambahkan spasi dalam HTML yang dibahas di atas berguna, tetapi Anda tidak boleh mengandalkannya untuk memberi gaya dan mengubah posisi elemen. Sebagai gantinya, periksa properti CSS ini:

1. margin menambahkan spasi HTML di sekitar elemen (di luar batas).
2. padding menambahkan ruang HTML di sekitar konten elemen (di dalam batas).
3. text-align meratakan teks sesuai dengan nilai yang dipilih (kiri, kanan, tengah, atau rata).
4. text-indent menambahkan spasi HTML di depan baris teks pertama.

Menggunakan lembar gaya CSS jauh lebih nyaman saat Anda membutuhkan gaya yang konsisten. Anda hanya perlu menyesuaikan satu baris agar perubahan memengaruhi seluruh halaman, bukan melalui setiap paragraf.

Demikianlah penjelasan tentang html space. Space pada HTML sangat penting untuk dipahami untuk bisa bekerja dengan HTML. Jika Anda tertarik untuk belajar HTML pemula, Anda dapat membaca artikel-artikel Codekey seri tutorial HTML sebelumnya.

Codekey tidak hanya menyediakan artikel pembelajaran HTML, tetapi juga bahasa pemrograman lainnya. Kami menyediakan tutorial, materi, pembahasan, tips, serta trik untuk Anda belajar bahasa pemrograman. Pastikan Anda mendapatkan update artikel-artikel terbaru dari situs kami.