Mikroformat HTML5 dan nama atribut berkaitan_html5 petua tutorial

Pada 29 Mei 2004, selepas saya menamatkan blog dan semua perbincangan, saya meninjau 40 pereka bentuk di tapak web mereka untuk melihat konvensyen yang mereka gunakan untuk elemen halaman biasa seperti pengepala dan sepanduk, navigasi, kandungan dan Pengaki (hasil dari masa itu).

Ini bukan kajian saintifik, tetapi pada bulan Jun tahun itu saya membuat susulan pada beberapa komen Eric Meyer dan menerbitkan satu set konvensyen penamaan. Saya sentiasa gembira apabila saya menemui tapak web yang telah menerima pakai konvensyen penamaan ini dan saya masih menggunakannya setiap hari, malah lebih daripada 4 tahun kemudian.

Pemikiran saya ketika itu boleh diringkaskan seperti berikut

Nama id dan atribut kelas mesti mencerminkan fungsi atau kandungan elemen, bukan pembentangan. Jadi pengepala telah dialih keluar dan penjenamaan diperkenalkan;

Penamaan harus menggunakan hampir struktur gaya XML. Jadi, kandungan dalam datang kandungan-utama , kandungan-sub dan kandungan-supp .

Konvensyen ini telah membantu saya dengan baik, dan apa yang saya lakukan hampir tidak mengubah terasnya. Tidak syak lagi, mereka semua menjadikan kerja saya lebih cepat, lebih konsisten dan lebih bermanfaat. Mereka memudahkan untuk membina produk dan mendidik orang yang bekerja dengan saya dalam cara pemikiran saya. Konvensyen penamaan berfungsi.

Mikroformat dan nama atribut yang berkaitan

Mari kita hadapi, mikroformat seperti hCard, hCalendar, hAtom dan draf lain membawa begitu banyak nilai atribut ke dalam jadual. Selalunya tidak perlu pertimbangkan fail binaan atau cangkuk corak CSS kekangan yang disediakan untuk nilai sifat selanjutnya ini. Sekarang saya menggunakan mikroformat sehingga saya membangunkan seluruh halaman tanpa menggunakan atribut kelas (selain atribut kelas yang disertakan dengan mikroformat).

Pada kesempatan yang jarang berlaku saya perlu menambah elemen baharu (dengan mengandaikan pembahagian untuk tujuan susun atur) pemikiran pertama saya adalah untuk melanjutkan mikroformat yang sudah wujud. Saya akan memberi anda contoh menggunakan mod hAtom:

Title

Main content

Related content

Tajuk< /h2>

> Kandungan berkaitan

Jika anda mengekalkan kelebihan mikroformat, anda perasan bahawa berkaitan kemasukan bukanlah sebahagian daripada corak hAtom, tetapi dalam kes ini, saya sememangnya perlu mempunyai faktor tambahan tentang cara ia dikarang Bagaimana pula nilai atribut seperti pautan sisi berkaitan?

Bilakah nampaknya lebih logik untuk memanjangkan corak penamaan mikroformat?

HTML5

Pada permulaan bab ini, saya harus terus terang mengatakan bahawa pada masa ini, saya tidak boleh kurang memperhatikan HTML5. Walau bagaimanapun, ini bukan perkara utama. HTML5 memperkenalkan beberapa elemen baharu yang berpotensi sangat berguna, seperti:

bahagian

Fail atau bahagian aplikasi biasa. Bab, dalam konteks ini, adalah klasifikasi kandungan tematik.

artikel

Sebahagian halaman yang terdiri daripada artikel yang membentuk bahagian bebas dokumen, halaman web atau tapak web. Ini boleh jadi siaran forum, artikel majalah atau akhbar, entri log Web, ulasan yang diserahkan pengguna, atau mana-mana item kandungan bebas yang lain, atau mana-mana item kandungan bebas yang lain.

ketepikan

Sebahagian halaman yang terdiri daripada kandungan yang bebas daripada kandungan yang dikaitkan dengan elemen ketepikan dan boleh dianggap berasingan daripada kandungan. Bahagian ini sering muncul sebagai bar sisi tipografi.

Memandangkan adalah logik bagi pencipta Microformats untuk mendasarkan skema mereka pada spesifikasi sedia ada, pastinya kini masuk akal untuk saya menyesuaikan konvensyen penamaan saya untuk mengikuti konvensyen dalam HTML5 Adalah logik untuk sesetengah spesifikasi mengubah coraknya, pastinya, dan kini masuk akal untuk saya mengikuti HTML5 dengan menyesuaikan konvensyen penamaan saya? Sudah tentu, saya belum boleh menggunakannya lagi:

Title

Main content

Related content

🎜>Kandungan utama

Title

Main content

Related content

Kandungan berkaitan

Tetapi kini saya boleh menggunakan id dan nilai atribut kelas untuk membantu saya membiasakan diri dengan HTML5, membawa dokumen saya selangkah lebih dekat dengannya.

>

Kandungan utama

Kandungan berkaitan < /div>

Saya rasa ini langkah seterusnya yang logik untuk saya. Jadi, lihat pada dokumen sampel ini di mana saya telah mengambil elemen HTML5 sebagai asas untuk konvensyen penamaan saya. Sebagai tambahan kepada perkara yang baru saya nyatakan, ambil perhatian bahawa saya telah menentukan cara pengelasan dan navigasi (nav), menggunakan colgroup dan col untuk membina medan, menukar senarai tidak tertib kepada grid dan menggunakan datagrid. Spesifikasi teg HTML5 juga termasuk butiran, dialog dan angka, yang juga boleh saya gunakan sebagai nilai atribut. Jika saya boleh memberikan satu permintaan hari ini, semua pembangun rangka kerja CSS akan menerima pakai konvensyen penamaan yang sama (dan juga membenamkan mikroformat secara meluas) supaya orang yang baru mengenali markup dan CSS yang bermakna akan mendapat hak Titik permulaan adalah untuk gunakan atribut yang lebih bermakna dan logik berbanding id dan atribut kelas dangkal.