Saya mulai mempelajari standar web pada awal tahun lalu, dan saya telah memperoleh beberapa pengalaman selama dua tahun terakhir. Saya baru saja berganti pekerjaan dan hanya ada waktu luang di rumah, jadi saya menulis sesuatu untuk dibagikan kepada semua orang.
1. Memahami standar web dan spesifikasi W3C XHTML
Menurut pemahaman umum, kedua konsep ini sepertinya mengacu pada hal yang sama (“teori-teori lanjutan” ini kita bahas pada edisi kali ini^_^). Tapi menurut saya, sebenarnya dari segi teknis, kedua hal ini hampir tidak ada korelasinya sama sekali. Singkatnya, standar web adalah mengimplementasikan struktur, kinerja, dan perilaku halaman secara mandiri. Secara umum, ini adalah bahasa populer "div+css" dalam rekrutmen saat ini. Namun, tidak ada versi W3C XHTML yang membatasi konsep standar web. Jelasnya, kita dapat menggunakan xhtml 1.1 untuk menulis halaman web dengan posisi tabel. Pada titik ini, Anda mungkin berpikir saya berbicara banyak omong kosong. Namun dengan teknologi apa pun, Anda hanya dapat menggunakannya dengan benar jika Anda memiliki pemahaman yang cukup jelas tentang konsep dasarnya. Izinkan saya berbicara tentang dua jalur yang salah dalam penerapan standar Web saat ini dari dua aspek berikut:
Kasus pertama sederhana. Saya pikir selama XHTML+CSS digunakan, itu adalah standar Web. Halaman ini penuh dengan kelas dan id. Jangan ragu untuk menentukan kelas terpisah untuk setiap detail. Perbedaan antara halaman tersebut dan HTML tradisional adalah adanya tambahan "/" di tag img. Sebenarnya lebih baik kembali ke HTML tradisional. Setidaknya saya bisa menggunakan font dengan mudah tanpa harus mencari style sheet seperti kamus. Penggunaan CSS lain yang lebih halus dan biasa-biasa saja akan saya bicarakan nanti.
Saya pikir situasi kedua lebih sulit untuk dipahami, yaitu mencoba menggunakan berbagai pernyataan div nesting dan css yang rumit untuk mencapai kinerja yang Anda inginkan. Contoh yang sangat sederhana adalah di postingan saya baru saja melihat "Halaman dibulatkan sudutnya tanpa memotong gambar". Pertama-tama, saya ingin memastikan bahwa ide ini benar-benar bagus, menggunakan fungsi CSS untuk "menggambar" sudut membulat. Untuk melakukan hal ini, perancang harus menambahkan sebagian besar kode sebagai berikut di lokasi yang sesuai:
| Berikut isi kutipannya: Contoh Kode Sumber [www.52css.com] <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> |
Namun, hal ini secara serius melanggar konsep dasar standar Web-pemisahan struktur dan presentasi. Karena menempatkan kode yang digunakan untuk mengontrol kinerja halaman web dalam dokumen struktural. Mungkin Anda akan mengatakan bahwa itu benar-benar menempatkan kode kinerja sebenarnya di CSS. Tapi menurut saya ini adalah konsep curian. Karena tag b di atas tidak ada hubungannya dengan struktur halaman web, semuanya adalah tag kosong. Artinya, tidak ada untuk meletakkan sesuatu di tempat yang diperlukan oleh struktur dokumen. Jadi itu hanyalah kode sampah untuk struktur dokumen.
Contoh lain mungkin lebih halus. Saya pernah melihat artikel di alistapart.com sebelumnya tentang cara menerapkan kolom tiga arah pada halaman web. Prinsipnya mungkin menggunakan tiga atau empat div untuk saling bersarang. Saya rasa ini juga merupakan pelanggaran standar Web. Karena urutan penempatan tag div ini dalam kode bukan hanya untuk kebutuhan struktural, tetapi untuk kinerja halaman web.
Tentu saja saya akui bahwa sudut pandang di atas sampai batas tertentu berlebihan (tapi sebaliknya, jika harus menerapkan sudut membulat non-gambar, bukankah itu juga berlebihan, haha). Terkadang struktur dan kinerja tidak mudah dipisahkan. Untuk mencapai kinerja yang kaya, kita harus membiarkan struktur beradaptasi (pikirkan penggunaan <div style="clear:both" />). Namun penting untuk mengetahui mana yang benar dan mana yang salah. Meski terkadang kita harus melakukan sesuatu yang salah.
Terakhir, saya ingin menyatakan bahwa saya tidak mengatakan "sudut membulat tanpa gambar" tidak ada artinya atau salah. Saya juga mengagumi kecerdasan dan inspirasi penulis. Menurut saya penelitian teknis semacam ini seperti menggunakan CSS untuk menggambar bendera negara sebelumnya, dan sangat membantu untuk menguasai teknologi CSS. Namun, penggunaannya harus dibatasi seperti halnya tanda CSS dan tidak boleh diadopsi dalam aplikasi praktis. Karena melanggar prinsip dasar standar web.
2. Semantik tag HTML
Standar web saat ini dalam bahasa sehari-hari disebut "div+css" atau "tata letak lapisan". Saya tidak keberatan dengan kemanfaatan ini. Tapi ini akan menyebabkan kesalahpahaman: menggunakan sejumlah besar tag div sebagai elemen struktural. Faktanya, ini adalah bentuk penyalahgunaan div yang lebih maju (disebutkan oleh Jeffrey Zeldman dalam buku "Website Refactoring").
HTML memberi kita cukup banyak tag, yang masing-masing memiliki arti tersendiri. Menurut saya, saat mendesain, selain mengikuti sintaks HTML, kita harus memanfaatkan sepenuhnya dan mematuhi "semantik" setiap tag. Misalnya, teks judul harus disertakan dalam h1-h6, paragraf besar konten teks harus disegmentasi dengan <p>, bukan <br />, item daftar harus ditempatkan di ul atau ol atau dl, dan data dalam bentuk tabel harus tetap berupa tata letak tabel.
Mengapa melakukan ini? Alasan yang sangat meyakinkan adalah untuk memastikan bahwa ketika pengguna menghilangkan tampilan CSS, halaman web dapat menampilkan hierarki struktural konten seefektif mungkin. Jika semua div digunakan, ketika CSS dihapus, seluruh halaman web akan kehilangan hierarkinya, hanya menyisakan beberapa bagian teks yang berantakan. Ini tidak memenuhi persyaratan standar web untuk kompatibilitas konfigurasi rendah.
Izinkan saya mencantumkan secara rinci pemahaman saya tentang semantik beberapa tag:
hal br
Mari kita bahas yang paling sederhana dulu. Gunakan tag p sebagai pengganti br (bahkan dua <br /> berturut-turut) untuk paragraf. Tampaknya hal ini tidak perlu dikatakan lagi. Namun terkadang kita harus melepaskan prinsip ini. Contoh umum adalah postingan forum, jika saya ingin mengelompokkannya, saya tekan enter. Apa yang ditransmisikan ke latar belakang dan ditampilkan dengan cara ini jelas disegmentasi menggunakan <br />.
tabel th
Karena gencarnya promosi div+css, tampaknya siapa pun yang menggunakan tata letak tabel adalah penduduk asli yang tidak beradab. Namun menurut saya pandangan ini tidaklah benar. Arti tabel adalah tabel, sehingga data apa pun yang seharusnya muncul dalam bentuk tabel harus tetap ditata dalam tabel. Contoh sederhananya adalah daftar nama teman sekelas, termasuk nama, ID siswa, jenis kelamin, dll. Ini jelas merupakan data dalam bentuk tabel, jadi sebaiknya menggunakan tata letak tabel. Contoh lain yang perlu ditelusuri adalah navigasi kalender di blog. Saya pernah melihat sebuah program blog. Tanggal-tanggal dalam navigasi kalendernya semuanya dibungkus dalam div dari tanggal 1 hingga tanggal 30, dan kemudian gaya float:left digunakan untuk menyusun kalender bulan ini dalam barisan 7. Ketika saya membatalkan tampilan CSS browser, bagian kalender disusun secara vertikal dari No. 1 hingga No. 30. Menurutku ini salah. Karena kalender harus berupa data dalam bentuk tabel, tata letak tabel tetap harus digunakan. Setelah css dibatalkan, mereka harus tetap dikelompokkan ke dalam tabel dengan 7 berturut-turut.
ini adalah tag lain yang akan diabaikan. Karena kemahakuasaan CSS, semua sel tabel dapat dibuat menggunakan td dan atribut kelas. Namun secara semantik, beberapa sel tabel harus diberi label dengan th. Misalnya, dalam tabel kalender yang disebutkan di atas, satuan "SENIN SELAMAT... MATAHARI" yang mengidentifikasi minggu harus menggunakan th, bukan td.
h1-h6
Untuk tag h1-h6, secara semantik tag tersebut harus berfungsi untuk semua teks judul. Oleh karena itu, beberapa metode penulisan seperti <div class="diary-title> berlebihan. Tulis langsung sebagai <h1>, lalu definisikan langsung CSS untuk h1, bukan .diary-title. Bukankah efeknya akan sama? Tentu saja aturan I ini tidak boleh terlalu kaku, karena terkadang elemen struktur pada bagian judul tidak dapat diselesaikan hanya dengan menggunakan h1, tetapi paling banyak saya menggunakan metode seperti <h1><span></ span></h1> untuk mengubah judul. Strukturnya disarangkan dengan lebih kompleks untuk memenuhi kebutuhan kinerja.
Namun ketidaksepakatan semantik muncul di sini. Haruskah h1 dipahami sebagai judul tingkat pertama atau sebagai judul dengan ukuran font ukuran 1? Saya biasanya memahaminya sebagai judul tingkat pertama, dan jika ada subtitle di bawah judul tingkat pertama, gunakan h2. Namun nyatanya, jika melihat kembali ke awal desain HTML, angka setelah h1-h6 lebih dipahami sebagai pengontrol ukuran teks judul. h3 dapat digunakan hanya untuk menggunakan font ukuran tiga, bukan untuk header tingkat ketiga. Jika tidak, semua judul tingkat pertama menggunakan h1, dan semuanya memiliki font yang sangat besar, dan Anda harus menggunakan CSS untuk mengontrol ukuran font, yang terasa sangat rumit. Jadi, ini adalah pertanyaan untuk diperdebatkan.
ul ol
Kapan pun Anda perlu membuat daftar istilah, Anda harus menggunakan ul atau ol alih-alih p. Misalnya, persyaratan pekerjaan dalam iklan perekrutan, seperti tindakan pencegahan, seperti petunjuk langkah pengoperasian. Selain itu, penggunaan yang populer adalah menggunakan ulli untuk membuat daftar menu navigasi halaman web, dan kemudian menggunakan CSS untuk mengontrol pengaturannya.
Perlu ditambahkan bahwa jangan lupa bahwa ul atau ol dapat digunakan di li untuk membentuk daftar tingkat kedua.
dl dt dd
Ini adalah kumpulan tag yang hampir terlupakan, namun Jeffrey Zeldman sangat menganjurkan penggunaannya dalam "Pemfaktoran Ulang Situs Web". dl harus menjadi nama lengkap "daftar definisi (atau daftar definisi? Jika ada yang tahu, tolong beri tahu saya)". Nama kata ditempatkan pada dt, dan penjelasan kata ditempatkan pada dd. Website alistapart.com bahkan lebih pintar lagi, mendefinisikan seluruh kolom kanan sebagai dl, menggunakan dt untuk judul setiap unit, dan dd untuk isi unit.
gambar
Tag img sendiri tidak banyak bicara. Saya hanya ingin berbicara tentang hal yang lumrah, yaitu menggunakan img hanya jika elemen ini memang merupakan gambar yang diperlukan dalam konten. Seperti ilustrasi, avatar, emoticon, ini gambar-gambar yang wajib muncul di konten, pakai img. Lainnya, seperti gambar latar belakang judul dan ikon kecil di depan item daftar, tidak boleh menggunakan tag img.
menjangkau
span sekarang sepopuler div. Tapi nyatanya menurut saya kita harus tetap berpegang pada penggunaan aslinya. Pemahaman pribadi saya adalah span pada awalnya digunakan untuk membawa atribut kelas atau gaya. Ia sendiri tidak memiliki semantik yang jelas. Oleh karena itu, dalam aliran teks, jika kita perlu membuat perubahan gaya pada beberapa teks, kita menggunakan span untuk mengapitnya. Misalnya jika ada kata yang perlu ditambahkan warna merah, saya menggunakan <span class="red">.
Namun, perlu dicatat bahwa hal ini dapat menyebabkan masalah yang disebutkan di h1 sebelumnya. Karena beberapa gaya teks sebenarnya memiliki tag siap pakai, seperti <strong>, <sub>, dll., kita juga harus memberinya beberapa peluang yang tepat.
A
a adalah label yang mengontrol hyperkoneksi. Namun ada beberapa kasus khusus di mana kami mungkin tidak ingin menggunakannya. Misalnya, sebuah jendela kecil perlu muncul. Saya tidak terlalu memperhatikan, tapi menurut saya beberapa desainer akan mendefinisikan onclick langsung ke dalam tag <img> pada ikon "mainkan". Menurut saya pribadi, kita harus menambahkan a di luar img, lalu mendefinisikan onclick di dalam a, dan ingat untuk menulis return false di akhir fungsi js. Jika memungkinkan, atribut href dari tag a juga harus ditulis dengan URL jendela pop-up untuk memastikan bahwa pengguna masih dapat membuka halaman secara efektif meskipun JS dinonaktifkan.
Itu saja yang akan saya daftarkan untuk saat ini.
Terakhir, mari kita rangkum pentingnya mengikuti semantik tag HTML. Salah satu persyaratan standar web adalah kompatibilitas profil rendah: ketika pengguna menonaktifkan gambar, menonaktifkan CSS, atau menonaktifkan JS, kami masih dapat mengizinkannya menjelajahi konten web secara efektif. Seperti yang kita ketahui bersama, atribut alt yang wajib adalah mempertimbangkan kompatibilitas saat menonaktifkan gambar. Mengikuti semantik tag HTML dengan benar memastikan kompatibilitas ketika CSS dinonaktifkan. Hanya ketika tag HTML digunakan dengan benar dan halaman web kita "CSS coretan", orang masih dapat melihat di mana letak menu navigasi, di mana judul artikel, dan tabel kalender tidak akan berantakan.