Mengenal Semantic Tag pada HTML5

belajar HTML dan CSS untuk pemula

HTML5 hadir dengan membawa sejumlah tag baru. Dalam tutorial belajar HTML5 saat ini kita akan mempelajari pengertian dari semantic tag pada HTML5.

Pengertian Semantic Tag pada HTML5

HTML5 mengenalkan sekitar 30an tag baru (dan barangkali akan terus meningkat), kebanyakan diantaranya berguna untuk membuat struktur HTML, atau yang terkenal dengan semantic tag.

Apa yang disebut dengan semantic tag? Semantic Tag atau Semantic Markup, ialah sebutan untuk tag-tag HTML yang mempunyai ‘arti‘ atau ‘makna’. Kata semantic asalnya dari kata yunani yang artinya ‘mempelajari arti‘ (the study of meaning).

HTML diperuntukkan bagi membuat struktur halaman web. Tag <p> contohnya, dipakai untuk membuat paragraf, tag <h1> untuk membuat judul/header, dan tag <table> untuk membuat tabel, kesemua tag ini mempunyai ‘arti‘ yang jelas, sebab itu termasuk kedalam semantic tag.

Sedangkan tag seperti <div> dan <span> tidak mempunyai arti apa-apa, tetapi sering ditemui untuk membuat struktur halaman. Bila kamu pernah merancang web memakai CSS, tag <div> ialah tag yang amat biasa dipakai. Untuk membuat bagian header yang berisi menu navigasi atau logo, pada umumnya kita memakai tag <div id=”header”>, untuk membuat footer pada umumnya memakai <div id=”footer”>, sedangkan untuk menu utama bisa memakai <div id=”menu”> atau <div id=”nav”>.

Meskipun dari atribut id kita dapat melihat ‘arti‘ dari tag-tag itu, namun tag <div> itu sendiri tidak mempunyai arti apa-apa (non semantic tag). Web browser seperti screen reader bagi teman kita yang bekebutuhan khusus, tidak dapat menentukan apakah tag ini merupakan header, atau konten dari website. Kita dapat saja membuat header halaman memakai <div id=”head”>, <div id=”header”>, atau <div id=”atas”>.

HTML5 mengenalkan tag-tag baru yang diperuntukkan bagi mengatasi hal ini. Ketimbang memakai <div id=”header”>, kita dapat memakai tag <header> sebagai penanda bagian atas halaman HTML, dan tag <footer> untuk penanda bagian bawah halaman web.

Beberapa semantic tag yang dibawa oleh HTML5 yaitu sebagai berikut:

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

Kebanyakan dari semantic tag itu dipakai untuk membuat struktur halaman. Kita akan mengulas cara penggunaannya dalam tutorial-tutorial selanjutnya.

Semantic Tag yang Tanpa Style

Sebuah hal memukau dari semantic tag yang ada di HTML5 ialah: kebanyakan tidak mempunyai style bawaan.

Bila kita memakai 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 merupakan style bawaan dari tag HTML.

Tag-tag semantic pada HTML5 umumnya tidak ‘membawastyle apa-apa. Tag <header> tak akan membuat huruf jadi besar seperti pantasnya tag <h1>. Jadi apa fungsi tag ini?

Kembali ke tujuan awal HTML, bahwa dia dirancang untuk membuat struktur halaman, bukan tampilkan. Efek tampilan seperti spasi (margin), huruf tebal, huruf miring, dll disarankan ditambahkan memakai CSS.

Style bawaan dari tag <p> dan <h1> juga sering jadi masalah jika kita mau mengubahnya. Bahkan merupakan sesuatu ‘wajib‘ bagi desainer web untuk menghapus style bawaan ini dengan metoda yang terkenal dengan CSS reset. CSS reset bertujuan untuk membuang semua style bawaan, sehingga tag-tag HTML jadi tanpa style sama sekali. Hal ini mempermudah perancangan desain web.

Sebab hal inilah, tag-tag semantic pada HTML5 dirancang tidak mempunyai style. Namun kita dapat dengan gampang memperindahnya memakai CSS.

Dalam tutorial belajar HTML5 selanjutnya, kita akan membicarakan mengenai cara membuat struktur HTML5 dengan semantic tag ini.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *