Membuat spasi dan pemisahan fisik elemen dalam HTML bisa jadi sulit dipahami oleh desainer web pemula. Hal ini karena HTML memiliki properti yang dikenal sebagai "spasi runtuh." baik Anda mengetik 1 spasi atau 100 dalam kode HTML, browser web secara otomatis menciutkan spasi tersebut menjadi hanya satu spasi. Ini berbeda dari program seperti Microsoft Word, yang memungkinkan pembuat dokumen menambahkan beberapa spasi untuk memisahkan kata dan elemen lain dari dokumen tersebut. Ini bukan cara kerja jarak desain situs web.
Jadi, bagaimana Anda menambahkan spasi putih di HTML yang muncul di halaman web yang Anda buat? Artikel ini membahas beberapa cara yang berbeda.
Spasi dalam HTML Dengan CSS
Cara yang lebih disukai untuk menambahkan spasi di HTML Anda adalah dengan Cascading Style Sheets (CSS). CSS harus digunakan untuk menambahkan aspek visual halaman web, dan karena spasi adalah bagian dari karakteristik desain visual halaman, CSS adalah tempat yang Anda inginkan untuk melakukannya.
Di CSS, Anda dapat menggunakan properti margin atau padding untuk menambahkan ruang di sekitar elemen. Selain itu, properti indentasi teks menambahkan ruang ke bagian depan teks, seperti untuk paragraf indentasi.
Berikut adalah contoh cara menggunakan CSS untuk menambahkan ruang di depan semua paragraf Anda. Tambahkan CSS berikut ke Anda luar atau intern lembar gaya:
p {
indentasi teks: 3em;
}
Spasi dalam HTML Di Dalam Teks Anda
Jika Anda hanya ingin menambahkan satu atau dua spasi tambahan ke teks Anda, Anda dapat menggunakan ruang non-breaking. Karakter ini bertindak seperti karakter spasi standar, hanya saja tidak runtuh di dalam browser.
Berikut adalah contoh cara menambahkan lima spasi di dalam satu baris teks:
Teks ini memiliki lima spasi tambahan di dalamnya
Menggunakan HTML:
Teks ini memiliki lima spasi tambahan di dalamnya
Anda juga dapat menggunakan
tag untuk menambahkan jeda baris tambahan.
Kalimat ini memiliki lima jeda baris pada akhirnya
Mengapa Spasi dalam HTML Adalah Ide Buruk
Meskipun kedua opsi ini berfungsi – elemen spasi tanpa putus memang akan menambahkan spasi ke teks dan baris Anda jeda akan menambahkan spasi di bawah paragraf yang ditunjukkan di atas – ini bukan cara terbaik untuk membuat spasi di. Anda halaman web. Menambahkan elemen ini ke HTML Anda menambahkan informasi visual ke kode alih-alih memisahkan struktur halaman (HTML) dari gaya visual (CSS). Praktik terbaik menentukan bahwa ini harus dipisahkan karena sejumlah alasan, termasuk kemudahan pembaruan di masa mendatang dan ukuran file secara keseluruhan dan kinerja halaman.
Jika Anda menggunakan lembar gaya eksternal untuk mendikte semua gaya dan spasi Anda, maka mengubah gaya tersebut untuk seluruh situs mudah dilakukan, karena Anda hanya perlu memperbarui satu lembar gaya itu.
Perhatikan contoh kalimat di atas dengan lima
tag di ujungnya. Jika Anda menginginkan jumlah spasi di bagian bawah setiap paragraf, Anda perlu menambahkan kode HTML itu ke setiap paragraf di seluruh situs Anda. Itu adalah jumlah markup ekstra yang akan membuat halaman Anda membengkak. Selain itu, jika Anda memutuskan bahwa jarak ini terlalu banyak atau terlalu sedikit, dan Anda ingin mengubahnya sedikit, Anda perlu mengedit setiap paragraf di seluruh situs web Anda. Tidak terima kasih!
Alih-alih menambahkan elemen spasi ini ke kode Anda, gunakan CSS.
p {
bantalan-bawah: 20px;
}
Satu baris CSS itu akan menambahkan spasi di bawah paragraf halaman Anda. Jika Anda ingin mengubah spasi itu di masa mendatang, edit satu baris ini (bukan seluruh kode situs Anda) dan Anda siap melakukannya!
Sekarang, jika Anda perlu menambahkan satu spasi di satu bagian situs web Anda, gunakan a
tag atau satu ruang non-breaking bukanlah akhir dunia, tetapi Anda harus berhati-hati. Menggunakan opsi spasi HTML sebaris ini bisa menjadi lereng yang licin. Sementara satu atau dua mungkin tidak merusak situs Anda, jika Anda terus menyusuri jalan itu, Anda akan menimbulkan masalah pada halaman Anda. Pada akhirnya, Anda lebih baik beralih ke CSS untuk spasi HTML, dan semua kebutuhan visual halaman web lainnya.