Struktur Dasar Pada HTML5

Struktur Dasar HTML5 - 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.

Penjelasan Dari 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/cssdan 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 Dari 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 Di HTML5 .?

Untuk yang ingin mencoba apakah blog/website-nya sudah valid HTML5 atau belum, silahkan kunjungi situs validator HTML5 , atau langsung kunjungi alamat web berikut : http://html5.validator.nu

Pages

Struktur Dasar Pada HTML5

0 Response to "Struktur Dasar Pada HTML5"