Ինչու չենք կարող օգտագործել սովորական div տեգերը փոխարեն section և header տեգերի?

Սեմանտիկ տեգերի <section> և <header> օգտագործումը փոխարենը ընդհանուր <div>-ի, բարելավում է հասանելիությունը և կոդի ընթեռնելիությունը:

1. Հասանելիություն: Էկրանային ընթերցողները և այլ օգնական տեխնոլոգիաներ օգտագործում են սեմանտիկ տեգերը՝ բովանդակության կառուցվածքը հասկանալու համար: <header> նշում է նախաբանը (օր., լոգո, նավիգացիա), <section>՝ թեմատիկ բլոկ: <div> ինքնին չունի սեմանտիկ բեռ:

2. SEO (Որոնման համակարգերի օպտիմալացում): Որոնիչները ավելի լավ են ինդեքսավորում սեմանտիկ տեգերով կառուցված բովանդակությունը, ինչը կարող է բարելավել դասավորությունը:

3. Կոդի ընթեռնելիություն և սպասարկում: Սեմանտիկ տեգերը ինքնին փաստաթղթավորում է կառուցվածքը: Ծրագրավորողը, կարդալով կոդը, անմիջապես հասկանում է բլոկի նպատակը, առանց խորանալու ոճերի կամ մեկնաբանությունների մեջ:

Ամփոփում՝ <div>-ը հարմար է տարրերի խմբագրման համար, երբ սեմանտիկան կարևոր չէ (օր., ոճեր կիրառելու համար): <section> և <header> կրում են իմաստային բեռ և դարձնում են վեբ էջերը ավելի հասկանալի ինչպես մեքենաների, այնպես էլ մարդկանց համար:

Օրինակ՝

<!-- Սեմանտիկապես ճիշտ կառուցվածք -->
<header>
  <h1>Կայքի անունը</h1>
  <nav>
    <ul>
      <li><a href="#">Հղում</a></li>
    </ul>
  </nav>
</header>

<section>
  <h2>Բաժնի վերնագիր</h2>
  <p>Բաժնի բովանդակությունը...</p>
</section>

<!-- div օգտագործման օրինակ, որը չի փոխանցում սեմանտիկա -->
<div> <!-- header? բաժին? անհայտ -->
  <h1>Կայքի անունը</h1>
  <div> <!-- նավիգացիա? -->
    <ul>
      <li><a href="#">Հղում</a></li>
    </ul>
  </div>
</div>

<div> <!-- բաժին? -->
  <h2>Բաժնի վերնագիր</h2>
  <p>Բաժնի բովանդակությունը...</p>
</div>