Kode HTML yang bagus adalah dasar dari situs web yang indah. Ketika saya mengajar orang lain CSS, saya selalu memberi tahu mereka terlebih dahulu: CSS yang baik hanya ada pada tag HTML yang baik. Ini seperti rumah membutuhkan fondasi yang kuat, bukan? Tag HTML yang rapi dan semantik memiliki banyak keuntungan, tetapi masih ada banyak situs web yang menggunakan penulisan tag yang tidak ramah.
Mari kita lihat beberapa tag HTML yang tidak tertulis dan diskusikan untuk mempelajari cara menulis tag HTML yang rapi dan standar.
Wulin.com Catatan : Chris Cyier menggunakan dua dokumen di sini untuk menjelaskan kode artikel ini: kode buruk dan kode yang baik. Silakan merujuk ke dua dokumen ini saat Anda belajar.Untuk melakukan ini, kita hanya perlu mengikuti langkah yang benar. Tidak perlu membahas apakah akan menggunakan HTML 4.01 atau XHTML 1.0, yang keduanya menempatkan persyaratan ketat pada penulisan kode yang benar.
Tapi apa pun yang terjadi, kode kami tidak boleh menggunakan tabel tabel apa pun untuk tata letak, jadi tidak perlu menggunakan Doctype Transisi.
Sumber Daya Terkait:Di bagian <head> kami, hal pertama adalah mendeklarasikan set karakter. Kami menggunakan UTF-8, tetapi letakkan di belakang <title>. Mari kita pindahkan deklarasi set karakter ke atas karena kita ingin browser mengetahui karakter apa yang ditanganinya sebelum membaca apa pun.
Selain posisi deklarasi set karakter, karakter aneh yang muncul di <title> juga merupakan masalah yang perlu diperhatikan. Misalnya, karakter & karakter yang paling umum digunakan harus diganti oleh entitas karakter & amp ;.
Sumber Daya Terkait:Saat menulis kode, indentasi tidak mempengaruhi penampilan halaman web, tetapi menggunakan indentasi yang sesuai dapat membuat kode lebih mudah dibaca. Metode indentasi standar adalah mengindir bit tab (atau beberapa spasi) saat Anda memulai elemen baru. Juga, ingat bahwa label elemen dekat selaras dengan label start.
Wulin.com CATATAN : Beberapa teman berpikir lebih merepotkan untuk ditekuk saat menulis kode. Jika Anda hanya membaca kode ini, mungkin tidak ada masalah. Pikirkan saja tidak apa -apa. Tetapi jika itu adalah kolaborasi atau karya Anda diterbitkan dan dibagikan secara publik, perlu untuk menulis kode yang indah dan lebih mudah dibaca. Sumber Daya Terkait:Kami memiliki beberapa kode CSS yang telah diperluas ke bagian <head> kami. Ini adalah pelanggaran serius karena hanya dapat bekerja pada satu halaman HTML. Menjaga file CSS mandiri berarti halaman web masa depan dapat menautkannya dan menggunakan kode yang sama. Hal yang sama berlaku untuk JavaScript.
Wulin.com Catatan : Tentu saja, masalah ini mungkin tidak terlalu serius. Misalnya, sebagai tema WordPress, kode yang ditulis dalam <head> digunakan pada semua halaman WordPress. Tetapi menulis CSS di <head> masih merupakan kebiasaan yang sangat buruk.Dalam judul situs web kami, kami menggunakan <H1> sebagai tag judul situs web, yang sempurna. Dan tautan ke beranda ditambahkan, tetapi kesalahannya adalah bahwa tautan ditempatkan di luar <h1>, dan tautan dikelilingi <h1>. Kesalahan bersarang sederhana ini ditangani dengan baik oleh sebagian besar browser, tetapi secara teknis, tidak berhasil.
Anchor Link adalah elemen inline, dan judul <h1> adalah elemen blok, dan elemen blok tidak boleh ditempatkan di elemen inline.
Saya tidak tahu siapa yang menemukannya terlebih dahulu, tetapi saya suka kata divitis, yang mengacu pada penggunaan div yang berlebihan dalam tag HTML. Pada tahap tertentu dalam belajar desain web, kami belajar cara menggunakan DIV untuk membungkus banyak elemen lain untuk mencapai tata letak dan gaya yang nyaman. Ini mengarah pada penyalahgunaan elemen div. Kami menggunakan area yang diperlukan dan area yang sama sekali tidak perlu.
Dalam contoh yang ditunjukkan di atas, kami menggunakan Div (TopNav) untuk berisi daftar UL (BigBaNaNavigasi). Namun, baik Div dan UL adalah elemen blok, jadi tidak perlu menggunakan DIV untuk membungkus elemen UL.
Sumber Daya Terkait:Sekarang mari kita bicara tentang manajemen penamaan. Dalam contoh yang disebutkan dalam artikel sebelumnya, UL kami menggunakan nama ID BigBarnavigasi. Navigasi menjelaskan konten blok dengan sangat baik, tetapi besar dan bar menggambarkan desain daripada konten. Mungkin mengatakan bahwa menu ini adalah bilah alat besar, tetapi jika desain menu ini menjadi vertikal, namanya akan tampak membingungkan dan tidak relevan.
Nama kelas dan ID yang ramah seperti MainNav, Subnav, Sidebar, Footer, Metadata, yang menggambarkan apa yang disertakan. Nama kelas dan ID yang buruk menggambarkan desain, seperti BigBoldHeader, LeftsideBar, dan RoundedBox.
Wulin.com Catatan : Chris menekankan apakah akan menamainya dengan konten atau desain. Secara pribadi, saya ingin menambahkan ke ID dan nama kelas untuk memanfaatkan atau meremehkan , atau memanfaatkan huruf awal kata tersebut . Pertama -tama, kata -kata yang sepenuhnya dikapitalisasi tidak kondusif untuk membaca dan dikecualikan. Adapun apakah akan menggunakan huruf kecil atau huruf besar dari huruf pertama dari kata, itu tergantung pada kebiasaan pribadi Anda. Penting bahwa tidak peduli aturan mana yang digunakan, itu harus konsisten . Jangan murni huruf kecil dan dikapitalisasi dalam huruf pertama sekaligus, itu akan sangat membingungkan.Selain itu, yang saya bingung secara pribadi adalah apakah akan menggarisbawahi_, atau tanda hubung, atau tidak menggunakan nama yang lebih lama. Atau mungkin saya pikir itu terlalu rumit. Ada baiknya menggunakan jenis apa pun, dan tidak apa -apa untuk tetap konsisten.
Sebelumnya Halaman 1 2 Halaman Berikutnya Baca teks lengkapnya