HTMLдеги семантикалык элементтер эмне жана алар эмне…

HTMLдеги семантикалык элементтер (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>) алардын камтыган мазмунунун семантик маанисин сүрөттөйт, гана анын көрүнүшүн эмес.

Негизги максат:

Жеткиликтүүлүк (Accessibility): Көмөкчү технологияларга (мисалы, экран окууучу) баракчанын түзүлүшүн жана мазмунун түшүнүүгө жардам берет, ошондуктан мазмун чектөөлөрү бар колдонуучулар үчүн жеткиликтүү болот.
SEO (Издөө системаларына оптималдаштыруу): Семантик белгилөө менен баракчалар жакшыраак индекстелип жана рейтингтелет, анткени алар негизги мазмунду жана анын суроолорго тиешелүүлүгүн так аныктай алат.
Өнүктүрүү жана тейлөө: Коддун окумдуулугун жана тейлөө жөндөмдүүлүгүн жакшыртат, баракчанын түзүлүшүн башка иштеп чыгуучулар үчүн (жана өзүңүз үчүн келечекте) түшүнүктүү кылат.
Түзүмдү жакшыраак түшүнүү: Баракчанын логикалык блокторун (навигация, негизги мазмун, аягына чыгуу жана башка) так бөлүүгө мүмкүндүк берет.

Мисал эмес семантикалык белгилөө:

<div>
  <h2>Мақаланын аталышы</h2>
  <p>Мақаланын мазмуны...</p>
</div>
<div>
  <h3>Жан багыт</h3>
  <p>Жан багыт тууралуу маалымат...</p>
</div>

Мисал семантикалык белгилөө:

<article>
  <h2>Мақаланын аталышы</h2>
  <p>Мақаланын мазмуны...</p>
</article>
<aside>
  <h3>Жан багыт</h3>
  <p>Жан багыт тууралуу маалымат...</p>
</aside>

Семантикалык элементтерди колдонуу веб-страницаларды көбүрөөк түзүлүштүү, жеткиликтүү жана издөө системаларына оптималдаштырган кылууга жардам берет.

HTMLдеги семантикалык элементтер эмне жана алар эмне үчүн керек?