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 -
Baca Juga :
Kang Rian Ikuti
Web & Graphic Designer - Berpengalaman sejak 2010, fokus membantu Perusahaan / UMKM agar dikenal secara Global melalui Website Profesional & Desain yg Menjual.
Cek. Jasa-Design.web.id
Kerangka Dasar Template Blogger HTML5 & SCHEMA
Alhamdulillah, masih di beri waktu buat ngetik dan berbagi pengetahuan dasar seputar “Pembuatan Template Blogger” .. Pada kesempatan kali in...
![Merapihkan kode CSS dengan CSS Beautifier [ Tools ] - Alhamdulillah, bisa sharing lagi nih.. kali ini saya ingin berbagi tools untuk sobat yang belum sempat Merapihkan Code CSS nya, Langsung sa...](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnQIDA8jFsTVHUqUHD-4HRS8IIOzX0yhf-JSZb-k7_byuP1MbfhCkRFWaM14VdeeImHsASgzne9CRw-XlmEGGmp6DM0U7XsoJJfkcNnE3oReXSCSyxMV-Jo7_-HhwauOtnm6LFlw5KT_uV/w800-h400-p-k-no-nu/css-beautifier-icon-png-KangRian%5Bdot%5Dcom.png){kind=icon}
Merapihkan kode CSS dengan CSS Beautifier [ Tools ]
Alhamdulillah, bisa sharing lagi nih.. kali ini saya ingin berbagi tools untuk sobat yang belum sempat Merapihkan Code CSS nya, Langsung sa...
Cara Memasang Tooltip Responsive di Blog dengan jQuery.
Haloo.. udah pada bangun sob?, setelah beberapa hari kemarin ane share template Pertamax - Free Responsive Blogger Template nah pagi ini s...
Mkasih bnget share nya Sob, sngat mmbantu pemula seperti saya...
BalasHapussama sob, ane juga masih pemula . kita sama-sama belajar aja :D
Hapussaya lihat kodenya aja udah puyeng bos, hehehe.......
BalasHapushmm.. kalo ane lebih focus ke tag html5 inti nya aja sob :D
Hapus[code]<header> <nav> <section> <article> <aside> <footer>[/code]
iya saya juga sob, baru nyampe tag yg itu2 aja ilmu saya :capedeh
Hapushehe , iya sob.. main nya [tombol]disini[/tombol] kalo mau paham bener HTML5 :D . kita belajar bareng ..
Hapushwakakakak.... itu jelas kamus wajib sob klo disitu, klo lupa atw bingung saya msti mampirnya kesitu
Hapusahaha .. bener bro beda tipis sama kamus ! :ngakak
Hapusilmu yang berat ini.. ijin nyimak aja ya kang.. hhe
BalasHapustidak seberat itu mas, tinggal focus sama intinya aja, karena menurut pengalaman saya sendiri memahami ilmu web ini akan terasa sangat sulit jika tidak dipelajari intinya saja. :)
HapusWaw keren Kang artikelnya lengkap sekali pembahasannya. Sekarang sayah jadi lebih memahami tentang HTML5 ini :)
BalasHapusalhamdulillah kang kalo gitu, makasih udah mampir + blog walking .. semoga bermanfaat yah. :)
Hapuspunya saya belum valid html5 nih kang :D makasih hehe
BalasHapushehe , sama kang ane juga belum , tapi seenggak nya kan paham dulu .. :D , ntar kalo ada waktu luang dikit2 bisa di validasi ..
Hapusbener sekali kang, lebih baik dipahami dulu biar enak nantinya :D
Hapushmm , betul sob! itu maksud saya :D hehe
HapusAh saya mah to ngarti kang kanu HTML5 teh .. kana kopi baru tah
BalasHapuscendol bade kang? :cendol wkwk
Hapusbahe cendol nage :2thumbup
Hapuswkwkwk , keun ke meser deui kang . ahaha :ngakak
HapusAsik dapat ilmu baru tentang HTML 5..
BalasHapusKang rian desain blognya keren bangettt :2thumbup
iya kang silahkan di pelajari . :) , ah biasa aja kang .. bagusan blog nya kang nur wahid :D
HapusWah keren.. lebih mudah dan lebih sederhana. Tapi agak susah untuk validasi template blogger agar valid HTML5.
BalasHapusKalau ada tutorialnya yang lebih detail, mohon bagi-bagi ya gan.
siap gan, karena saya sendiri tidak terlalu mengutamakan validasi , yang penting struktur nya yang jelas dan google bisa memastikan bahwa blog saya sudah berstrukturkan HTML5 . :D
Hapussepertinya sy tidak paham mas edit2 temple takut salah, nyimak dulu Mas sambil belajar dikit2, kunjungan perdana dan salam kenal
BalasHapusmmg makin keren saja kang Rian ini ... always creative .. ha ha ha saya udah lama bgt ga berhubungan sama kode2 ... sekarang malah jadi lupa, mengaburkan diri ke digital Art bro ha ha ... well terus berbagi sobatku salam sukses .. :)
BalasHapus------
PS : Nanti kalo ada rezeki buatkan saya, theme blog HTML5 tuk blogger saya yah bos , tapi nanti... sekarang belum ... (nanti saya kontak via FB, klo dah mau di ganti tuch theme) okey .. seep salam bro.. :)
terima kasih bang depal, saya bisa begini karena menyangkut jasa kang depal juga yang sudah sempat berbagi ilmu di blog mas depal, sehingga sampai saat ini sosok orang2 semacam bang depal selalu menginspirasi saya untuk terus berkembang, dan berbagi terhadap sesama blogger khususnya.
Hapusbaik bang depal, sebagai feedback apa yang enggak buat bang depal. :)
Keren sob.. :2thumbup boleh dicoba nih... :iloveindonesia
BalasHapus