Pengertian Semantic Tag Pada Html

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

Pengertian Semantic Tag Pada HTML

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

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

Sedangkan tag menyerupai <div> dan <span> yang tidak mempunyai 'arti apa-apa' sering kita gunakan untuk menciptakan struktur halaman website. Jika Anda pernah atau sering menciptakan halaman website, maka tag <div> lah yang kemungkinan akan sering kau gunakan untuk menciptakan struktur halaman website.

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

Untuk mengatasi permasalahan ini HTML5 memperkenalkan tag baru, daripada memakai tag <div id="article"> kita sanggup memakai tag <article> sebagai penanda bab artikel atau content dan <header> sebagai penanda bab atas halaman website. Dengan begitu fitur screen reader dapat membedakan antara bab header dengan content, yang melalui fitur ini sanggup 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 gres diperkenalkan pada HTML5 hanya mempunyai satu style bawaan, yaitu display: block;. display: block; dipakai supaya 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 perihal Cara Membuat Struktur Halaman Website Dengan Semantic Tag Dari HTML5.