Semantic Element HTML5 (Element Baru di HTML 5)

Pengertian Semantic Element HTML5

Semantic element dalam bahasa Indonesia berarti “arti dari sebuah element”, adalah tag-tag yang menjelaskan secara spesifik fungsi dari tag tersebut, dengan menggunakan semantic element, developer lebih mudah mengetahui isi konten dari element yang dipakai, perbedaan semantic dan non-semantic element adalah sebagai berikut :

• Nama dari element semantic mendeskripsikan fungsi atau konten yang ada di dalamnya, contoh dari element semantic misalnya <label>, <form>, <audio>, <video>.
• Contoh dari non-semantic element adalah <div> dan <span>, tanpa menggunakan atribut class atau id mungkin element tersebut sulit dari kita mengetahui apa konten yang ada di dalamnya.

Di HTML5 ini ada penambahan elemen semantic baru yang berfungsi untuk mendeskripsikan bagian-bagian dari halaman website, dengan mengunakan elemen semantic ini kamu bisa meninggalkan cara lama untuk mendeskripsikan part dari website yang kamu buat menggunakan element <div>, jika kamu menggunakan element div untuk mendeskripsikan sebuah header, misalnya <div class=”header”>, kini kamu bisa menggunakan element semantic yang ada di HTML5 dengan tag <header>, dengan menggunakan element semantic lebih mudah kita untuk mengetahui isi dan fungsi dari elemen tersebut walaupun tanpa atau pakai atribut class=”header”.

Elemen Semantic Baru HTML5

Elemen semantic baru ini yang di tambahkan pada HTML5 yaitu

• <article> digunakan untuk mendefinisikan artikel
• <aside> digunakan untuk mendefinisikan konten yang ada di pinggir / sidebar
• <details> digunakan untuk mendefinisikan detail yang dapat dilihat oleh pengguna
• <figure> mendefinisikan konten mandiri
• <figcaption> mendefinisikan caption dari elemen <figure>
• <footer> mendefinisikan sebuah footer
• <header> mendefinisikan sebuah header
• <main> mendefinisikan konten utama dari sebuah laman
• <mark> mendefinisikan teks yang di tandai
• <nav> mendefinisikan kumpulan link-link atau navigasi
• <section> mendefinisikan bagian dari dokumen
• <summary> merupakan heading dari tag <details>
• <time> mendefinisikan waktu dan tanggal

Berikut ini gambaran penggunaan element semantic pada laman website

Tidak Memberikan Style

Perhatian, penggunaan element semantic tidak akan memberikan style kepada element tersebut, jangan beranggapan dengan menggunakan <aside> sudah bisa membuat visual dari sebuah sidebar tanpa campur tangan CSS.

Ramah Search Engine / Robot

Dengan menggunakan element semantic, robot search engine bisa dengan mudah mengetahui part dari laman sebuah website, search engine dapat dengan mudah mendefinisikan isi artikel sebuah laman yang menggunakan element <article> ketimbang yang menggunakan <div class=”article”>, robot search engine tidak akan peduli dengan element tersebut sebagai sebuah elemen penampung artikel, walaupun di dalam attribute class terdapat embel-embel article. Sebaiknya gunakan attribute id atau class bukan untuk mendefinisikan suatu element, tapi untuk memberikan style dari CSS kepada elemen tersebut, contohnya disini kamu bisa pakai <article class=”article”>.

sumber : http://buatini.com/element-semantic-html5/

Tweet