Tetapi, Anda juga pasti menyadari bahwa sering kali kita melakukan kesalahan sepele dalam penulisan code (apalagi para pemula). Jadi kali ini saya akan coba berbagi tentang Kesalahan yang sering kita lakukan dalam penulisan kode atau script HTML5 sehingga Anda dapat lebih mengoptimalkan kualitas penulisan kode Anda nantinya.
Mendeklarasikan MIME Type
Hal yang sering kita lupakan adalah Pendeklarasian MIME type, padahal statement ini sangat berguna untuk menentukan jenis dokumen atau page yang sedang kita buat sehingga memiliki konsistensi dalam penentuan penggunaan karakter.MIME type adalah salah satu komponen yang terletak tag <head> dan dituliskan seperti berikut :
<head> <!-- Deklarasi MIME Type --> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html;" /> </head>
Penggunaan Atribut Title pada Link
Untuk menggunakan dan menghasilkan link yang berkualitas, ada beberapa aturan yang berlaku untuk dijadikan acuan dasar dalam penerapan dan penggunaan link sebagai berikut :- Memaksimalkan Penggunaannya, maksudnya adalah membuat link dengan Anchor Text yang sesuai dengan dokumen atau halaman yang di-link-kan. Misalnya topik halaman yang akan dihubungkan adalah tentang "Tutorial Pembuatan Website", jadi Anda dapat membuat link dengan Anchor-Text "Cara Membuat Website Sederhana" atau "Langkah Sederhana Membuat Website - Step by Step".
- Menggunakan Atribut Title, sesuai dengan bagian ini, penggunaan title adalah salah satu hal yang harus diperhatikan dalam penggunaan link. Title ini berfungsi pada browser ketika kita mengarahkan mouse ke link yang bersangkutan akan muncul sebuah tooltip sesuai dengan Title yang kia gunakan.
<!-- Cara yang biasa kita gunakan --> Kunjungi website saya, klik <a href="http://sidikhanrei.com">Sidik Hanrei</a>. <!-- Penggunaan link yang lebih baik --> Kunjungi website saya di <a href="http://sidikhanre.com" title="Personal Blog saya">Sidik Hanrei</a> yang membahas segala sesuatu tentang SEO, Web Design, Review, dan segala hal yang berhubungan dengan Teknologi.
Penggunaan Atribut Alt pada <img>
Salah satu teknik penulisan kode yang sering kita lupakan saat menggunakan tag <img> untuk menggunakan gambar adalah atribut "alt". Atribut ini sebenarnya salah satu atribut yang sebelumnya telah saya jelaskan dalam meningkatkan SEO, Coba Anda baca lagi Cara untuk mendapatkan posisi teratas hasil pencarian Google.Perhatikan penggunaan gambar dalam penulisan kode HTML-nya
<img src="http://sidikhanrei.com/images/logo.png" alt="Logo Sidik Hanrei" />Tetapi, untuk menghasilkan kode yang lebih efektif yang menginformasikan gambar dalam tooltip seperti yang kita bahas pada pembuatan link diatas, Anda juga dapat menggunakan title seperti contoh berikut :
<img src="http://sidikhanrei.com/images/logo.png" alt="Logo Sidik Hanrei" title="Blog Teknologi, Web Desain, Tutorial, SEO, dan informasi teknologi terbaru" /><br>
Penulisan Quotes (Kutipan)
Seringkali kita menggunakan quotation atau kutipan, dan secara teknikal kita menggunakan banyak cara. Kesalahan yang sering adalah kita hanya menggunakan paragraph <p> yang menyebabkan tidak mendapatkan sorotan bahwa itu adalah quotations.Hal ini akan sangat disayangkan, karena kita dapat menggunakan cara yang lebih maksimal untuk dapat menghasilkan kode yang lebih optimal. Berikut ini adalah beberapa cara yang dapat Anda gunakan untuk membuat quotations lebih optimal :
- Untuk penggunaan Kutipan Panjang (long quotation) Anda dapat menggunakan tag <blockquote>.
- Untuk penggunaan Kutipan Pendek (short quotation) gunakan tag <q>.
- Untuk kutipan yang sangat pendek dalam sebuah paragraph, Anda dapat menggunakan tag <cite>.
Penulisan Email Address dan Detail Personal
Untuk kebutuhan-kebutuhan tertentu, terkadang kita sering menggunakan Email atau Informasi Pribadi dalam dokumen atau halaman HTML kita. Untuk mengoptimalkan penulisannya dalam HTML5, kita dapat menggunakan tag <address> dalam dokumen tersebut.Contoh penulisannya adalah sebagai berikut :
<address> <a href="mailto:me@sidikhanrei.com">Hubungi Saya</a> Tel: +628xxxxxxxxxx </address><br>
Untuk mempercantik tampilannya, Anda dapat menggunakan CSS untuk melakukan hal tersebut.
Menggunakan Persamaan (Acronyms) dan Definisinya
Pada HTML5, terdapat sebuah tag yang dapat kita gunakan untuk mendefinisikan persamaan atau abbreviation. Keuntungan penggunaan persamaan ini juga dapat meningkatkan teknik SEO Anda dan tampil lebih optimal pada browser.Contoh penulisannya adalah sebagai berikut :
Para <abbr title="Pengembang website profesional">Webmaster</abbr> selalu berinovasi untuk dapat menghasilkan kualitas website terbaik.
Penggunaan Title atau Caption pada Table
Cara tradisional yang banyak digunakan untuk memisahkan table biasanya menggunakan tag heading (h1, h2, h...), tapi ini bukan cara yang tepat. Jika Anda ingin menambahkan sebuah Title atau Caption pada Table, Anda tidak perlu menggunakan tag heading sebelum atau sesudahnya. Penggunaan Caption dapat Anda lakukan misalnya seperti berikut :<table> <!-- Penggunaan Caption --> <caption>Biodata</caption> <thead> <tr> <th>Nama</th> <th>Usia</th> </tr> </thead> <tbody> <tr> <td>Joko Susilo</td> <td>54 Tahun</td> </tr> </tbody> </table>
Penunjukkan Frase atau Istilah pada HTML5
Untuk mendefinisikan sebuah kata atau frase pada dokumen HTML5, kita dapat menggunakan cara yang optimal untuk melakukan hal tersebut. Cara ini akan sangat membantu Search-Engine lebih mengerti struktur website Anda.Untuk melakukan hal ini, kita dapat menggunakan tag <dfn> seperti berikut :
Gunakan <dfn>HTML5</dfn> untuk menghasilkan website yang lebih optimal.Tag lain yang dapat Anda gunakan untuk melakukan hal ini dengan model klasik, anda dapat menggunakan <dl>, <dt> dan <dd>. Berikut ini keterangan masing-masing tag tersebut :
- <dl> yang merupakan Definition List.
- <dt> adalah tag untuk Istilah atau frase pada definition list.
- dan, <dd> mengindikasikan keterangan atau definisi pada definition list.
<dl> <dt>HTML5</dt> <dd>Bahasa pemrograman website</dd> <dt>CSS</dt> <dd>Bahasa pemrograman untuk mempercantik desain</dd> </dl>
Menggunakan Legend Foto
Untuk menampilkan caption pada foto, kita dapat menggunakan dua element baru pada HTML5 yaitu <figure> dan <figcaption> dengan prosedur sebagai berikut :- Definisikan foto atau memasukkan gambar dalam tag <figure> agar disoroti oleh browser dan Search-Engine.
- Tentukan legend dalam element <figure> tersebut menggunakan tag <figcaption>.
<figure> <img src="http://sidikhanrei.com/images/logo.png" alt="Logo Sidik Hanrei" title="Blog Teknologi, Web Desain, Tutorial, SEO, dan informasi teknologi terbaru" /> <figcaption>Ini adalah logo Blog Sidik Hanrei</figcaption> </figure>
Menghandle jika Browser tidak support JavaScript
Pada HTML5 atau pun HTML, ada sebuah tag untuk digunakan sebagai konten atau teknik alternatif yang dapat digunakan ketika mendeteksi Browser dengan JavaScript-Disabled (non-aktif) yaitu <noscript>.Contohnya sebagai berikut :
<script>
document.write ("Hello World!")
</script>
<noscript>Your browser does not support javaScript</noscript><br>
Itulah beberapa kesalahan yang sering kita lupakan ketika membuat website menggunakan HTML5. Apa Anda punya cara yang lain? Beritahu saya di komentar.
0 Response to "Kesalahan yang Sering Terlupakan dalam Penulisan HTML5 "
Posting Komentar