Apa itu Semantic?
Semantic adalah sebuah cara penulisan suatu bahasa pemrograman yang elementnya bisa langsung dipahami oleh komputer dan programmer.
Mudahnya, bahasa pemrograman semantic adalah bahasa yang manusiawi, orang baca juga langsung paham ini element untuk apa.
Contoh element html bukan semantic: <div>, <span>.
Contoh element html yang semantic: <foooter>, <header>, <article>.
Penerapan semantic
Saya ingat, dulu 8-10 tahun yang lalu, ketika saya masih belajar HTML (masih SMP kalau gak salah kelas 1).
Untuk membuat header, saya menggunakan syntax id <div id="header"></div>, begitu pula navigasi menu <div id="nav"></div>.
Sekarang, kita tidak perlu menulis seperti itu di html5, cukup <header> untuk header, dan <nav> untuk navigasi.
Outputnya sama, tapi manusiawinya beda kan?
Itulah yang dinamakan semantic. Supaya, programmer lebih mudah memahami kode. Bahkan, orang awampun juga bisa jauh lebih mudah memahami.
Element semantic HTML
Berikut ini adalah tabel element semantic di HTML:
| Element HTML | Keterangan |
|---|---|
| <article> | Mendefinisikan artikel |
| <aside> | Mendefinisikan konten aside (samping) dari halaman konten |
| <details> | Menuliskan detail dari sesuatu |
| <figcaption> | Menulis caption pada figura media (misal caption gambar, foto, dll) |
| <figure> | Membuat figura untuk media (foto, gambar, video, musik) |
| <footer> | Mendefinisikan footer (bagian bawah) |
| <header> | Mendefinisikan header (bagian atas) |
| <main> | Spesifik area konten website |
| <mark> | Membuat hightlight untuk artikel |
| <nav> | Membuat menu navigasi |
| <section> | Mendefinisikan suatu section / bagian |
| <summary> | Menentukan judul untuk element <details> |
| <time> | Mendefinisikan waktu |
Supaya lebih jelas, berikut penggunaan setiap element jika saya buat ilustrasi:
Sekian pembahasan tentang html5 semantic, semoga kamu paham ya!