Tutorial Belajar HTML5 Part 6: Cara Membuat Struktur HTML5 (Tag header, footer dan aside)

Dalam tutorial belajar HTML5 kali ini kita akan mencoba menerapkan semantic tag yang kita pelajari dalam tutorial sebelumnya untuk membuat struktur HTML menggunakan tag HTML5 seperti <header>, <nav>, <section>, <article>, <aside> dan <footer>.


Membuat Struktur Halaman HTML dengan Tag <div>

Sebelum era HTML5 yang memiliki tag untuk membuat struktur halaman yang lengkap, web developer umumnya menggunakan tag <div> dengan atribut id atau class untuk memisahkan bagian-bagian struktur dalam halaman HTML, seperti header, footer, dan sidebar.

Sebagai contoh, berikut adalah gambar sederhana struktur sebuah website dengan 2 kolom:

Tutorial Belajar HTML5 - Contoh Struktur Halaman Web

Untuk membuat struktur diatas, berikut adalah kode HTMLnya:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Belajar HTML5</title>
</head>

<body>
  <div id="header">
    <h1>Judul Website</h1>
    <img src="logo_website.jpg" />
  </div>

  <div id="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
  </div>
    
  <div id="content">
    <div id="article_1">
      <div id="article_header_1">
        <h1>Judul Artikel 1</h1>
        <h2>Sub Judul Artikel 1</h2>
      </div>
        <p>...Ini adalah isi dari artikel 1...</p>
    </div>
     <div id="article_2">
      <div id="article_header_2">
        <h1>Judul Artikel 2</h1>
        <h2>Sub Judul Artikel 2</h2>
      </div>
        <p>...Ini adalah isi dari artikel 2...</p>
    </div>
  </div>

  <div id="sidebar">
    <h1>Artikel Terbaru</h1>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div>

  <div id="footer">
    <p>Footer - Copyright Duniailkom 2014</p>
  </div>
</body>
</html>

Kode diatas sepenuhnya valid dan sangat sering digunakan hingga saat ini. Akan tetapi, HTML 5 mencoba mengganti semua tag <div> menjadi semantic tag yang lebih bermakna.


Semantic Tag untuk membuat Struktur web dengan HTML5

Seperti yang telah kita bahas pada tutorial sebelumnya tentang semantic tag, HTML5 mencoba menggantikan tag ‘tanpa arti<div> untuk sering digunakan untuk membuat struktur halaman web. Tag-tag yang bisa kita gunakan untuk keperluan ini adalah <header>, <nav>, <section>, <article>, <aside> dan <footer>.

Berikut adalah pembahasan beberapa tag HTML5 yang ditujukan untuk membuat struktur halaman:


Tag <header>

Tag <header> digunakan untuk bagian halaman web yang merupakan header. Tag ini bisa muncul lebih dari 1 kali, tergantung kebutuhan. Bagian atas web dimana kita meletakkan logo dan judul situs adalah tempat terbaik untuk tag <header>. Namun di bagian atas artikel dinama terdapat judul dan sub judul artikel juga bisa di ‘bungkus‘ dengan tag <header>.

Contoh penggunaan tag <header>:

<header>
  <h1>Judul Website</h1>
  <img src=”logo_website.png” />
</header>

Tag <nav>

Tag <nav> digunakan sebagai ‘container‘ dari menu navigasi. Sebaiknya digunakan untuk menu utama yang dirasa penting seperti pada bagian header.

Contoh penggunaan tag <nav>:

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

Tag <section>

Tag <section> digunakan untuk memisahkan bagian-bagian dari struktur web. Tag ini bisa digunakan sebagai container untuk kumpulan artikel, gallery, atau bagian lain dari halaman web yang perlu pemisahan. Walaupun tag <section> terkesan ‘generik’, tetapi jika yang kita butuhkan hanya kontainer tanpa makna apa-apa, sebaiknya tetap menggunakan tag <div>.

Bagian utama dimana kontent berada bisa ‘dibungkus’ menggunakan tag <section>. Dan jika halaman tersebut memiliki banyak bagian yang secara logika bisa dipisah, bisa menggunakan beberapa tag <section>.

Contoh penggunaan tag <section>:

<section>
  <h1>Judul 1</h1>
   <p>...Kumpulan dari konten...</p>
</section>
<section>
  <h1>Judul 1</h1>
  <p>...Kumpulan dari konten...</p>
</section>

Tag <main>

Tag <main> cocok digunakan untuk menandakan bagian utama dari sebuah halaman. Berbeda dari tag <section>, tag <main> umumnya hanya digunakan 1 kali untuk bagian paling penting, yang biasanya berupa konten/artikel utama.

Contoh penggunaan tag <main>:

<main>
  <h1>Judul Utama</h1>
  <p>...penjelasan...</p>
  <article>
    <h2>Judul Artikel 1</h2>
    <p>...penjelasan artikel 1...</p>
    <p>... </p>
    <p>... </p>
  </article>
  <article>
    <h2>Judul Artikel 2</h2>
    <p>...penjelasan artikel 2...</p>
    <p>... </p>
    <p>... </p>
  </article>
</main>

Tag <article>

Tag <article> bertujuan untuk menampung konten web yang merupakan.. (ya, anda benar) artikel. Umumnya tag ini berada di dalam tag <section> atau <main>. Tag ini cocok sebagai container untuk artikel dalam sebuah blog.

Contoh penggunaan tag <article>:

<article>
 <h2>Judul Artikel</h2>
 <p>...penjelasan artikel...</p>
 <p>... </p>
 <p>... </p>
</article>

Tag <aside>

Tag <aside> bertujuan untuk menandai bagian web yang bukan berisi konten utama, tetapi memiliki kaitan dengan artikel yang saat ini ditampilkan. Bagian paling pas untuk tag <aside> adalah sidebar. Karena pada sidebar bisa terdiri dari berbagai konten yang tidak langsung berkaitan dengan konten utama seperti ’10 artikel terbaru’, atau ‘5 komentar terbaru’. Selain untuk sidebar, tag <aside> juga bisa digunakan di dalam artikel untuk menandai bagian tambahan.

Contoh penggunaan tag <aside>:

<article>
  <h2>Judul Artikel 1</h2>
  <p>...penjelasan artikel 1...</p>
  <p>... </p>
  <p>... </p>
</article>
<aside>
  <p>...penjelasan tambahan...</p>
</aside>

Tag <footer>

Tag <footer> biasannya digunakan pada bagian bawah halaman, dimana kita menampilkan beberapa informasi mengenai website. Walapun penggunaan paling jelas adalah untuk bagian footer halaman (meletakkan copyright, about us, dll), tag ini juga cocok digunakan pada bagian bawah artikel untuk menampung informasi tambahan seperti ‘tentang penulis‘ maupun link untuk share ke sosial media.

Contoh penggunaan tag <footer>:

<main>
  <h2>Judul Artikel 1</h2>
  <p>...penjelasan artikel 1...</p>
  <p>... </p>
  <p>... </p>
</main>
<footer>
  <p>...copyright 2014 duniailkom...</p>
</footer>

Membuat Struktur Halaman HTML dengan tag HTML5

Dengan menggunakan tag-tag HTML5 diatas, kita akan merevisi struktur web sebelumnya dengan menggunakan HTML5. Struktur yang akan kita buat sama dengan contoh pertama:

Tutorial Belajar HTML5 - Contoh Struktur Halaman Web HTML5

Dan berikut adalah kode HTML5 yang digunakan untuk membuat struktur tersebut:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Belajar HTML5</title>
</head>

<body>
  <header>
    <h1>Judul Website</h1>
    <img src="logo_website.jpg" />
  </header>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
   
  <section>
    <article>
      <header>
        <h1>Judul Artikel 1</h1>
        <h2>Sub Judul Artikel 1</h2>
      </header>
        <p>...Ini adalah isi dari artikel 1...</p>
    </article>
    <article>
      <header>
        <h1>Judul Artikel 2</h1>
        <h2>Sub Judul Artikel 2</h2>
      </header>
        <p>...Ini adalah isi dari artikel 2...</p>
    </article>
  </section>

  <aside>
    <h1>Artikel Terbaru</h1>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </aside>

  <footer>
    <p>Footer - Copyright Duniailkom 2014</p>
  </footer>
</body>
</html>

Perhatikan bahwa pada kode diatas saya menggunakan 6 semantic tag dari HTML5, yakni <header>, <nav>, <section>, <artikel>, <aside> dan <footer>. Susunan kode HTML tersebut mungkin lebih mudah dipahami jika anda pernah mendesain layout halaman HTML dengan CSS.

Penggunaan semantic tag dari HTML5 juga akan bermanfaat bagi SEO (Search Engine Optimization). Struktur halaman akan lebih jelas, sehingga mesin pencari bisa memprioritaskan bagian mana yang perlu diberikan penekanan (seperti <header> atau <article>) dan bagian mana yang hanya berupa keterangan (seperti <aside> atau <footer>).


eBook HTML Uncover Duniailkom
Anda serius ingin menguasai HTML? Duniailkom telah menyusun eBook HTML Uncover. eBook ini membahas HTML dengan lebih detail dan lebih lengkap hingga fitur terbaru HTML5. Penjelasan lebih lanjut bisa ke: eBook HTML Uncover Duniailkom.

Tutorial Terkait:

84 Comments

  1. Tukang Belajar
    25 Dec 14
    • Andre
      29 Dec 14
  2. Vinezta
    05 Feb 15
    • Andre
      06 Feb 15
      • Vinezta
        06 Feb 15
        • Andre
          08 Feb 15
  3. Riki Sebastiar
    20 Feb 15
  4. Riki Sebastiar
    06 Mar 15
  5. nabawi
    12 Mar 15
  6. yana
    26 Mar 15
    • Andre
      27 Mar 15
  7. Erwin
    30 Mar 15
    • Andre
      31 Mar 15
  8. Frz
    01 Apr 15
  9. Tangerang
    05 Apr 15
    • Andre
      05 Apr 15
  10. budi aman prasetyo
    23 Apr 15
  11. muhammad ali
    09 Jul 15
  12. marco
    15 Aug 15
  13. Dakir
    07 Sep 15
    • Andre
      10 Sep 15
  14. ema
    23 Sep 15
    • Andre
      23 Sep 15
  15. danirjal
    20 Oct 15
    • Andre
      20 Oct 15
  16. name
    03 Nov 15
    • Andre
      03 Nov 15
  17. Triyono
    04 Nov 15
    • Andre
      05 Nov 15
  18. Hafidzu
    25 Nov 15
    • Andre
      25 Nov 15
  19. baguz
    01 Dec 15
    • Andre
      01 Dec 15
  20. Aldi
    07 Jan 16
    • Andre
      07 Jan 16
  21. Refnadi
    07 Jan 16
    • Andre
      08 Jan 16
  22. anwar
    20 Jan 16
  23. Newbie
    21 Feb 16
    • Andre
      22 Feb 16
  24. ahmad ali
    15 Mar 16
    • Andre
      15 Mar 16
  25. noor
    16 Mar 16
  26. asenk'kwan
    24 Mar 16
  27. peluru
    29 Mar 16
  28. Jamaris
    05 Apr 16
  29. Irawan M
    18 Apr 16
  30. jeje88
    18 Apr 16
  31. agen wsc biolo
    29 Apr 16
  32. Trafalgar Adi Law
    05 May 16
    • Andre
      05 May 16
  33. Kodok Seo
    28 May 16
  34. Indi
    05 Jun 16
    • Andre
      06 Jun 16
  35. MadZeo
    18 Jun 16
    • Andre
      18 Jun 16
  36. Mastenk
    27 Jun 16
    • Andre
      27 Jun 16
  37. Mukti
    03 Aug 16
    • Andre
      04 Aug 16
  38. Imalul
    14 Aug 16
    • Andre
      14 Aug 16
  39. m1crohz
    27 Aug 16
    • Andre
      27 Aug 16
  40. yanto kurniwan
    04 Oct 16
    • Andre
      04 Oct 16
  41. Fredy
    22 Oct 16
    • Andre
      23 Oct 16
  42. jamalludin
    09 Nov 16
    • Andre
      09 Nov 16
  43. Kankusai
    15 Nov 16
    • Andre
      16 Nov 16
  44. Brian
    20 Nov 16
    • Andre
      20 Nov 16
  45. wahid
    23 Nov 16
    • Andre
      25 Nov 16
  46. blog post
    30 Nov 16
    • Andre
      01 Dec 16
  47. karimunjawa
    03 Dec 16
    • Andre
      20 Feb 17

Add Comment