Basic Structure HTML5 yang akan saya bahas kali ini ada sangkutan nya juga dengan postingan sebelumnya tentang Cara Cepat Agar Blog Terindeks google! , mengapa bersangkutan? karena ke-2 postingan ini menyangkut pada kategori SEO, dan kali ini saya hanya focus untuk menyimpan catatan/koleksi sebagai bahan referensi dalam Membuat website/blog Agar valid HTML5 dengan mengetahui Struktur HTML5 Dasar nya dulu.
Belum tau HTML5? , untuk para Master mungkin udah pada tau dan paham banget apa HTML5 itu? , baiklah sekarang saya hanya ingin menjelaskan untuk yang belum tau saja, berikut penjelasannya sob.
Selain itu, HTML5 juga membawa fungsi-fungsi yang baru seperti:
1. Element
2. Input Type pada Form
3. Attribut
ping (pada a dan area), charset (pada meta), async (pada script) Di sini akan dijelaskan beberapa fungsi baru yang menarik seperti :
Selain terdapatnya fungsi-fungsi baru, HTML5 juga memberikan beberapa kemudahan seperti pada bagian awal file HTML kita harus menulis coding DOCTYPE yang panjang.
Pada HTML5, DOCTYPE dapat ditulis lebih ringkas
Selain itu, coding CSS dan Javascript pada HTML5 tidak perlu lagi menulis seperti
Tetapi seperti dibawah ini :
HTML5 juga menghilangkan beberapa tag ataupun element yang telah jarang dipakai dan digantikan oleh CSS seperti :
HTML5 telah menyediakan banyak fungsi baru dan berbagai kemudahan tetapi apakah browser kita mendukung teknologi baru ini? Kebanyakan browser yang terkenal seperti Firefox, Opera, Safari dan Chrome dan lain-lain telah mendukung HTML5 *kecuali Internet Explorer.
Sekian penjelasan tentang Struktur Dasar HTML5 , semoga artikel ini bermanfaat untuk sobat yang benar2 membaca dan menerapkan apa yang barusan saya terangkan . Terima kasih sudah meluangkan waktunya untuk berkunjung di blog sederhana saya ini . - Kang Rian -
Belum tau HTML5? , untuk para Master mungkin udah pada tau dan paham banget apa HTML5 itu? , baiklah sekarang saya hanya ingin menjelaskan untuk yang belum tau saja, berikut penjelasannya sob.
Penjelasan HTML5
Adanya versi HTML terbaru yaitu versi 5, dan di sebutlah HTML5 itu bertujuan untuk mengurangi penggunaan plugin-plugin 3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Plugin-plugin tersebut seperti Adobe Flash, Microsft Silverlight, Java dan lain-lainnya.Selain itu, HTML5 juga membawa fungsi-fungsi yang baru seperti:
1. Element
article aside audio canvas command datalist details embed figcaption figure footer header hgroup keygen mark meter nav output progress rp rt ruby section source summary time video 2. Input Type pada Form
dates times email url search 3. Attribut
ping (pada a dan area), charset (pada meta), async (pada script) Di sini akan dijelaskan beberapa fungsi baru yang menarik seperti :
<canvas> - Element atau tag ini memiliki fungsi untuk menampilkan kertas gambar sehingga pengguna dapat menggunakan canvas untuk menggambar ataupun menulis bagaikan kertas biasa tanpa menggunakan plugin seperti Java.
<audio><video> - Bila kita ingin menampilkan video ataupun audio pada website kita maka kita akan menggunakan pllugin seperti adobe dengan format .swf, .fla dan .flv. Tetapi dengan menggunakan HTML5, kita tinggal menggunakan tag
Selain terdapatnya fungsi-fungsi baru, HTML5 juga memberikan beberapa kemudahan seperti pada bagian awal file HTML kita harus menulis coding DOCTYPE yang panjang.
Pada HTML5, DOCTYPE dapat ditulis lebih ringkas
<!DOCTYPE html> Selain itu, coding CSS dan Javascript pada HTML5 tidak perlu lagi menulis seperti
type=text/css dan type=text/javascript Tetapi seperti dibawah ini :
<style>
* { margin:0px; padding:0px;}
</style>
<script>
// Fungsi JavaScript
</script>
HTML5 juga menghilangkan beberapa tag ataupun element yang telah jarang dipakai dan digantikan oleh CSS seperti :
acronym applet basefont big center dir font frame frameset isindex noframes s strike tt uacronym applet basefont big center dir font frame frameset isindex noframes s strike tt u HTML5 telah menyediakan banyak fungsi baru dan berbagai kemudahan tetapi apakah browser kita mendukung teknologi baru ini? Kebanyakan browser yang terkenal seperti Firefox, Opera, Safari dan Chrome dan lain-lain telah mendukung HTML5 *kecuali Internet Explorer.
Struktur Dasar HTML5
Hehe, setelah lama baca-baca Penjelasan HTML5 di atas, sekarang mending saya langsung share Struktur Dasar HTML5 nya sob, berikut struktur nya :<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
Judul Website
</title>
</head>
<body>
<header>
<h1>Logo / Judul Website</h1>
<nav>
<ul>
<li>
Navigasi Menu
</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>
Judul Artikel
</h2>
<p>
Tanggal Posting
<time datetime="2009-09-04T16:31:24+02:00">
September 4th 2009
</time>
oleh
<a href="#">
Penulis/Admin
</a>
-
<a href="#comments">
Jumlah Komentar
</a>
</p>
</header>
<p>
Isi Artikel ..
</p>
</article>
<article>
<header>
<h2>
Judul Artikel
</h2>
<p>
Tanggal Posting
<time datetime="2009-09-04T16:31:24+02:00">
September 4th 2009
</time>
oleh
<a href="#">
Penulis/Admin
</a>
-
<a href="#comments">
Jumlah Komentar
</a>
</p>
</header>
<p>
Isi Artikel ..
</p>
</article>
</section>
<aside>
<h2>
Judul Bilah Kiri / Sidebar!
</h2>
<p>
Isi Konten / Widget ..
</p>
</aside>
<footer>
<p>
Copyright 2014 - <b>Judul Website</b>
</p>
</footer>
</body>
</html>
Testing / Validasi HTML5 .?
Untuk yang ingin mencoba apakah blog/website-nya sudah valid HTML5 atau belum, silahkan kunjungi situs validator HTML5 Klik Disini , atau langsung kunjungi alamat web berikut :http://html5.validator.nu Sekian penjelasan tentang Struktur Dasar HTML5 , semoga artikel ini bermanfaat untuk sobat yang benar2 membaca dan menerapkan apa yang barusan saya terangkan . Terima kasih sudah meluangkan waktunya untuk berkunjung di blog sederhana saya ini . - Kang Rian -
Komentar Terbaru