Belajar Structur Halaman Web Pada HTML5 (Semantic HTML)

Mungkin sebagian dari kalian sudah mengetahui Apa itu HTML? Selanjutnya, kalian akan diperlihatkan materi Belajar Structur Halaman Web pada HTML5 atau yang biasa disebut dengan Semantic HTML Tag. Namun sebelum masuk ke dalam inti materi, mungkin kalian perlu mengetahui apa pengertian dari HTML5.

Apa itu HTML5?

Singkatnya, HTML5 merupakan revisi kelima dari HTML. HTML atau HyperText Markup Language sendiri adalah teks atau bahasa markup standar untuk membangun sebuah halaman website. Dicetus pertama kali pada tahun 1990, HTML kemudian disusul dengan revisi keduanya HTML2 pada tahun 1995, HTML3 revisi ketiga pada tahun 1997, HTML4 revisi keempat tahun 2000, dan revisi kelima pada tahun 2009 hingga saat ini yaitu HTML5.

Setelah sedikit berkenalan dengan si HTML5, sekarang kita masuk ke inti materi yaitu Belajar Structur Halaman Web pada HTML5 (Semantic HTML Tag).

Struktur Web Menggunakan Generic Element Div

Sebelum mengenal HTML5, penggunaan tag dalam membuat struktur web belum lengkap. Maka dari itu, kebanyakan webdev menggunakan generict element <div> dengan atribut class atau id untuk mengelompokkan suatu elemen HTML. Webdev mengelompokkan header dengan tag <div> atribut id, membuat navigasi dengan tag <div> atribut id, hingga membuat artikel / section dengan tag <div> atribut class, dan lain-lain. Hal ini tentunya membuat struktur pada website terlihat meaningless. Berikut merupakan ilustrasi beserta contoh kode sederhana website sebelum menggunakan HTML5.

Ilustrasi struktur website menggunakan generict element

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Sebelum Mengenal HTML5</title>
</head>
 
<body>
  <div id="header">
    <h1>Ga Kenal HTML5</h1>
  </div>
 
  <div id="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Tentang Kami</a></li>
    </ul>
  </div>

  <div id="content">
    <div id="article_1">
      <div id="header_article_1">
        <h1>Banyuwangi</h1>
      </div>
        <p>Banyuwangi merupakan sebuah kabupaten di Jawa Timur.</p>
    </div>
     <div id="article_2">
      <div id="header_article_2">
        <h1>Banyumas</h1>
      </div>
        <p>Banyumas merupakan sebuah kabupaten di Jawa Tengah.</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 idcsharp.com</p>
  </div>
</body>
</html>

Struktur Web Menggunakan Semantic HTML

Setelah mengenal HTML5, webdev kemudian menggantikan peran generict element <div> dengan beberapa elemen yang untuk memisah dan mengelompokkan suatu elemen dengan lebih jelas dan memiliki arti pada struktur website (Semantic HTML). Terdapat beberapa elemen baru yang sering teraplikasikan seperti <header>, <nav>, <main>, <section>, <article>, <aside> dan juga <footer>. Berikut merupakan contoh ilustrasi beserta contoh kode sederhana website setelah menggunakan Semantic HTML pada HTML5.

Ilustrasi struktur website menggunakan Semantic HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Setelah Mengenal HTML5</title>
</head>
 
<body>
  <header>
    <h1>Kenal HTML5</h1>
    <img src="logo_website.jpg" />
  </header>
 
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Tentang Kami</a></li>
    </ul>
  </nav>
    
  <section>
    <article>
      <header>
        <h1>Banyuwangi</h1>
      </header>
        <p><p>Banyuwangi merupakan sebuah kabupaten di Jawa Timur.</p>
    </article>
    <article>
      <header>
        <h1>Banyumas</h1>
      </header>
        <p><p>Banyumas merupakan sebuah kabupaten di Jawa Tengah.</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 idcsharp.com</p>
  </footer>
</body>
</html>

Kesimpulan

Jadi, Semantic HTML merupakan elemen HTML5 yang bisa digunakan untuk memisah dan mengelompokkan suatu elemen dengan lebih jelas dan memiliki arti pada struktur suatu website. Sebelum mengenal Semantic HTML webdev biasa menggunakan tag <div>, sedangkan setelah mengenal Semantic HTML webdev menggantinya dengan elemen-elemen baru yang biasa digunakan seperti <header>, <nav>, <main>, <section>, <article>, <aside> dan juga <footer>.