Pengertian 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

Membuat Struktur Halaman HTML dengan tag HTML5

Dengan menggunakan tag-tag HTML5 diatas, kita akan merevisi struktur web sebelumnya dengan menggunakan HTML5. Struktur yang akan kita buat sama dengan contoh pertama:

Dan berikut adalah kode HTML5 yang digunakan untuk membuat struktur tersebut:
Perhatikan bahwa pada kode diatas saya menggunakan 6 semantic tag dari HTML5, yakni <header>, <nav>, <section>, <artikel>, <aside> dan <footer>. Susunan kode HTML tersebut mungkin lebih mudah dipahami jika anda pernah mendesain layout halaman HTML dengan CSS.
Penggunaan semantic tag dari HTML5 juga akan bermanfaat bagi SEO (Search Engine Optimization). Struktur halaman akan lebih jelas, sehingga mesin pencari bisa memprioritaskan bagian mana yang perlu diberikan penekanan (seperti <header> atau <article>) dan bagian mana yang hanya berupa keterangan (seperti <aside> atau <footer>).

Pengertian DOCTYPE (DTD)

DOCTYPE atau document type declaration (DTD) adalah sebuah keterangan yang ditulis untuk memberitahu web browser tentang aturan penulisan dari dokumen yang sedang ditampilkan. doctype ditulis pada baris pertama halaman HTML.
Keharusan penulisan doctype berasal dari bahasa yang dinamakan SMGL dan XML. Keduanya adalah bahasa markup dimana HTML dan XHTML dikembangkan. Mari kita lihat bagaimana doctype ditulis untuk HTML versi 4.01:
Penulisan DOCTYPE diatas adalah untuk HTML 4.01 strict. Perhatikan bahwa penulisan doctipe mencantumkan versi HTML yang akan kita tulis (HTML 4.01//EN), kemudian diikuti dengan alamat dimana aturan DOCTYPE tersebut berada (dalam contoh diatas adalah: http://www.w3.org/TR/html4/strict.dtd).
Untuk versi XHTML, penulisan doctype yang panjang ini juga tidak jauh berbeda, mari kita lihat contoh penulisan untuk XHTML 1.0:

1 2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Cara Penulisan DOCTYPE pada HTML5 Penulisan doctype pada HTML5 jauh lebih sederhana. Berikut adalah cara penulisan doctype untuk HTM5: 1 <!DOCTYPE html> Sangat singkat dan lebih mudah diingat. Hal ini karena HTML5 tidak lagi bagian dari bahasa SMGL yang mengharuskan penulisan doctype berserta alamat DTD-nya (sebagaimana versi HTML sebelumnya). Malah sebenarnya HTML5 tidak membutuhkan penulisan doctype sama sekali (opsional). Akan tetapi, jika web browser menampilkan sebuah dokumen HTML yang ditulis tanpa doctype, web browser akan masuk kedalam tampilan yang dinamakan “quirk mode”. Quirk mode adalah sebuah fitur dalam web browser dimana halaman web ditampilkan secara berbeda. Sebuah halaman tanpa doctype dianggap halaman HTML ‘usang‘ dan perlu perlakuan khusus untuk menampilkannya. Fitur “quirk mode” memiliki banyak bug, sehingga mau tidak mau HTML5 tetap menggunakan doctype, tetapi dengan versi sesederhana mungkin agar web browser tidak masuk ke dalam mode ini dan menampilkannya secara normal (standard mode). Doctype dalam HTML5 bersifat case-insensitive, yang tidak membedakan penulisan dengan huruf besar maupun huruf kecil. Penulisan <!DOCTYPE html> dianggap sama dengan <!doctype html>. Akan tetapi karena faktor kebiasaan, anda akan menemukan penulisan dengan huruf besar lebih sering digunakan. Sebagai penutup, berikut adalah struktur dasar HTML menggunakan doctype HTML5: 1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <title>Belajar HTML5</title> </head> <body>   <h1>HTML5</h1>   <p>Belajar HTML5 di duniailkom</p> </body> Setelah membahas tentang doctype, dalam tutorial belajar HTML5 berikutnya, kita akan membahas tentang meta tag charset UTF-8 yang hampir selalu hadir dalam setiap halaman HTML