Struktur Dasar HTML5

e-amik - HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Berikut tujuan dibuatnya HTML5 :

Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
Penanagan kesalahan yang lebih baik
Lebih markup untuk menggantikan scripting
HTML5 merupakan perangkat mandiri
Proses pembangunan dapat terlihat untuk umum

Fitur baru dalam HTML5 :

Unsur kanvas untuk menggambar
Video dan elemen audio untuk media pemutaran
Dukungan yang lebih baik untuk penyimpanan secara offline
Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section
Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5.

Struktur Dasar HTML5:

Header

Aside

Nav
Section
Article
Footer

Contoh Penulisan

    

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>
      Contoh Dokumen HTML5
    </title>
  </head>
  <body>
    <header>
      <h1>
      Judul
      </h1>  
        </header>

<nav>
        <ul>
          
          <li>
            <a href="#">
              Home
            </a>
          </li>
          <li>
            <a href="#">
              About
            </a>
          </li>
          <li>
            <a href="#">
              Artikel
            </a>
          </li>
          <li>
            <a href="#">
              Contact Us
            </a>
          </li>
          </ul>
          </nav>

          <aside>
          <div>
            <p>
              Pengikut
            </p>
          </div>
          <div>
            <p>
              Kategori
            </p>
          </div>
          <div>
            <p>
              Arsip
            </p>
          </div>
        </aside>
        <section>
          <article>
            <header>
              <h2>
                Judul
              </h2>
              <p>
                Konten
              </p>
            </header>
            <p>
              Isi
            </p>
          </article>
        </section>
        <footer>
          <p>
            konten
          </p>
        </footer>
  </body>
</html>

Pada tutorial selanjutnya kita akan membahas tentang cara menyesuaikan struktur dengan CSS

Unknown

0 Komentar