You are on page 1of 7

Perbedaan HTML 4 dan HTML 5

Pada pertemuan kali ini saya akan menjelaskan sedikit tentang perbedaan HTML 4 dengan HTML 5, sebelumnya apa itu HTML ? HyperText Markup Language atau biasa di sebut dengan HTML itu sendiri yaitu bahasa yang digunakan untuk merepresentasikan dokumen dalam sebuah halaman web. Pada HTML 4 telah diterapkan dua sintak yaitu: SGML (disebut sebagai HTML 4.01) dan XML (disebut XHTML 1.0). Sedangkan HTML 5 dibuat untuk mendefinisikan sebuah bahasa markah tunggal yang bisa ditulis dengan cara HTML maupun XHTML. HTML5 merupakan jawaban atas pengembangan atau penggabungan dari HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web. Karena SGML nyaris tidak pernah didukung baik oleh browser maupun kebanyakan tools untuk html authoring yang ada, maka HTML 5 mendefinisikan serialisasi baru yang di sebut dengan html, yang sekilas mirip dengan SGML

Kemudian apa perbedaan HMTL 4 dengan HMTL 5 dari segi Halaman Web nya. Mari kita bandingkan Halaman web HTML 4 dengan HMTL 5. Misalkan sebuah blog yang sederhana memiliki sebuah header di bagian atas, catatan kaki di bagian bawah, beberapa entri, bagian navigasi, dan sidebar, seperti yang ditunjukkan

Halaman Web yang Biasa ditulis Dengan HTML 4


<html> <head> <title>Anastasya Web </title>

</head> <body> <div id="page">

<div id="header"> <h1><a href="/blog/">Anastasya Web</a></h1> </div> <div id="container">

<div id="center" class="column"> <div class="post" id="post-102"> <h2><a href="/test-page/"> Test Page 1</a></h2> <p>Article Text here</p> <div class="entry">

</div> </div> <div class="post" id="post-101"> <h2><a href="/test2/"> Test 2</a></h2> <div class="entry"> <p>Article 2 Text here</p>

</div> </div> </div> <div class="navigation"> <div class="alignleft"> <a href="/blog/page/2/"> Previous Entries</a> </div> <div class="alignright"></div>

</div>

</div> <div id="right" class="column"> <ul id="sidebar"> <li><h2>Anastasya Stuff</h2> <ul> <li><a href="/blog/comment-policy/">Comment Policy</a></li>

<li><a href="/blog/todo-list/">Todo List</a></li> </ul></li> <li><h2>Archives</h2> <ul> <li><a href='/blog/2010/04/'>April 2010</a></li>

<li><a href='/blog/2010/03/'>March 2010</a></li> <li><a href='/blog/2010/02/'>February 2010</a></li> <li><a href='/blog/2010/01/'>January 2010</a></li>

</ul> </li> </ul> </div> <div id="footer"><p>Copyright 2010 Anastasya Web</p> </div> </div>

</body> </html>

Contoh Halaman Web yang Ditulis dengan HTML5;


<html> <head> <title>Anastasya Web </title>

</head> <body> <header> <h1><a href="http://blog/">Anastasya Web</a></h1> </header> <section> <article>

<h2><a href="/test-page/"> Test Page 1</a></h2> </article> <article> <h2><a href="/test2/"> <p>Article Text here</p>

Test 2</a></h2> <p>Article Text 2 here</p> </article> <nav> <a href="/blog/page/2/"> Previous Entries</a> </nav>

</section> <nav> <ul> <li><h2>Anastasya Stuff</h2>

<ul> <li><a href="/blog/comment-policy/">Comment Policy</a></li>

<li><a href="/blog/todo-list/">Todo List</a></li> </ul></li> <li><h2>Archives</h2> <ul> <li><a href='/blog/2010/04/'>April 2010</a></li>

<li><a href='/blog/2010/03/'>March 2010</a></li> <li><a href='/blog/2010/02/'>February 2010</a></li> <li><a href='/blog/2010/01/'>January 2010</a></li>

</ul> </li> </ul> </nav> <footer> <p>Copyright 2010 Anastasya Web</p> </footer> </body>

</html>

Nah bisa dilihat kan perbedaan nya dari halaman web di atas. Atau jika masih ingin melihat perbedaan yang lebih spesifik mungkin bisa di lihat disini.

Pada Doctype Tags HTML 4 Doctype bentuknya sangat panjang dan agak rumit. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> sedangkan pada HMTL 5 HTML 5 Doctype bentuknya sedikit lebih simpel dibandingkan HTML 4. <!DOCTYPE html>

Pada Meta Tags Pada meta tags HTML 4 masih terlihat panjang dan agak rumit. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

sedangkan pada HMTL 5 Pada HTML 5 lebih simpel dibandingkan dengan HTML 4. <meta charset=utf-8 />

Pada HTML 5 spesifikasi web form 2.0 terintegrasi baik karena terdapat : Date picker, collor picker, dan numeric step control. Input fields type sudah bisa di dapati di fields emael, search dan url, jadi tidak perlu lagi menggunakan javascript external. PUT dan DELETE metode di form sudah didukung, jadi sangat mudah membuat nya dan sekali lagi simple tanpa menggunakan javascript external.

Sumber : http://dyasyass.blogspot.com/2012/12/perbedaan-html4-denganhtml5.html http://ridwanbejo.wordpress.com/2010/01/07/bandingkan-html-5dengan-html-sebelumnya/ http://id.wikipedia.org/wiki/HTML5

You might also like