[ADS] Top Ads

Pengenalan Struktur HTML 5

Seiring dengan perkembangan Web yang semakin inovatif, HTML 4 yang telah berkibar selama hampir satu dekade ini akhirnya mulai semakin dikembangkan kearah yang lebih baik atau kita kenal dengan nama HTML 5.

HTML 5 menjanjikan fleksibilitas lebih bagi penulis, memungkinkan Website lebih menarik dan interaktif serta memperkenalkan dan meningkatkan berbagai Fitur, seperti Kontrol bentuk, API, multimedia, struktur, dan semantik.

HTMl 5 Mulai bekerja pada tahun 2004, dibawah asuhan W3C HTML WG dan WHATWG. Bahkan, Empat Vendor Browser besar seperti Firefox, Apple, Opera, Dan Google kabarnya ikut mengembangkan HTML 5.

Nah, Struktur Dasar HTML dapat anda lihat dibawah ini:



Nah, gambar diatas adalah Struktur HTMl 4 yang masih menggunakan Elemen div yang masing-masing memberikan id deskriptif atau kelas untuk menggambarkan bagian-bagian khusus. Maklum Versi HTML 4 masih kekurangan semantik. Nah, HTML 5 mulai memperbaiki hal ini dengan membuat masing-masing elemen mewakili bagian yang berbeda dan tidak perlu menggunakan penggambaran khusus lagi. Klo digambarkan akan seperti gambar dibawah ini.



Gambar diatas menunjukkan bahwa Elemen-elemen div dapat digantikan dengan unsur-unsur baru: header, nav, bagian, artikel, samping, dan footer.

Markup untuk Dokumen dapat digambarkan sebagai berikut:

<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>

Contohnya, Struktur Dibawah ini yang ditandai dengan bagian nested dan elemen h1:

<section>
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>

</section>

Perhatikan Struktur Diatas, Untuk kompabilitas yang lebih baik dengan Browser saat ini, telah dimungkinkan menggunakan elemen post lain (h2 untuk h6) tepat ditempat elemen h1. itulah salah satu keuntungan menggunakan elemen ini.


Dengan mengidentifikasi halaman menggunakan elemen sectioning spesifik, teknologi bantu dapat membantu pengguna untuk lebih mudah menavigasi halaman. Misalnya, mereka dengan mudah dapat melompat ke bagian navigasi atau cepat melompat dari satu artikel ke berikutnya tanpa perlu bagi penulis untuk memberikan skip link.

Selanjutnya, Pada elemen header anda dapat menyertakan sub judul, informasi atau lainnya. Seperti Struktur Dibawah Ini:

<header>
<h1>A Preview of HTML 5</h1>
<p class="byline">By Ferdinand</p>
</header>

<header>
<h1>Example Blog</h1>
<h2>Insert tag line here.</h2>
</header>

Setelah itu bagian lainnya adalah Footer yang berisi data hak Cipta, Link ke halaman Terkait dan lainnya, Strukturnya seperti dibawah ini:

<footer>© 2010 DJ Note Inc.</footer>

Selanjutnya adalah bagian link navigasi, dengan struktur seperti dibawah ini:

<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/prolog">Prolog</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>

Selanjutnya adalah Struktur Sidebar, seperti dibawah ini:

<aside>
<h1>Archives</h1>
<ul>
<li><a href="/2010/09/">September 2010</a></li>
<li><a href="/2010/08/">August 2010</a></li>
<li><a href="/2010/07/">July 2010</a></li>
</ul>

</aside>


Selanjutnya, Section yang merupakan bagian utama dalam sebuah dokument, misalnya kita bayangkan seperti sebuah Bab dengan Struktur seperti dibawah ini:

<section>
<h1>Chapter 1: Saya Orang Kreatif</h1>
<p>Banyak yang bilang saya gak cerdas dan bengal, dan saya akui demikianlah saya, tapi ditengah kebodohan saya, saya tetap bersyukur diberikan otaQ yang kreatif oleh Tuhan
...</p>
</section>

Terakhir adalah Unsur artikel, yang berisi konten, postingan, komentar dan lainnya, Strukturnya seperti dibawah ini:

<article id="comment-3">
<header>
<h4><a href="#comment-3" rel="bookmark">Comment #3</a>
by <a href="http://example.com/">Google</a></h4>
<p><time datetime="2010-08-29T13:58Z">August 29th, 2010 at 13:58</time>
</header>
<p>Blogwalking Gan!</p>
</article>

Nah, itulah Struktur HTML 5 yang sewaktu-waktu masih bisa berubah,

Sumber postingan ini berasal dari:

http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#outlines dan telah saya rubah untuk memudahkan anda memahaminya.

10 komentar

  1. ini ambigu tentang aside, aside itu sebenarnya sebuah elemen tambahan dalam artikel atau hanya quote?

    sidebar bukan berarti aside kan dalam html5 begitu pula sebaliknya, hanya penempatan width dan float yang baik di css seperti membuat penampakan side bar dalam sintaks aside, bisa juga bloggroll dan lainnya

    jadi apa kesimpulan tentang sintaks ini?
    dan kenapa pula section selalu di hubungkan dengan class?
    apakah div ada juga dalam section dan apakah mempunyai anak seperti dd, dl, dt dan sebagainya lalu bagaimana kita menempatkannya?

    BalasHapus
  2. mas postingannya keren abis ni....

    jujur saja saya sangat tertarik dengan html 5 ini...


    mas, ada ga "tutorial untuk belajar sendiri html 5" ini...
    saya ingin sekali mendalami html 5...

    mohon ilmunya ya...?

    sukses selalu....

    BalasHapus
  3. @ blogger admin: reply udah d'blog Blogger Admin hhe..

    @ kojel : Lumayan banyak Sob... klo buku kebetulan blum ada yg pernah bikin atau ng'luarin buku tentang HTML5 atau CSS3 klo di Indonesia klo di luar udah ada tapi aku pun blum nemuin Versi Translatenya dan Dijual disini, tapi klo tutorial lumayan banyak..

    Coba ke http://www.html5rocks.com/resources.html itu Sumber yang ngasih Link ke banyak tempat...

    BalasHapus
  4. terima kasih banyak ^^
    semoga bermanfaat

    BalasHapus
  5. @blogger admin setau ane, section dalam html5 difungsikan menggantikan id bukan class, ato berarti masih ada yang ane belum tau. so thanks udah dikasih tau..

    BalasHapus
  6. @DJ Site thanks buat info nye & soal bku, mungkin penulis buku di indon emang blum pernah buat buku untuk itu ato emang pencarian qu slama ini yang blum mrata y, hehehe.

    BalasHapus
  7. ini yang gue cari thanks berat infonya sob :D

    BalasHapus
  8. penjelasannya disertai gambar sangat membantu gan, jadi g perlu membayangin gimna strukturnya HTML 5 hehehe, makasih banyak gan sangat membantu artikelnya

    BalasHapus
  9. masih bingung soalnya saya masih awam dengan bahasa html jgn kan 5 versi 1 aja juga blom ngeh, tapi saya ingin belajar mas...

    BalasHapus

Posting Komentar

Copyright © 2023

Cookies