Tanda <aside> HTML

Definisi dan Penggunaan

<aside> Tag mendefinisikan konten yang berada di luar konten yang ada didalamnya.

Konten aside harus berhubungan dengan konten sekelilingnya secara langsung.

Petunjuk:<aside> Konten biasanya ditempatkan di samping dokumen.

Perhatian:<aside> Elemen ini tidak akan ditampilkan dengan gaya khusus di browser. Namun, Anda dapat mengatur <aside> Gaya elemen (lihat contoh di bawah).

Lihat pula:

Panduan Referensi DOM HTML:Objek Aside

Contoh

Contoh 1

Tampilkan konten yang berbeda dari konten yang berada di depannya:

<p>Di musim panas ini, saya dan keluarga saya mengunjungi Taman Ocean Shanghai Haichang. Cuaca sangat bagus, taman laut sangat imajinatif! Saya dan keluarga saya menghabiskan musim panas yang bagus!</p>
<aside>
<h4>Parque Oceanário Shanghai Haichang</h4>
<p>Taman Laut Shanghai Haichang adalah taman tematis yang terletak di Daerah Pudong, yang mengelilingi karakter budaya laut, dengan luas total sekitar 29.7 hektar, dan juga tempat wisata wisata nasional tingkat AAAA.</p>
</aside>

Coba Sendiri

Contoh 2

Atur gaya elemen <aside> menggunakan CSS:

<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>
<h1>element aside</h1>
<p>Di musim panas ini, saya dan keluarga saya mengunjungi Taman Ocean Shanghai Haichang. Cuaca sangat bagus, taman laut sangat imajinatif! Saya dan keluarga saya menghabiskan musim panas yang bagus!</p>
<aside>
<p>Taman Laut Shanghai Haichang adalah taman tematis yang terletak di Daerah Pudong, yang mengelilingi karakter budaya laut, dengan luas total sekitar 29.7 hektar, dan juga tempat wisata wisata nasional tingkat AAAA.</p>
</aside>
<p>Di musim panas ini, saya dan keluarga saya mengunjungi Taman Ocean Shanghai Haichang. Cuaca sangat bagus, taman laut sangat imajinatif! Saya dan keluarga saya menghabiskan musim panas yang bagus!</p>
<p>Di musim panas ini, saya dan keluarga saya mengunjungi Taman Ocean Shanghai Haichang. Cuaca sangat bagus, taman laut sangat imajinatif! Saya dan keluarga saya menghabiskan musim panas yang bagus!</p>
</body>
</html>

Coba Sendiri

Atribut Global

<aside> Tanda juga mendukung Atribut Global di HTML.

Atribut Acara

<aside> Tanda juga mendukung Atribut Acara di HTML.

Pengaturan CSS Standar

Sebagian besar browser akan menampilkan nilai standar berikut <aside> Elemen:

aside {
  display: block;
}

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung elemen ini.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1