Tampak bagaimana ruang putih dalam HTML diperlakukan oleh browser
Jika Anda seorang perancang web awal, salah satu dari banyak hal yang harus Anda pahami sejak awal adalah bagaimana ruang putih dalam kode situs ditangani oleh peramban web.
Sayangnya, cara browser menangani ruang putih pada mulanya tidak begitu intuitif, terutama jika Anda menggunakan HTML dan membandingkannya dengan bagaimana ruang putih ditangani dalam program pengolah kata, yang mungkin lebih Anda kenal.
Dalam perangkat lunak pengolah kata, Anda dapat menambahkan banyak jarak atau tab dalam dokumen dan jarak tersebut akan tercermin dalam tampilan konten dokumen. Ini tidak terjadi dengan HTML atau dengan halaman web. Dengan demikian, mempelajari bagaimana ruang putih, memang, ditangani oleh peramban web sangat penting.
Spasi dalam Print
Dalam perangkat lunak pengolah kata, tiga karakter spasi putih utama adalah ruang, tab, dan pengantaran carriage. Masing-masing bertindak dengan cara yang berbeda, tetapi dalam HTML, browser membuat semuanya pada dasarnya sama. Apakah Anda menempatkan satu spasi atau 100 spasi di markup HTML Anda, atau mencampur jarak Anda dengan tab dan pengembalian carriage, semua ini akan dikurangkan ke satu ruang ketika halaman dirender oleh browser. Dalam terminologi desain web, ini dikenal sebagai runtuhnya ruang putih. Anda tidak dapat menggunakan tombol spasi khusus ini untuk menambahkan spasi putih di halaman web karena browser menciutkan beberapa spasi ke dalam hanya satu ruang saat ditampilkan di browser,
Mengapa Seseorang Menggunakan Tab?
Biasanya, ketika orang menggunakan tab di dokumen teks, mereka menggunakannya untuk alasan tata letak atau untuk mendapatkan teks untuk pindah ke tempat tertentu atau menjadi jarak tertentu dari elemen lain. Dalam desain web, Anda tidak dapat menggunakan karakter ruang yang disebutkan di atas untuk mencapai gaya visual atau kebutuhan tata letak.
Dalam desain web, penggunaan karakter spasi ekstra dalam kode akan murni untuk kemudahan membaca kode itu. Desainer web dan pengembang sering menggunakan tab untuk mengindentifikasi kode sehingga mereka dapat melihat elemen mana yang merupakan turunan dari elemen lain - tetapi indentasi tersebut tidak memengaruhi tata letak visual laman itu sendiri. Untuk perubahan tata letak visual yang dibutuhkan, Anda perlu beralih ke CSS (lembar gaya berjenjang).
Menggunakan CSS untuk Membuat Tab dan Spasi HTML
Situs web saat ini dibangun dengan pemisahan struktur dan gaya. Struktur halaman ditangani oleh HTML sementara gaya ditentukan oleh CSS. Ini berarti bahwa untuk membuat jarak atau mencapai tata letak tertentu, Anda harus beralih ke CSS dan tidak mencoba hanya menambahkan karakter spasi ke kode HTML.
Jika Anda mencoba menggunakan tab untuk membuat kolom teks, Anda dapat menggunakan elemen
Jika data yang Anda susun adalah data tabel, Anda dapat menggunakan tabel untuk menyelaraskan data yang Anda inginkan. Tabel sering mendapatkan rap buruk dalam desain web karena mereka disalahgunakan sebagai alat tata letak murni selama bertahun-tahun, tetapi tabel masih berlaku secara sempurna jika konten Anda berisi data tabular tersebut.
Margin, Padding, dan Teks-Indent
Cara paling umum untuk membuat jarak dengan CSS adalah dengan menggunakan salah satu gaya CSS berikut:
- batas
- lapisan
- indentasi teks
Misalnya, Anda dapat mengindent baris pertama paragraf seperti tab dengan CSS berikut (perhatikan bahwa ini mengasumsikan paragraf Anda memiliki atribut class "pertama" yang melekat padanya):
p.first {
text-indent: 5em;
}
Paragraf ini sekarang akan menjorok sekitar 5 karakter.
Anda juga dapat menggunakan properti margin atau padding di CSS untuk menambahkan spasi ke bagian atas, bawah, kiri, atau kanan (atau kombinasi dari sisi tersebut) dari suatu elemen. Pada akhirnya, Anda dapat mencapai segala jenis jarak yang dibutuhkan dengan beralih ke CSS.
Memindahkan Teks Lebih dari Satu Ruang Tanpa CSS
Jika yang Anda inginkan adalah teks Anda dipindahkan lebih dari satu ruang dari item sebelumnya, Anda dapat menggunakan ruang non-breaking.
Untuk menggunakan ruang non-breaking, Anda cukup menambahkan & nbsp; sebanyak yang Anda butuhkan dalam markup HTML Anda.
Misalnya, jika Anda ingin memindahkan kata Anda sebanyak lima spasi, Anda dapat menambahkan kata-kata berikut sebelum kata.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;HTML menghormati ini dan tidak akan meruntuhkannya ke satu ruang. Namun, ini dianggap sebagai praktik yang sangat buruk karena menambahkan markup HTML tambahan ke dokumen hanya untuk mencapai kebutuhan tata letak. Mengacu kembali pada pemisahan struktur dan gaya, Anda harus menghindari penambahan ruang non-breaking hanya untuk mencapai efek tata letak yang diinginkan dan sebaiknya menggunakan margin dan padding CSS sebagai gantinya.