Prinsip penting pergerakan Piawaian Web yang bertanggungjawab terhadap industri yang kita ada hari ini adalah idea untuk menggunakan elemen HTML untuk apa yang mereka bukannya bagaimana mereka mungkin muncul dalam penyemak imbas secara lalai. Ini dikenali sebagai menggunakan Semantik HTML.
Apa itu Semantik HTML
Semantik HTML atau markup semantik ialah HTML yang memperkenalkan makna ke laman web daripada sekadar persembahan. Sebagai contoh, tag
menandakan bahawa teks yang disertakan adalah perenggan.
Ini adalah semantik dan presentasi, kerana orang tahu apa perenggan dan pelayar tahu cara memaparkannya.
Di sebelah flip persamaan ini, tag seperti dan tidak semantik, kerana mereka hanya menentukan bagaimana teks harus kelihatan (berani atau italik) dan tidak memberikan makna tambahan kepada markup.
Contoh tag HTML semantik termasuk tag header
melalui , , dan . Terdapat banyak lagi tag HTML semantik yang boleh digunakan semasa anda membina laman web yang mematuhi piawaian.
Kenapa Anda Perlu Mengurus Semantik
Manfaat menulis semantik HTML berasal dari apa yang seharusnya menjadi matlamat memandu dari mana-mana halaman web - keinginan untuk berkomunikasi. Dengan menambah tag semantik pada dokumen anda, anda memberikan maklumat tambahan mengenai dokumen itu, yang membantu dalam komunikasi. Khususnya, tag semantik menjadikannya jelas kepada penyemak imbas apa makna halaman dan kandungannya.
Kejelasan itu juga dikomunikasikan dengan enjin carian, memastikan halaman yang betul dihantar untuk pertanyaan yang betul.
Tag HTML Semantik memberikan maklumat mengenai kandungan tag tersebut yang melampaui cara mereka melihat halaman. Teks yang dilampirkan dalam tag segera diiktiraf oleh penyemak imbas sebagai beberapa jenis bahasa pengekodan.
Daripada cuba membuat kod itu, pelayar memahami bahawa anda menggunakan teks itu sebagai contoh kod untuk tujuan artikel atau tutorial dalam talian semacam jenis.
Menggunakan tag semantik memberi anda lebih banyak cangkuk untuk menggayakan kandungan anda. Mungkin hari ini anda lebih suka untuk mempamerkan contoh kod anda dalam gaya penyemak imbas lalai, tetapi esok, anda mahu memanggilnya dengan warna latar belakang kelabu, dan kemudian anda ingin menentukan font tumpuan mono jarak keluarga atau tumpuan font yang digunakan untuk sampel anda. Anda boleh dengan mudah melakukan semua perkara ini dengan menggunakan markup semantik dan menggunakan CSS dengan bijak.
Gunakan Teg Semantik dengan betul
Apabila anda ingin menggunakan tag semantik untuk menyampaikan makna dan bukannya untuk tujuan persembahan, anda perlu berhati-hati bahawa anda tidak menggunakannya secara salah hanya untuk sifat paparan biasa mereka. Beberapa tanda semantik yang disalahgunakan termasuk:
- blockquote - Sesetengah orang menggunakan tag untuk indentasi teks yang bukan sebut harga. Ini kerana blockquotes diandaikan secara lalai. Sekiranya anda hanya ingin mendapat keuntungan dari lekukan, tetapi teks itu bukan satu blok, sebaliknya menggunakan margin CSS.
- p - Beberapa pengedit web menggunakan
& nbsp; p> (ruang tidak pecah yang terkandung dalam paragraoph) untuk menambah ruang tambahan antara unsur halaman, bukannya mentakrifkan perenggan sebenar untuk teks halaman itu. Seperti contoh indentasi yang disebutkan sebelumnya, anda harus menggunakan margin atau gaya padding untuk menambahkan ruang.
- ul - Seperti blockquote, melampirkan teks di dalam indikator
indent yang teks dalam kebanyakan penyemak imbas. Ini adalah kedua-dua HTML secara tidak betul dan tidak sah, kerana hanya tag - sah dalam tag
. Sekali lagi, gunakan gaya margin atau padding untuk teks inden.
- h1-h6 - Teg tajuk boleh digunakan untuk membuat fon lebih besar dan lebih berani, tetapi jika teks bukan tajuk, ia tidak sepatutnya berada di dalam tag tajuk. Gunakan font-weight dan font-size CSS properties instead jika anda ingin mengubah saiz atau berat teks spesifik pada halaman anda ..
Dengan menggunakan tag HTML yang mempunyai makna, anda membuat halaman yang memberikan lebih banyak maklumat daripada sekadar segalanya dengan tag
.
Tag HTML Apa Semantik?
Walaupun hampir setiap tag HTML4 dan semua tag HTML5 mempunyai makna semantik, sesetengah tag sememangnya bersifat semantik.
Sebagai contoh, HTML5 telah mentakrifkan semula makna dan tag menjadi semantik. Tag tidak menyampaikan lebih penting, melainkan teks yang biasanya diberikan dalam huruf tebal. Teg juga tidak menyampaikan kepentingan atau penekanan yang lebih penting, melainkan mentakrifkan teks yang biasanya ditulis dalam huruf miring.
Tags HTML Semantik
Singkatan Acronym
Sebut harga panjang Definisi Alamat untuk pengarang dokumen Petikan
Rujukan kod Teks Teletype Bahagian logik Bekas gaya inline generik Teks dipadamkan Teks disisipkan Penekanan Penekanan yang kuat
Tajuk utama peringkat pertama
Tajuk peringkat kedua
Tajuk peringkat ketiga
Tajuk peringkat keempat
Tajuk peringkat kelima
Tajuk peringkat keenam
Cerita tematik Teks yang akan dimasukkan oleh pengguna Teks pra-diformat
Petikan sebaris pendek Output sampel Subskrip Superskrip Teks ditakrifkan atau diubah oleh pengguna
, dan . Terdapat banyak lagi tag HTML semantik yang boleh digunakan semasa anda membina laman web yang mematuhi piawaian.
Kenapa Anda Perlu Mengurus Semantik
Manfaat menulis semantik HTML berasal dari apa yang seharusnya menjadi matlamat memandu dari mana-mana halaman web - keinginan untuk berkomunikasi. Dengan menambah tag semantik pada dokumen anda, anda memberikan maklumat tambahan mengenai dokumen itu, yang membantu dalam komunikasi. Khususnya, tag semantik menjadikannya jelas kepada penyemak imbas apa makna halaman dan kandungannya.
Kejelasan itu juga dikomunikasikan dengan enjin carian, memastikan halaman yang betul dihantar untuk pertanyaan yang betul.
Tag HTML Semantik memberikan maklumat mengenai kandungan tag tersebut yang melampaui cara mereka melihat halaman. Teks yang dilampirkan dalam tag segera diiktiraf oleh penyemak imbas sebagai beberapa jenis bahasa pengekodan.
Daripada cuba membuat kod itu, pelayar memahami bahawa anda menggunakan teks itu sebagai contoh kod untuk tujuan artikel atau tutorial dalam talian semacam jenis.
Menggunakan tag semantik memberi anda lebih banyak cangkuk untuk menggayakan kandungan anda. Mungkin hari ini anda lebih suka untuk mempamerkan contoh kod anda dalam gaya penyemak imbas lalai, tetapi esok, anda mahu memanggilnya dengan warna latar belakang kelabu, dan kemudian anda ingin menentukan font tumpuan mono jarak keluarga atau tumpuan font yang digunakan untuk sampel anda. Anda boleh dengan mudah melakukan semua perkara ini dengan menggunakan markup semantik dan menggunakan CSS dengan bijak.
Gunakan Teg Semantik dengan betul
Apabila anda ingin menggunakan tag semantik untuk menyampaikan makna dan bukannya untuk tujuan persembahan, anda perlu berhati-hati bahawa anda tidak menggunakannya secara salah hanya untuk sifat paparan biasa mereka. Beberapa tanda semantik yang disalahgunakan termasuk:
- blockquote - Sesetengah orang menggunakan tag untuk indentasi teks yang bukan sebut harga. Ini kerana blockquotes diandaikan secara lalai. Sekiranya anda hanya ingin mendapat keuntungan dari lekukan, tetapi teks itu bukan satu blok, sebaliknya menggunakan margin CSS.
- p - Beberapa pengedit web menggunakan
& nbsp; p> (ruang tidak pecah yang terkandung dalam paragraoph) untuk menambah ruang tambahan antara unsur halaman, bukannya mentakrifkan perenggan sebenar untuk teks halaman itu. Seperti contoh indentasi yang disebutkan sebelumnya, anda harus menggunakan margin atau gaya padding untuk menambahkan ruang.
- ul - Seperti blockquote, melampirkan teks di dalam indikator
indent yang teks dalam kebanyakan penyemak imbas. Ini adalah kedua-dua HTML secara tidak betul dan tidak sah, kerana hanya tag - sah dalam tag
. Sekali lagi, gunakan gaya margin atau padding untuk teks inden.
- h1-h6 - Teg tajuk boleh digunakan untuk membuat fon lebih besar dan lebih berani, tetapi jika teks bukan tajuk, ia tidak sepatutnya berada di dalam tag tajuk. Gunakan font-weight dan font-size CSS properties instead jika anda ingin mengubah saiz atau berat teks spesifik pada halaman anda ..
Dengan menggunakan tag HTML yang mempunyai makna, anda membuat halaman yang memberikan lebih banyak maklumat daripada sekadar segalanya dengan tag
.
Tag HTML Apa Semantik?
Walaupun hampir setiap tag HTML4 dan semua tag HTML5 mempunyai makna semantik, sesetengah tag sememangnya bersifat semantik.
Sebagai contoh, HTML5 telah mentakrifkan semula makna dan tag menjadi semantik. Tag tidak menyampaikan lebih penting, melainkan teks yang biasanya diberikan dalam huruf tebal. Teg juga tidak menyampaikan kepentingan atau penekanan yang lebih penting, melainkan mentakrifkan teks yang biasanya ditulis dalam huruf miring.
Tags HTML Semantik
Singkatan Acronym
Sebut harga panjang Definisi Alamat untuk pengarang dokumen Petikan
Rujukan kod Teks Teletype Bahagian logik Bekas gaya inline generik Teks dipadamkan Teks disisipkan Penekanan Penekanan yang kuat
Tajuk utama peringkat pertama
Tajuk peringkat kedua
Tajuk peringkat ketiga
Tajuk peringkat keempat
Tajuk peringkat kelima
Tajuk peringkat keenam
Cerita tematik Teks yang akan dimasukkan oleh pengguna Teks pra-diformat
Petikan sebaris pendek Output sampel Subskrip Superskrip Teks ditakrifkan atau diubah oleh pengguna