Mengapa memilih teg semantik HTML5 dan bukannya teg div?

Question

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.

Answer 1

Terdapat artikel bagus tentang semantik HTML5 di HTML5Doctor.

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 <div>, 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:

<div class="nav"></div>

dan

<nav></nav>

atau

<div class="sidebar"></div>

dan

<aside></aside>

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

Answer 2

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

pautan dalaman berkemungkinan besar sejenis navigasi halaman dan teks pada penghujung dokumen diperlukan tetapi kandungan tidak terlalu penting untuk penonton setiap hari (penafian undang-undang).

Sekarang bayangkan jika

biasa digunakan dan bukannya elemen

- mesin segera mengetahui tujuan elemen ini:

// 机器：好的，这个结构看起来可能是一个导航元素？
<div><ul><li><a href="internal_link">...</div>

// 机器：啊，一个导航元素！
<nav><ul><li><a>...</nav>

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

(mereka masih tidak tahu maksud teks itu, tetapi kini mereka boleh membuat kesimpulan bahawa ia adalah sejenis cetakan halus).

Contoh:
Sebagai pengguna (membaca halaman tanpa melihat penanda sebenar), anda tidak peduli sama ada elemen terkandung dalam teg atau . 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 adalah watak yang berkhidmat sebagai Presiden Amerika Syarikat pada 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

<!-- President是Politician的子类，Politician是Person的子类 -->
<President> 
    <birthname>Barrack Hussein Obama II</birthname>
    <birthdate>1961-08-04</birthdate>
    <headOf>country::USA</headOf>
    <tenure>2009-01-20 – 2017-01-20</tenure>
</President>

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).