Semantic Tag Pada HTML5

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 memilikistyle 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.

Refrensi:

www.duniailkom.com

Read more »

Penulisan Doctype pada HTML5

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 doctypeditulis untuk HTML versi 4.01:

1 2	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Penulisan DOCTYPE diatas adalah untuk HTML 4.01 strict. Perhatikan bahwa penulisan doctipemencantumkan 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">

Struktur dasar penulisan doctype tersebut hampir sama dengan versi HTML 4.01 pada contoh kita sebelumnya. Jadi, bagaimana cara penulisan doctype pada HTML5?

Cara Penulisan DOCTYPE pada HTML5

Penulisan doctype pada HTML5 jauh lebih sederhana. Berikut adalah cara penulisan doctype untuk HTML5:

1	<!DOCTYPE html>

Sangat singkat dan lebih mudah diingat. Hal ini karena HTML5 tidak lagi bagian dari bahasa SMGLyang 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 tanpadoctype dianggap halaman HTML ‘usang‘ dan perlu perlakuan khusus untuk menampilkannya.

Fitur “quirk mode” memiliki banyak bug, sehingga mau tidak mau HTML5 tetap menggunakandoctype, 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>

Read more »

Pengertian Meta Tag Charset UTF-8 pada HTML5

Meta tag adalah ‘data tentang data‘, dimana tag ini ditujukan bukan kepada user, tetapi kepada web browser atau kepada ‘robot program‘ seperti mesin pencari (search engine).

Charset UTF-8 merupakan meta tag yang paling sering digunakan dalam HTML5, penulisannya adalah sebagai berikut:

1	<meta charset="UTF-8">

Meta tag diatas memberi instruksi kepada web browser untuk menerjemahkan karakter-karakter di dalam halaman HTML sebagai UTF-8. Walaupun bersifat opsional, hampir setiap halaman HTML5 menggunakan meta tag ini. Akan tetapi, apa sebenarnya maksud dari charset=”UTF-8″ ini?

Sejarah Charset (Karakter Set) HTML

Instruksi charset digunakan untuk menerjemahkan bit-bit di dalam halaman HTML menjadi karakter.

Karakter set paling sederhana dan juga paling awal digunakan adalah karakter set ASCII, (dalam HTML ditulis sebagai charset=”us-ascii”). Karakter set ini terbatas pada huruf latin (a-z, A-Z) dan beberapa karakter lain seperti angka, spasi, tab, dll dengan total hanya 128 karakter.

Karakter set “us-ascii” kemudian dikembangkan menjadi karakter ANSI, atau dikenal juga sebagaiISO-8859-1 (dalam HTML ditulis sebagai charset=”ISO-8859-1”). Karakter ANSI mendukung 256 karakter, dan umumnya digunakan pada HTML versi 2.0 sampai dengan HTML 4.01.

Pemasalahan pada karakter set ASCII maupun ANSI adalah tidak menyertakan karakter non-latin seperti huruf arab, cina, jepang, dll. Untuk keperluan ini dikembangkan berbagai karakter set untuk masing-masing bahasa, seperti big5 untuk karakter cina, x-euc-jp untuk karakter jepang, iso-8859-7untuk karakter yunani dll. Sehingga untuk setiap web, penulisan karakter set akan berbeda-beda tergantung bahasa apa yang digunakan untuk menulis halaman HTML. Tentunya akan lebih praktis jika seluruh karakter ini disatukan kedalam sebuah karakter set.

Pada awal perkembangan XHTML, diperkenalkan karakter set UTF-8 (Unicode Transformation Format-8) yang mendukung hampir seluruh karakter yang ada di dunia. Dalam perkembangan selanjutnya, HTML5 juga menggunakan UTF-8 sebagai charset standar. Dengan menggunakan UTF-8, kita tidak perlu khawatir mengenai karakter atau bahasa apa yang akan digunakan. UTF-8 mendukung hingga lebih dari 10.000 karakter.

Cara Penulisan meta tag Charset UTF-8

Dalam HTML 4.01 maupun XHTML, penulisan karakter set lebih panjang, seperti contoh berikut:

1	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

Dalam HTML5, penulisannya disederhanakan menjadi:

1	<meta charset="UTF-8">

Meta tag charset ini ditempatkan pada bagian <head> sebelum tag <title>, seperti contoh berikut:

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>

Pentingnya Menggunakan Charset

Walaupun sepenuhnya opsional, penulisan meta tag charset sangat dianjurkan. Jika kita tidak menuliskan charset, web browser akan mencoba ‘menebak‘ karakter yang digunakan (biasanya web browser modern akan menggunakan utf-8 sebagai karakter default). Jika halaman web dijalankan dari web server seperti Apache, web server juga akan menambahkan http-header yang berisi karakter set.

Namun perlu menjadi catatan bahwa jika kita tidak menulis meta tag charset, proses web browser ‘menebak‘ karakter set ini bisa menjadi masalah. Pada tahun 2005 terdapat sebuah bug padaInternet Explorer yang dinamakan Google XSS. Hal ini terjadi karena situs google tidak menuliskan karakter set sehingga bisa digunakan untuk menyisipkan kode javascript. Oleh karena itu, sebaiknya kita selalu menambahkan meta tag charset pada setiap halaman HTML.

Refrensi:

www.duniailkom.com

Read more »

HTML5

HTML5 merupakan kelanjutan dari HTML 4 yang tidak diupdate sejak tahun 1999. Dimana W3C sebagai badan yang membuat standar HTML lebih berminat mengembangkan XHTML daripada melanjutkan HTML.

Setelah beberapa tahun pengembangan, XHTML ternyata tidak sesuai dengan harapan. XHTML 2.0tidak kunjung selesai, sehingga beberapa programmer web bergabung membentuk badan tersendiri: WHATWG. WHATWG kemudian mengembangkan format yang akan menjadi cikal bakalHTML5. Singkat cerita, W3C meninggalkan XHTML 2.0 dan ikut mengembangkan HTML5 bersamaWHATWG.

Tepat pada tanggal 28 Oktober 2014 lalu, W3C telah resmi merampungkan standar HTML5 (sumber resminya dapat dibaca pada http://www.w3.org/blog/news/archives/4167). Walaupun demikian, saat ini HTML5 telah didukung hampir oleh semua web browser modern, sehingga sudah saatnya kita mulai membuat kode HTML menggunakan standar HTML5.

HTML5 datang membawa beberapa sekitar 30an tag baru. Kebanyakan tag ditujukan untuk membuat struktur halaman, seperti <article>, <nav>, <aside> dan <header>. Selain tag-tag untuk struktur halaman, HTML5 juga membawa 3 tag multimedia, yakni <audio>, <video> dan <canvas>.

Standar baru HTML5 ini membawa banyak fitur baru dalam pemrograman web. Akan tetapi, karena HTML5 merupakan ‘living standar’, maka tag-tag baru bisa saja muncul dengan cepat, tanpa perlu menunggu standarisasi oleh W3C.

Beberapa perbedaan yang akan ditemukan dalam HTML5:

·         Penulisan doctipe pada HTML5 lebih sederhana. Mungkin inilah perbedaan paling mencolok dari halaman HTML yang ditulis menggunakan HTML5 atau tidak. Penulisan Doctype atau DTDpada HTML5 menjadi lebih sederhana: <!DOCTYPE html>.

·         Penulisan type atribut untuk tag <style> dan <script> tidak diperlukan pada HTML5. Hal ini karena secara default web browser akan menggunakan text/css untuk tag <style>, dantext/javascript untuk tag <script>. Sebagai contoh, untuk menggunakan external CSS, Pada HTML versi sebelumnya kita menuliskan tag <style> secara lengkap: <style type=”text/css”>…kode CSS… </style>, namun dalam HTML5 kita bisa membuatnya lebih sederhana: <style>…..kode CSS…..</style>

·         Penulisan meta tag karakter set (charset) pada HTML5 menjadi lebih sederhana: <meta charset=”utf-8″>, dibandingkan versi sebelumnya: <meta http-equiv=”content-type” content=”text/html;charset=UTF-8″ />.

·         Pada HTML5, tag yang berdiri sendiri (void element) tidak harus ditutup seperti dalam XHTML. Penulisan tag <br> (break) dapat ditulis dengan <br> maupun <br />.

·         Walaupun tidak dianjurkan, sebuah tag pada HTML5 boleh ditulis tanpa tag awal atau tanpa tag akhir. Sebagai contoh, kita tidak perlu menutup tag <p> dengan tag </p>.

·         Penulisan tag dan atribut adalah case-insensitive di dalam HTML5, sehingga tag <p> dan tag <P>akan dianggap sama. Hal ini berbeda dengan XHTML yang mengharuskan seluruh tag ditulis dalam huruf kecil.

·         Penulisan atribut tidak harus di dalam tanda kutip. Sebagai contoh: <p class=satu> adalah valid. Namun jika nilai atribut terdiri dari karakter spasi, maka tetap harus menggunakan tanda kutip, seperti: <p class=”satu dua tiga”>.

·         HTML5 mendukung multimedia secara langsung menggunakan tag <audio> dan <video>, sehingga kita tidak perlu tergantung kepada aplikasi pihak ke-3 seperti flash player.

·         HTML 5 hanya memiliki 1 versi, tidak seperti pendahulunya yang memiliki 3 versi (pada HTML 4 dan XHTML, anda akan menemukan versi strict, transitional, dan frameset).

Sebagai contoh, kode HTML berikut dinyatakan valid oleh validator HTML5 di http://validator.w3.org/:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<!DOCTYPE html> <html> <head>   <meta charset="utf-8" />   <title>Tes Validasi HTML5</TITLE>   <style>     .penting {       color:blue;      }   </style> </head> <BODY>    <p CLASS=penting>Paragraf ini menggunakan atribut tanpa       menggunakan tanda kutip </p>    <br>    <p> Paragraf ini tidak memiliki penutup tag </body> </html>

Untuk menguji browser yang terinstall di komputer. Apakah telah mendukung HTML5 dapat diuji dengan link berikut :

http://html5test.com/

hasilnya seperti berikut :

Refrensi:

www.duniailkom.com

Read more »