Sahifadagi kontentni semantik tarzda qanday ajratish mumkin?

Kontentning semantik bo‘linishini tegishli HTML5-teglar yordamida amalga oshirish mumkin.

Asosiy semantik teglar:

• <header>: Kirish yoki navigatsiya yoki kirish elementlari guruhlari. Ko‘pincha sayt sarlavhasi, navigatsiya, logotipni o‘z ichiga oladi.
• <nav>: Navigatsiya linklari bloki.
• <main>: Hujjatning asosiy mazmuni. Sahifada yagona bo‘lishi kerak (futerdagi, sarlavha, yon panelda takrorlanmasligi kerak).
• <article>: O‘z-o‘zidan yetarli, mustaqil mazmun bo‘lagi (maqola, blog posti, izoh).
• <section>: Hujjatdan ajratilgan bo‘lim (bo‘lim, paragraf, bosh sahifadagi mazmun bloki). Sarlavha (<h1>-<h6>) bo‘lishi kerak.
• <aside>: Asosiy mazmunga bilvosita bog‘liq bo‘lim (yon panel, iqtibos bilan kiritma, reklama).
• <footer>: Bo‘lim yoki hujjatning pastki qismi. Odatda muallif haqida ma’lumot, mualliflik huquqi, bog‘liq hujjatlarga havolalar bo‘ladi.
• <figure>: Mustaqil mazmun (rasm, diagramma, jadval), hujjatning asosiy oqimidan olib tashlanmasdan ko‘chirilishi mumkin. Ko‘pincha <figcaption> bilan ishlatiladi.
• <figcaption>: <figure> elementiga yozuv.
• <mark>: Matnni ajratib ko‘rsatadi (belgilaydi), atrofdagi matn kontekstida muhim yoki qiziqarli bo‘lgan matn.
• <time>: Aniq vaqt yoki vaqt oralig‘ini ifodalaydi.

Semantik teglar foydalanilishi kirish imkoniyatini yaxshilaydi, SEO va kodni saqlashni osonlashtiradi. Qidiruv tizimlari va yordamchi texnologiyalar (ekran o‘quvchilar) sahifa tuzilishini yaxshiroq tushunadi.