Semantik Markup HTML5

HTML5 Logo Blue

HTML5

Semantic (Bahasa inggris) mempunyai pengertian “arti kata“, dan markup bisa diartikan penandaan. Jadi sederhananya dalam bahasa Indonesia, Markup Semantik merupakan penandaan kata. HTML5 mempunyai struktur elemen baru yang akan memudahkan para developer untuk membedakan isi dari sebuah dokumen web. Menggunakan metode markup baru HTML5 tidak akan berpengaruh secara langsung kepada pengguna, namun markup baru ini dapat menyederhanakan penulisan halaman pada struktur isi HTML.

Terlebih lagi, markup baru ini akan membuat halaman HTML menjadi lebih mudah dibaca oleh mesin, tentunya juga mudah diakses. Sebagai contoh, pencarian dan sindikasi mesin pencari pasti akan mengambil beberapa unsur seperti sistem crawl yang mencari halaman indeks.

Google dan Opera menganalisis jutaan halaman dan menemukan pengulangan nama “id” pada tag DIV Cascading Style Sheet (CSS). Sebagai contoh, para developer menggunakan <div id=”footer”> untuk mengindikasikan bahwa bagian ini adalah untuk footer. HTML5 menyediakan set elemen bagian baru yang dapat digunakan dalam browser modern sekarang. Berikut adalah tabel yang telah saya buat sebagai 6 pembagian elemen-elemen baru HTML5:

Semantik Markup HTML5
No Bagian Elemen Keterangan
1 Header Isi konten header dari halaman
2
Nav Alat bantu navigasi web atau menu web
Section Bagian khusus halaman web
4
Article Konten utama artikel halaman web
5
Aside Konten penting yang diberi tanda kutip
Footer Footer halaman web

Untuk kode-kode elemen markup baru HTML5, bisa dilihat seperti contoh di bawah ini:

Gambaran secara langsung bagaimana pengaplikasian tag-tag baru HTML5 pun dapat dimanipulasi style-nya menggunakan kode CSS (Cascading Style Sheet). Perlu diketahui pula, yang harus diperhatikan pada pemakaian tag HTML5 adalah kompatibilitas browser. Dianjurkan untuk melakukan uji dan pengetesan pada semua browser agar tidak terjadi kesalahan koding elemen HTML.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Chaptcha * Time limit is exhausted. Please reload CAPTCHA.