Apa itu Semantic Element?
Semantic Element atau Elemen Semantik adalah elemen pada bahasa pemrograman HTML yang menyatakan tujuan dari elemen itu sendiri.
Misalnya pada tag <footer>, tag ini digunakan untuk membuat elemen pada bagian bawah web. Jangan gunakan tag ini pada bagian atas web, karena maknanya jelas untuk footer/bagian bawah website.
Berikut adalah daftar elemen semantik pada HTML5 :
- <article> : digunakan untuk membuat elemen artikel
- <aside> : digunakan untuk membuat elemen side atau bagian samping
- <details> : digunakan untuk membuat elemen detail
- <figcaption> : digunakan untuk membuat teks caption
- <figure> : digunakan untuk membuat figur atau image pada artikel
- <footer> : digunakan untuk membuat elemen kaki/bagian bawah website
- <header> : digunakan untuk membuat elemen kepala/bagian atas website
- <main> : digunakan untuk membuat elemen utama
- <mark> : digunakan untuk menandai teks
- <nav> : digunakan untuk membuat navigasi
- <section> : digunakan untuk membuat bagian artikel
- <summary> : digunakan untuk membuat ringkasan atau isi artikel
- <time> : digunakan untuk membuat elemen yang menyatakan waktu
- dan masih banyak elemen semantik lainnya.
Mengapa Kita Harus Menggunakan Elemen Semantik?
Yuk kita bandingkan 2 syntax dibawah ini.
Kode 1
<div id="header"></div>
<div class="section">
<div class="article">
<div class="figure">
<img>
<div class="figcaption"></div>
</div>
</div>
</div>
<div id="footer"></div>
Ini adalah contoh layout yang dibuat dengan tag <div>. Sekilas sih memang susunan kode di atas tidak ada masalah sama sekali. Tapi...
Kalau elemen <div> nya sudah kebanyakan kan kita yang pusing hahahah..
<div>
<div>
<div>
<div>
</div>
</div>
</div>
</div>
Nah sekarang coba bandingkan dengan kode ini
Kode 2
<header></header>
<section>
<article>
<figure>
<img>
<figcaption></figcaption>
</figure>
</article>
</section>
<footer></footer>
Nah kode di atas ini tentunya lebih mudah dibaca dan dipahami.
Kunjungi kami di :
Instagram : @ghalib.feducation
Facebook : Ghalib.Feducation
Tiktok : @ghalibfeducation.id
Facebook : Ghalib.Feducation
Tiktok : @ghalibfeducation.id
