0
Trik Pemrograman HTML5
Posted by jujur
on
4:19 PM
Pemrograman website berkembang dengan sangat cepat. Terutama sejak kemunculan HTML5. Setiap kode konvensional yang selama ini kita kenal kini sudah ditemukan cara yang lebih ringkas untuk menampilkannya. Maka sekarang merupakan waktu yang tepat untuk memperbaharui kamus pemrograman anda. Nah, pada artikel berikut, rekan developer JagoanWeb.com telah menyusun uraian tentang beberapa perubahan yang paling kentara pada penulisan kode di HTML5 dibanding versi sebelumnya. Semoga dapat membantu anda memulai upaya update pengetahuan pemrograman anda :-)
1. HTML5 punya <doctype> baru
Apakah anda masih menggunakan doctype XHTML yang panjang dan susah diingat seperti: <!DOCTYPE html PUBLIC “//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>. Jika ya, maka HTML5 punya header yang lebih ringkas: <!DOCTYPE html>. Pada dasarnya doctype sendiri tidak begitu diperlukan di HTML5. Dia masih digunakan hanya karena masih ada beberapa browser versi lama yang memerlukan header doctype untuk menentukan tipe dokumen.
2. Header dan Footer kini jadi lebih semantik
Untuk memanggil css header dan footer anda mungkin menulisnya dengan kode berikut: <div id=”header”> … </div> atau <div id=”footer”> … </div>. Div pada dasarnya tidak punya struktur yang semantik, meskipun di dalamnya sudah diaplikasikan sebuah id. Nah, dengan HTML5, sekarang sudah tidak perlu lagi pakai div. HTML5 memiliki elemen <header> dan <footer> yang dapat langsung memanggilnya.
3. Kapan harus gunakan <div>
Semenjak tag <header>, <article>, <section>, dan <footer> diperkenalkan di HTML5, lalu masih adakah kegunaan dari fungsi <div>? Tentu saja ada. <div> dapat digunakan jika tidak ada elemen lain yang dapat digunakan untuk menggantikannya. Contohnya, jika anda perlu wrapper untuk satu blok kode yang berfungsi sebagai positioning konten. Namun, selama ada elemen yang dapat menggantikan tugasnya, maka lebih baik gunakan penggantinya. Karena mereka lebih semantik dibanding <div>.
4. Atribut <type> kini sudah tidak diperlukan lagi
Sampai sekarang, anda mungkin masih menambahkan atribut <type> ke dalam tag link dan script anda. Seperti: <link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” /> atau <script type=”text/javascript” src=”path/to/script.js”></script>. HTML5 kini sudah cerdas dan membuatnya semakin ringkas. Dia tidak lagi membaca jenis file dari atribut <type>, melainkan langsung di ekstensi; seperti css dan js. Contohnya:
5. Tanda petik / quote sudah tidak diperlukan lagi
HTML5 bukanlah XHTML. Anda tidak perlu membubuhi tanda petik di antara atribut jika anda merasa tidak ingin, HTML5 sudah bisa bekerja dengan baik. Meskipun demikian, jika anda merasa tidak nyaman, anda boleh saja membubuhi tanda petik.
6. Elemen <small> telah dirombak
Beberapa waktu yang lalu, seringkali kami menggunakan elemen <small> untuk membuat bagian sub heading (bagian yang biasanya berdekatan dengan logo). Elemen ini memang sangat bermanfaat dari sisi presentasi. Namun, penggunaan tersebut rupanya sekarang telah dinyatakan salah. Elemen <small> kini telah dirumuskan kembali dengan lebih tepat untuk merujuk pada tulisan kecil. Misalnya pernyataan copyright yang biasanya ada di footer – footer. Berdasarkan definisi HTML5 terbaru, elemen <small> merupakan wrapper yang lebih pas untuk informasi jenis ini.
7. Konten dapat disunting secara langsung dengan <contenteditable>
Alat jelajah terbaru memiliki atribut bermanfaat yang dapat diaplikasikan ke elemen, yaitu <contenteditable>. Seperti namanya, atribut ini memungkinkan user untuk edit teks yang terkandung di dalam elemen secara langsung. Misalnya untuk membuat app sederhana seperti to-do list.
8. Kemunculan Elemen <Hgroup>
Ketika memasang judul diikuti dengan subheading di bagian header website, anda mungkin biasa menggunakan tag standar yaitu <h1> dan <h2>. Sayangnya, tidak ada cara yang semantik untuk mengaitkan hubungan di antara keduanya. Padahal secara hirarki, tag <h2> seharusnya berada di bawah <h1>. Nah, dengan elemen <hgroup>, kini kita dapat mengelompokkan tag heading agar sesuai hirarki, tanpa sedikitpun mempengaruhi skema aliran dokumen.
9. Kemunculan Elemen <Figure>
Perhatikan kode berikut, yang saat ini mungkin seringkali anda gunakan untuk menampilkan sebuah gambar: <img src=”path/to/image” alt=”Leonidas” /> <p>Leonidas Berteriak Spartan. </p>. Sayangnya, kode ini tidak semantik. Caption yang dibungkus dalam tag paragraf <p> benar-benar terpisah dari elemen <img> di atasnya. HTML5 memperbaiki hal ini dengan mengenalkan elemen <figure>. Jika anda mengkombinasikannya dengan elemen <figcaption>, maka anda bisa mengasosiasikan caption yang secara hirarki sesuai gambar masing-masing.
10. Kemunculan Elemen <Mark>
Bayangkan sebuah efek stabilo yang muncul setiap kali anda melakukan pencarian kata di suatu halaman. Elemen <mark> mampu memunculkannya. Anda dapat menggabungnya dengan JavaScript pula agar pencarian di halaman anda semakin atraktif.
11. HTML5 Melengkapi <Form> dengan Berbagai Atribut Baru
Setiap programmer pasti tahu bagaimana caranya membuat form. Tambahkan sebuah tag <form> berisi elemen <input type=”text”>, <input type=”password”>, dan sebuah <input type=”submit”>, maka jadilah. Namun rupanya form yang sekarang ini anda kenal sudah tidak relevan lagi. HTML5 telah melengkapi form dengan sejumlah atribut-atribut baru yang lebih menarik dan dinamis. Misalnya <placeholder>, <autofocus>, dan <type> dengan kapabilitas masing-masing.
12. Form Dilengkapi Email Validation
HTML5 sudah dilengkapi email validation di dalamnya. Jika anda terapkan tipe “email” pada form, maka anda dapat memerintahkan browser untuk hanya mengijinkan isian yang pas dengan struktur email (abc@abc.com).
13. Munculnya Attribut <Required> pada Form
Form pada HTML5 juga telah dilengkapi atribut <required>, yang mampu membuat isian tertentu menjadi wajib diisi. <input type=”text” name=”isian” required>. Dengan kode ini, maka sebuah form tidak dapat disubmit bila field “isian” dibiarkan kosong. Contohnya:
14. Munculnya Atribut <Pattern> pada Form
Dengan atribut <pattern>, kini anda dapat memerintahkan form untuk melakukan validasi isian sesuai aturan yang telah ditentukan. Misalnya pada kode berikut:
Jika anda familiar dengan “regular expression”, maka pattern [A-Za-z]{1,10} memerintahkan pada form agar hanya menerima huruf besar dan kecil saja, sekaligus harus diisi dengan 1 -10 karakter.
