Setiap kali saya mengunjungi situs web yang indah, saya selalu melihat kode sumbernya. Ini seperti memiliki sepasang kacamata sinar-X dan dapat 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. (Terjemahan: "Kode adalah puisi" adalah slogan dari sistem blog terkenal WordPress .) Ini hanyalah HTML paling dasar. Secara alami, ini tidak serumit dan elegan seperti bahasa dinamis lainnya, tetapi tetap mempertahankan seni yang diberikan oleh penciptanya .
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 - jQuery (perpustakaan skrip JavaScript terindah) dipanggil 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 muncul 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.
Hirarki – Menggunakan huruf kapital pada tag judul akan berhasil dan mengikuti “ hierarki ” yang jelas.
Tag Deskriptif yang Sesuai – Tergantung pada kebutuhan, daftar ditandai sebagai: daftar tidak disortir, diurutkan, dan daftar 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 – Anda tidak hanya perlu menyiapkan nama elemen yang benar, tetapi Anda juga perlu memberi nama kelas dan ID secara semantik : keduanya dapat berfungsi sebagai deskripsi 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 suatu 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 – Saat karakter khusus muncul, harap perhatikan pengkodean karakternya .
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.
Teks asli: http://css-tricks.com/what-beautiful-html-code-looks-like/
Terjemahan: http://horans.cn/what-beautiful-html-code-looks-like/