Mengenal Struktur HTML5
Artikel kali ini kita akan membahas HTML5, apa yang kita harus ketahui dari HTML5? Mari simak tulisan kali ini.
HTML5 adalah versi terbaru dari HTML yang statusnya sudah direkomendasikan oleh W3C walau belum 100% sempurna, tapi beberapa sudah bisa dipakai.
HTML5 sangat powerful, sampai-sampai almarhum Steve Jobs pernah mengatakan HTML5 sebagai pengganti Flash, perkataan Steve Jobs tersebut sedikit banyak mempengaruhi para programmer yang ingin mengembangkan flash. Tentunya membuat sebagian dari mereka berpindah ke HTML5. Steve Jobs juga mengatakan kalau Flash itu berat dan boros baterai. Dan Apple tidak akan mensupport Flash lagi.
Logo HTML5
Penjelasan tentang logo HTML5 Selengkapnya bisa anda baca di W3
Berikut ini adalah logo HTML5 yang sudah banyak dipasang di website-website yang sudah menerapkan HTML5 di website nya
Status
Berdasarkan pada jadwal kerja W3C, HTML5 diperkirakan menjadi kandidat rekomendasi pada akhir tahun 2010. Namun, publikasi pertama draft HTML 5 meleset selama 8 bulan. Permintaan dokumen terakhir dan tahap kandidat rekomendasi diharapkan dapat dicapai pada tahun 2008, tetapi hingga bulan Juli 2010 HTML 5 masih dalam tahapan draft pengerjaan di W3C. WHATWG telah meminta penyelesaian terakhir untuk HTML5 sejak bulan oktober tahun 2009.
Editor HTML5, Ian Hickson, berharap spesifikasi HTML5 dapat mencapai tahap kandidat rekomendasi pada tahun 2012 . Kriteria di W3C agar sebuah spesifikasi dapat berstatus – Direkomendasikan – adalah “yang kedua: 100% selesai dan penerapannya dapat dilakukan pada dua atau lebih sistem yang berbeda”. Pada wawancaranya dengan TechRepublic, Hickson memperkirakan hal ini baru akan terjadi pada tahun 2022 atau setelahnya. Meski demikian, banyak bagian dari spesifikasi sudah stabil dan telah dapat diterapkan pada produk:
Bagaimana memulai HTML? Cukup menuliskan tag berikut
Lengkap nya sebagai berikut:
Ada beberapa Tag HTML baru yang bisa dipakai seiring munculnya HTML5
Biasanya Header berfungsi untuk menentukan header dari website yang berisi Logo/Nama Website atau deskripsi website
header juga bisa diletakkan diantara <section>, untuk menandakan judul dari sebuah section
biasanya terletak didalam section
Penggunaan nya dalam struktur HTML selengkapnya sebagai berikut:
Oke sekian penjelasan tentang HTML5, semoga jika ada tulisan tentang HTML5 lainnya, anda tidak akan bingung.
Source : http://www.tutorial-webdesign.com/mengenal-struktur-html5/
HTML5 adalah versi terbaru dari HTML yang statusnya sudah direkomendasikan oleh W3C walau belum 100% sempurna, tapi beberapa sudah bisa dipakai.
HTML5 sangat powerful, sampai-sampai almarhum Steve Jobs pernah mengatakan HTML5 sebagai pengganti Flash, perkataan Steve Jobs tersebut sedikit banyak mempengaruhi para programmer yang ingin mengembangkan flash. Tentunya membuat sebagian dari mereka berpindah ke HTML5. Steve Jobs juga mengatakan kalau Flash itu berat dan boros baterai. Dan Apple tidak akan mensupport Flash lagi.
Logo HTML5
Penjelasan tentang logo HTML5 Selengkapnya bisa anda baca di W3
Berikut ini adalah logo HTML5 yang sudah banyak dipasang di website-website yang sudah menerapkan HTML5 di website nya
Status
Berdasarkan pada jadwal kerja W3C, HTML5 diperkirakan menjadi kandidat rekomendasi pada akhir tahun 2010. Namun, publikasi pertama draft HTML 5 meleset selama 8 bulan. Permintaan dokumen terakhir dan tahap kandidat rekomendasi diharapkan dapat dicapai pada tahun 2008, tetapi hingga bulan Juli 2010 HTML 5 masih dalam tahapan draft pengerjaan di W3C. WHATWG telah meminta penyelesaian terakhir untuk HTML5 sejak bulan oktober tahun 2009.
Editor HTML5, Ian Hickson, berharap spesifikasi HTML5 dapat mencapai tahap kandidat rekomendasi pada tahun 2012 . Kriteria di W3C agar sebuah spesifikasi dapat berstatus – Direkomendasikan – adalah “yang kedua: 100% selesai dan penerapannya dapat dilakukan pada dua atau lebih sistem yang berbeda”. Pada wawancaranya dengan TechRepublic, Hickson memperkirakan hal ini baru akan terjadi pada tahun 2022 atau setelahnya. Meski demikian, banyak bagian dari spesifikasi sudah stabil dan telah dapat diterapkan pada produk:
Beberapa bab secara relatif telah stabil, maka dari itu implementasinya juga sudah hampir mendekati penyelesaian, dan fitur tersebut sudah dapat digunakan hari ini (misalnya: tag <canvas>). —WHAT Working Group, When will HTML5 be finished?Markup / Struktur Penulisan
Bagaimana memulai HTML? Cukup menuliskan tag berikut
1 | <!DOCTYPE HTML> |
1 | <!DOCTYPE HTML> |
2 | < html lang = "en-US" > |
3 | < head > |
4 | < meta charset = "UTF-8" > |
5 | < title ></ title > |
6 | </ head > |
7 | < body > |
8 |
9 | </ body > |
10 | </ html > |
<header>
Header dari sebuah section, mungkin lebih enak menyebutnya seperti ituBiasanya Header berfungsi untuk menentukan header dari website yang berisi Logo/Nama Website atau deskripsi website
header juga bisa diletakkan diantara <section>, untuk menandakan judul dari sebuah section
<section>
Section biasanya digunakan untuk meletakkan konten, sebuah section biasanya diletakkan setelah Header, dan sebelum Footer<nav>
Untuk mendefinisikan area navigasi, biasanya berisi daftar link.<article>
Article biasanya untuk menempatkan entry independent dalam sebuah blog, majalah, ringkasan dan sebagainya.biasanya terletak didalam section
<aside>
Sebuah aside menunjukan konten yang berkaitan dengan konten lain nya yang ada di sekitar nya. Biasanya aside bisa digunakan untuk area sidebar pada sebuah blog.<footer>
Untuk menentukan bagian footer atau bagian bawah dari sebuah website, biasanya berisi hak cipta dari sebuah website.Penggunaan nya dalam struktur HTML selengkapnya sebagai berikut:
1 | <!DOCTYPE HTML> |
2 | < html > |
3 | < head > |
4 | < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" /> |
5 | < title >Your Website</ title > |
6 | </ head > |
7 | < body > |
8 | < header > |
9 | < nav > |
10 | < ul > |
11 | < li >Your menu</ li > |
12 | </ ul > |
13 | </ nav > |
14 | </ header > |
15 |
16 | < section > |
17 | < article > |
18 | < header > |
19 | < h2 >Article title</ h2 > |
20 | < p >Posted on < time datetime = "2009-09-04T16:31:24+02:00" >September 4th 2009</ time > by < a href = "#" >Writer</ a > - < a href = "#comments" >6 comments</ a ></ p > |
21 | </ header > |
22 | < p >Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</ p > |
23 | </ article > |
24 |
25 | < article > |
26 | < header > |
27 | < h2 >Article title</ h2 > |
28 | < p >Posted on < time datetime = "2009-09-04T16:31:24+02:00" >September 4th 2009</ time > by < a href = "#" >Writer</ a > - < a href = "#comments" >6 comments</ a ></ p > |
29 | </ header > |
30 | < p >Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</ p > |
31 | </ article > |
32 |
33 | </ section > |
34 |
35 | < aside > |
36 | < h2 >About section</ h2 > |
37 | < p >Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</ p > |
38 | </ aside > |
39 |
40 | < footer > |
41 | < p >Copyright 2009 Your name</ p > |
42 | </ footer > |
43 | </ body > |
44 | </ html > |
Source : http://www.tutorial-webdesign.com/mengenal-struktur-html5/