Setiap kali saya mengunjungi situs web yang indah, saya selalu melihat kode sumbernya. Ini seperti memiliki sepasang kacamata sinar-X dan mampu melihat siapa pun – bahkan melalui daun ara. Ini hanyalah masalah biasa! Saya tidak sabar untuk mengetahui apakah website cantik ini ditulis dengan kode indah yang sama, atau hanya keindahan di dalam keindahan. Kode? Kecantikan? tentu! Bagaimanapun, kode itu seperti puisi. (Catatan terjemahan: "Kode adalah puisi" adalah slogan dari sistem blogging terkenal WordPress.) Ini hanyalah HTML paling dasar. Secara alami, HTML ini tidak serumit dan elegan seperti bahasa dinamis lainnya, namun tetap mempertahankan pesona yang diberikan olehnya pencipta.Sentuhan artistik.
Ini membuat saya mulai berpikir, bagaimana cara membuat kodenya menjadi indah? Dengan HTML, ini semua adalah pekerjaan manual. Mari kita lihat bagaimana bahasa markup dapat mencapai keadaan yang indah.
Gambarnya cukup besar (2000x2000) sehingga Anda dapat mencetaknya dan menempelkannya di loker pribadi Anda dan mengesankan teman-teman Anda. Meski begitu, ini memang ukuran yang membingungkan. Saya akan merilis gambar PSD asli untuk dimodifikasi semua orang.
HTML5 - HTML5 dan elemen barunya menghadirkan keindahan yang belum pernah ada sebelumnya.
DOCTYPE - HTML5 memiliki tipe dokumen terbaik.
Indentasi - Tab dan spasi digunakan untuk membuat indentasi kode guna menampilkan dengan benar hubungan induk-anak antara tag dan menekankan struktur hierarki.
Charset - Deklarasi charset harus dibuat di header sebelum semua konten.
Judul - Judul situs web sederhana dan jelas. Mulailah dengan menjelaskan fungsi halaman, setelah pemisah, dan diakhiri dengan judul website.
CSS - hanya menggunakan style sheet sederhana (tipe media dideklarasikan dalam style sheet), dan hanya ditargetkan untuk browser yang baik. IE6 dan yang lebih rendah akan mendapatkan style sheet umum.
Isi - Dengan memberikan ID pada isi , Anda dapat menatanya secara unik untuk halaman berbeda tanpa memerlukan markup lebih lanjut.
JavaScript - Disebut jQuery (perpustakaan skrip JavaScript terindah) dari Google. Hanya satu file JavaScript yang dimuat. Setiap skrip direferensikan di bagian bawah halaman.
Jalur File - Untuk efisiensi, gunakan jalur relatif untuk sumber daya situs. Dari perspektif adaptasi terhadap pencetakan ulang, file konten (seperti gambar) menggunakan jalur absolut.
Atribut Gambar - Gambar berisi teks alternatif, terutama jika gambar hilang, tetapi juga dapat digunakan untuk verifikasi. Untuk meningkatkan efisiensi rendering, yang terbaik adalah menentukan lebar dan tinggi gambar.
Konten Utama Pertama - Konten utama halaman harus berada setelah markup dasar dan navigasi, dan sebelum konten tambahan apa pun (seperti sidebar).
Elemen Tingkat Blok Deskriptif yang Sesuai - HEADER, NAV, SECTION, ARTICLE, ASIDE - " bagian deskripsi " baru ini akan mendeskripsikan konten lebih baik daripada DIV sebelumnya.
Hierarki – Penggunaan huruf besar pada tag judul akan efektif dan mengikuti “ hierarki ” yang jelas.
Tag Deskriptif yang Sesuai - Daftar diberi tag sesuai dengan kebutuhan yang berbeda: daftar yang tidak disortir, diurutkan, dan khusus yang tidak umum digunakan.
Termasuk Konten Umum – Konten yang sama yang muncul di halaman berbeda sebaiknya dimasukkan ke dalam halaman dari sisi server. (Dengan metode, bahasa, CMS apa pun, apa pun yang cocok untuk Anda.)
Kelas Semantik – Tidak hanya perlu menyiapkan nama elemen yang benar, tetapi juga memastikan bahwa nama kelas dan ID bersifat semantik : mereka dapat memainkan peran deskriptif bahkan tanpa instruksi khusus. (Misalnya, "col" lebih baik daripada "kiri")
Kelas – Ketika beberapa elemen perlu menggunakan gaya yang serupa, cobalah untuk menentukan kelas yang sama untuk elemen tersebut. (Dapat digunakan kembali)
ID – Jika elemen hanya muncul satu kali di halaman, coba tentukan ID untuk elemen tersebut, dan jangan tentukan ID yang sama untuk elemen yang berbeda.
Elemen Dinamis – Efek dinamis ditambahkan hanya jika benar-benar diperlukan.
Karakter yang Dikodekan – Ketika karakter khusus muncul, harap perhatikan pengkodean karakter .
Bebas Dari Penataan Gaya - Segala sesuatu di halaman tidak ada hubungannya dengan penataan gaya , dan Anda bahkan tidak perlu menentukan gaya apa yang Anda inginkan. Segala sesuatu di halaman dibatasi pada tiga item berikut: sumber daya situs yang diperlukan, konten, deskripsi.
Komentar - Saat melihat kode, konten yang tidak memerlukan penekanan khusus atau tidak terlalu jelas akan disertakan dalam komentar .
Valid - Markup seluruh situs mematuhi validasi W3C. Perhatikan penutupan tag, pastikan atribut yang diperlukan, hindari metode yang ketinggalan jaman, dll.