HTML <aside>

<aside> — asosiy kontent bilan bilvosita bog’liq, yordamchi ma’lumotni belgilaydigan semantik teg. Yon panel, reklama, tegishli havolalar ro’yxati yoki qo’shimcha izohlar aynan shu tegga o’raladi. U asosiy matndan ajratilgan, “chetdagi” ma’lumotni bildiradi.

<aside> — asosiy kontentga qo’shimcha, yordamchi ma’lumotni ifodalaydigan semantik teg. Odatda yon panel (sidebar) sifatida ishlatiladi.

Oddiy foydalanish

<aside> yordamchi ma’lumotni o’z ichiga oladi:

<article>
    <h2>HTML darsligi</h2>
    <p>Bu asosiy maqola matni.</p>
</article>
<aside>
    <h3>Tegishli havolalar</h3>
    <p>CSS darsligi</p>
    <p>JavaScript darsligi</p>
</aside>

HTML darsligi
Bu asosiy maqola matni.
Tegishli havolalar
CSS darsligi
JavaScript darsligi

<aside> ichidagi “Tegishli havolalar” — asosiy maqolaga qo’shimcha, ammo undan mustaqil. Odatda u sahifaning yon tomonida joylashadi.

Qayerda ishlatiladi?

<aside> turli maqsadlarda ishlatiladi. Eng ko’p uchraydigan holatlarni jadvalda ko’ramiz:

Maqola ichida aside

<aside> maqola ichida ham ishlatilishi mumkin — bunda u aynan shu maqolaga tegishli qo’shimcha izohni bildiradi:

<article>
    <p>UzbekDevs — dasturlashni o'rgatuvchi platforma.</p>
    <aside>
        <p>Eslatma: platforma bepul darsliklarni taqdim etadi.</p>
    </aside>
</article>

UzbekDevs — dasturlashni o'rgatuvchi platforma.
Eslatma: platforma bepul darsliklarni taqdim etadi.

Bu yerda <aside> maqolaga qo’shimcha izoh berdi. Uni matndan olib tashlasangiz ham, asosiy ma’no saqlanadi — bu <aside> ning mohiyati.

Semantik ahamiyat

<aside> — semantik teg. Uni oddiy <div> o’rniga ishlatish qidiruv tizimlariga va ekran o’quvchilarga “bu — yordamchi, ikkinchi darajali ma’lumot” degan signalni beradi. Bu esa sahifani kirish uchun qulayroq va SEO uchun yaxshiroq qiladi. Muhim: <aside> ga asosiy kontentni joylamang — u faqat qo’shimcha ma’lumot uchun.

Xulosa

Bu bo’limda <aside> semantik tegini, uni yon panel va qo’shimcha izoh sifatida ishlatishni, uning maqola ichida qo’llanishini va semantik ahamiyatini ko’rib chiqdik. <aside> — yordamchi ma’lumot uchun to’g’ri teg. Keyingi darsda <audio> tegiga o’tamiz.