Apa Itu Kod Semantik (Semantic Code)

Walaupun anda masih baru dalam pembangunan laman sesawang, asas dalam pembinaan satu-satu laman adalah menggunakan aturcara asas iaitu HTML. HTML merupakan kod asas pengaturcaraan untuk menyampaikan kandungan sesuatu dokumen yang tidak memfokus kepada bentuk penyampaian.

Kod semantik diperkenalkan untuk kembali kepada asas dan menyarankan pembangunan laman sesawang agar menulis kod untuk menerangkan dan menyampaikan kandungan berbanding visual yang dipaparkan. Contohnya, tajuk untuk satu artikel ditulis seperti ini:

<font size="6"><b>Ini adalah tajuk artikel</b></font>

Ini akan menghasilkan tajuk artikel yang bersaiz besar dan ditebalkan. Namun sebenarnya keadaan di atas tidak menerangkan atau mewakili tajuk kandungan tersebut. Dengan erti kata lain, komputer tidak dapat membezakan tajuk dengan kandungan artikel.

Ini kerana komputer membaca sesuatu dokumen berlandaskan kepada kod aturcara yang ditulis DAN bukan kepada bentuk penyampaian visual yang dilihat oleh manusia.

Untuk menghasilkan kod sematik dengan keadaan difahami oleh komputer dan juga manusia adalah melalui cara ini:

<h1>Ini adalah tajuk artikel</h1>

Kod di atas akan difahami oleh komputer sebagai tajuk sesuatu kandungan dan untuk mengawal bentuk penyampaian visual adalah melalui penambahan elemen CSS (Cascading Style Sheet) kepada tag <h1>.

 

Kenapa Kod Semantik Penting?

Seperti yang saya nyatakan sebelum ini, tiada sebab atau alasan yang boleh menerangkan kepentingan kod semantik adalah kerana komputer tidak membaca atau menganalisis satu-satu dokumen berdasarkan kepada visual sebaliknya mengindentitikan dokumen berdasarkan kepada kod penulisan.

  • Bagi golongan pengguna yang mempunyai masalah penglihatan, mereka bergantung kepada fungsi tambahan sesuatu sistem untuk membaca laman bagi pihak mereka. Sistem akan membaca berdasarkan kepada kod-kod penulisan dan bukan dari segi visual.
  • Agen Carian perlu memahami isi kandungan sesuatu laman bagi membolehkan laman diindeks dan dinilai. Kod semantik memberikan ruang kemudahan kepada Agen Carian untuk lebih memahami bentuk dan struktur kandungan.

Di samping itu, kod semantik mempunyai kelebihan lain seperti:

  • Kod semantik lebih pendek, maka laman lebih cepat dimuat turun
  • Kod semantik membolehkan sesuatu laman dikemas kini dari segi paparan visual dengan mengubah suai kepada CSS dan diaplikasikan kepada keseluruhan laman
  • Kod semantik lebih tersusun dan mudah difahami oleh golongan yang baru dalam bidang ini
  • Kod semantik tidak mempunyai kod tambahan maka lebih mudah mengubah suai bentuk visual tanpa perlu melakukan semuanya dari awal
  • Rekaan bentuk laman dan kandungan laman merupakan dua perkara yang berlainan. Kod semantik menyampaikan kandungan laman dan CSS mengawal dan menterjemahkan paparan visual kepada kandungan yang disampaikan

 

Bagaimana Mempraktikkan Penggunaan Kod Semantik

Pertamanya, buat masa ini tiada perisian atau alatan yang boleh digunakan untuk melaksanakan hal ini. Ianya berkaitan dengan isu praktikal dan cara penulisan kod serta penggunaan elemen tag dan atribut dalam dokumen.

Pembangun perlu fokus kepada kod sama ada melibatkan bentuk penyampaian visual atau kod yang menerangkan perkara yang ingin disampaikan.

Jadi pembangun perlu lebih peka dan memilih untuk fokus kepada bentuk dan struktur yang lebih tersusun atau kepada bentuk penyampaian visual yang lebih menyerlah. Namun tidak mustahil untuk menggabungkan kedua-dua perkara ini hany perlu meluangkan sedikit masa.

Penilaian: 
3
Your rating: None Average: 3 (2 votes)

Komen

blogger_boy's picture

ooo.. kod yang lebih pendek akan lebih cepat dimuat turun rupanyer..
penggunaan gambar mcm mana pula para?

------

[center]Bersekutu diantara sesama itu akan saling menguatkan. Jika kita melihat ada geng kita lemah, kita akan bantu untuk menguatkan mereka. Dan tatkala kita lemah, mungkin mereka juga akan menolong kita. Marilah kita membentuk satu kumpulan yang saling bantu-membantu dan menguatkan.[/center]

parasolx's picture
Admin

yea mmg betul.. tapi kod semantik nih nak memastikan satu piawai atau standard dalam penulisan kod yang boleh dibaca oleh komputer dan manusia.. mengenai gambar pula, tiada masalah..

pada kod [img] tersebut jangan lupa untuk masukkan atribut title=" " dan alt=" ". biasanya semantik tak tekan sangat pd image tetapi lebih kepada struktur kandungan dan penggunaan CSS.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

blogger_boy's picture

bukakn ker penggunaan image yg banyak dalam sesuatu lamanweb tuh akan memakan bandwidth yg banyak??

------

[center]Bersekutu diantara sesama itu akan saling menguatkan. Jika kita melihat ada geng kita lemah, kita akan bantu untuk menguatkan mereka. Dan tatkala kita lemah, mungkin mereka juga akan menolong kita. Marilah kita membentuk satu kumpulan yang saling bantu-membantu dan menguatkan.[/center]

parasolx's picture
Admin

yeap betul.. tapi satu laman web yang penuh dengan image sekali pun tak akan habes bandwidth tersebut kecuali ade servis downloading. untuk laman web biasa tak perlu titik berat pasal bandwidth.. yang perlu dititik beratkan adalah proses untuk loading page..

kadang kala laman yang penuh dengan image akan slowkan sket laman web utk diloading.. tapi kalu guna CSS Sprite boleh reducekan HTTP request utk tingkatkan loading speed.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

blogger_boy's picture

oo..mcm tuh rupanya..keh2 tambah sikit ilmu aku ari nie...

------

[center]Bersekutu diantara sesama itu akan saling menguatkan. Jika kita melihat ada geng kita lemah, kita akan bantu untuk menguatkan mereka. Dan tatkala kita lemah, mungkin mereka juga akan menolong kita. Marilah kita membentuk satu kumpulan yang saling bantu-membantu dan menguatkan.[/center]