Pengertian Semantic Tag Pada HTML

Pada artikel kali ini kita akan mempelajari tentang Pengertian Semantic Tag Pada HTML.

Pengertian Semantic Tag Pada HTML

Semantic tag atau semantic markup adalah sebutan untuk tag HTML yang memiliki 'arti' atau 'makna'. Kata semantic berasal dari bahasa Yunani yang artinya 'mempelajari arti' (the study of meaning).

Seperti yang kita ketahui setiap tag HTML memiliki 'arti' masing-masing, misalnya saja tag <p> untuk membuat paragraf, tag <h1> untuk membuat judul dan lain-lainnya. Semua tag HTML yang memiliki 'arti' termasuk ke dalam semantic tag.

Sedangkan tag seperti <div> dan <span> yang tidak memiliki 'arti apa-apa' sering kita gunakan untuk membuat struktur halaman website. Jika Anda pernah atau sering membuat halaman website, maka tag <div> lah yang kemungkinan akan sering kamu gunakan untuk membuat struktur halaman website.

Biasanya untuk membuat bagian header kita menggunakan tag <div id="header"> dan untuk membuat bagian artikel bisanya menggunakan tag <div id="article">. Walaupun kita bisa melihat arti dari tag tersebut dengan melihat nilai dari atribut id, akan tetapi tag <div> yang tidak memiliki 'arti apa-apa' akan sulit untuk fitur screen reader yang ada dibrowser untuk membedakan antara bagian header dengan content. Karena kita bisa saja membuat bagian untuk artikel dengan menggunakan tag <div id="artikel">, <div id="isi"> atau <div id="tengah">. Fitur screen reader digunakan untuk teman kita yang berkebutuhan khusus.

Untuk mengatasi permasalahan ini HTML5 memperkenalkan tag baru, daripada menggunakan tag <div id="article"> kita bisa menggunakan tag <article> sebagai penanda bagian artikel atau content dan <header> sebagai penanda bagian atas halaman website. Dengan begitu fitur screen reader dapat membedakan antara bagian header dengan content, yang melalui fitur ini dapat membantu teman kita yang berkebutuhan khusus.

Selain tag <article> dan <header> yang diperkenalkan pada HTML5 masih ada tag lain yang diperkenalkan pada HTML5, berikut ini diantaranya:

1. <aside>
2. <figcaption>
3. <figure>
4. <footer>
5. <main>
6. <mark>
7. <nav>
8. <section>
9. <summary>
10. <time>
11. Dan lain-lainnya.

Sebagian besar semantic tag yang baru diperkenalkan pada HTML5 hanya memiliki satu style bawaan, yaitu display: block;. display: block; digunakan agar tag HTML memisahkan dirinya dengan tag lain yang berada disekitarnya atau ditampilkan pada baris baru, kita pernah mempelajarinya pada artikel tentang Perbedaan Tag Bertipe Block Element Dengan Inline Element Dalam HTML.

Pada artikel selanjutnya kita akan mempelajari tentang Cara Membuat Struktur Halaman Website Dengan Semantic Tag Dari HTML5.

Share this post