Penjelasan terperinci mengenai elemen semantik HTML5 dan panduan untuk membina struktur halaman

mata teras

• HTML5 memperkenalkan unsur -unsur semantik baru untuk meningkatkan makna struktur dokumen, seperti header, seksyen, artikel, nav, mengetepikan, dan elemen footer. Unsur -unsur ini boleh digunakan untuk membahagikan halaman dan menjelaskan tujuan kandungan.
Elemen header
• tidak hanya digunakan untuk tajuk halaman, tetapi juga memperkenalkan setiap bahagian kandungan. Elemen seksyen mewakili kumpulan subjek kandungan, biasanya dengan tajuk. Unsur artikel mewakili komponen lengkap dan bebas dalam dokumen dan boleh wujud secara bebas.
Unsur
• nav mewakili satu set pautan navigasi dan harus dikhaskan untuk navigasi utama. Unsur selain itu mewakili sebahagian halaman, secara tidak langsung berkaitan dengan kandungan sekitarnya, dan boleh dianggap berasingan dari kandungan.
Unsur footer
• mewakili footer bahagian kandungan nenek moyangnya yang paling terkini. Ia biasanya mengandungi maklumat hak cipta, senarai pautan yang berkaitan, maklumat pengarang, dan maklumat serupa yang biasanya anda fikirkan adalah pada akhir blok kandungan.

(berikut adalah dikutip dari buku "HTML5 & CSS3 untuk dunia nyata, edisi ke-2" yang dikarang oleh Alexis Goldstein, Louis Lazaris dan Estelle Weyl. Anda juga boleh mencari di sini Selepas memecahkan asas -asas templat, mari kita mula menambah beberapa kandungan ke halaman dan membina strukturnya.

Selepas buku ini, kami akan memperkenalkan penambahan ciri -ciri CSS3 dan elemen HTML5 yang lain; Dalam bahagian ini dan dalam bab -bab berikut, kami akan meliputi semantik secara meluas. Apabila kita menggunakan istilah "semantik", kita merujuk kepada cara elemen HTML yang diberikan menerangkan makna kandungannya.

Jika anda melihat semula tangkapan skrin HTML5 Herald (atau melihat laman web dalam talian), anda akan melihat bahawa ia dibahagikan kepada bahagian berikut:

bahagian header dengan logo dan tajuk

bar navigasi
Kandungan utama dibahagikan kepada tiga lajur
• Artikel dan blok iklan dalam lajur
footer yang mengandungi beberapa pengarang dan maklumat hak cipta
• Sebelum kita menentukan unsur -unsur yang sesuai untuk bahagian -bahagian yang berbeza dari halaman ini, mari kita pertimbangkan beberapa pilihan. Pertama, kami akan memperkenalkan anda kepada beberapa elemen semantik HTML5 baru yang boleh digunakan untuk membantu membahagikan halaman dan menambah makna lebih banyak kepada struktur dokumen.

elemen header

Secara semulajadi, kita akan memberi tumpuan kepada elemen header terlebih dahulu. Spesifikasi ini menggambarkannya sebagai "satu set alat pengantar atau navigasi."

bertentangan dengan apa yang biasanya anda anggap, anda boleh memasukkan elemen header baru untuk memperkenalkan setiap bahagian kandungan. Ia tidak terhad kepada tajuk halaman (biasanya anda boleh menggunakan <div> untuk tag). Apabila kita menggunakan perkataan "seksyen" di sini, kita tidak terhad kepada elemen seksyen sebenar yang diterangkan dalam bahagian seterusnya; Ini bermakna mana -mana blok kandungan yang mungkin memerlukan tajuk anda sendiri, walaupun ia bermakna terdapat beberapa blok tersebut pada halaman. Elemen header boleh digunakan untuk memasukkan kandungan pengantar atau bantuan navigasi yang khusus untuk mana -mana bahagian halaman, atau untuk memohon ke seluruh halaman, atau kedua -duanya. <p> Walaupun elemen header biasanya diletakkan di bahagian atas halaman atau bahagian, definisi tidak ada kaitan dengan kedudukannya. Susun atur laman web anda mungkin memerlukan tajuk artikel atau postingan blog untuk berada di sebelah kiri, kanan, atau bahkan di bawah kandungan; </p> <p> <strong> elemen seksyen </strong> </p> <p> elemen seterusnya yang harus anda kenal adalah elemen seksyen HTML5. Spesifikasi mentakrifkan seksyen seperti berikut: </p> <blockquote> Unsur seksyen <p> mewakili bahagian umum dokumen atau permohonan. Dalam konteks ini, bahagian adalah topik pengumpulan kandungan, biasanya dengan tajuk. </p> </blockquote> <p> Ia menjelaskan bahawa seksyen itu tidak boleh digunakan sebagai bekas tujuan umum untuk tujuan gaya atau skrip sahaja. Jika anda tidak boleh menggunakan seksyen sebagai bekas tujuan umum (contohnya, untuk melaksanakan susun atur CSS yang diperlukan), apa yang perlu anda gunakan? Unsur div sahabat lama kami, secara semantik tidak bermakna apa -apa. </p> <p> Kembali ke definisi dalam spesifikasi, kandungan elemen seksyen harus "tematik", jadi tidak betul untuk menggunakannya dengan cara yang sama untuk membungkus bahagian yang tidak berkaitan. </p> Beberapa contoh penggunaan elemen bahagian <p> termasuk: </p> <ul> <li> bahagian antara muka tab </li> <li> bahagian halaman "mengenai"; </li> bahagian yang berbeza dari jangka panjang halaman perkhidmatan <li> </li> Setiap bahagian laman web berita dalam talian; <li> </li> </ul> NOTA: Gunakan bahagian dengan betul <p> <strong> </strong> Setiap kali penanda semantik baru diberikan kepada pereka web, penggunaan unsur -unsur yang betul, niat norma, dan lain -lain dibincangkan. Anda mungkin ingat perbincangan sebelumnya mengenai penggunaan unsur -unsur DL yang sesuai dalam spesifikasi HTML. Seperti yang dijangkakan, HTML5 tidak kebal terhadap fenomena ini, terutamanya dari segi elemen seksyen. Malah Bruce Lawson, pihak berkuasa HTML5 yang sangat dihormati, mengakui menggunakan seksyen yang salah pada masa lalu. Untuk pemahaman yang lebih jelas, adalah baik untuk membaca artikel Bruce yang menerangkan kesilapannya. </p> <p> Pendek kata: </p> <ul> Bahagian <li> adalah <em> generik </em>, jadi jika elemen semantik yang lebih spesifik berlaku (seperti artikel, selain, atau nav), gunakan elemen itu sebaliknya. </li> <li> Seksyen <em> mempunyai makna semantik; Sekiranya anda tidak boleh menggunakan hanya beberapa perkataan untuk menggambarkan segala yang anda cuba masukkan ke dalam bahagian, anda mungkin mahu bekas neutral semantik: Div yang tidak mencolok. </em> </li> </ul> iaitu, seperti semantik, ia boleh ditafsirkan dalam beberapa kes. Jika anda rasa anda boleh menjelaskan mengapa anda menggunakan elemen yang diberikan dan bukannya elemen lain, teruskan. Jika seseorang benar -benar mengkritik anda mengenai perkara ini, perbincangan yang dihasilkan akan menjadi menarik dan bermanfaat bagi semua peserta dan mungkin juga membantu komuniti yang lebih luas memahami norma. <p> </p> Juga ingat bahawa jika sesuai, anda boleh bersarang elemen seksyen ke dalam elemen seksyen yang sedia ada. Sebagai contoh, untuk laman berita dalam talian, bahagian Berita Dunia boleh dibahagikan lagi kepada bahagian setiap rantau global utama. <p> </p> <p> elemen artikel <strong> </strong> Elemen artikel </p> adalah serupa dengan elemen seksyen, tetapi mempunyai beberapa perbezaan yang signifikan. Berikut adalah definisi dalam spesifikasi: <p> </p> Elemen artikel <blockquote> mewakili komponen lengkap atau bebas dokumen, halaman, aplikasi, atau tapak dan pada dasarnya boleh diedarkan secara bebas atau digunakan semula, contohnya dalam pelepasan bersama. <p> </p> </blockquote> Kata kunci dalam definisi ini adalah <p> komponen bebas <em> dan </em> diedarkan secara bebas <em>. Walaupun seksyen boleh mengandungi apa -apa yang boleh dikumpulkan mengikut topik, artikel mestilah satu kandungan yang boleh wujud secara bebas. Perbezaan ini sukar difahami, jadi jika anda mempunyai soalan, cubalah ujian penerbitan bersama: jika kandungan boleh disiarkan semula di laman web lain tanpa pengubahsuaian, atau jika ia boleh dibuat melalui RSS atau laman media sosial seperti Twitter atau Facebook Push adalah Kemas kini, maka ia mempunyai ciri -ciri artikel. </em> </p> Akhirnya, terpulang kepada anda untuk menentukan apa yang menjadi artikel, tetapi berikut adalah beberapa cadangan yang mematuhi spesifikasi: <p> </p> <ul> Forum Posts <li> </li> artikel majalah atau akhbar <li> </li> Posts blog <li> </li> Komen pada catatan blog atau artikel yang dikemukakan oleh pengguna <li> </li> </ul> Akhir sekali, seperti elemen seksyen, elemen artikel boleh bersarang dalam elemen artikel lain. Anda juga boleh bersarang dalam artikel dan sebaliknya. Semuanya bergantung pada apa yang anda mahu tandakan. <p> </p> <p> elemen nav <strong> </strong> </p> Pasti, elemen NAV muncul dalam hampir setiap projek. NAV sebagai maksudnya: satu set pautan navigasi. Walaupun penggunaan NAV yang paling biasa adalah senarai pautan pembalut yang tidak teratur, terdapat pilihan lain. Sebagai contoh, anda boleh membungkus elemen NAV di sekitar perenggan teks yang mengandungi pautan navigasi utama untuk bahagian halaman atau halaman. <p> </p> Dalam kedua -dua kes, elemen NAV harus dikhaskan untuk navigasi yang paling penting. Oleh itu, adalah disyorkan agar anda mengelakkan menggunakan NAV untuk senarai pautan pendek di footer, sebagai contoh. <p> </p> <p> Nota: Langkau pautan navigasi <strong> </strong></p> <p> Satu corak reka bentuk yang mungkin anda lihat pelaksanaan di banyak laman web ialah pautan "Skip Navigation". Tujuannya adalah untuk membolehkan pengguna pembaca skrin cepat melangkau navigasi utama laman web jika mereka telah mendengarnya - selepas semua, tidak perlu mendengar keseluruhan menu navigasi laman web besar setiap kali mereka mengklik pada halaman baru! Unsur NAV mempunyai potensi untuk menghapuskan keperluan ini; Spesifikasi menyatakan: "Ejen pengguna untuk pengguna yang mungkin mendapat manfaat daripada menghilangkan maklumat navigasi dalam rendering awal atau mungkin mendapat manfaat daripada menyediakan maklumat navigasi dengan segera, seperti pembaca skrin, boleh menggunakan elemen ini untuk menentukan sama ada untuk melangkau atau menyediakan atas permintaan pada halaman </p> Walaupun tidak semua peranti tambahan mengiktiraf NAV, dengan membina piawaian sekarang anda dapat memastikan halaman anda akan menjadi lebih mudah dari masa ke masa apabila pembaca skrin bertambah baik. <p> </p> <p> NOTA: Ejen Pengguna <strong> </strong> </p> Anda akan sering menemui istilah "ejen pengguna" apabila melayari spesifikasi. Malah, ia hanya istilah mewah untuk penyemak imbas - "ejen" perisian yang digunakan oleh pengguna untuk mengakses kandungan halaman. Sebab mengapa spesifikasi tidak hanya mengatakan "penyemak imbas" adalah bahawa ejen pengguna boleh memasukkan pembaca skrin atau cara teknikal lain untuk membaca laman web. <p> </p> Anda boleh menggunakan NAV beberapa kali pada halaman tertentu. Jika anda mempunyai bar navigasi utama untuk laman web anda, anda memerlukan elemen NAV. Di samping itu, jika anda mempunyai satu set pautan tambahan ke bahagian yang berlainan dari halaman semasa (menggunakan sauh dalam halaman atau pautan "tempatan"), ini juga boleh dibungkus dalam elemen NAV. <p> </p> Seperti seksyen, terdapat beberapa perdebatan tentang apa yang membentuk penggunaan NAV yang boleh diterima dan mengapa ia tidak disyorkan dalam beberapa kes (mis. Dalam footer). Sesetengah pemaju percaya elemen ini sesuai untuk pautan paging atau breadcrumb, atau untuk bentuk carian yang membentuk navigasi utama laman web (seperti dalam kes di Google). <p> </p> Keputusan ini akhirnya bergantung kepada anda, pemaju. Ian Hickson, editor utama spesifikasi HTML5 Whatwg, menjawab soalan secara langsung: "Gunakannya bila -bila masa anda akan menggunakan kelas = nav". <p> [7] <sup> </sup> </p> <p> Selain elemen <strong> </strong> </p> Elemen ini mewakili sebahagian daripada halaman, "secara tidak langsung berkaitan dengan kandungan di sekeliling elemen dan boleh dianggap berasingan dari kandungan". <p> Unsur selain </p> boleh digunakan untuk membungkus bahagian kandungan yang secara tidak langsung berkaitan dengan: <p> </p> <ul> Kandungan bebas khusus (seperti artikel atau bahagian). <li> </li> keseluruhan halaman atau dokumen, yang biasanya dilakukan apabila menambah bar sisi ke halaman atau laman web. <li> </li> </ul> Selain elemen tidak pernah digunakan untuk membungkus bahagian halaman di mana kandungan utama; Selain kandungan boleh wujud secara bebas, tetapi ia masih harus menjadi sebahagian daripada keseluruhan yang lebih besar. <p>Beberapa kemungkinan penggunaan </p> <p> termasuk sidebars, senarai pautan tambahan, atau blok iklan. Ia juga harus diperhatikan bahawa elemen selain (seperti header) tidak ditakrifkan oleh kedudukannya pada halaman. Ia mungkin berada di sisi atau di tempat lain. Mentakrifkan kandungannya sendiri dan hubungannya dengan unsur -unsur lain. </p> <p> <strong> elemen footer </strong> </p> <p> Elemen terakhir yang akan dibincangkan dalam bab ini adalah elemen footer. Seperti header, anda boleh mempunyai pelbagai elemen footer pada satu halaman dan anda harus menggunakan footer dan bukannya sesuatu yang biasa seperti <code><div>. Dengan spesifikasi, elemen footer mewakili footer bahagian kandungan nenek moyangnya yang paling terkini. Bahagian kandungan boleh menjadi seluruh dokumen, atau ia boleh menjadi seksyen, artikel, atau elemen selain. <p> Footer biasanya mengandungi maklumat hak cipta, senarai pautan yang berkaitan, maklumat pengarang, dan maklumat serupa yang biasanya anda fikirkan adalah pada akhir blok kandungan; halaman, jadi ia tidak perlu muncul pada akhir seksyen atau di bahagian bawah halaman. Ia mungkin ia akan, tetapi ia tidak perlu. Sebagai contoh, maklumat mengenai pengarang jawatan blog boleh dipaparkan di atas artikel dan bukannya di bawahnya dan masih dianggap maklumat footer. </p> <p> <strong> Nota: Bagaimana kita sampai ke tahap ini? </strong> </p> <p> Jika anda mempunyai beberapa soalan mengenai jalan ke HTML5 dan tag yang kami tamat, anda mungkin ingin menyemak buku Luke Stevens The Truth mengenai HTML5. Buku Lukas kini diterbitkan dalam edisi kedua, dan kandungannya agak kontroversial. Di samping meliputi banyak teknologi HTML5 seperti video dan kanvas, dia juga menyelidiki sejarah HTML5, menerangkan beberapa isu semantik dan aksesibiliti yang wujud dalam unsur -unsur baru, dan memberikan beberapa cadangan tentang cara menangani mereka. </p> <hr> <p> <sup> [7] </sup> Lihat <a href="http://ipnx.cn/link/729db3e07a09db3a41dc1734e04ce44e"> http://ipnx.cn/link/729DB3E07A09DB3A41DC1734E04CE4E <s>. </s></a> </p> <p> HTML5 STRUKTUR PAGE FAQ (FAQ) <strong> </strong> </p> Apakah maksud pernyataan dalam HTML5? <h3> </h3> Pengisytiharan adalah baris pertama dokumen HTML5. Ia bukan tag HTML; Dalam HTML5, perisytiharan itu dipermudahkan kepada <p>. Ini membantu memastikan penyemak imbas menjadikan halaman dalam mod standard, yang menyokong spesifikasi HTML terkini. <code><!DOCTYPE html>

Bagaimanakah elemen berfungsi dalam dokumen HTML5?

Elemen

adalah bekas metadata (data mengenai data) yang terletak di antara tag dan tag . Metadata tidak akan dipaparkan pada halaman, tetapi boleh dihuraikan oleh mesin. Ia biasanya mentakrifkan tajuk dokumen, set watak, gaya, skrip, dan maklumat meta lain. Kandungan elemen boleh termasuk unsur -unsur seperti , <title></title>, <meta>, <link> dan <style></style>. <base>Apakah fungsi elemen

dalam html5? Elemen

mengandungi kandungan utama dokumen HTML atau bahagian dokumen HTML yang akan dilihat secara langsung di laman web anda. Ini termasuk teks, imej, jadual, pautan, bentuk, dan jenis data lain. Tag biasanya diikuti dengan tag .

Bagaimanakah elemen meningkatkan struktur HTML5?

elemen

dalam HTML5 digunakan untuk mengandungi kandungan pengenalan atau satu set pautan navigasi. Ia boleh mengandungi beberapa elemen tajuk, dan ia juga boleh mengandungi unsur -unsur lain seperti logo, tajuk untuk membungkus bahagian, bentuk carian, dan banyak lagi. <header></header> Unsur biasanya mengandungi satu atau lebih tag tajuk (H1 - H6), logo atau ikon, dan maklumat pengarang. <header></header>

Apakah tujuan elemen

dalam HTML5? <footer></footer>

elemen

dalam html5 digunakan untuk menentukan footer dokumen atau bahagian. Ia biasanya mengandungi maklumat mengenai penulis dalam bahagian ini, maklumat hak cipta, pautan ke dokumen yang berkaitan, dan sebagainya. Anda boleh memasukkan unsur -unsur pelbagai <footer></footer> dalam satu dokumen. <footer></footer>

Bagaimana elemen meningkatkan struktur halaman html5? <nav></nav>

elemen

dalam html5 digunakan untuk menentukan satu set pautan navigasi. Tidak semua kumpulan pautan di halaman perlu berada di elemen <nav></nav>, yang hanya digunakan untuk blok pautan navigasi utama. Penyemak imbas (seperti pembaca skrin untuk pengguna kurang upaya) boleh menggunakan elemen ini untuk menentukan sama ada untuk menghilangkan rendering awal kandungan ini. <nav></nav> Apakah fungsi elemen

dalam html5?

<article></article> elemen

dalam HTML5 mewakili komponen lengkap atau bebas dokumen, halaman, aplikasi, atau tapak. Ini boleh menjadi artikel forum, majalah atau artikel akhbar, pos blog, komen pengguna yang dikemukakan, widget interaktif atau widget, atau apa-apa item kandungan mandiri yang lain.

<article></article> Bagaimanakah elemen mempromosikan struktur HTML5?

elemen

dalam HTML5 mewakili bahagian fungsi yang berasingan yang terkandung dalam dokumen HTML, biasanya dengan tajuk dan bukannya elemen semantik yang lebih spesifik, seperti

atau <section></section>. Ia adalah topik pengumpulan kandungan, biasanya dengan tajuk, menjadikan struktur dokumen mudah difahami. <article></article> Apakah fungsi elemen <aside></aside> dalam html5?

elemen <aside></aside> dalam HTML5 digunakan untuk mewakili sebahagian daripada dokumen yang kandungannya hanya secara tidak langsung berkaitan dengan kandungan utama dokumen. Selain itu biasanya dibentangkan sebagai bar sisi atau kotak label.

<aside></aside> Bagaimana elemen meningkatkan struktur HTML5?

elemen <main></main> dalam html5 mewakili kandungan utama dokumen

. Kawasan kandungan utama terdiri daripada kandungan atau fungsi pusat aplikasi yang secara langsung berkaitan dengan topik utama dokumen atau memanjangkan topik utama. Ia harus khusus dokumen dan tidak termasuk kandungan pendua dalam satu set dokumen (seperti pautan navigasi tapak, pengepala atau maklumat footer).