Elemen HTML semantik adalah unsur-unsur yang secara jelas menggambarkan maksudnya dengan cara yang dapat dibaca oleh manusia dan mesin.

Elemen seperti , dan semuanya dianggap semantik kerana mereka menggambarkan dengan tepat tujuan elemen dan jenis kandungan yang ada di dalamnya.

Apakah Elemen Semantik?

HTML pada asalnya dibuat sebagai bahasa markup untuk menerangkan dokumen di internet awal. Apabila internet berkembang dan diadopsi oleh lebih banyak orang, keperluannya berubah.

Di mana internet pada mulanya ditujukan untuk berkongsi dokumen ilmiah, kini orang juga ingin berkongsi perkara lain. Dengan cepat, orang mula mahu menjadikan web kelihatan lebih baik.

Oleh kerana web pada awalnya tidak dibina untuk dirancang, pengaturcara menggunakan peretasan yang berbeza untuk membuat sesuatu disusun dengan cara yang berbeza. Daripada menggunakan

untuk menerangkan maklumat menggunakan jadual, pengaturcara akan menggunakannya untuk meletakkan elemen lain pada halaman.

Ketika penggunaan tata letak yang dirancang secara visual berkembang, pengaturcara mulai menggunakan tag "non-semantik" generik seperti . Mereka sering memberikan unsur classatau idatribut ini untuk menerangkan tujuannya. Sebagai contoh, bukannya ini sering ditulis sebagai .

Oleh kerana HTML5 masih agak baru, penggunaan elemen bukan semantik ini masih biasa dilakukan di laman web hari ini.

Senarai elemen semantik baru

Elemen semantik yang ditambahkan dalam HTML5 adalah:

Unsur-unsur seperti , , , , , dan bertindak lebih kurang seperti unsur-unsur. Mereka mengumpulkan unsur-unsur lain ke dalam bahagian halaman. Walau di mana tag boleh mengandungi jenis maklumat apa pun, mudah untuk mengenal pasti jenis maklumat yang akan masuk di wilayah semantik .

Contoh susun atur elemen semantik oleh w3schools

Mengapa menggunakan unsur semantik?

Untuk melihat faedah elemen semantik, berikut adalah dua bahagian kod HTML. Blok kod pertama ini menggunakan unsur semantik:

Walaupun blok kod kedua ini menggunakan unsur bukan semantik:

Pertama, lebih senang dibaca . Ini mungkin perkara pertama yang anda akan perhatikan ketika melihat blok kod pertama menggunakan elemen semantik. Ini adalah contoh kecil, tetapi sebagai pengaturcara, anda dapat membaca ratusan atau ribuan baris kod. Semakin mudah membaca dan memahami kod itu, semakin mudah tugas anda.

Ia mempunyai aksesibilitas yang lebih besar . Anda bukan satu-satunya yang mendapati elemen semantik lebih mudah difahami. Enjin carian dan teknologi bantu (seperti pembaca skrin untuk pengguna dengan masalah penglihatan) juga dapat memahami konteks dan kandungan laman web anda dengan lebih baik, yang bermaksud pengalaman yang lebih baik bagi pengguna anda.

Secara keseluruhan, elemen semantik juga membawa kepada kod yang lebih konsisten . Apabila membuat header menggunakan unsur-unsur bukan semantik, pengaturcara berbeza mungkin menulis ini sebagai , , , atau hanya . Terdapat banyak cara untuk membuat elemen tajuk, dan semuanya bergantung pada pilihan peribadi pengaturcara. Dengan membuat elemen semantik standard, ini memudahkan semua orang.

Sejak Oktober 2014, HTML4 ditingkatkan menjadi HTML5, bersama dengan beberapa elemen "semantik" baru. Hingga hari ini, sebilangan dari kita mungkin masih bingung mengapa begitu banyak elemen yang tidak menunjukkan perubahan besar.

dan

"Apa bezanya?", Anda mungkin bertanya. Kedua-dua elemen ini digunakan untuk membagi kandungan, dan ya, mereka pasti dapat digunakan secara bergantian. Ini masalah dalam keadaan mana. HTML4 hanya menawarkan satu jenis elemen kontena, iaitu . Walaupun ini masih digunakan dalam HTML5, HTML5 memberi kami dan cara untuk mengganti .

The dan unsur-unsur adalah konsep yang serupa dan boleh ditukar ganti. Untuk menentukan mana yang harus anda pilih, perhatikan perkara berikut:

1. Sebuah artikel bertujuan untuk diedarkan secara bebas atau dapat digunakan kembali.
2. Bahagian adalah kumpulan kandungan tematik.

Top Stories
News
 Story 1 Story 2 Story 3   
Sport
 Story 1 Story 2 Story 3  

dan

The unsur biasanya didapati di bahagian atas dokumen, bahagian, atau artikel dan biasanya mengandungi tajuk utama dan beberapa navigasi dan carian alat.

Company A
    

     
Home
     
About
     
Contact us
    

The elemen boleh digunakan di mana anda mahu tajuk utama dengan satu atau lebih tajuk kecil.

Heading 1
Subheading 1
Subheading 2

INGAT, bahawa elemen itu boleh mengandungi kandungan apa pun, tetapi elemen itu hanya boleh mengandungi tajuk lain, iaitu

ke

dan termasuk .

The elemen dimaksudkan untuk kandungan yang bukan sebahagian daripada aliran teks di mana ia muncul, bagaimanapun masih berkaitan dalam beberapa cara. Ini sebagai bar sisi ke kandungan utama anda.

This is a sidebar, for example a terminology definition or a short background to a historical figure.

Sebelum HTML5, menu kami dibuat dengan

dan
• s. Sekarang, bersama-sama dengan ini, kami dapat memisahkan item menu kami dengan , untuk navigasi di antara halaman anda. Anda boleh memiliki sebilangan elemen di halaman, misalnya, yang biasa terdapat navigasi global di bahagian atas (di ) dan navigasi tempatan di bar sisi (dalam elemen).

  
         
  
          
  Home
          
  About
          
  Contact us
         

  Sekiranya ada mesti ada . A biasanya terdapat di bahagian bawah dokumen, bahagian, atau artikel. Sama seperti kandungan pada umumnya metainformasi, seperti perincian pengarang, maklumat undang-undang, dan / atau pautan ke maklumat yang berkaitan. Ia juga sah untuk memasukkan elemen dalam footer.

  ©Company A

  The elemen sering muncul dalam atau unsur yang biasanya akan mengandungi maklumat hak cipta atau penafian undang-undang, dan lain-lain cetakan halus itu. Namun, ini tidak bertujuan untuk menjadikan teks lebih kecil. Ia hanya menggambarkan kandungannya, bukan menetapkan persembahan.

  ©Company A Date

  The elemen membolehkan yang jelas tarikh ISO 8601 yang akan dikenakan pada versi mudah-dibaca tarikh tersebut.

  Tuesday, 31 October 2017

  Mengapa bersusah payah ? Walaupun manusia dapat membaca waktu yang dapat menyederhanakan konteks dengan cara biasa, komputer dapat membaca tarikh ISO 8601 dan melihat tarikh, waktu, dan zon waktu.

  dan

  adalah untuk membungkus kandungan gambar anda di sekelilingnya, dan untuk memberi keterangan gambar anda.

   Cover art for Middle-earth: Shadow of Mordor 

  Ketahui lebih lanjut mengenai elemen HTML5 baru:

  • w3schools memberikan penerangan ringkas dan jelas mengenai banyak elemen berita dan bagaimana / di mana ia mesti digunakan.
  • MDN juga memberikan rujukan yang bagus untuk semua elemen HTML dan mendalami setiap elemen.