HTML Dasar #8 : Belajar Tag Main, Article, Section, dan Aside

Penggunaan tag HTML seperti main, article, section, dan aside dapat membantu memperjelas struktur dan konten sebuah halaman web. Berikut ini adalah penjelasan lengkap tentang bagaimana menggunakan tag-tag tersebut:

Gambar 8.1 : Ilustrasi Belajar Tag Main, Article, Section, dan Aside

Daftar Isi

Tag Main

Tag main digunakan untuk menandai konten utama pada sebuah halaman web. Konten utama pada suatu halaman web adalah informasi yang paling penting dan mendasar, yang dapat memuat elemen seperti judul, gambar, paragraf, dan lain sebagainya.

Penggunaan tag main sangat penting, karena hal ini dapat membantu mesin pencari dan teknologi lainnya untuk mengenali dan memahami konten utama dari sebuah halaman web.

Contoh penggunaan tag main:

<main>

   <!-- Judul Artikel -->
   <h1>Judul Artikel</h1>
   
   <!-- Isi Paragraf -->
   <p>Paragraf Pertama</p>
   <p>Paragraf Kedua</p>
   
   <!-- Contoh Gambar -->
   <img src="gambar.jpg" alt="Deskripsi Gambar">
   
</main>

Tag Article

Tag article digunakan untuk menandai sebuah konten artikel pada sebuah halaman web. Artikel dapat berisi informasi tentang berbagai topik, seperti berita, opini, tutorial, dan sebagainya. Dalam sebuah halaman web, artikel dapat terdiri dari beberapa bagian seperti judul, isi artikel, dan meta informasi lainnya.

Contoh penggunaan tag article:

<article>
   <!-- Header Artikel -->
   <header>
      <h2>Judul Artikel</h2>
      <p>Penulis Artikel</p>
      <time datetime="2022-01-01">1 Januari 2022</time>
   </header>
   <!-- Isi Artikel -->
   <p>Isi artikel...</p>
   <!-- Footer Artikel -->
   <footer>
      <a href="https://example.com">Sumber</a>
   </footer>
</article>

Tag Section

Tag section digunakan untuk menandai bagian-bagian tertentu dalam sebuah halaman web. Biasanya, bagian-bagian ini berisi konten yang terkait atau sejenis, seperti bab atau topik dalam sebuah buku. Penggunaan tag section dapat memudahkan pengguna untuk mencari dan memahami konten dalam sebuah halaman web.

Contoh penggunaan tag section:

<section>
   <h2>Bab 1</h2>
   <p>Isi bagian 1...</p>
</section>
<section>
   <h2>Bab 2</h2>
   <p>Isi bagian 2...</p>
</section>

Tag Aside

Tag aside digunakan untuk menandai konten yang tidak terkait langsung dengan konten utama pada sebuah halaman web, tetapi tetap terkait dengan halaman tersebut. Biasanya, konten aside berisi informasi terkait atau bantuan, seperti keterangan gambar atau tautan ke halaman terkait.

Contoh penggunaan tag aside:

<aside>
   <h3>Keterangan Gambar</h3>
   <p>Keterangan gambar...</p>
</aside>
<aside>
   <h3>Artikel Terkait</h3>
   <ul>
      <li><a href="#">Artikel Terkait 1</a></li>
      <li><a href="#">Artikel Terkait 2</a></li>
   </ul>
</aside>

Kesimpulan

Dalam penggunaan tag main, article, section, dan aside, penting untuk memperhatikan beberapa hal berikut:

1. Gunakan tag main hanya satu kali dalam sebuah halaman web. Tag main sebaiknya hanya digunakan pada konten utama halaman tersebut.
2. Gunakan tag article untuk menandai konten yang berisi artikel. Gunakan header dan footer untuk menyertakan informasi tambahan seperti judul, penulis, dan tanggal.
3. Gunakan tag section untuk menandai bagian-bagian tertentu dalam sebuah halaman web. Pastikan konten dalam setiap section terkait dan saling mendukung.
4. Gunakan tag aside untuk menandai konten yang tidak terkait langsung dengan konten utama pada sebuah halaman web. Pastikan konten aside tetap relevan dengan halaman tersebut.

Penggunaan tag main, article, section, dan aside dapat membantu memperjelas struktur dan konten sebuah halaman web. Hal ini akan memudahkan pengguna untuk menavigasi dan memahami konten halaman tersebut. Oleh karena itu, sebaiknya kita mengikuti prinsip penggunaan tag tersebut untuk menciptakan halaman web yang berkualitas dan mudah dipahami.

HTML Dasar