Saya yakin semua orang mengetahui html dan css, mengetahui pemisahan struktur html dan kinerja css, dan mengetahui semantik html. HTML semantik baru mulai populer di China satu atau dua tahun yang lalu. Melihat struktur HTML yang dibahas dalam grup sekarang, dan pertanyaan wawancara tentang struktur HTML, HTML semantik menyumbang sebagian besar. Jadi mengapa menggunakan HTML semantik? Apa manfaat HTML semantik?
HTML menyediakan struktur kontekstual dan makna konten dokumen web html itu sendiri tidak memiliki representasi. Misalnya, kita melihat bahwa <h1> dicetak tebal, dengan ukuran font 2em, dan <strong> dicetak tebal, jadi jangan menurut saya ini adalah HTML. Kinerja, ini sebenarnya adalah gaya CSS default dari HTML yang sedang bekerja, jadi pertama-tama kita perlu tahu bahwa HTML tidak ada hubungannya dengan kinerja halaman, ini adalah masalah CSS. Peran HTML dalam halaman adalah struktur dan makna. Dalam istilah awam, itu adalah untuk membagi konten.
Struktur HTML semantik harus terlebih dahulu menekankan struktur HTML
Struktur HTML adalah kerangka halaman, Halaman itu seperti sebuah rumah, Struktur HTML adalah dinding baja dan beton. Jika sebuah rumah tidak memiliki dinding baja dan beton, itu hanyalah tumpukan batu bata yang tidak berguna tidak dapat ditinggali atau digunakan untuk bekerja. CSS adalah bahan dekoratif, berupa lantai kayu, marmer, dan cat, digunakan untuk mendekorasi sebuah rumah papan. Mereka dicat bersama-sama dan tidak memiliki nilai guna yang sebenarnya. CSS bergantung sepenuhnya pada dokumen (X)HTML yang mereferensikannya. Jika Anda ingin memanfaatkan sepenuhnya kekuatan CSS, HTML perlu menyediakan konten yang bersih dan terstruktur. "HTML adalah lingua franca untuk menerbitkan hypertext di Internet... HTML menggunakan tag untuk menyusun teks. isasi” ( http://www.w3.org/MarkUp/ ).
Bagaimana cara menulis struktur HTML semantik?
HTML adalah metode menambahkan struktur dan makna (atau "semantik") pada konten teks. Ini akan memberitahu kita: "Baris ini adalah judul, baris-baris ini membentuk paragraf. Kata-kata ini adalah daftar item, dan kata-kata ini adalah hyperlink ke file lain di Internet." Perlu dicatat bahwa Anda tidak boleh membiarkan HTML memberitahu kita: "Teks-teks ini berwarna biru, dan teks-teks ini berwarna merah. Bagian konten ini adalah kolom paling kanan, dan baris konten ini dicetak miring." Informasi terkait kinerja ini adalah tugas CSS. Saat melakukan pengembangan front-end, ingatlah: HTML memberi tahu kita apa itu suatu konten (atau maknanya), bukan seperti apa tampilannya. Ketika kita berbicara tentang "markup semantik", HTML yang kita bicarakan harus benar-benar terpisah dari informasi presentasi, dan tag di dalamnya harus secara semantik menentukan struktur dokumen.
Struktur semantik HTML sebenarnya sangat sederhana. Pertama, pahami semantik setiap tag dalam html. <div> adalah wadah; <strong> untuk penekanan; <ul><li> adalah daftar tidak berurutan, dll... Setelahnya melihat isinya Saat memikirkan label apa yang dapat mendeskripsikannya dengan lebih baik, gunakan label apa pun.
Apa manfaat struktur HTML semantik?
Kita tahu bahwa HTML5 memiliki tag baru, seperti <header> dan <footer>. HTML berkembang menuju struktur HTML yang lebih kuat dan semantik kematian xhtml2. Hal ini juga menunjukkan bahwa struktur HTML semantik adalah tren perkembangan html.
1. Saat gaya dihapus atau hilang, halaman dapat menampilkan struktur yang jelas:
HTML itu sendiri tidak memiliki kinerja. Misalnya, kita melihat bahwa <h1> tebal, ukuran font 2em, tebal; Jangan berpikir ini adalah kinerja HTML .Fungsi, jadi menghapus atau menghilangkan gaya dapat membuat halaman menampilkan struktur yang jelas, yang bukan merupakan keuntungan dari struktur semantik HTML. Namun, browser memiliki gaya default juga untuk mengekspresikan semantik dengan lebih baik html. Dapat dikatakan bahwa gaya default Browser dan struktur HTML semantik tidak dapat dipisahkan.
2. Pembaca layar (jika pengunjung tunanetra) akan "membaca" halaman Anda sepenuhnya berdasarkan markup Anda .
Misalnya, jika Anda menggunakan markup semantik, pembaca layar akan "mengeja" kata Anda alih-alih mencoba mengucapkannya secara keseluruhan.
3. Perangkat seperti PDA dan ponsel mungkin tidak dapat menampilkan halaman web seperti browser komputer biasa (biasanya karena perangkat ini memiliki dukungan CSS yang lemah).
Penggunaan markup semantik memastikan bahwa perangkat ini merender halaman web dengan cara yang bermakna. Idealnya, perangkat penampil bertugas merender halaman web sesuai dengan kondisi perangkat itu sendiri.
Penandaan semantik menyediakan informasi relevan yang dibutuhkan perangkat, sehingga Anda tidak perlu mempertimbangkan semua kemungkinan skenario tampilan (pada perangkat lama atau baru di masa mendatang). . Teks ditampilkan dalam font tebal. Komputer genggam mungkin menampilkannya dalam font yang lebih besar. Bagaimanapun, setelah Anda menandai teks sebagai judul, Anda dapat yakin bahwa perangkat pembaca akan menampilkan halaman tersebut dengan sesuai dengan ketentuannya sendiri.
4. Perayap mesin pencari juga mengandalkan tag untuk menentukan konteks dan bobot setiap kata kunci.
Di masa lalu, Anda mungkin tidak menganggap bahwa perayap mesin pencari juga merupakan "pengunjung" situs web, tetapi sekarang mereka sebenarnya adalah pengguna yang sangat berharga. Tanpa mereka, mesin pencari tidak akan dapat mengindeks situs web Anda, dan kemudian akan terjadi sulit bagi pengguna biasa untuk datang dan berkunjung.
5. Sangat penting apakah halaman Anda mudah dipahami oleh crawler, karena sebagian besar crawler akan mengabaikan markup yang digunakan untuk kinerja dan hanya fokus pada markup semantik.
Oleh karena itu, jika judul file halaman diberi tag dan bukan diberi tag, maka halaman tersebut mungkin muncul lebih rendah dalam hasil pencarian. Selain meningkatkan kemudahan penggunaan, markup semantik memfasilitasi penggunaan CSS dan JavaScript yang benar karena markup itu sendiri menyediakan banyak ". Hook" untuk menerapkan gaya dan perilaku halaman.
SEO terutama bergantung pada konten situs web Anda dan tautan eksternal.
6. Memfasilitasi pengembangan dan pemeliharaan tim
W3C telah menetapkan standar yang baik bagi kami. Setiap orang di tim mengikuti standar ini, yang dapat mengurangi banyak hal yang berbeda, memfasilitasi pengembangan dan pemeliharaan, meningkatkan efisiensi pengembangan, dan bahkan mencapai pengembangan modular .
Jika Anda memiliki pendapat berbeda atau tambahan, silakan tinggalkan pesan untuk berdiskusi.
Terima kasih kepada Brother Gui, Milk Tea, Xiaozhi, Stealing Rice, Caspar dan CSS Forest Group atas diskusinya
Teks asli: http://www.css88.com/archives/1668