Perbedaan HTML4 dan HTML5

Sebagai contoh, bayangkan sebuah halaman depan blog sederhana dengan sebuah header di bagian atas,

Contoh dibagian bawah, beberapa entri, bagian navigasi, dan sidebar, seperti yang ditunjukkan

dalam kode berikut;

Contoh Script HTML4

<html>  <head>

<title>Hobo Web LTD Scotland</title>

</head>

<body>

<div id="page">

<div id="header">

<h1><a href="/blog/">Hobo 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>        <div class="entry">

<p>Article Text here</p>

</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>Hobo 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/2008/04/'>April 2008</a></li>

<li><a href='/blog/2008/03/'>March 2008</a></li>

<li><a href='/blog/2008/02/'>February 2008</a></li>

<li><a href='/blog/2008/01/'>January 2008</a></li>

</ul>

</li>

</ul>

</div>

<div id="footer"><p>Copyright 2008 Hobo Web LTD</p>

</div>

</div>

</body>

</html>

Contoh Script HTML5

<html> <head>

<title>Hobo Web LTD Scotland</title>

</head>

<body>

<header>

<h1><a href="http://blog/">Hobo Web</a></h1>

</header>

<section>

<article>

<h2><a href="/test-page/">

Test Page 1</a></h2>        <p>Article Text here</p>

</article>

<article>

<h2><a href="/test2/">

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>Hobo 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/2008/04/'>April 2008</a></li>

<li><a href='/blog/2008/03/'>March 2008</a></li>

<li><a href='/blog/2008/02/'>February 2008</a></li>

<li><a href='/blog/2008/01/'>January 2008</a></li>

</ul>

</li>

</ul>

</nav>

<footer>

<p>Copyright 2008 Hobo Web LTD</p>

</footer>

</body>

</html>

Fitur-fitur pada HTML5 dan Implementasinya

Pengertian

HTML. HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Browser (penjelajah web) Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Fitur-fitur baru di HTML5

• Elemen canvas (keperluan drawing)
• Elemen video dan audio (media playback)
• Dukungan lebih untuk pengimpanan offline
• Elemen yang lebih spesifik untuk content, contoh: article, footer, header, nav, section
• Form control, contoh: date, time, email, url, search, calendar

Kelebihan HTML5

• Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML.
• Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.
• Integrasi ('inline') dengan doctype yang lebih sederhana.
• Penulisan kode yang lebih efisien.
• Konten yang ada di situs lebih mudah terindeks oleh search engine.

Perbedaan HTML4 dan HTML5

Sebagai contoh, bayangkan sebuah halaman depan blog sederhana dengan sebuah header di bagian atas,

Contoh dibagian bawah, beberapa entri, bagian navigasi, dan sidebar, seperti yang ditunjukkan

dalam kode berikut;

Contoh Script HTML4

<html>  <head>

<title>Hobo Web LTD Scotland</title>

</head>

<body>

<div id="page">

<div id="header">

<h1><a href="/blog/">Hobo 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>        <div class="entry">

<p>Article Text here</p>

</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>Hobo 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/2008/04/'>April 2008</a></li>

<li><a href='/blog/2008/03/'>March 2008</a></li>

<li><a href='/blog/2008/02/'>February 2008</a></li>

<li><a href='/blog/2008/01/'>January 2008</a></li>

</ul>

</li>

</ul>

</div>

<div id="footer"><p>Copyright 2008 Hobo Web LTD</p>

</div>

</div>

</body>

</html>

Contoh Script HTML5

<html> <head>

<title>Hobo Web LTD Scotland</title>

</head>

<body>

<header>

<h1><a href="http://blog/">Hobo Web</a></h1>

</header>

<section>

<article>

<h2><a href="/test-page/">

Test Page 1</a></h2>        <p>Article Text here</p>

</article>

<article>

<h2><a href="/test2/">

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>Hobo 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/2008/04/'>April 2008</a></li>

<li><a href='/blog/2008/03/'>March 2008</a></li>

<li><a href='/blog/2008/02/'>February 2008</a></li>

<li><a href='/blog/2008/01/'>January 2008</a></li>

</ul>

</li>

</ul>

</nav>

<footer>

<p>Copyright 2008 Hobo Web LTD</p>

</footer>

</body>

</html>

Sumber:  http://bahaskomputer.blogspot.com/2012/09/fitur-baru-html-5.html

                 http://ridwanbejo.wordpress.com/2010/01/07/bandingkan-html-5-dengan-html-sebelumnya/

                http://www.dark-devilz.com/2012/06/pengertian-tujuan-fitur-baru-dan.html#axzz2C1SF3fgM

MAKASIH UNTUK REFENSINYA YA.

SEMOGA BERMANFAAT UNTUK YANG MEMBACANYA.