Semua Ada, HTML5 hadir dengan membawa beberapa tag baru. Dalam tutorial belajar HTML5 kali
ini kita akan mempelajari pengertian dari semantic tag pada HTML5.
HTML5 memperkenalkan sekitar 30an tag baru (dan mungkin akan terus bertambah),
sebagian besar diantaranya berfungsi untuk membuat struktur HTML, atau yang
dikenal dengan semantic tag.
Apa yang dimaksud dengan semantic tag? Semantic Tag atau Semantic Markup, adalah
sebutan untuk tag-tag HTML yang memiliki 'arti' atau 'makna’.
Kata semantic berasal dari kata yunani yang berarti 'mempelajari arti'
(the study of meaning).
HTML ditujukan untuk membuat struktur halaman web. Tag <p> misalnya,
digunakan untuk membuat paragraf, tag <h1> untuk membuat judul/header,
dan tag <table> untuk membuat tabel, kesemua tag ini memiliki 'arti'
yang jelas, karena itu termasuk kedalam semantic tag.
Sedangkan tag seperti <div> dan <span> tidak memiliki arti apa-apa,
namun sering dijumpai untuk membuat struktur halaman. Jika anda pernah merancang
web menggunakan CSS, tag <div> adalah tag yang sangat sering digunakan.
Untuk membuat bagian header yang berisi menu navigasi atau logo, biasanya kita
menggunakan tag <div id="header">, untuk membuat footer biasanya
menggunakan <div id="footer">, sedangkan untuk menu utama bisa
menggunakan <div id="menu"> atau <div id="nav">.
Walaupun dari atribut id kita bisa melihat 'arti' dari tag-tag
tersebut, akan tetapi tag <div> itu sendiri tidak memiliki arti apa-apa
(non semantic tag). Web browser seperti screen reader untuk teman kita yang
bekebutuhan khusus, tidak bisa menentukan apakah tag ini adalah header, atau
konten dari website. Kita bisa saja membuat header halaman menggunakan <div
id="head">, <div id="header">, atau <div
id="atas">.
HTML5 memperkenalkan tag-tag baru yang ditujukan untuk mengatasi hal ini. Daripada
menggunakan <div id="header">, kita bisa menggunakan tag <header>
sebagai penanda bagian atas halaman HTML, dan tag <footer> untuk penanda
bagian bawah halaman web.
Beberapa semantic tag yang dibawa oleh HTML5 adalah sebagai berikut:
- <article>
- <aside>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
Sebagian besar dari semantic tag tersebut digunakan untuk membuat struktur halaman.
Kita akan membahas cara penggunaannya dalam tutorial-tutorial berikutnya.
Semantic Tag yang Tanpa Style
Sebuah hal menarik dari semantic tag yang ada pada HTML5 adalah: sebagian besar
tidak memiliki style bawaan.
Jika kita menggunakan tag <p> atau tag <h1>, kedua tag ini akan
tampil pada baris baru dan berjarak beberapa spasi dari kalimat yang berada
sebelumnya. Tag <h1> juga akan ditampilkan secara tebal (bold). Ini adalah
style bawaan dari tag HTML.
Tag-tag semantic pada HTML5 umumnya tidak 'membawa' style apa-apa.
Tag <header> tidak akan membuat huruf menjadi besar seperti layaknya tag
<h1>. Jadi apa fungsi tag ini?
Kembali ke tujuan awal HTML, bahwa ia dirancang untuk membuat 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> juga sering menjadi masalah
apabila kita ingin mengubahnya. Bahkan adalah hal 'wajib' bagi desainer
web untuk menghapus style bawaan ini dengan metoda yang dikenal dengan CSS reset.
CSS reset bertujuan untuk membuang seluruh style bawaan, sehingga tag-tag HTML
menjadi tanpa style sama sekali. Hal ini memudahkan perancangan desain web.
Karena hal inilah, tag-tag semantic pada HTML5 dirancang tidak memiliki style.
Tetapi kita bisa dengan mudah memperindahnya menggunakan CSS.
Dalam tutorial belajar HTML5 berikutnya, kita akan membahas tentang cara membuat struktur HTML5 dengan semantic tag ini.
Labels: HTML, Programmer