Dasar Tag-tag HTML5 baru

                                    

Tahun 2011 merupakan tahunnya HTML5, setelah Internet Explorer 9 rilis beberapa bulan lalu, maka semua browser utama (IE, Firefox, Safari, Chrome dan Opera) telah mendukung HTML5 dan CSS3. Ya walaupun belum semua fungsi HTML5 & CSS3 didukung spenuhnya, tetapi tahun ini merupakan lahirnya HTML5. Jadi tunggu apa lagi, Anda masih pakai XHTML? atau mungkin malah HTML4? mulailah belajar HTML5, ada banyak tag2 baru yang sangat menarik. Disini saya akan mengajari tag-tag yang baru saja dan yang paling banyak digunakan dalam melayout sebuah website.

Oke, sebelumnya kita nanti akan membuat sebuah website dengan HTML5 yang layoutnya / wireframe nya kira-kira seperti ini:

Nah dengan wireframe seperti itu nanti kira-kira kita akan menggunakan tag berikut ini:

                             

Oke ada banyak tag yang baru yah, mari kita mulai saja, siapkan teks editor Anda dan kita buat deklarasi HTML5 beserta nya:

                            

 lang="en">

   charset="utf-8" />
  


  Isi web disini

Sip, lebih simpel kan, kalau dulu jaman XHTML kita perlu mendeklarasikan transitional, atau strict, sekarang cukup . Nah untuk isinya saya akan memberitahu tag-tag yang baru, nanti setiap kode berikutnya Anda masukkan didalam , yang ada tulisan Isi web disini.

Tag pertama kita adalah

, sesuai namanya tag ini ditempatkan diatas pada bagian awal website. Kalau dulu kita pakai

sekarang kita menggantinya dengan

. Tetapi

tidak harus melulu dipaling atas web, kita bisa memiliki beberapa

, misal didalam artikel (kita akan bahas ini nanti dibagian article).

Nah, didalam

ini bisa kita isi macam-macam, misal logo, navigasi, heading dan lain-lain. Bahkan diisi

pun tidak masalah.

Weittss

, apa lagi ini? Oke gampangnya jika kita memiliki satu atau lebih dari satu heading berurutan

-

maka kita bisa mengelompokkannya dengan

. Biasanya digunakan apabila kita memiliki judul dan ada sub judul, atau untuk judul web kemudian kita memiliki slogan. Tapi kalau headingnya cuma satu ya nggak usah dikasih

. Oke daripada pusing langsung saja lihat contohnya ya:

 id="main-header">
  

    

Ini Website HTML5 pertama saya

    

Dan juga yang terakhir karena saya bingung

  

Oke, kalau sudah lihat contohnya paham kan, sip nanti kita masih akan menambahkan sesuatu kedalam

.

Nah, dari namanya sudah kelihatan kalau ini fungsinya untuk menampilkan navigasi pada website Anda. Ya kalau dulu kita pakai

• untuk membuat navigasi menu, nah sekarang kita pakai... ummm.. ya sama pakai
  • juga, tetapi kita bungkus dengan
    . Nah langsung saja kita lihat contoh kodenya:
    

     id="main-nav">
      
    
        
     href="#">Home
    
        
     href="#">About
    
        
     href="#">Contact
    
      
    
    
    

    Sip, sama kan? Yang perlu diingat bahwa

    digunakan untuk ngelink kehalaman-halaman utama dari website atau bagian dari halaman itu sendiri. Kalau untuk paging, Social Networking atau list-list yang lain yang menggunakan

    nggak perlu dikasih
    .
    

    ,

    dan

    Sesuai namanya

    digunakan untuk membungkus teks artikel atau teks utama dalam halaman web kita. Kita boleh punya banyak tag

    , misal saja komentar, nah setiap komentar kita bungkus pakai

    atau forum dan lain sebagainya. Apabila kita memiliki list atau daftar

    , misal blog, maka kita perlu membungkusnya dengan

    jika ada elemen lain yang bukan

    dan menerangkan tentang

    tersebut. Bingung? Langsung kecontoh:
    

    
      
    
    Artikel Terbaru
    
      
    Isi Teks Artikel 1
      
    Isi Teks Artikel 2
      
    Isi Teks Artikel 3
    
    

    
    

    Jadi karena diantara kelompok-kelompok

    ada tag

    maka kita tetap perlu membungkusnya dengan

    .
    
     , sesuai namanya, digunakan untuk menunjukan waktu, biasanya digunakan untuk menunjukkan waktu publish artikel, komentar, forum dan lain sebagainya. memiliki atribut datetime yang berisi waktu bisa dalam format yyyy-mm-dd atau jam seperti 19:00. Hal ini digunakan agar mesin pencari dapat mengenali waktu dalam format standar meskipun kita menulisnya tidak dalam format standar. Contoh:
    
    

    Ditulis oleh Dhimas pada  datetime="2011-11-23">Senin Pahing, 23 November 2011
    

    
    

    dan

    digunakan sebagai pembungkus untuk tag . Tetapi tidak selalu semua tag kita bungkus dengan

    , hanya gambar-gambar yang utama saja atau gambar-gambar yang ingin kita beri label. Nah kita memberi labelnya dengan

    . Oke langsung saja lihat contoh kodenya:
    

    
       src="foto.jpg" alt="Foto Artis">
      
    Ini adalah foto artis yang saya ambil di kali
    
    

    Kira-kira kodenya seperti itu, kita tinggal menstylenya dengan CSS saja sesuai keinginan kita. Oh iya kita bisa memasang tag , , didalam

    
    

    Nah ini nih tag yang saya sendiri masih bingung penggunaannya, karena tiap website contoh penggunaan

    berbeda-beda. Oke kalau dilihat dari sejarahnya

    itu awalnya namanya tetapi kemudian diganti menjadi

    . Nah

    merupakan tag yang berisi konten yang berhubungan dengan konten utama dalam halaman web, oke berarti bisa disimpulan bahwa

    digunakan sebagai sidebar pada website. Nah permasalahannya setiap sidebar misal wordpress, pasti didalamnya terdapat konten-konten lagi, kalau di wordpress biasanya widget. Nah terus kode nya seperti apa? Ada 3 kemungkinan, yang pertama:
    

     id="sidebar">
      
    
        Ini Widget Pertama
      
      
    
        Ini Widget Kedua
      
      
    
        Ini Widget Ketiga
      
    

Atau yang kedua:

 id="sidebar">
  


    Ini Widget Pertama
  

  


    Ini Widget Kedua
  

  


    Ini Widget Ketiga
  

Atau yang ketiga:

 id="sidebar">
  

    Ini Widget Pertama
  
  

    Ini Widget Kedua
  
  

    Ini Widget Ketiga
  

Nah yang mana yang bener?

didalamnya

atau didalamnya

, atau

didalamnya

? Tidak ada dokumentasi yang pasti yang mana yang benar, tetapi saya cenderung menggunakan yang ketiga, karena tingkatan

lebih luas atau lebih tinggi levelnya daripada

. Tetapi ya terserah Anda, karena semua website yang sudah menggunakan HTML5 menggunakan ketiga cara tersebut.

Yang terakhir adalah

, sesuai namanya

diletakkan dibagian bawah website, tetapi kita tidak hanya menggunakannya diakhir website saja. Sama seperti

dimana kita menggunakan

dibagian akhir

. Jadi intinya

sama dengan

, hanya saja

diakhir sedangkan

diawal. Berikut ini contoh sederhana penggunaan footer diakhir website:

  Copyright 2011, Dhimas Ronggobramantyo

Tag-tag lainnya

Sip, gampang kan? eits jangan senang dulu, itu tadi semua contoh tag-tag yang sering kita gunakan, masih banyak lagi tag-tag lainnya yang lebih ajaib seperti , , ,

, , masih banyak lagi, lupa saya apa aja.

Tetapi yang utama dan penting-penting ya itu tadi yang sudah saya sebutin. Untuk yang lainnya kapan-kapan kalau sempat saya buat artikel tersendiri, selamat mencoba, jika ada yang salah silahkan didiskusikan di komentar dibawah.

[Update] 2011-11-09 11:00:00

Agar HTML5 jalan di IE8, IE7 dan IE6

Ada yang kelupaan kemarin, bagaimana agar HTML5 jalan di IE8, IE7 dan IE6? mengingat bahwa hanya Internet Explorer 9 saja yang support HTML5. Anda bisa menggunakan Javascript untuk melakukannya, ada 2 yang menurut saya bagus yaitu Modernizr dan HTML5 Shiv. Saya akan memberitahu yang HTML5 Shiv saja karena scriptnya lebih cepat dan mudah. Tetapi jika Anda ingin agar browser IE lama support CSS3 maka gunakan modernizr. Oke didalam header pasang saja kode seperti ini: 

Terimakasih dan demikian...

Sumber