Tutorial Belajar HTML5 Part 5: Pengertian Semantic Tag pada HTML5

Posted on

HTML5 hadir dengan membawa beberapa tag baru. Pada panduan belajar HTML5 kali ini kita akan mempelajari pengertian dari semantic tag pada HTML5.


Pengertian Semantic Tag di HTML5

HTML5 memberi tahu sekitar 30an tag baru (dan mungkin akan terus bertambah), beberapa besar diantaranya berfungsi bagi merancang struktur HTML, atau yang dikenal dengan semantic tag.

Apa yang dimaksud dengan semantic tag? Semantic Tag atau Semantic Markup, yaitu sebutan bagi tag-tag HTML yang mempunyai ‘arti‘ atau ‘makna’. Kata semantic berasal dari kata yunani yang berarti ‘mempelajari arti‘ (the study of meaning).

HTML diperuntukkan bagi merancang struktur halaman web. Tag <p> misalnya, digunakan bagi merancang paragraf, tag <h1> bagi merancang judul/header, dan tag <table> bagi merancang tabel, kesemua tag ini mempunyai ‘arti‘ yang jelas, karena itu termasuk kedalam semantic tag.

Sedangkan tag seperti <div> dan <span> tak mempunyai arti apa-apa, namun sering dijumpai bagi merancang struktur halaman. Jikalau sahabat pernah menyusun web menggunakan CSS, tag <div> yaitu tag yang betul-betul sering digunakan. Bagi merancang bagian header yang berisi fitur navigasi atau logo, biasanya kita menggunakan tag <div id=”header”>, bagi merancang footer biasanya menggunakan <div id=”footer”>, sedangkan bagi fitur utama dapat menggunakan <div id=”fitur”> atau <div id=”nav”>.

Walaupun dari atribut id kita dapat melihat ‘arti‘ dari tag-tag tersebut, akan tetapi tag <div> itu sendiri tak mempunyai arti apa-apa (non semantic tag). Web browser seperti screen reader bagi teman kita yang bekebutuhan khusus, tak dapat menentukan apakah tag ini yaitu header, atau konten dari situs. Kita dapat saja merancang header halaman menggunakan <div id=”head”>, <div id=”header”>, atau <div id=”atas”>.

HTML5 memberi tahu tag-tag baru yang diperuntukkan bagi mengatasi hal ini. Daripada menggunakan <div id=”header”>, kita dapat menggunakan tag <header> selaku penanda bagian atas halaman HTML, dan tag <footer> bagi penanda bagian bawah halaman web.

Beberapa semantic tag yang dibawa oleh HTML5 yaitu selaku berikut:

  • <article>
  • <aside>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

Sebahagian besar dari semantic tag tersebut digunakan bagi merancang struktur halaman. Kita akan membahas cara penggunaannya pada tutorial-tutorial berikutnya.


Semantic Tag yang Tanpa Style

Sebuah hal menarik dari semantic tag yang terdapat di HTML5 yaitu: beberapa besar tak mempunyai style bawaan.

Jikalau kita menggunakan tag <p> atau tag <h1>, kedua tag ini akan tampil di baris baru dan berjarak beberapa spasi dari kalimat yang berada sebelumnya. Tag <h1> pun akan ditampilkan secara tebal (bold). Ini yaitu style bawaan dari tag HTML.

Tag-tag semantic di HTML5 umumnya tak ‘membawastyle apa-apa. Tag <header> tak akan merancang huruf menjadi besar seperti layaknya tag <h1>. Jadi apa guna tag ini?

Kembali ke tujuan awal HTML, bahwa ia dirancang bagi merancang struktur halaman, bukan tampilkan. Efek tampilan seperti spasi (margin), huruf tebal, huruf miring, dll sebaiknya ditambahkan menggunakan CSS.

Style bawaan dari tag <p> dan <h1> pun sering menjadi masalah apabila kita ingin mengubahnya. Pun yaitu hal ‘wajib‘ untuk desainer web bagi menghapus style bawaan ini dengan metoda yang dikenal dengan CSS reset. CSS reset bertujuan bagi membuang seluruh style bawaan, sehingga tag-tag HTML menjadi tanpa style sama sekali. Hal ini mempermudah perancangan desain web.

Karena hal inilah, tag-tag semantic di HTML5 dirancang tak mempunyai style. Tetapi kita dapat dengan gampang memperindahnya menggunakan CSS.

Pada panduan belajar HTML5 berikutnya, kita akan membahas mengenai cara membuat struktur HTML5 dengan semantic tag ini.


eBook HTML Uncover Duniailkom

Sahabat serius ingin menguasai HTML? Duniailkom telah menyusun eBook HTML Uncover. eBook ini membahas HTML dengan lebih detail dan lebih komplit hingga fitur terbaru HTML5. Penjelasan lebih lanjut dapat ke: eBook HTML Uncover Duniailkom.


Sumber https://www.duniailkom.com/