Sangat menganalisis semantik HTML dan kerangka kerja front-end terkait

Artikel ini terutama memperkenalkan analisis mendalam tentang semantik HTML dan kerangka kerja front-end yang terkait dengannya. HTML sederhana juga memiliki pengetahuan yang hebat! Teman yang membutuhkannya dapat merujuk pada pertanyaan berikut tentang semantik

Semantik mempelajari hubungan antara tanda dan simbol dan makna yang mereka wakili. Dalam linguistik, ini terutama mempelajari arti dari penanda ini (seperti kata -kata, frasa, atau suara) dalam bahasa. Di bidang pengembangan front-end, semantik terutama melibatkan makna yang disepakati oleh elemen HTML, atribut dan nilai atribut (termasuk ekstensi seperti microdata). Semantik konvensi formal yang umum digunakan dalam spesifikasi ini dapat membantu program (dan mereka yang kemudian berpartisipasi dalam pengembangan) lebih memahami informasi tentang semua aspek situs web. Namun, bahkan jika semantik dari elemen -elemen ini, atribut dan nilai atribut diformalkan, mereka masih harus tunduk pada kemampuan beradaptasi pengembang dan hasil pilihan bersama mereka. Hal ini memungkinkan semantik konvensi formal untuk dimodifikasi di masa depan (dan ini adalah salah satu prinsip desain HTML).

Mematuhi prinsip penulisan HTML semantik adalah salah satu dasar pengembangan front-end profesional modern. Sebagian besar semantik terkait dengan properti konten saat ini atau yang diharapkan (seperti: elemen H1, atribut lang, nilai email atribut tipe, mikrodata).

Namun, tidak semua semantik perlu berorientasi konten. Nama kelas tidak bisa semantik. Apa pun nama itu, mereka harus memiliki makna dan tujuan. Semantik nama kelas bisa berbeda dari elemen HTML. Kita dapat menggunakan semantik global elemen HTML, atribut HTML tertentu, mikrodata, dll., Dan kemudian menggunakan semantik spesifik lokal dari situs web atau aplikasi untuk membedakannya. Semantik khusus ini biasanya terkandung dalam nilai atribut, seperti atribut kelas.

Meskipun praktik terbaik yang diasumsikan ini diulangi dalam bab tentang sifat kelas dari spesifikasi HTML5 ...

... Pengembang didorong untuk menggunakan nilai atribut kelas untuk menggambarkan konten yang sebenarnya, daripada menggambarkan apa yang mereka harapkan.

... tidak ada alasan yang melekat untuk melakukannya. Bahkan, ketika metode ini diterapkan di situs web atau aplikasi besar, sering menjadi penghalang.

Elemen HTML dan atribut lainnya sudah menyediakan semantik lapisan konten

Untuk mesin atau pengunjung, ada sangat sedikit informasi semantik yang berguna yang dapat diungkapkan oleh nama kelas, atau bahkan tidak. Kecuali itu adalah bagian kecil dari nama yang sudah disepakati (juga dapat dibaca oleh mesin) - mircoformats

Tujuan utama dari nama kelas adalah menjadi pengait bagi CSS dan JavaScript. Jika Anda tidak perlu menambahkan kinerja dan perilaku ke halaman Anda, maka Anda mungkin tidak perlu menambahkan nama kelas ke HTML Anda

Nama kelas harus menyampaikan informasi yang berguna kepada pengembang. Saat Anda membaca cuplikan DOM, itu akan membantu memahami peran spesifik dari nama kelas tertentu. Khususnya dalam tim pengembangan kolaborasi multi-orang, pengembang front-end tidak hanya berurusan dengan komponen HTML.

Mari kita berikan contoh yang sangat sederhana: