9 Kesalahan yang Tidak Seharusnya Anda Lakukan Saat Membuat Halaman Web

Iklan

Membuat halaman web dengan HTML dan CSS adalah cukup mudah Cara Membuat Website: Untuk PemulaHari ini saya akan membimbing Anda melalui proses pembuatan situs web lengkap dari awal. Jangan khawatir jika ini terdengar sulit. Saya akan memandu Anda melalui setiap langkah. Baca lebih banyak . Tetapi mudah untuk membuat kesalahan, dan ada beberapa hal yang mungkin tidak Anda pikirkan. Sebagian besar waktu, kesalahan kecil ini tidak akan membuat banyak perbedaan.

Tetapi dalam jangka panjang, mereka dapat membuat hidup Anda lebih sulit. Kesembilan kesalahan ini mudah dilakukan, tetapi jika Anda menghindarinya lebih awal daripada kemudian, halaman Anda akan terlihat lebih baik, lebih mudah dipelihara, dan berfungsi sesuai keinginan Anda.

1. Styling Inline

Salah satu hal hebat tentang HTML dan CSS adalah Anda dapat memformat baris teks apa saja - kata apa saja, benar-benar - kapan pun Anda mau. Tetapi itu tidak berarti Anda harus memanfaatkan kemampuan ini.

Berikut adalah contoh gaya sebaris yang mungkin Anda gunakan untuk membuat paragraf lebih besar dari paragraf di sekitarnya dan sorot dalam warna yang berbeda:

Teks Anda di sini.

Ini memberikan paragraf a Gaya CSS Pelajari HTML dan CSS dengan Tutorial Langkah demi Langkah IniIngin tahu tentang HTML, CSS, dan JavaScript? Jika Anda berpikir bahwa Anda memiliki keahlian untuk mempelajari cara membuat situs web dari awal - berikut adalah beberapa tutorial langkah demi langkah yang patut dicoba. Baca lebih banyak yang berakhir dengan kesimpulan paragraf. Tampaknya cukup efisien, bukan?

Ada satu masalah besar dengan itu: jika Anda ingin mengubah banyak hal di seluruh situs web Anda, Anda harus pergi dan menemukan setiap contoh gaya inline dan mengubahnya. Jika Anda memiliki 100 paragraf berbeda yang ukuran teks dan biru 120%, Anda harus menemukan semua 100 dan mengubahnya ke apa pun yang Anda putuskan adalah format yang lebih baik.

Alih-alih, gunakan lembar gaya CSS. Berikut gaya yang Anda gunakan untuk paragraf di atas:

penting {ukuran: 120%; warna biru; }

Sekarang, alih-alih menggunakan gaya sebaris, Anda cukup menggunakan baris ini:

Teks Anda di sini.

Dan paragraf Anda akan besar dan biru. Dan ketika Anda membuat perubahan ke kelas "penting" di CSS Anda, semuanya akan berubah.

2. Tabel untuk Tata Letak

Orang-orang biasa menggunakan tabel untuk memformat tata letak halaman secara teratur. Dengan menggunakan tabel, Anda dapat mengatur elemen pada halaman Anda dalam kolom dan baris, serta menerapkan keberpihakan dan gaya yang berbeda. Bahkan tabel bersel tunggal akan digunakan untuk mendapatkan konten yang selaras dengan benar. Tetapi penggunaan tabel ini umumnya disukai.

Sama seperti gaya inline, menggunakan CSS dan bukan tabel HTML untuk tata letak lebih mudah dipertahankan. Sekali lagi, jika Anda ingin membuat perubahan di lusinan atau ratusan halaman, jauh lebih mudah untuk mengedit stylesheet Anda daripada melalui setiap halaman dan mengubah tabel.

Selain perawatan yang lebih mudah, membaca tata letak CSS cenderung sedikit lebih mudah daripada membaca tabel HTML. Terutama jika Anda akhirnya bersarang banyak tingkat tabel dalam satu sama lain. Mungkin tidak super mudah untuk bolak-balik antara dokumen HTML Anda dan stylesheet Anda untuk melihat apa yang sebenarnya terjadi, tetapi konten halaman Anda akan lebih jelas dan lebih mudah untuk diedit.

Menggunakan tabel di sana-sini untuk membagi halaman menjadi kolom bukanlah dosa berat. Terkadang lebih mudah dan lebih cepat daripada bermain-main dengan CSS. Tetapi jika Anda membuat tabel raksasa bertingkat, Anda harus mempertimbangkan memformat ulang dengan CSS.

3. HTML yang sudah usang

Seperti bahasa apa pun, HTML berubah secara teratur. Tag yang dikenali secara resmi berubah, dan beberapa menjadi usang. Meskipun tag itu masih berfungsi, yang terbaik adalah menghindarinya.

Misalnya, jika Anda terbiasa menggunakan tag untuk cetak tebal dan beri tanda miring, Anda ketinggalan zaman. dan (untuk "penekanan") sekarang adalah tag standar.

, , , , dan lainnya juga sudah usang.

Sebagian besar tag yang sudah usang diganti dengan CSS, jadi Anda harus menggunakan gaya (lebih disukai bukan yang sebaris) untuk mendapatkan efek yang sama. Jika Anda tidak yakin bagaimana cara mengganti tag usang atau jika tag tertentu masih digunakan, periksa dokumentasi HTML resmi atau jalankan pencarian cepat.

4. JavaScript sebaris

Beberapa halaman web menggunakan JavaScript untuk tambahkan fungsionalitas tambahan JavaScript dan Pengembangan Web: Menggunakan Model Objek DokumenArtikel ini akan memperkenalkan Anda pada kerangka dokumen yang berfungsi dengan JavaScript. Memiliki pengetahuan tentang model objek dokumen abstrak ini, Anda dapat menulis JavaScript yang berfungsi pada halaman web apa pun. Baca lebih banyak . Itu dapat membuat halaman web interaktif, memvalidasi teks saat dimasukkan, menambahkan animasi, memberikan respons terhadap tindakan pengguna, dan sebagainya. Singkatnya, ini dapat membuat halaman lebih bermanfaat dengan memberikan perilaku tambahan.

Sama seperti CSS, Anda dapat menambahkan JavaScript sebaris ke HTML Anda. Seperti halnya CSS, ini umumnya tidak disarankan. Selain berpotensi lebih sulit untuk dipertahankan, ada beberapa alasan lain yang menuntut peringatan ini.

JavaScript sebaris dapat menggunakan jumlah bandwidth yang lebih besar daripada skrip yang ditautkan dari file yang berbeda. Proses yang disebut minification mengkompresi HTML dan CSS sebelum mengirimnya ke pengguna, membutuhkan lebih sedikit bandwidth melalui koneksi broadband atau seluler. Namun JavaScript sebaris, tidak dapat diperkecil. Itu juga tidak akan di-cache, sedangkan file JavaScript terpisah bisa di-cache.

Semua hal ini menjadikan inline JavaScript lebih intensif bandwidth.

Juga lebih sulit untuk melakukan debug, karena Anda dapat menggunakan validator JavaScript untuk file JavaScript... tetapi itu tidak akan berfungsi pada skrip inline. Dan, sekali lagi, ini membuat HTML lebih bersih dan lebih mudah dirawat.

5. Beberapa Tag H1

Tag heading sangat bagus. Mereka membuat halaman lebih mudah dibaca, mereka dapat memberi Anda dorongan SEO, dan mereka dapat digunakan untuk menekankan poin-poin tertentu.

Tetapi ada enam level tag heading karena suatu alasan. Seharusnya hanya ada satu tag H1 di halaman Anda. Dan itu sering kali judul halaman (terutama di blog dan situs sejenis). Anda mungkin berpikir bahwa menempatkan banyak kata kunci dalam tag H1 akan membuat Google lebih mungkin untuk mengambilnya dan memberi peringkat situs Anda lebih tinggi dalam hasil.

Tetapi yang benar-benar dilakukannya adalah membuat halaman Anda lebih membingungkan dan sulit dibaca. Yang akan meniadakan manfaat SEO yang mungkin Anda lihat.

Gunakan H2, H3, dan tag heading lainnya untuk menguraikan halaman Anda dengan lebih baik. Tingkat tajuk seharusnya memberikan pembaca Anda gambaran betapa pentingnya bagian berikut ini. Jika Anda menyesatkan mereka, mereka akan mengetahuinya, dan mereka tidak akan senang.

6. Lewati Gambar Alts

Setiap gambar dapat diberi atribut "alt" yang menampilkan baris teks tertentu jika gambar tidak dapat ditampilkan. Ini mungkin tidak tampak seperti masalah besar, terutama dengan browser modern (baik desktop dan mobile) yang dapat menampilkan apa saja.

Tetapi tidak menambahkan atribut alt adalah kesalahan besar, terutama di era penjelajahan mobile yang konstan. Koneksi seluler tidak selalu luar biasa, dan jika browser tidak dapat memuat gambar, pembaca Anda tidak tahu apa yang seharusnya dilihat di sana. Atribut alt dapat memperbaikinya.

Dan jika seseorang menggunakan pembaca layar VoiceOver Membuat Perangkat Apple Lebih Dapat Diakses Dari SebelumnyaPresiden American Foundation of the Blind berpendapat bahwa "Apple telah berbuat lebih banyak untuk aksesibilitas daripada perusahaan lain hingga saat ini," - dan VoiceOver memainkan peran besar dalam hal itu. Baca lebih banyak atau fitur aksesibilitas lainnya, atribut alt itu mungkin adalah semua yang mereka dapatkan dari gambar.

Tentu saja, ada manfaat SEO potensial juga. Mesin pencari dapat mengindeks atribut alt pendek dan deskriptif. Tetapi manfaat terbesar di sini adalah membantu pembaca Anda.

7. Tidak Menutup Tag

Ada beberapa tag HTML yang bisa Anda hindari tanpa ditutup

dan

. Browser tahu bahwa ketika Anda memulai paragraf atau item daftar lain, yang sebelumnya sudah berakhir. Tetapi itu tidak berarti Anda harus melewatkan tag penutup.

Pertama dan terutama, meskipun ada kemajuan dalam teknologi peramban, pasti ada kemungkinan bahwa peramban akan menampilkan konten Anda secara tidak patut jika Anda belum menutup tag Anda. Dan menerapkan gaya dapat menghasilkan beberapa hasil yang tidak terduga, seperti Pengguna Stack Exchange menunjukkan.

Apa yang terjadi adalah bahwa browser mengharapkan tag penutup. Mereka tidak benar-benar membutuhkannya... tetapi mereka pasti akan mendapat manfaat dari memiliki HTML yang benar ketika mereka mencoba untuk menampilkan halaman Anda.

Untungnya, tidak perlu banyak untuk menutup tag Anda, terutama jika Anda menggunakan editor HTML yang baik.

8. Tidak Termasuk DOCTYPE

Di awal dokumen HTML, Anda biasanya akan melihat deklarasi DOCTYPE, seperti ini:

Ini adalah sesuatu yang tidak sering dibicarakan, tetapi merupakan elemen penting di halaman Anda. Deklarasi DOCTYPE memberitahu browser jenis HTML apa yang Anda gunakan. Ini memungkinkannya merender HTML dengan benar.

Jika Anda melewatkan deklarasi DOCTYPE, halaman akan ditampilkan dalam "mode quirks." Ini adalah pertahanan browser modern terhadap halaman web kuno. Dan itu mengubah cara tampilan halaman Anda. Sekilas Mode quirks Firefox menunjukkan bahwa sensitivitas huruf berubah, properti font tidak mewarisi ke dalam tabel, ukuran font dihitung secara berbeda, dan gambar tanpa atribut alt terkadang ditampilkan secara tidak benar.

Sebagian besar dari hal-hal ini relatif kecil. Tetapi jika Anda ingin halaman Anda ditampilkan dengan benar, Anda harus memastikan bahwa browser memiliki mode standar penuh yang diaktifkan.

Dan untuk melakukan itu, Anda memerlukan DOCTYPE. (Jika Anda tidak yakin apa yang harus digunakan, gunakan saja .)

9. Abaikan Markah Skema

Markup skema membantu mesin pencari mendapatkan gagasan yang lebih baik tentang apa yang ada di halaman Anda. Lebih khusus lagi, markup itu memberi tahu mesin pencari tentang apa yang Anda tulis di setiap bagian.

Misalnya, dalam sebuah artikel, Anda dapat menggunakan markup skema untuk memberi tahu mesin pencari judul, penulis, tanggal, penerbit, dan informasi berguna lainnya tentang sebuah artikel.

Ada skema untuk film, buku, organisasi, orang, restoran, produk, tempat, aksi, berbagai jenis data, musik, pahatan, pemesanan, layanan, ATM, tempat pembuatan bir, dan hampir semua hal lain yang dapat Anda pikirkan. Sangat menakjubkan.

Anda pasti bisa pergi tanpa menggunakan markup skema. Halaman Anda akan ditampilkan dengan benar tanpa itu. Pembaca Anda bahkan tidak akan tahu itu ada di sana. Tetapi ada banyak yang bisa diperoleh dari memasukkan markup ini. Mesin pencari akan dapat memberikan informasi yang lebih rinci dan bermanfaat tentang halaman Anda, termasuk cuplikan kaya.

Dan dengan alat markup skema Google, prosesnya sebenarnya cukup mudah.

Biasakan Praktik Terbaik HTML

Membuat praktik terbaik ini menjadi kebiasaan bisa memakan waktu cukup lama. Dan kadang-kadang bisa terasa seperti Anda mengambil banyak waktu ekstra untuk sesuatu yang tidak membuat Anda terlalu banyak. Tapi pastikan itu milikmu HTML dan CSS Pelajari HTML dan CSS dengan Tutorial Langkah demi Langkah IniIngin tahu tentang HTML, CSS, dan JavaScript? Jika Anda berpikir bahwa Anda memiliki keahlian untuk mempelajari cara membuat situs web dari awal - berikut adalah beberapa tutorial langkah demi langkah yang patut dicoba. Baca lebih banyak ditata dengan baik, mudah dikerjakan, dan dirawat akan menghemat banyak waktu dalam jangka panjang.

Kebiasaan baik apa lagi yang menurut Anda berguna saat membuat halaman web? Apakah Anda tidak setuju dengan praktik di atas? Bagikan pemikiran Anda dalam komentar di bawah!