Some text some message..
Some text some message..
Some text some message..
Some text some message..

Elemen Aside Pada HTML

previous Previous Page

Elemen <aside> merupakan elemen tambahan yang digunakan sebagai konten pelengkap bagi artikel utama pada halaman HTML. Sesuai dengan namanya Elemen <aside> ini artinya sisi samping atau sebelah, maka elemen ini biasanya ditempatkan pada sisi lain halaman HTML seperti seperti sisi kanan atau sisi bawah dari konten utama. Elemen <aside> masih berhubungan dengan konten utama yang dapat berisi catatan pelengkap, hyperlink, peringatan, dan lainnya.

Kita bisa meletakkan beberapa konten pada elemen aside ini sekaligus. Misalnya konten tag, kategori, artikel terbaru dan lain-lain. Elemen <aside> ini bisa juga disebut sebagai sidebar karena letaknya beada di sisi kanan atau kiri halaman HTML.

Jika dibandingkan dengan elemen <div>, keduanya memiliki sifat dan karakteristik yang sama. Keduanya ditampilkan dalam bentuk display block dan dapat menampung elemen HTML lain di dalamnya. Namun elemen <aside> adalah tags baru pada HTML5 yang peruntukannya sebagai elemen tambahan di dalam halaman web sebagai pendukung konten utama / seksi yang lainnya. Penambahan elemen baru pada HTML5 dimaksudkan agar mempermudah dalam mengindex data di halaman HTML. Dengan adanya elemen <aside>, akan mempermudah program lainnya seperti mesin pencari dalam mengidentifikasi data yang berada di halaman tersebut karena lebih terstruktur.

Agar lebih jelas, berikut ini contoh layout sederhana di mana elemen <aside> berada :

layout aside html

Penulisan elemen <aside> diawali dengan tags pembuka <aside> dan diakhiri dengan tag penutup </aside>. Berikut ini contoh penggunaan elemen <aside> pada halaman HTML :

Kode Script :

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <title>Latihan membuat elemen aside HTML</title>
5.     <style>
6.      .judul{font-weight:bold;font-size:24px;}
7.      article{
8.      width:65%;
9.      height:330px;
10.     float:left;
11.     background:#DEB887;
12.     padding:10px;
13.     border:1px solid #FAEBD7;
14.     }
15.     aside{
16.     width:25%;
17.     height:330px;
18.     float:left;
19.     background:#FF7F50;
20.     padding:10px;
21.     }
22.     a{
23.     display:block;
24.     }
25.    </style>
26. </head>
27. <body>
28.    <div class="container">
29.     <article>
30.     <p class='judul'>Wisata di Marina</p>
31.     <p>
32.     Pada Hari minggu yang lalu, Kami memutuskan pergi ke tempat wisata Marina. Suasananya tenang dengan angin pantai berhembus menyejukkan hati. Deburan ombak yang riuh menyambut kedatangan kami.
33.     </p>
34.       <p>
35.     Kami semua bergembira mengisi hari libur ini. Tak terasa matahari sudah condong ke barat. Dan tiba saatnya kami meninggalkan pantai itu...
36.     </p>
37.     </article>
38.     <aside>
39.     <h2>Kategori</h2>
40.     <p>
41.     <a href="?">Olahraga</a>
42.     <a href="?">Berita Hangat</a>
43.     <a href="?">Sains</a>
44.     <a href="?">Lain-lain</a>
45.     </p>
46.       <h2>Tags</h2>
47.     <p>
48.     <a href="?">Budaya</a>
49.     <a href="?">Seni</a>
50.     <a href="?">Tekhnologi</a>
51.     <a href="?">Lain-lain</a>
52.     </p>
53.     </aside>
54.    </div>
55. </body>
56. </html>
57. 

Jika kode tersebut dijalankan maka hasilnya sebagai berikut :

aside tag html

Browser Pendukung :

Elemencromeinternet explorerfirefoxsafariopera
<aside>yayayayaya

Global Attributes :

Tag <aside> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML

Event Attributes :

Tag <aside> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.

Pengaturan Default CSS :

Nilai default pengaturan gaya untuk elemen <aside> pada HTML:

aside{
display : block;
}

facebooktwittergoogle pluswhatapplinkedinpinterest

previous Previous Page

Daftar Isi HTML