Mengapa Menggunakan Semantik HTML?

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; (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.