HTML <article>

<article> — mustaqil, o’zicha to’liq ma’noga ega kontent bo’lagini belgilaydigan semantik teg. Blog maqolasi, yangilik, forum posti yoki mahsulot kartochkasi — o’z-o’zidan tushunarli, boshqa sahifaga ko’chirsa ham ma’nosini yo’qotmaydigan kontent aynan shu tegga o’raladi.

<article> — mustaqil, qayta ishlatsa bo’ladigan kontent bo’lagini ifodalaydigan semantik teg. U o’zicha to’liq bir butun bo’lishi kerak.

Oddiy foydalanish

<article> mustaqil kontentni o’z ichiga oladi:

<article>
    <h2>HTML nima?</h2>
    <p>HTML veb-sahifalar tuzilishini belgilaydigan tildir.</p>
    <p>Muallif: Master Sherkulov</p>
</article>

HTML nima?
HTML veb-sahifalar tuzilishini belgilaydigan tildir.
Muallif: Master Sherkulov

Ichidagi kontent — sarlavha va matn — bir butun maqolani tashkil qiladi. Bu maqolani boshqa sahifaga ko’chirsangiz ham, u mazmunini saqlaydi.

Bir necha article

Bitta sahifada ko’p mustaqil bo’lak bo’lsa, har biri alohida <article> ga o’raladi:

<article>
    <h2>Birinchi maqola</h2>
    <p>UzbekDevs haqida.</p>
</article>
<article>
    <h2>Ikkinchi maqola</h2>
    <p>Dasturlash haqida.</p>
</article>

Birinchi maqola
UzbekDevs haqida.
Ikkinchi maqola
Dasturlash haqida.

Blog yoki yangiliklar sahifasida har bir yozuv o’z <article> ida bo’ladi. Bu tuzilma qidiruv tizimlariga har bir maqolani alohida birlik sifatida tushunish imkonini beradi.

article va div farqi

Ko’pchilik <article> va oddiy <div> ni chalkashtiradi. Farqni jadvalda ko’ramiz:

<article> mazmunga ega, <div> esa neytral. To’g’ri semantik tegni tanlash kodni mazmunli qiladi.

Qayerda ishlatiladi?

<article> blog postlari, yangiliklar, sharhlar, forum yozuvlari va mahsulot kartochkalarida ishlatiladi. Asosiy mezon: agar kontent bo’lagini olib, boshqa joyga qo’yganda ham u o’zicha tushunarli bo’lsa — bu <article>. Aks holda <section> yoki <div> mos keladi.

Xulosa

Bu bo’limda <article> semantik tegini, mustaqil kontent tushunchasini, bir necha <article> ishlatishni va uning <div> dan farqini ko’rib chiqdik. <article> — o’zicha to’liq kontent uchun to’g’ri tanlov. Keyingi darsda <aside> tegiga o’tamiz.