Cara Menggunakan HTML Tag Aside

by

Apa Itu HTML Tag Aside?

HTML tag <aside> adalah elemen semantik HTML yang digunakan untuk menampilkan konten tambahan yang berkaitan dengan konten utama halaman. Biasanya tag ini digunakan untuk sidebar, catatan, tips, atau informasi pendukung.

Tag <aside> membantu mesin pencari dan pembaca memahami bahwa konten di dalamnya adalah informasi pelengkap, bukan bagian utama artikel.

Struktur Dasar HTML Tag Aside

Berikut contoh struktur dasar penggunaan tag aside:

<aside>
<h3>Informasi Tambahan</h3>
<p>Ini adalah konten pendukung artikel.</p>
</aside>

Konten di dalam tag aside biasanya berisi informasi yang masih relevan tetapi tidak termasuk isi utama halaman.

Fungsi HTML Tag Aside

Tag aside sering digunakan untuk beberapa tujuan berikut:

  • Sidebar artikel
  • Tips atau catatan tambahan
  • Widget informasi
  • Iklan atau konten promosi
  • Daftar artikel terkait

Contoh Penggunaan HTML Tag Aside

1. Aside sebagai Sidebar Artikel

Aside dapat digunakan untuk menampilkan sidebar yang berisi informasi tambahan.

<aside>
<h3>Artikel Terkait</h3>
<ul>
<li>Belajar HTML Dasar</li>
<li>Pengenalan CSS</li>
</ul>
</aside>

Penjelasan:

  • <aside> → konten tambahan / sidebar
  • <h3> → judul sidebar
  • <ul> → daftar artikel
  • <li> → item artikel dalam daftar

Konten di dalam <aside> bukan konten utama, tetapi informasi tambahan yang masih berkaitan dengan artikel utama.

Contoh HTML dan CSS Lengkap: Aside Sidebar

<!DOCTYPE html>
<html lang="id">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Contoh Aside Sidebar</title>
</head>
<body>
	<main>
		<h1>Belajar HTML</h1>
		<p>HTML adalah bahasa dasar untuk membuat halaman website.</p>
	</main>

	<aside>
		<h3>Artikel Terkait</h3>
		<ul>
		<li>Belajar HTML Dasar</li>
		<li>Pengenalan CSS</li>
		<li>Belajar JavaScript</li>
		<li>Belajar Responsive Design</li>
		</ul>
	</aside>
</body>
</html>

2. Aside sebagai Catatan Tambahan

Tag aside dapat menampilkan catatan penting di dalam artikel.

<aside>
<p>Tips: Gunakan elemen semantik untuk meningkatkan SEO.</p>
</aside>

Penjelasan:

  • <aside> → konten tambahan atau catatan
  • <p> → isi pesan atau tips yang ingin disampaikan

Biasanya digunakan untuk menampilkan tips, peringatan, atau informasi tambahan yang masih berkaitan dengan artikel.

Contoh HTML dan CSS Lengkap: Aside Catatan

<!DOCTYPE html>
<html lang="id">
<head>
	<meta charset="UTF-8">
	<title>Contoh Aside Catatan</title>
</head>
<body>
	<article>

	<h1>Belajar HTML Semantik</h1>

	<p>
	HTML semantik membantu mesin pencari memahami struktur halaman dengan lebih baik.
	</p>

	<aside>
	<p>Tips: Gunakan elemen semantik untuk meningkatkan SEO.</p>
	</aside>

	</article>
</body>
</html>

Penjelasan:

  • <article> → konten utama artikel
  • <aside> → catatan atau tips tambahan
  • CSS digunakan untuk memberi tampilan seperti kotak tips agar lebih terlihat.

3. Aside di Dalam Artikel

Aside juga bisa ditempatkan di dalam artikel untuk memberikan informasi kontekstual.

<article>
  <p>HTML adalah bahasa markup...</p>
<aside>
  <p>HTML pertama kali diperkenalkan pada tahun 1991.</p>
</aside>
</article>
Penjelasan:

  • <article> → konten utama artikel
  • <p> → isi paragraf artikel
  • <aside> → informasi tambahan yang masih berkaitan dengan topik
  • <p> di dalam aside → isi catatan atau fakta tambahan

Biasanya digunakan untuk menampilkan fakta, sejarah, atau penjelasan tambahan di dalam artikel.

Contoh HTML dan CSS Lengkap: Aside Dalam Artikel

<!DOCTYPE html>
<html lang="id">
<head>
	<meta charset="UTF-8">
	<title>Contoh Aside Dalam Artikel</title>
</head>
<body>
	<article>

	<h1>Pengenalan HTML</h1>

	<p>
	HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman web.
	</p>

	<aside>
	<p>HTML pertama kali diperkenalkan pada tahun 1991 oleh Tim Berners-Lee.</p>
	</aside>

	<p>
	Saat ini HTML menjadi standar utama dalam pengembangan website.
	</p>

	</article>
</body>
</html>

Penjelasan:

  • <article> → wadah konten utama
  • <aside> → informasi tambahan di dalam artikel
  • CSS digunakan agar aside terlihat seperti kotak informasi di antara paragraf.

4. Aside sebagai Widget Informasi

Tag aside juga dapat digunakan sebagai widget informasi, misalnya untuk menampilkan profil penulis, informasi website, atau statistik singkat.

<aside>
<h3>Informasi Penulis</h3>
<p>Artikel ini ditulis oleh Ahmad, seorang web developer.</p>
</aside>

Penjelasan:

  • <aside> → widget atau informasi tambahan
  • <h3> → judul widget
  • <p> → isi informasi

Biasanya widget ini ditempatkan di sidebar website.

Contoh HTML dan CSS Lengkap: Aside Widget Informasi

<!DOCTYPE html>
<html lang="id">
<head>
	<meta charset="UTF-8">
	<title>Contoh Widget Informasi</title>
</head>
<body>
	<main>
	<h1>Belajar HTML</h1>

	<p>
	HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman website.
	</p>

	<p>
	Dengan HTML, kita bisa membuat teks, gambar, link, dan berbagai elemen lainnya.
	</p>
	</main>

	<aside>
	<h3>Informasi Penulis</h3>

	<p>
	Artikel ini ditulis oleh Ahmad, seorang web developer yang fokus pada pengembangan website modern.
	</p>
	</aside>
</body>
</html>

Penjelasan:

  • <main> → konten utama halaman
  • <aside> → widget informasi di sidebar
  • CSS display:flex digunakan untuk membuat layout konten + sidebar.

Atribut Penting HTML Tag Aside

Tag aside tidak memiliki atribut khusus, tetapi mendukung atribut global HTML berikut:

Atribut Fungsi Contoh
id Memberi identitas unik elemen <aside id="sidebar">
class Digunakan untuk styling CSS <aside class="sidebar">
title Menampilkan keterangan tambahan <aside title="Info">
hidden Menyembunyikan elemen <aside hidden>
lang Menentukan bahasa konten <aside lang="id">
style Memberi styling langsung <aside style="color:blue;">

Atribut Lanjutan HTML Tag Aside

Atribut berikut biasanya digunakan pada pengembangan website tingkat lanjut:

Atribut Fungsi Contoh
tabindex Mengatur navigasi keyboard <aside tabindex="0">
accesskey Membuat shortcut keyboard <aside accesskey="a">
contenteditable Membuat konten bisa diedit <aside contenteditable="true">
draggable Membuat elemen bisa diseret <aside draggable="true">
spellcheck Mengaktifkan pemeriksa ejaan <aside spellcheck="true">
data-* Menyimpan data kustom <aside data-info="sidebar">

Manfaat HTML Tag Aside untuk SEO

  • Membantu mesin pencari memahami struktur halaman
  • Meningkatkan pengalaman pengguna
  • Mendukung penggunaan elemen semantik HTML
  • Membuat struktur konten lebih rapi

Best Practice Penggunaan Tag Aside

  • Gunakan aside hanya untuk konten pendukung
  • Jangan memasukkan konten utama ke dalam aside
  • Gunakan class untuk styling yang konsisten
  • Pastikan aside tetap relevan dengan artikel

Kesimpulan

HTML tag <aside> digunakan untuk menampilkan konten tambahan yang mendukung isi utama halaman. Dengan penggunaan yang tepat, tag ini membantu meningkatkan struktur semantik, pengalaman pengguna, dan optimasi SEO.

Untuk memahami dasar tag HTML lebih lengkap, silakan baca dokumentasi tag HTML lengkap.

Leave a Comment

Responsive — 100%