Bagaimana memahami struktur html semantik

Saya percaya semua orang tahu HTML dan CSS, tahu pemisahan struktur HTML dan kinerja CSS, dan mengetahui semantik HTML. Ini adalah kata kunci populer dalam beberapa tahun terakhir. HTML semantik hanya dicari setelah satu atau dua tahun yang lalu di Cina. Lihatlah struktur HTML yang sedang dibicarakan dalam grup sekarang. Pertanyaan wawancara tentang struktur HTML, HTML semantik menyumbang sebagian besar. Jadi mengapa menggunakan HTML semantik? Apa manfaat HTML semantik?

HTML menyediakan struktur konteks dan makna konten dokumen halaman web; HTML sendiri tidak mengekspresikannya. Kita melihat bahwa misalnya, <H1> tebal, ukuran font adalah 2em, tebal; <strong> berani, jangan berpikir bahwa ini adalah manifestasi dari HTML. Ini sebenarnya adalah gaya CSS default HTML yang sedang beraksi, 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. Apa yang ditempatkan di sini dan apa yang kami masukkan.

Struktur HTML adalah kerangka halaman. Halaman seperti rumah. Struktur HTML adalah dinding beton bertulang baja. Jika sebuah rumah tidak memiliki dinding beton yang diperkuat baja, itu akan menjadi sekelompok batu bata, dan tidak dapat hidup pada orang atau pekerjaan. CSS adalah bahan dekoratif, lantai kayu, marmer, cat, dan digunakan untuk menghiasi rumah. Tidak perlu mengatakan lebih banyak tentang kekuatan CSS. Jika CSS tidak memiliki struktur HTML, itu akan menjadi tumpukan papan kayu, dicat bersama, tanpa nilai penggunaan yang sebenarnya. CSS sepenuhnya bergantung pada dokumen HTML (x) yang merujuknya. Jika Anda ingin mendapatkan kekuatan penuh CSS sepenuhnya, sangat penting untuk menyediakan HTML dengan konten yang bersih dan terstruktur. HTML adalah istilah umum untuk menerbitkan hypertext di internet ... html menggunakan tag untuk menyusun teks ( http://www.w3.org/markup/ ).

HTML adalah metode untuk melengkapi struktur dan makna konten teks (atau semantik). Ini akan memberi tahu kami: baris ini adalah judul, dan baris ini membentuk paragraf. Teks -teks ini adalah daftar item, dan teks -teks ini adalah hyperlink yang menautkan ke file lain di internet. Perlu dicatat bahwa HTML tidak boleh memberi tahu kita: teks -teks ini berwarna biru, dan teks -teks ini berwarna merah. Bagian konten ini adalah kolom paling kanan, dan baris ini dalam huruf miring. Informasi terkait kinerja ini adalah pekerjaan CSS. Saat melakukan pengembangan front-end, ingat: HTML memberi tahu kita apa sepotong konten itu (atau maknanya), bukan seperti apa bentuknya. Ketika kami menyebutkan tag semantik, apa yang kami sebut HTML harus sepenuhnya dipisahkan dari informasi presentasi, dan tag di dalamnya semua harus secara semantik menentukan struktur dokumen.

Struktur HTML semantik sebenarnya sangat sederhana. Pertama, master semantik masing -masing tag di HTML. <div> adalah wadah; <strong> adalah penekanan; <ul> <li> adalah daftar yang tidak tertib, dll. Saat Anda melihat kontennya, pikirkan tentang tag apa yang dapat menggambarkannya dengan lebih baik, dan menggunakan tag apa pun.

Kita tahu bahwa tag HTML5 yang baru ditambahkan, seperti <Header> dan <footer>, HTML berkembang menuju struktur HTML semantik yang lebih kuat. XHTML2 tidak secepat HTML5 dalam hal ini, yang juga menjadi alasan kematian XHTML2. Ini juga menunjukkan bahwa struktur HTML semantik adalah tren pengembangan HTML.

HTML sendiri tidak mengekspresikan dirinya. Kita melihat bahwa misalnya, <H1> tebal, dengan ukuran font 2em, tebal; <strong> berani, jangan berpikir bahwa ini adalah manifestasi dari HTML. Ini sebenarnya adalah gaya CSS default dari aksi HTML, sehingga menghilangkan atau kehilangan gaya dapat membuat halaman menyajikan struktur yang jelas bukan keuntungan dari struktur HTML semantik, tetapi browser memiliki gaya default. Tujuan dari gaya default juga untuk mengekspresikan semantik HTML dengan lebih baik. Dapat dikatakan bahwa gaya default browser dan struktur HTML semantik tidak dapat dipisahkan.

Misalnya, jika Anda menggunakan penanda semantik, pembaca layar akan mengeja kata -kata Anda satu per satu, alih -alih mencoba mengucapkannya secara penuh.

Menggunakan penandaan semantik memastikan bahwa perangkat ini membuat halaman web dengan cara yang bermakna. Idealnya, tugas menonton perangkat adalah membuat halaman web sesuai dengan kondisi perangkat itu sendiri.

Penandaan semantik memberikan perangkat yang relevan dengan informasi yang dibutuhkan, menghilangkan diri Anda untuk mempertimbangkan semua situasi tampilan yang mungkin (termasuk perangkat yang ada atau baru di masa depan). Misalnya, telepon dapat memilih untuk membuat paragraf teks yang ditandai dengan judul dalam huruf tebal. Komputer genggam dapat menampilkannya dalam font yang lebih besar. Either way, begitu Anda menandai teks sebagai judul, Anda dapat yakin bahwa pembaca akan menampilkan halaman dengan tepat berdasarkan kondisinya sendiri.

Di masa lalu Anda mungkin tidak mempertimbangkan bahwa perayap mesin pencari juga 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 pengguna rata -rata akan sangat sulit untuk dikunjungi.

Oleh karena itu, jika judul file halaman ditandai alih -alih, halaman mungkin berada di posisi yang lebih rendah dari hasil pencarian. Selain meningkatkan kemudahan penggunaan, penandaan semantik kondusif untuk penggunaan CSS dan JavaScript yang benar, karena itu sendiri menyediakan banyak kait untuk menerapkan gaya dan perilaku halaman.

SEO terutama tergantung pada konten dan tautan eksternal situs web Anda.

W3C menetapkan standar yang baik untuk kami. Setiap orang dalam tim mengikuti standar ini, yang dapat mengurangi banyak hal yang berbeda, memfasilitasi pengembangan dan pemeliharaan, meningkatkan efisiensi pengembangan, dan bahkan mewujudkan pengembangan modular .

Jika Anda memiliki pendapat yang berbeda, tambahkan. Silakan tinggalkan pesan untuk dibahas.

Terima kasih kepada GUI GE, Teh Susu, Xiaozhi, Mencuri Nasi, Kelompok Hutan Caspar dan CSS untuk Diskusi