Ինչ են 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>

Սեմանտիկ տարրերի օգտագործումը նպաստում է ավելի կառուցվածքային, հասանելի և որոնողական համակարգերի համար օպտիմալացված վեբ էջեր ստեղծելուն։