HTML aside tag

HTML Elemen <aside> adalah tag yang digunakan untuk membuat konten bilah sisi biasanya sering di temukan dalam dokumen terletak pada bilah sisi kanan atau kiri konten, tag aside tidak memiliki atribut khusus dan secara default akan berfungsi seperti tag div. tag aside biasanya berisi informasi tautan, penulis, dan konten terkait.

1. html tag <aside> dafault

tanpa style css elemen aside tidak menampilkan visual yang menonjol akan terlihat text seperti biasa

<!DOCTYPE html>
<html>
<head>
<style>
body {font-family:monospace;}
</style>
</head>
<body>

<h1>Contoh: HTML Elemen aside</h1><hr>

<p>Bandung merupakan kota tujuan wisata yang sangat diminati wisatawan dalam dan luar negeri. Ada banyak destinasi wisata alam yang begitu menarik untuk dikunjungi.</p>
<p>Berbagai wisatanya tentu mempunyai spot-spot Instagramable berlatarkan keindahan alam. Tak heran jika wisatawan ingin berulang kali mengunjungi kota kembang ini.</p>

<aside>
<h3>Wisata Alam Populer di Bandung</h3>
<p>Pemandangan alam yang indah memang cocok untuk healing sejenak dari berbagai aktivitas. Yuk, intip ada wisata alam apa saja di Bandung.</p>
</aside>

<p>Taman Hutan Raya Ir. H. Djuanda sering disebut dengan Tahura. Destinasi alam ini merupakan paru-paru kota Bandung yang memiliki lebih dari 2.500 jenis pohon. Menurut buku Taman Hutan Raya Djuanda oleh Pusat Data dan Analisa Tempo serta situs resmi Tahura Bandung, wisatawan bisa menikmati panorama alamnya yang memukau. Selain itu, ada beberapa objek wisata seperti Gua Jepang, Gua Belanda, Penangkaran Rusa, Curug Omas Maribaya dan Museum Ir H. Djuanda.</p>

</body>
</html>

Cicagak Berbagi

2. html tag <aside> dengan gaya css kanan

dengan style css elemen aside akan terlihat nampak lebih jelas bilah sisi yang cenderung menonjol berbeda - float:right; nampak di sebelah kanan konten

<!DOCTYPE html>
<html>
<head>
<style>
body {font-family:monospace;}
aside {
  background-color: #ffe;
  border-radius:2px;
  box-shadow:0 0 2px #000;
  float: right;
  margin-left: 15px;
  padding-left: 15px;
  width: 35%;}
</style>
</head>
<body>

<h1>Contoh: HTML Elemen aside - Dengan Gaya CSS Samping Kanan </h1><hr>

<p>Bandung merupakan kota tujuan wisata yang sangat diminati wisatawan dalam dan luar negeri. Ada banyak destinasi wisata alam yang begitu menarik untuk dikunjungi.</p>
<p>Berbagai wisatanya tentu mempunyai spot-spot Instagramable berlatarkan keindahan alam. Tak heran jika wisatawan ingin berulang kali mengunjungi kota kembang ini.</p>

<aside>
<h3>Wisata Alam Populer di Bandung</h3>
<p>Pemandangan alam yang indah memang cocok untuk healing sejenak dari berbagai aktivitas. Yuk, intip ada wisata alam apa saja di Bandung.</p>
</aside>

<p>Taman Hutan Raya Ir. H. Djuanda sering disebut dengan Tahura. Destinasi alam ini merupakan paru-paru kota Bandung yang memiliki lebih dari 2.500 jenis pohon. Menurut buku Taman Hutan Raya Djuanda oleh Pusat Data dan Analisa Tempo serta situs resmi Tahura Bandung, wisatawan bisa menikmati panorama alamnya yang memukau. Selain itu, ada beberapa objek wisata seperti Gua Jepang, Gua Belanda, Penangkaran Rusa, Curug Omas Maribaya dan Museum Ir H. Djuanda.</p>
<p>Tebing Keraton menyuguhkan view yang menakjubkan dari atas tebing. Wisatawan bisa melihat keindahan hutan yang lebat dan hijau. Selain itu, pemandangan sunrise dan sunsetnya pun tak kalah indah. Wisatawan bisa menginap di area camping ground yang cukup luas. Selain itu, aktivitas seru lainnya adalah trekking menuju puncak tebing.</p>

</body>
</html>

Cicagak Berbagi

3. html tag <aside> dengan gaya css kiri

dengan style css elemen aside mengatur nilai css - float:left , margin-left: , margin-right: , aside:hover; nampak di sebelah kiri konten berbeda dengan sebelumya jika kursor diarahkan pada konten.

<!DOCTYPE html>
<html>
<head>
<style>
body {font-family:monospace;}
aside {
  background-color: #fff;
  border-radius:2px;
  box-shadow:0 0 2px #000;
  float: left;
  margin-right: 15px;
  padding-left: 15px;
  padding-right: 15px;
  width: 35%;}
aside:hover {background:#ffe; box-shadow:0 0 4px #000;}
</style>
</head>
<body>

<h1>Contoh: HTML Elemen aside - Dengan Gaya CSS Samping Kiri </h1><hr>

<p>Bandung merupakan kota tujuan wisata yang sangat diminati wisatawan dalam dan luar negeri. Ada banyak destinasi wisata alam yang begitu menarik untuk dikunjungi.</p>
<p>Berbagai wisatanya tentu mempunyai spot-spot Instagramable berlatarkan keindahan alam. Tak heran jika wisatawan ingin berulang kali mengunjungi kota kembang ini.</p>

<aside>
<h3>Wisata Alam Populer di Bandung</h3>
<p>Pemandangan alam yang indah memang cocok untuk healing sejenak dari berbagai aktivitas. Yuk, intip ada wisata alam apa saja di Bandung.</p>
</aside>

<p>Taman Hutan Raya Ir. H. Djuanda sering disebut dengan Tahura. Destinasi alam ini merupakan paru-paru kota Bandung yang memiliki lebih dari 2.500 jenis pohon. Menurut buku Taman Hutan Raya Djuanda oleh Pusat Data dan Analisa Tempo serta situs resmi Tahura Bandung, wisatawan bisa menikmati panorama alamnya yang memukau. Selain itu, ada beberapa objek wisata seperti Gua Jepang, Gua Belanda, Penangkaran Rusa, Curug Omas Maribaya dan Museum Ir H. Djuanda.</p>
<p>Tebing Keraton menyuguhkan view yang menakjubkan dari atas tebing. Wisatawan bisa melihat keindahan hutan yang lebat dan hijau. Selain itu, pemandangan sunrise dan sunsetnya pun tak kalah indah. Wisatawan bisa menginap di area camping ground yang cukup luas. Selain itu, aktivitas seru lainnya adalah trekking menuju puncak tebing.</p>

</body>
</html>

Cicagak Berbagi