რა არის სემანტიკური ელემენტები HTML-ში და რა მიზნით გამოიყენება ისინი?

HTML-ში სემანტიკური ელემენტები (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>) აღწერენ მათ გარშემო მყოფი შინაარსის სემანტიკურ მნიშვნელობას, არა მხოლოდ მისი გარეგნულ სახეს.

ძირითადი მიზანი:

• ხელმისაწვდომობა: ეხმარებიან დახმარების ტექნოლოგიებს (მაგალითად, ეკრანული სკანერები) განგებამახვილოს და გააზრონ გვერდის სტრუქტურა და შინაარსი, რაც ხელს უწყობს შეზღუდული შესაძლებლობების მქონე მომხმარებლებისთვის ხელმისაწვდომობის უზრუნველყოფას.
• 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>

სემანტიკური ელემენტების გამოყენება ხელს უწყობს უფრო სტრუქტურირებული, ხელმისაწვდომი და საძიებო სისტემებისთვის ოპტიმიზირებული ვებგვერდების შექმნას.