Mengapa memilih teg semantik HTML5 dan bukannya teg div?-Soal Jawab Rangkaian PHP Cina

Artikel Topik pembelajaran Muat turun Soal Jawab Kamus Pengaturcaraan Permainan kemas kini terkini

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Mengapa memilih teg semantik HTML5 dan bukannya teg div?

P粉806834059 2023-08-22 23:00:37

407

Mengapa menggunakan teg semantik HTML5 seperti pengepala, bahagian, nav dan artikel bukannya hanya menggunakan div dan menetapkannya kepada css?

Saya mencipta halaman dan menggunakan teg ini, tetapi ia tidak berbeza daripada div. Apakah tujuan utama mereka?

Adakah mereka hanya memberikan nama label yang sesuai apabila digunakan, atau adakah mereka melakukan sesuatu yang lain?

Sila jelaskan. Saya menyemak banyak tapak web tetapi tidak menemui asas ini.

P粉806834059

membalas semua (2)

P粉2629261952023-08-23 20:17:14 Tingkat 2

Terdapat artikel bagus tentang semantik HTML5 diHTML5Doctor.

Semantik sentiasa menjadi sebahagian daripada HTML, dalam beberapa bentuk. Ia membantu anda memahami perkara yang berlaku pada halaman.

Pada zaman dahulu, apabila hampir semuanya digunakan

, kami masih mencapai semantik dengan memberikannya nama kelas atau nama id "semantik".

Tag ini membantu dalam menstruktur dan memahami reka letak dengan betul.

Jika anda lakukan:

dan

atau

dan

Tiada masalah dengan kedua-duanya, tetapi yang terakhir memberikan kebolehbacaan yang lebih baik untuk anda dan perangkak, pembaca, dsb.

Suka+0

Tambah Balasan

P粉2001385102023-08-23 13:52:22 Tingkat 1

Kamus Oxford menyatakan perkara berikut:

Seperti namanya, teg ini direka bentuk untuk meningkatkan makna halaman web anda. Semantik yang baik memainkan peranan penting dalam pemprosesan automatik dokumen. Pemprosesan automatik ini berlaku lebih kerap daripada yang anda sedar - setiap tapak web yang disenaraikan mengikut enjin carian diperoleh daripada pemprosesan automatik semua tapak web.

Jika anda melawat halaman web (reka bentuk yang baik), sebagai pembaca manusia, anda boleh dengan segera (secara visual) membezakan semua elemen halaman dan yang lebih penting memahami kandungannya. Di bahagian atas sebelah kiri anda boleh melihat logo syarikat, di sebelah navigasi tapak, terdapat bar carian dan beberapa teks tentang syarikat itu, pautan ke produk yang boleh anda beli dan penafian undang-undang di bahagian bawah.

Walau bagaimanapun, mesin adalah bodoh dan tidak boleh melakukan ini: Melihat halaman yang sama seperti halaman anda, perangkak web hanya akan melihat imej, satu siri teg sauh, nod teks, medan input dan imej dengan pautan. Terdapat satu lagi nod teks di bahagian bawah. Sekarang, bagaimana mereka sepatutnya mengetahui bahagian dokumen yang anda ingin jadikan navigasi atau artikel utama, atau nota kaki yang kurang penting? Mereka boleh meneka petunjuk untuk elemen tertentu dengan menganalisis struktur dokumen anda menggunakan beberapa kriteria biasa. Sebagai contoh, senarai

Sekarang bayangkan jika

biasa digunakan dan bukannya elemen

- mesin segera mengetahui tujuan elemen ini:

// 机器：好的，这个结构看起来可能是一个导航元素？ ...
 // 机器：啊，一个导航元素！ ...

Sekarang, teks di dalam tag

- ini jelas merupakan maklumat paling penting pada halaman! Di sebelah kiri, nod teks, imej dan nod sauh semuanya tergolong dalam kumpulan yang sama kerana semuanya dikumpulkan dalam teg

, manakala di bahagian bawah terdapat beberapa teks dalam elemen

Contoh:
Sebagai pengguna (membaca halaman tanpa melihat penanda sebenar), anda tidak peduli sama ada elemen terkandung dalam tegatau. Dalam kebanyakan penyemak imbas, kedua-dua tab akan dipaparkan secara identik - sebagai teks yang dicondongkan - dan selagi ia diserlahkan antara teks di sekeliling, ia memenuhi tujuannya.

Walau bagaimanapun, terdapat perbezaan besar dari perspektif semantik:
bermaksud italik - ia hanyalah petunjuk kepada penyemak imbas untuk memaparkannya (dalam huruf condong) dan tidak semestinya mengandungi maklumat semantik yang lebih mendalam.
bermaksud penekanan - ia menunjukkan maklumat penting. Kini, penyemak imbas tidak lagi terhad kepada arahan condong dan boleh menjadikannya dalam huruf condong, tebal, garis bawah atau dalam warna lain... Bagi mereka yang cacat penglihatan, pembaca skrin boleh menguatkan suara mereka - mana-mana kaedah yang kelihatan terbaik dalam situasi tertentu. untuk menekankan mesej penting ini.

Fikiran Akhir:
Penandaan semantik bukanlah penamat. Terdapat juga metadata, ontologi, bahasa penerangan sumber dan banyak lagi, yang seterusnya membantu menghubungkan data antara halaman web yang berbeza malah boleh membantu mencipta pengetahuan baharu!

Sebagai contoh, Wikipedia melakukan tugas yang teruk dalam menyampaikan data secara semantik.

https://ms.wikipedia.org/wiki/Barack_Obama
https://ms.wikipedia.org/wiki/Donald_Trump
https://ms.wikipedia.org/wiki/Joe_Biden

Ketiga-tiga ini adalahwatakyang berkhidmat sebagaiPresidenAmerika Syarikatpada suatu ketika.

Ketiga-tiga artikel termasuk bar sisi yang memaparkan maklumat ini dan anda boleh membandingkannya (buka kedua-dua halaman dan bertukar ke belakang dan ke belakang), tetapi ia tidak diterangkan secara semantik. Sebaliknya, jika Wikipedia menggunakan ontologi untuk menggambarkan seseorang:http://dbpedia.org/ontology/Person

  Barrack Hussein Obama II 1961-08-04 country::USA 2009-01-20 – 2017-01-20

Kini anda (dan mesin) boleh membandingkan ketiga-tiga ini secara langsung (pada halaman yang dijana secara dinamik!) dan juga mencipta pengetahuan baharu, seperti menunjukkan senarai semua presiden AS - agak membosankan tetapi juga hebat, seperti pemimpin dunia semasa Berapa ramai orang ada, berapa ramai pemimpin dunia wanita, siapa pemimpin paling muda, berapa jenis pemimpin (presiden/maharaja/ratu/diktator), yang paling lama berkhidmat, berapa orang yang lebih tinggi daripada 175cm dan mempunyai mata coklat dll.

Kesimpulannya, semantik yang baik adalah sangat keren (tetapi secara teknikalnya sukar untuk dilaksanakan dan dikekalkan).

Suka+0

Tambah Balasan