Pengenalan Dasar HTML5

8/02/2015
Pengenalan dan Pemahaman Dasar HTML5

Pengenalan Dasar HTML5 - Pada kesempatan ini Arlina Design akan membahas tentang hal yang berkaitan dengan HTML5. Untuk mengawali pembahasan HTML5 ini ada baiknya kita mengetahui tentang pengenalan dasar HTM5 agar kedepanya kita bisa memahami cara kerja dan penerapannya.


Apa itu HTML5


Berdasarkan pemahaman yang Saya ketahui HTML5 merupakan teknologi terbaru HTML (Hypertext Markup Language) yang merupakan salah satu bahasa pemrograman web yang dinaungi World Wide Web Consortium atau biasa dikenal dengan W3C. HTML5 mulai diperkenalkan kepada publik sejak tahun 2008, meski demikian HTML5 baru dikenal luas dan secara resmi di release pada tahun 2011. Para programmer mulai memiliki ketertarikan khusus untuk menggunakan teknologi baru ini akan tetapi kompatibilitas browser pada saat itu masih sangat minim sehingga menyulitkan para web developer untuk menggunakan HTML5 secara menyeluruh / cross browser.

HTML5 bekerja secara bersamaan dengan CSS3. Walaupun masih belum berstatus Final, kedua teknologi ini sudah dapat digunakan secara efektif. Saat ini W3C masih berusaha memaksimalkan teknologi baru ini agar lebih stabil. Sejak teknologi ini diperkenalkan, perhatian W3C terfokus pada pengembangannya sehingga menjadi produk yang akan terus dikembangkan hingga saat ini.


Beberapa keunggulan yang ditawarkan teknologi HTML5 


html5 dan css3

Fitur-fitur baru yang tersedia dan berbasis pada HTML, CSS, DOM, dan JavaScript. Kebutuhan penggunaan plug-in ekstra seperti Flash Player dapat diminimalkan sehingga website dapat di download secara lebih efektif, ringan dan cepat. Penanganan error yang lebih mudah daripada versi sebelumnya. Banyak tag dan element-element baru yang digunakan untuk meminimalisir penulisan kode program. HTML5 merupakan sebuah perangakat yang mandiri.


Apa yang baru di HTML5


HTML5 dihadirkan untuk meminimalisir proses pengkodean dan lebih logis. HTML5 sangat dibutuhkan oleh website yang memiliki dasar konten multimedia karena telah banyak kode yang diperuntukkan konten multimedia. Banyak fitur yang telah dibuat dengan memperhatikan besarnya data yang digunakan tetapi tetap dapat memberikan kompatibilitas terhadap semua perangakat sehingga dapat meningkatkan mobilitas penggunaan konten informasi yang diinginkan oleh para pengguna. Beberapa fitur baru tersebut seperti element <video>, <audio>, dan <canvas>, serta integrasi terhadap Vector Graphics Content (<object> tag). Hal ini menyimpulkan bahwa konten website yang berbasis multimedia dan grafis dapat ditangani oleh HTML5 dan tentunya dapat digunakan dengan mudah dan lebih cepat tanpa harus menggunakan plug-in tambahan atau APIs.


Struktural baru yang terdapat pada HTML5


Elemen Media


<audio> Mendefinisikan konten suara
<video> Mendefinisikan sebuah video atau film
<source> Mendefinisikan beberapa sumber media <video> dan <audio>
<embed> Mendefinisikan sebuah wadah untuk aplikasi eksternal atau konten interaktif

Plug-in


<track> Mendefinisikan trek teks untuk <video> dan <audio>


Elemen Formulir


<datalist> Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input
<keygen> Mendefinisikan kunci-pair bidang pembangkit (untuk formulir)
<output> Mendefinisikan hasil penghitungan


Semantik / Elemen Struktural 


HTML5 menawarkan unsur-unsur baru untuk struktur yang lebih baik antara lain :

<canvas> Digunakan untuk menggambar grafik melalui script (biasanya JavaScript)
<article> Mendefinisikan sebuah artikel
<aside> Mendefinisikan konten selain dari konten halaman
<bdi> Isolat merupakan bagian dari teks yang dapat diformat dalam arah berbeda dari teks lain di luar itu
<command> Mendefinisikan sebuah tombol perintah bahwa seorang pengguna dapat meminta
<details> Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan
<dialog> Mendefinisikan sebuah kotak dialog atau jendela
<summary> Mendefinisikan sebuah judul terlihat untuk elemen <details>
<figure> Menentukan konten mandiri, seperti ilustrasi, diagram, foto, daftar kode, dll
<figcaption> Mendefinisikan sebuah caption untuk elemen <figure>
<footer> Mendefinisikan footer untuk dokumen atau bagian
<header> Mendefinisikan sebuah header untuk dokumen atau bagian
<mark> Mendefinisikan ditandai / teks yang disorot
<meter> Mendefinisikan pengukuran skala dalam kisaran yang dikenal
<nav> Mendefinisikan navigasi link
<progress> Merupakan kemajuan tugas
<ruby> Mendefinisikan sebuah penjelasan ruby (untuk tipografi Asia Timur)
<rt> Mendefinisikan penjelasan / pengucapan karakter (untuk tipografi Asia Timur)
<rp> Mendefinisikan apa yang harus ditampilkan di browser yang tidak mendukung

Penjelasan ruby


<section> Mendefinisikan bagian dalam dokumen
<time> Mendefinisikan tanggal / waktu
<wbr> Mendefinisikan garis-break mungkin

Adapun beberapa elemen HTML 4.01 yang telah usang dan penggunaanya telah dihapus pada generasi HTML5 yaitu :

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


Kita sebagai pengguna teknologi khususnya teknologi internet tentunya tidak ingin tertinggal dengan perkembangan teknologi generasi terbaru, apalagi jika teknologi yang sedang kita gunakan terancam tidak lagi berfungsi pada browser di masa mendatang.

Sekedar informasi browser teratas seperti Chrome, Safari, Firefox, Opera, dan IE telah memberikan kompatibilitas terhadap HTML5, ini membuktikan bahwa generasi HTML5 akan menggantikan generasi sebelumnya HTML 4.01 yang secara tidak langsung akan menghapus fungsi pengoperasianya.

Demikian mengenai Pengenalan Dasar HTML5, semoga menambah pengetahuan sobat blogger. Terima kasih.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

27 comments

Some tags I did not know. Now I know :-)

Balas

Yes, this is the basic

Balas

Wah, saya perlu belajar lagi tentang dasar-dasar html5 nih, mbak..Mana tau saya bisa memahami struktur template di blog saya. Terima kasih.

Balas

bagus ini pengenalannya.. (h) kyaknya bagus nih buat saya pelajari... (p)

Balas

Terimakasih artikel "Pengenalan Dasar HTML5 " Sangat Bermanfaat

Balas

Slakan mas, sama2

Balas

Gan bisa gmna cara ganti decription di Vienna Lite 2,
Blog personal tentang tips blogging...
jadi decrtiption sayaa sendiri gan? :)
udah ane cari kagak ada <(")
terus gmna kalo saya post decriptionnya berubah sendiri? :)

Balas

pengenalan dasar HTML5 adalah pengetahuan dasar yang harus diketahui bagi yang ingin serius di dunia pemrograman, makasih mbak ilmunya, tulisan mbak adalah modal dasar buat saya kedepannya

Balas

Wihh blogna udh upgrade domain TLD. Selamat ya mbakk.. BTW Knp gk http://arlinadesign.com/ aja mbak?

Balas

Dimulai dari dasar, asyik ini bagi yang mau belajar HTML5,..
ditunggu edisi pengenalan berikutnya Mbak Arlina :)

Balas

Sis ini kenapa ya?
http://prntscr.com/7zxakl

Balas

Main2 kemari, sengaja buka artikel ini malah nambah pemahaman tentang valid html5 hehe..
Kak mau minta izin nih, saya mau posting artikel tentang blogger template karya kakak nih. Izin ya. Ini langsung saya buat :D

Balas

Iya betul dan tentunya bisa dikembangkan kembali

Balas

Makasih, nama domain tersebut tidak bisa didaftarkan.. Saya jg kurang mengerti

Balas

Iya mas, masih sama2 belajar :)

Balas

Silakan sisipkan gambar di dalam kode ini

<i rel="image">URL gambar di sini</i>

Balas

kebetulan skali saya juga mau belajar hihi

Balas

Hello Arlina I am an Arab blogger from Iraq I need to help you to visit my website is
http://qalpy.blogspot.com/#

Balas

Can you describe your problem? You can ask me here http://www.arlinadzgn.com/2014/08/off-topic.html

Balas

sudah lama tidak mempelajari tentang HTML5 , bahkan blog saya lagi di anggurin,hehe :D

Balas

Hehe, kenapa atu jarang ngeblog

Balas

I am an Egyptian who follow the blog and I want to please the mold

Balas

You can simply right click and click print in your browser

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.