Tag Aside pada HTML5 dan Fungsinya
- <div>: Mendefinisikan atau menciptakan kebiasaan sama dari section web.
- <aside>: Melakukan hal yang sama seperti <div> dengan menciptakan section tetapi hanya mengandung konten yang berkaitan dengan laman utama saja.
Tag <aside> membuat pengembang web menjadi lebih mudah dan meningkatkan kejelasan dari dokumen html. Tag ini membuat pengembang lebih mudah mengenali teks utama beserta subordinatnya. Pada keduanya, baik tag <div> dan <aside> sama-sama membutuhkan CSS untuk perancangan atau design yang lebih spesifik. Tag <aside> mendukung atribut global dan atribut event pada HTML.
<h3>Konten...</h3>
<p>Konten...</p>
</aside>
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
aside tag
</title>
<style>
.mkn
{
font-size:30px;}
h1
{
font-size:40px;
color:#090;
font-weight:bold;}
p
{
font-size:20px;
margin:20px 0;}
</style>
</head>
<body>
<div class = "mkn">
Contoh Tag Aside
</div>
<aside>
<h1>
blog ElfanMauludi
</h1>
<p>
Portal ilmu komputer
</p>
</aside>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
aside tag
</title>
<style>
.mkn
{
font-size:40px;
color:#090;
font-weight:bold;
text-align:center;
margin-bottom:20px;}
article
{
width: 50%;
float: left;
padding:10px;
float:left;}
aside
{
float:right;
width: 40%;
float: right;
background-color: green;
color: white;
padding:5px;
margin:10px;
height:100px;}
</style>
</head>
<body>
<div class = "mkn">
Hallo, dunia!
</div>
<article>
<h1>
Heading . . .
</h1>
<p>
Tag aside digunakan untuk menampilkan informasi penting tentang halaman utama.
</p>
</article>
<aside>
<h1>
Contoh Tag Aside
</h1>
<p>
Konten Tag Aside. . .
</p>
</aside>
</body>
</html>
Heading . . .
Tag aside digunakan untuk menampilkan informasi penting tentang halaman utama.
.
<!DOCTYPE html>
<html>
<head>
<title>
Tag Aside Sebagai Sidebar dan Informasi Tambahan
</title>
</head>
<body>
<article>
<h1>Judul Artikel</h1>
<p>Isi artikel utama...</p>
<aside>
<h2>Artikel Terkait</h2>
<ul>
<li>
<a href="#">Artikel 1</a>
</li>
<li>
<a href="#">Artikel 2</a>
</li>
<li>
<a href="#">Artikel 3</a>
</li>
</ul>
</aside>
</article>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Tag Aside Sebagai Iklan dan Konten
</title>
</head>
<body>
<article>
<h1>Review Produk X</h1>
<p>
Penjelasan mengenai produk X...
</p>
<aside>
<h2>Penawaran Khusus</h2>
<p>Dapatkan diskon khusus untuk produk X hari ini!</p>
<a href="#">
Lihat Penawaran
</a>
</aside>
</article>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Tag Aside Sebagai Ringkasan atau Catatan Tambahan
</title>
</head>
<body>
<article>
<h1>
Panduan Pemrograman Python
</h1>
<p>
Isi panduan pemrograman Python...
</p>
<aside>
<h2>Catatan Penting</h2>
<p>
Sebelum memulai, pastikan Anda memiliki versi Python terbaru.
</p>
</aside>
</article>
</article>
</body>
</html>
- Semantik yang Jelas: Penggunaan tag <aside> membantu dalam memberikan struktur yang lebih jelas pada halaman web, membedakan konten utama dari informasi tambahan yang mendukung.
- Aksesibilitas yang Lebih Baik: Dengan memisahkan konten tambahan menggunakan <aside>, pembaca layar dan pengguna yang bergantung pada aksesibilitas web dapat dengan mudah mengidentifikasi informasi yang bersifat pendukung.
- SEO dan Konteks Konten: Search engine juga dapat menggunakan tag <aside> untuk memahami konteks halaman web, memperjelas informasi yang berkaitan secara sekunder dengan konten utama.
- Penafsiran yang Fleksibel dan Tidak Konsisten: Salah satu kelemahan utama dari tag <aside> adalah interpretasi yang tidak selalu konsisten dalam penggunaannya. Meskipun secara teori tag ini dimaksudkan untuk konten pendukung, penggunaan praktisnya sering kali bervariasi. Beberapa pengembang menganggapnya sebagai area sidebar, sementara yang lain mungkin menggunakannya untuk menandai konten terkait di dalam artikel. Hal ini bisa menyebabkan kesulitan dalam konsistensi penandaan dan struktur halaman web.
- Potensi untuk Penyalahgunaan: Kemungkinan penyalahgunaan tag <aside> juga merupakan masalah yang perlu diperhatikan. Beberapa pengembang mungkin cenderung untuk memasukkan terlalu banyak konten ke dalam tag <aside>, terutama karena tag ini tidak memiliki batasan yang jelas dalam penggunaannya. Hal ini bisa mengakibatkan kebingungan antara konten utama dan informasi pendukung, mengurangi nilai dan fokus dari konten utama itu sendiri.
- Gangguan pada Aksesibilitas: Kekurangan tag <aside> juga terkait dengan aksesibilitas. Ketika penggunaan tag ini tidak sesuai dengan semantik yang tepat, hal ini dapat membingungkan pembaca layar atau pengguna yang bergantung pada teknologi bantuan lainnya. Kesalahan dalam penandaan tag <aside> bisa mengganggu pemahaman struktur konten pada halaman web, mengurangi aksesibilitas bagi sebagian pengguna.
- Kehilangan Fokus pada Konten Utama: Penggunaan yang berlebihan atau tidak tepat dari tag <aside> juga dapat mengakibatkan kehilangan fokus pada konten utama. Jika konten pendukung mendominasi atau mengganggu, hal ini dapat memengaruhi pengalaman pengguna, mengurangi kesan utama yang ingin disampaikan oleh halaman web.
- Perlunya Konsistensi dan Kepatuhan Terhadap Standar: Penting untuk diingat bahwa meskipun tag <aside> bisa memberikan fleksibilitas, penggunaannya sebaiknya tetap mematuhi standar HTML dan prinsip semantik. Konsistensi dalam penandaan dan penggunaan tag ini menjadi kunci untuk memastikan informasi terstruktur dengan baik dan mudah dipahami oleh semua pengguna.
5 komentar untuk "Tag Aside pada HTML5 dan Fungsinya"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Apa yang dimaksud dengan tag aside pada html?
BalasHapusElement HTML < aside > mewakili bagian dari dokumen yang isinya hanya berkaitan secara tidak langsung dengan konten utama dokumen. Tag asie umumnya sering ditampilkan sebagai bilah sidebar atau kota call-out.
HapusTag aside mendefinisikan beberapa konten selain dari konten pada posisi yang ditempatkan seharusnya. Konten samping atau sidebar sebcara tidak langsung berkaitan dengan konten yang ada disekitarnya. Konten aside juga sering ditempatkan sebagai sidebar dari dokumen.
HapusKapan tag aside digunakan pada halaman website?
BalasHapusElement dapat digunakan sebagai efek tipografi seperti kutipan sidebar, iklan, kelompok navigasi element, dan juga untuk konten lain yang dianggap terpisah dari konten utama pada halaman website.
Hapus