Memahami Web Development menggunakan HTML5 Semantic

Apa fungsi dari semantic pada Web Development

Sebelumnya artikel Belajar Structur HTML5 telah menjelaskan tentang apa itu HTML5 dan Struktur web pada HTML5. Terdapat perbedaan struktur web sebelum dan sesudah menggunakan semantic. Materi kali ini kita akan belajar Fungsi Semantic dalam HTML. Tag baru menjadi pembeda antara struktur web sebelum dan sesudah menggunakan metode semantic.

Macam-macam Tag Semantic pada HTML5

Dapat kita lihat pada gambar diatas, terdapat perbedaan pada beberapa tag untuk mengelompokkan suatu elemen web. Beberapa tag diantaranya adalah <header>, <nav>, <main>, <section>, <article>, <aside> dan juga <footer>. Setiap tag tersebut memiliki fungsi tersendiri, berikut adalah penjelasan mengenai Fungsi Semantic pada HTML.

1. Header

Tag <header> dipakai untuk membungkus bagian halaman web yang merupakan bagian header, salah satunya adalah tempat menaruh judul dan logo website kita. Berikut merupakan contoh simple penggunaan tag header.

<header>
   <h1>Judul Halaman</h1>
   <img src=”logo.png” />
</header>

Kebanyakan webdev menggunakan tag <header> untuk menampilkan nama situs dan navigasi suatu website, contoh sebagai berikut.

<body>
   <header>
      <h1>Banyuwangi</h1>
      <p>Banyuwangi adalah kabupaten ter-eksis di Jawa Timur.</p>
      <nav>
         <ul>
            <li><a href="#geografis">Geografis</a></li>
            <li><a href="#wisata">Wisata</a></li>
         </ul>
      </nav>
   </header>
</body>

Selain itu, tag header juga dapat digunakan sebagai pembuka konten dalam sebuah elemen <article> atau <section> seperti di bawah ini.

<article>
   <header>
      <h1>Banyuwangi</h1>
      <h2> Kabupaten Jawa Timur</h2>
   </header>
   <p>Banyuwangi adalah kabupaten ter-eksis di Jawa Timur.</p>
   <footer>
      <p>Share Artikel</p>
      <ul>
         <li>WhatsApp</li>
      </ul>
   </footer>
</article>

2. Main

Tag <main> digunakan untuk membungkus konten utama atau inti dari sebuah halaman. Tag main dapat membungkus beberapa tag lain seperti <section>, <article>, dan lain sebagainya selama konten tersebut masuk ke dalam inti halaman website. Pemakaian <main. Berikut merupakan contoh simple dari penggunaan tag main pada html5.

<body>
   <header>
      <!-- Isi header -->
   </header>
   <main>
      <section>
         <p>Sebuah section</p>
      </section>
      <article>
         <p>Sebuah article</p>
      </article>
   </main>
   <footer>
      <!-- Isi footer -->
   </footer>
</body>

3. Nav

Tag <nav> berfungsi untuk mengelompokkan sebuah navigasi penting, misalnya navigasi utama pada sebuah website. Artinya, Tag <nav> digunakan sebagai ‘container‘ dari menu navigasi. Sebaiknya digunakan untuk menu utama penting seperti pada bagian <header>. Berikut penggunaan <nav> secara simple.

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

4. Article

Tag <article> berfungsi untuk membungkus konten web yang merupakan bagian dari artikel. Bisa saja kontennya berupa artikel blog, komentar, forum post, dan sebagainya. Pada umumnya webdev menaruh tag ini di dalam <main> atau <section>. Contoh simple penggunaan <article> sebagai berikut.

<main>
   <div id="content">
      <article>
         <h2>Banyuwangi</h2>
         <p>Banyuwangi adalah kabupaten ter-eksis di Jawa Timur.</p>
      </article>
      <article>
         <h2>Banyumas</h2>
         <p>Banyumas adalah kabupaten ter-eksis di Jawa Tengah.</p>
      </article>
   </div>
</main>

5. Aside

Umumnya, tag <aside> memiliki 2 tujuan. Tujuan pertama, ketika tag ini diletakkan di dalam <article> maka elemen ini dapat berisikan konten yang berhubungan dengan artikel tersebut. Tujuan kedua ketika elemen ini ditempatkan di luar dari elemen <article> maka elemen ini dapat berisikan konten yang berhubungan pada suatu halaman. Berikut contoh penggunaan elemen tersebut.

<main>
   <article>
      ....
   </article>
   <aside>
      <article>
         <h2>Banyuwangi</h2>
         <p>Kota Santet of Java</p>
         </header>
      </article>
   </aside>
</main>

6. Section

Tag <section> berguna untuk membungkus bagian-bagian dari struktur web. Webdev memakai ini sebagai container untuk kumpulan artikel, galeri, atau bagian lain dari halaman web yang perlu untuk dikelompokkan.Seperti biasa, berikut contoh simple penggunaan <section>.

<article>
   <section>
      <h2>Banyuwangi</h2>
      <p>Banyuwangi adalah kabupaten ter-eksks di Jawa Timur.</p>
   </section>
   <section>
      <h3>Siliragung</h3>
      <p>Siliragung termasuk salah satu kecamatan di Banyuwangi.</p>
   </section>
</article>

7. Footer

Pada dasarnya, <footer> berfungsi untuk membungkus konten bagian bawah(foot) website. Penggunaan <footer> umumnya adalah untuk meletakkan copyright, about us, dll. Tag ini juga cocok untuk menampung konten tambahan seperti ‘about author’ maupun link share ke sosial media. Footer juga dapatdigunakan sebagai catatan kaki pada elemen <article> atau <section>. Berikut merupakan contoh simple penggunaan <footer>.

<body>
   <header>
      <h1>Banyuwangi</h1>
      <nav>
         <!-- Isi Nav -->
      </nav>
   </header>
   <footer>
      <p>Copyright 2021, Irawan@IDCSharp
      </p>
   </footer>
</body>

Implementasi Semantic pada Pengembangan website

Berikut merupakan implementasi salah satu penggunaan semantic pada pengembangan Website di Project yang nyata :

Kesimpulan

Masing-masing elemen pada HTML5 memiliki fungsi tersendiri sebagai berikut.

1. <header> untuk membungkus bagian halaman web yang merupakan bagian header.

2. <main> untuk membungkus konten utama atau inti dari sebuah halaman.

3. <nav> untuk mengelompokkan sebuah navigasi penting.

4. <article> untuk membungkus konten web yang merupakan bagian dari artikel.

5. <aside> untuk menandai bagian web yang bukan berisi konten utama.

6. <section> untuk membungkus bagian-bagian dari struktur web.

7. <footer> untuk mewadahi bagian bawah website.