HTML 5 merupakan salah satu standar pengkodean versi ke 5 dari HTML yang mana didalamnya ada beberapa fitur yang ditambahkan dari versi sebelumnya. Dalam versi ini sudah mendukung beberapa tag baru diantaranya adalah tag video, aside, dan masih banyak lagi. Kenapa kita harus mempelajari struktur dasarnya? Karena ini akan menentukan seberapa optimal HTML5 diproses oleh browser kita. Bukan hanya itu juga, dengan menggunakan struktur yang standar akan lebih memudahkan untuk menerapkan tampilan ke SEME Framework.
Bentuk Umum HTML 5
Berikut ini adalah bentuk umum yang ada didalam HTML 5 yang dituangkan dalam sebuah bagan.
Dari bagan tersebut kita dapat melihat ada dua struktur dasar pembangun HTML yaitu head dan body. Dimana head itu adalah kode yang tidak akan ditampilkan di browser tapi dibaca oleh mesin (seperti Google). Sementara Body berisikan kode yang akan ditampilkan didalam halaman web. Dengan demikian, kita sudah paham aturan pertama dalam membangun web yang baik dan benar.
Deklarasi Awal DOCTYPE
Tidak seperti HTML versi sebelumnya yang mewajibkan DTD didalam DOCTYPE, untuk versi HTML5 cuku deklarasikan HTML saja. Untuk versi selengkapnya bisa dilihat didalam kode dibawah ini.
<!DOCTYPE html> <html> <head> . . . </head> <body> . . . </body> </html>
Tag HEAD
Didalam struktur versi HTML sebelumnya isi dari head ini sebetulnya boleh tidak beraturan. Namun, setelah adanya responsive web design (RWD) ini jadi ada beberapa aturan yang semestinya harus disimpan dipaling atas. Salah satunya adalah Tag META viewport. Viewport ini digunakan untuk mengukur skala tampilan ditampilan website yang menggunakan RWD.
Character Encoding dan Viewport
Meta Character encoding dan viewport ini harus diletakan paling atas karena browser memerlukan encode yang cepat untuk mengelola kontennya. Bisa dikatakan, character encoding ini akan menentukan kecepatan rendering isi dari HTML yang akan ditampilkan karena proses encoding sudah dideklarasikan diawal. Dan juga, hal ini bisa menghindari kesalahan encoding seperti kemunculan karakter yang tidak disupport oleh char encode selain UTF-8. Kenapa demikian, karena browser bawaan windows menggunakan karakter encodingnya sendiri yaitu Windows-1252.
Viewport, untuk beberapa kasus memang penempatan view port ini bisa dimana saja, namun ada beberapa kasus yang pernah kita temui juga bahwa viewport ini harus ada setelah char encoding. Karena ini akan menentukan sifat RWDnya.
Title dan Meta Tag untuk SEO
Tag title ini akan digunakan untuk memberikan judul pada halaman. Ini akan berguna jika halaman web di save as biasanya akan muncul secara default dengan nama yang diberikan pada tag ini. Selain itu juga, mesin pencari google menggunakan tag ini untuk keperluan hasil pencariannya.
Meta description merupakan salah satu tag yang dibaca oleh mesin pencari tapi tidak ditampilkan dihalaman web. Ini akan sangat berguna untuk menjelaskan isi dari web tanpa harus melihatnya. Biasanya ini terdiri dari maksimum 140 karakter. Namun, untuk sebagian aturan SEO isi dari tag description ini ada yang menyebutkan tidak boleh lebih dari 100 karakter. Silakan saja pilih mana yang lebih anda sukai mau 140 karakter atau 100 karakter.
Meta keyword ini berisikan kata kunci apa isi dari halaman dari web tersebut. Pada awalnya, isi dari keyword berisikan banyak kombinasi frasa. Namun, untuk aturan SEO yang sekarang ini cukup 1 frasa saja. Bisa terdiri dari 1 kata, 2 kata, ataupun 3 kata asalkan kata tersebut persis ada didalam tag title dan tag description.
Berikut ini adalah contoh dari pengisian tag title dan meta SEO yang diambil dari halaman Buat Olshop mendingan di Tokopedia atau di Bukalapak?
<title>Mau buat Olshop Toko Online mendingan di Tokopedia atau Bukalapak?</title> <meta name="description" content="Meskipun Olshop atau toko online itu luas, tapi mari kita gali lebih dalam membuat olshop toko online di Tokopedia dan Bukalapak." /> <meta name="keyword" content="toko online" />
Dari setiap tag standar SEO ini bisa mudah didapatkan dengan menguasai templating menggunakan SEME Framework.
