Hallo teman-teman tahukah kalian HTML5, bagi kalian yang sedang belajar membuat website sendiri pasti tidak asing, sedikit informasi HTML5 pertama kali direlease 3 tahun yang lalu, tepatnya 28 Oktober 2014 (sumber:https://en.wikipedia.org/wiki/HTML5). Tapi, mungkin saja diantara kita masih ada yang belum sepenuhnya mengenal Element-element yang ada pada HTML5 tersebut. Untuk itu, melalui artikel yang ONPHPID tulis ini, yuk kita Mengenalkan Semantic Elements di HTML5. Elements apa saja yang termasuk ke dalam Semantic Element pada HTML5.
Dalam membuat layout website, kita biasa menggunakan element table, div, padahal kita bisa membuat layout secara semantic seperti yang sudah ada pada HTML5. Bagi teman-teman yang biasa menggunakan Framework CSS seperti Bootstrap, Materialize mungkin tidak terlalu sulit dalam mendesain atau membuat layout, karena terdapat dokumentasi yang jelas. Tapi tidak ada salahnya jika kita Mengenal Semantic Elements di HTML5, karena dalam membuat website terkadang ada beberapa kasus yang memaksa kita untuk meng-custom layout, meskipun kita menggunakan Framework CSS.
Mengenal Semantic Elements di HTML5
Element-element yang termasuk dalam Semantic Element HTML5, diantaranya:
1.article
Ketika kita ingin membuat layout untuk menampilkan block artikel-artikel yang ada di website kita, tag article bisa kita gunakan dengan element header dan footer. Karena tag article memiliki type block, artinya element ini memiliki lebar sesuai lebar browser jika kita tidak menentukan lebarnya.
contoh:
[gists]https://gist.github.com/wichaksono/930654c5d9fda82eafc09ff43c951200[/gists]
2.aside
Element ini bisa kita gunakan untuk melengkapi layout utama. Misal kita memiliki halaman blog maka kita bisa menambahkan aside di bagian bawah postingan untuk menjelaskan identitas penulis artikel. Karena aside memiliki type/sifat block maka lebarnya sesuai page jika kita tidak menentukan lebarnya.
contoh:
[gists]https://gist.github.com/wichaksono/eb03218abd85b8e5005200784ff4b9c3[/gists]
3.figcaption
Mungkin teman-teman pernah melihat gambar yang memiliki efek hover, dan ada text yang muncul ketika di hover. Kita bisa menggunakan tag figcaption untuk membuatnya. Element ini memiliki type block.
contoh:
[gists]https://gist.github.com/wichaksono/8d51343383948dd90da7636fd5c72026[/gists]
4.figure
Figure biasa digunakan untuk membuat element yang berdiri sendiri, misal sebuah layout dengan gambar di dalamnya. Element figure memiliki type block.
contoh:
[gists]https://gist.github.com/wichaksono/7a6283e36ccf29f212e5b9edefebfc99[/gists]
5.footer
Element footer bisa kita gunakan untuk membuat footer sebuah website. Secara default footer memiliki type block.
contoh:
[gists]https://gist.github.com/wichaksono/170a40c3ea3b473b95bd7fdecbc98dd7[/gists]
6.header
Bila kita biasanya membuat sebuah header menggunakan div, mungkin mulai saat ini bisa menggunakan tag header yang sudah disediakan untuk HTML5 yaitu header. Secara default header memiliki sifat block, di dalam tag header bisa kita tambahkan element lain.
contoh:
[gists]https://gist.github.com/wichaksono/0665b0f08f9273d7cba44a65bc273773[/gists]
7.main
Element main bisa kita gunakan untuk membungkus content yang ada di website kita. Misal postingan artikel yang ada di blog kita. Element main memiliki sifat block.
contoh:
[gists]https://gist.github.com/wichaksono/aa4639bd0f12f974097c48f5ace8d870[/gists]
8.mark
Mark memiliki type/sifat inline, artinya panjang atau lebar element ini hanya sebatas text yang ada di dalamnya. Element mark biasa digunakan untuk membuat text berwarna, secara default warnanya kuning.
contoh:
[gists]https://gist.github.com/wichaksono/a79af742fb329b64a612835f877fe430[/gists]
9.nav
Bagi teman-teman yang biasa menggunakan Bootstrap, pasti sudah biasa menggunakan salah satu element ini. Karena Bootstrap menggunakan tag nav untuk membuat component navbar. Tag nav secara default memiliki type block biasa digunakan untuk membuat link navigasi sebuah website.
contoh:
[gists]https://gist.github.com/wichaksono/fc4d206c6422fb2d9b7607a1e65c817c[/gists]
10.section
Digunakan untuk membuat bagian dari sebuah halaman web, secara default memiliki sifat block.
contoh:
[gists]https://gist.github.com/wichaksono/562d983b8e55b9e5be88ad6bc2d49d75[/gists]
11.time
Element time bisa digunakan mendefinisikan waktu, element ini memiliki type inline.
contoh:
[gists]https://gist.github.com/wichaksono/b38482c4629a45d1db4f59008ac6d44b[/gists]
Baca Juga: Cara Install Endless OS di Window 10
Sekian dulu tutorial Mengenal Semantic Elements di HTML5. Jika ada hal yang kurang jelas atau ingin ditanyakan dapat melalui komentar. JANGAN LUPA like FANSPAGE ONPHPID untuk update informasi dan Subscribe Channel ONPHPID Tutorial. Selamat Belajar…
