Elemen baru HTML5

Elemen baru HTML5, pada postingan sebelumnya kita baru membahas tentang pengertian dan kelebihan HTML5 dan sekarang kita akan membahas tentang elemen-elemen baru di HTML5 gan. Sebelum membahas tentang Elemen baru HTML5, mari flashback dulu gan elemen apa sajakah yang dihilangkan dari versi HTML sebelumnya. Adapun elemen tersebut adalah :

•<acronym>
•<applet>
•<basefont>
•<big>
•<center>
•<dir>
•<font>
•<frame>
•<frameset>
•<noframes>
•<strike>
•<tt>

Dan sekarang kita tidak akan membahas elemen tag diatas  atau versi sebelumnya  lagi gan, sesuai judul postingan diatas maka kita akan membahas Elemen baru HTML5. HTML5 menawarkan elemen baru untuk struktur dokumen yang lebih baik. Berikut adalah daftar dari elemen HTML5, dan deskripsi dari  kegunaannya :


  • <article> Mendefinisikan sebuah artikel dalam dokumen 
  • <side> Mendefinisikan konten selain dari konten halaman
  • <bdi> Mendefinisikan sebuah bagian dari teks yang mungkin diformat dalam arah yang berbeda dari teks lain
  • <details> Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan
  • <dialog> Mendefinisikan sebuah kotak dialog atau jendela
  • <figcaption> Mendefinisikan sebuah caption untuk <figure> elemen
  • <figure> Mendefinisikan konten mandiri, seperti ilustrasi, diagram, foto, daftar kode, dll
  • <footer> Mendefinisikan footer atau kaki dokumen
  • <header> Mendefinisikan sebuah header atau kepala dokumen
  • <main> Mendefinisikan isi utama dokumen
  • <mark> Mendefinisikan ditandai atau teks yang disorot
  • <menuitem> Mendefinisikan item perintah / menu bahwa pengguna dapat memanggil dari menu popup
  • <meter> Mendefinisikan pengukuran skalar dalam kisaran dikenal (gauge)
  • <nav> Mendefinisikan link navigasi dalam dokumen
  • <progress> Mendefinisikan proses dokumen
  • <rp> Mendefinisikan tampilan di browser yang tidak mendukung penjelasan ruby
  • <rt> Mendefinisikan penjelasan / pengucapan karakter (untuk tipografi Asia Timur)
  • <ruby> Mendefinisikan penjelasan ruby ​​(untuk tipografi Asia Timur)
  • <section> Mendefinisikan bagian dalam dokumen 
  • <summary> Mendefinisikan judul yang terlihat untuk elemen <details>
  • <time> Mendefinisikan tanggal / waktu
  • <wbr> Mendefinisikan kemungkinan line-break

Elemen-elemen baru di Form :

  • <datalist> Mendefinisikan pilihan untuk kontrol input
  • <keygen> Mendefinisikan sebuah pasangan kunci ( untuk forms )
  • <output> Mendefinisikan hasil perhitungan

Elemen-elemen baru pada Tipe & Atribut Input :

New Input Types      New Input Attribute
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

Elemen-elemen Graphics baru di HTML5 :

  • <canvas> Mendefinisikan gambar grafis menggunakan JavaScript
  • <svg> Mendefinisikan gambar grafis menggunakan SVG

Elemen-Elemen Media baru di HTML5 :

  • <audio> Mendefinisikan konten suara atau musik
  • <embed> Mendefinisikan wadah untuk aplikasi eksternal ( seperti plug-in )
  • <source> Mendefinisikan sumber untuk <video> dan <audio>
  • <track> Mendefinisikan lagu untuk <video> dan <audio>
  • <video> Mendefinisikan konten video atau film

Pembahasan lebih dalam tentang tag elemen <video> dan cara menampilkan video di HTML5 bisa agan lihat di postingan Menampilkan Video di HTML5

Dengan adanya Elemen-elemen baru di HTML5 semakin menarik bukan gan untuk mempelajarinya. Sekian semoga bermanfaat.

1 Response to "Elemen baru HTML5"

  1. Ulasan yg bagus terkait web host & toko online ini bagus banget min. Bagus banget dan bermanfaat banget.
    Siapa saja yg make atau sedang mencari service
    web hosting murah di Indonesia & olshop perlu baca ulasan ini.
    Monggo mampir juga situs gw ya sis, ada tulisan keren yg mungkin bermanfaat buat para pengguna
    jasa web hosting. Thank you.

    ReplyDelete