CSS adalah cara terbaik untuk membuat desain halaman web
Belajar menulis tata letak CSS bisa jadi rumit, terutama jika Anda terbiasa menggunakan tabel untuk membuat tata letak halaman web yang mewah. Tetapi sementara HTML5 memungkinkan tabel untuk tata letak, itu bukan ide yang bagus.
Tabel Tidak Dapat Diakses
Sama seperti mesin telusur, sebagian besar pembaca layar membaca laman web dalam urutan yang ditampilkan dalam HTML. Dan tabel bisa sangat sulit bagi pembaca layar untuk mengurai. Ini karena konten dalam tata letak tabel, meskipun linear, tidak selalu masuk akal ketika dibaca dari kiri ke kanan dan dari atas ke bawah. Plus, dengan nested tables, dan berbagai rentang pada sel tabel dapat membuat halaman sangat sulit untuk diketahui.
Ini adalah alasan bahwa spesifikasi HTML5 merekomendasikan terhadap tabel untuk tata letak dan mengapa HTML 4.01 melarangnya. Halaman web yang dapat diakses memungkinkan lebih banyak orang untuk menggunakannya dan merupakan tanda desainer profesional.
Dengan CSS, Anda dapat menentukan bagian sebagai milik di sisi kiri halaman tetapi letakkan di bagian terakhir dalam HTML. Kemudian pembaca layar dan mesin pencari akan membaca bagian-bagian penting (konten) pertama dan bagian yang kurang penting (navigasi) terakhir.
Tabel Adalah Rumit
Bahkan jika Anda membuat tabel dengan editor web, halaman web Anda akan tetap sangat rumit dan sulit dikelola. Kecuali untuk desain halaman web yang paling sederhana, kebanyakan tabel tata letak memerlukan penggunaan banyak atribut dan tabel bersarang.
Membangun meja mungkin terasa mudah saat Anda melakukannya, tetapi Anda harus mempertahankannya. Enam bulan ke depan mungkin tidak mudah mengingat mengapa Anda bersarang di meja atau berapa banyak sel berturut-turut dan sebagainya. Plus, jika Anda mempertahankan halaman web sebagai anggota tim, Anda harus menjelaskan kepada setiap orang bagaimana tabel bekerja atau mengharapkan mereka untuk mengambil waktu tambahan ketika mereka perlu melakukan perubahan.
CSS dapat menjadi rumit juga, tetapi membuat presentasi terpisah dari HTML dan membuatnya lebih mudah dipertahankan dalam jangka panjang. Plus, dengan tata letak CSS Anda dapat menulis satu file CSS, dan menata semua halaman Anda agar terlihat seperti itu. Dan ketika Anda ingin mengubah tata letak situs Anda, Anda cukup mengubah satu file CSS, dan seluruh situs menyimpang — tidak lagi melalui setiap halaman satu per satu untuk memperbarui tabel untuk memperbarui tata letak.
Tabel-Tabel Tidak Lentur
Meskipun dimungkinkan untuk membuat tata letak tabel dengan lebar persentase, mereka sering lebih lambat memuat dan secara dramatis dapat mengubah tata letak tampilan Anda. Tetapi jika Anda menggunakan lebar yang ditentukan untuk tabel Anda, Anda berakhir dengan tata letak yang sangat kaku yang tidak akan terlihat bagus pada monitor yang berukuran berbeda dari monitor Anda sendiri.
Membuat tata letak fleksibel yang terlihat bagus pada banyak monitor, browser, dan resolusi relatif mudah. Faktanya, dengan kueri media CSS, Anda dapat membuat desain terpisah untuk berbagai ukuran layar.
Tabel Bersarang Memuat Lebih Lambat Dibandingkan CSS untuk Desain yang Sama
Cara paling umum untuk membuat tata letak mewah dengan tabel adalah dengan tabel "sarang". Ini berarti bahwa satu (atau lebih) tabel ditempatkan di dalam yang lain. Semakin banyak tabel yang disarangkan, semakin lama waktu yang dibutuhkan browser web untuk merender halaman.
Dalam banyak kasus, tata letak tabel menggunakan lebih banyak karakter untuk dibuat daripada desain CSS. Dan lebih sedikit karakter berarti lebih sedikit untuk diunduh.
Tabel Dapat Menyakiti Pengoptimalan Mesin Telusur
Tabel paling umum yang dibuat tata letak memiliki bilah navigasi di sisi kiri halaman dan konten utama di sebelah kanan. Saat menggunakan tabel, ini (umumnya) mengharuskan konten pertama yang ditampilkan dalam HTML adalah bilah navigasi sebelah kiri. Mesin pencari mengkategorikan halaman berdasarkan konten, dan banyak mesin menentukan bahwa konten yang ditampilkan di bagian atas halaman lebih penting daripada konten lainnya. Jadi, halaman dengan navigasi sebelah kiri terlebih dahulu, akan tampak memiliki konten yang kurang penting daripada navigasi.
Dengan menggunakan CSS, Anda dapat menempatkan konten penting pertama dalam HTML Anda dan kemudian menggunakan CSS untuk menentukan di mana itu harus ditempatkan dalam desain. Ini berarti bahwa mesin pencari akan melihat konten penting terlebih dahulu, bahkan jika desain menempatkannya lebih rendah di bawah halaman.
Tabel Jangan Selalu Cetak Baik
Banyak desain meja tidak dicetak dengan baik karena terlalu lebar untuk printer. Jadi, untuk membuatnya cocok, browser akan memotong tabel dan mencetak bagian di bawah ini yang menghasilkan halaman yang sangat terputus-putus. Terkadang Anda berakhir dengan halaman yang terlihat oke, tetapi seluruh sisi kanan hilang. Halaman lain akan mencetak bagian pada berbagai lembar.
Dengan CSS Anda dapat membuat style sheet terpisah hanya untuk mencetak halaman.
Tabel untuk Tata Letak Tidak Valid dalam HTML 4.01
Spesifikasi HTML 4 menyatakan: "Tabel tidak boleh digunakan semata-mata sebagai sarana untuk menyusun konten dokumen karena ini dapat menimbulkan masalah saat menampilkan ke media non-visual."
Jadi, jika Anda ingin menulis HTML 4.01 yang valid, Anda tidak dapat menggunakan tabel untuk tata letak. Anda seharusnya hanya menggunakan tabel untuk data tabular. Dan data tabular umumnya terlihat seperti sesuatu yang mungkin Anda tampilkan dalam spreadsheet atau mungkin database.
Tetapi HTML5 mengubah aturan dan sekarang tabel untuk tata letak, sementara tidak disarankan, sekarang adalah HTML yang valid. Spesifikasi HTML5 menyatakan: "Tabel tidak boleh digunakan sebagai alat bantu tata letak."
Karena tabel untuk tata letak sulit bagi pembaca layar untuk membedakan, seperti yang saya sebutkan di atas.
Menggunakan CSS untuk memposisikan dan menata halaman Anda adalah satu-satunya cara HTML 4.01 yang valid untuk mendapatkan desain yang Anda gunakan untuk membuat tabel. Dan HTML5 sangat menyarankan metode ini juga.
Tabel untuk Tata Letak Dapat Mempengaruhi Prospek Kerja Anda
Karena semakin banyak perancang baru belajar HTML dan CSS, keterampilan Anda dalam membangun tata letak tabel akan semakin berkurang permintaannya. Ya, memang benar bahwa pelanggan biasanya tidak memberi tahu Anda teknologi tepat yang harus Anda gunakan untuk membangun laman web mereka. Tetapi mereka menanyakan hal-hal seperti:
- Halaman web yang dapat diakses: desain yang dapat dilihat oleh pembaca layar sedang diamanatkan oleh banyak negara dan perusahaan menemukan aksesibilitas semakin penting setiap hari.
- Halaman web yang dapat dipertahankan: desain yang dapat mereka bawa meskipun Anda tidak akan mempertahankannya di masa mendatang.
- Desain fleksibel: desain yang berfungsi di banyak browser, resolusi, dan perangkat.
- Halaman download cepat: kecepatan menjadi semakin penting, bahkan untuk SEO.
- Desain yang dapat dicetak: halaman yang dicetak tanpa skrip khusus atau halaman tambahan.
Jika Anda tidak dapat memberikan apa yang diminta klien, mereka akan berhenti datang kepada Anda untuk desain, mungkin tidak hari ini, tetapi mungkin tahun depan atau tahun berikutnya. Dapatkah Anda benar-benar membiarkan bisnis Anda menderita karena Anda tidak mau mulai mempelajari teknik yang telah digunakan sejak akhir 1990-an?
The Moral: Belajar Menggunakan CSS
CSS mungkin sulit dipelajari, tetapi apa pun yang berharga adalah sepadan dengan usaha. Jangan jaga keterampilan Anda dari stagnan. Mempelajari CSS dan membangun halaman web Anda sebagaimana seharusnya dibuat - dengan CSS untuk tata letak.