Apa itu elemen Semantic pada HTML5

Pada tutorial kali ini akan membahas tentang Apa itu elemen Semantic pada HTML5 ?. Menurut Wikipedia, Semantik berasal dari bahasa Yunani yang berarti suatu cabang linguistik yang mempelajari arti/makna pada suatu bahasa / kode / representasi lainnya.

Singkatnya Semantik adalah pembelajaran tentang Makna.

HTML5 membawa ilmu baru yang dikenal dengan istilah HTML5 Semantic. HTML5 Semantic ini memperkenalkan elemen baru, yang dimana elemen ini memiliki makna dalam penggunaanya, contohnya seperti elemen <header>.

Elemen <header> memiliki makna untuk digunakan sebagai kepala halaman pada halaman Website. Di dalam elemen <header> ini dapat anda masukan seperti menu, slider, gambar header dan konten lainnya. Namun, elemen <header> tidak akan memberi pengaruh apa pun pada halaman.

Sejatinya memang digunakan sebagai penanda dalam kode sumber kalau bagian ini merupakan bagian kepala halaman, karena dulu sebelum HTML5, untuk mendefinisikan bagian header, maka para developer menggunakan konsep <div id=”header”>.

Jadi, intinya elemen Semantic memiliki makna bagi Browser dan juga Developer.

Elemen Semantic lainnya adalah <article>, <aside>, <details>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time> :


Elemen Article

Seperti namanya elemen ini digunakan sebagai section artikel pada halaman website.


Elemen Aside

Elemen <aside>, dapat anda gunakan sebagai container bagi content yang akan anda letakkan pada bilah sisi kanan / kiri dari halaman website. Contohnya adalah Sidebar, nah dalam Sidebar ini biasanya memuat beberapa menu.


Elemen Details dan Summary

Elemen <details> digunakan sebagai perangkum informasi bagi user dalam bentuk widget yang dapat dibuka dan di tutup kembali.

Dibuka untuk di baca isinya, dan bila telah selesai memahami isinya, widget ini dapat anda tutup kembali.

Pengguna’annya di kombinasikan dengan tag <summary>.

Keadaan sebelum widget di buka :

Apa itu elemen Semantic pada HTML5

Keadaan setelah widget dibuka :

apa itu elemen semantic


Elemen Footer

Sesuai namanya, elemen <footer> digunakan untuk merangkum section footer pada halaman website. Di dalamnya dapat berupa informasi hak cipta, menu bawah, kebijakan privasi, atau sponsor.


Elemen Header

Sedangkan elemen <header> digunakan untuk merangkum bagian – bagian kepala halaman seperti slider, banner, dan highlight.


Elemen Main

Elemen <main> dapat anda gunakan untuk merangkum inti artikel pada halaman website.


Elemen Mark

Elemen <mark> digunakan untuk memberi efek stabilo pada teks.


Elemen Nav

Elemen <nav> digunakan untuk merangkum menu.


Elemen Section

Elemen <section> dapat anda gunakan untuk membagi beberapa section pada halaman website.


Elemen Time

elemen <time> mendefinisikan waktu tahun, bulan, tanggal, jam, menit dan detik.

Demikian tutorial dari Apa itu elemen Semantic pada HTML5.

Leave a comment

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

X