სემანტიკური ელემენტი არის HTML-ის ისეთი ელემენტი, რომელიც ასახავს მის შინაარსობრივ მნიშვნელობას და არა მხოლოდ ვიზუალურ სტრუქტურას.

რაში გვჭირდება სემანტიკური ელემენტები?

მომხარებლისთვის არანაირი მნიშვნელობა არ აქვს, თუ როგორი ელემენტებით ავაწყობთ ვებგვერდს, რადგან თუ ელემენტები სწორად გავსტილეთ, ვიზუალურად ყველაფერი რიგზე იქნება, მაგრამ მომხარებლის გარდა ვებგვერდს სტუმრობს crawler-ები (ბოტი / პროგრამა, რომელიც ვებგვერდიდან წამოიღებს სხვადასხვა ინფორმაციებს) და დეველოპერები. ბოტმა უნდა მოიპოვოს ვებგვერდიდან სხვადასხვა კონტენტი, რომ შემდეგ სწორად მოახერხოს ვებგვერდის ინდექსაცია.

ინდექსაცია ეს არის პროცესი, როცა ბოტი აფასებს ჩვენ ვებგვერდს კონტენტიდან გამომდინარე. ეს შეფასება შემდეგ აისახება საძიებო სისტემებზე, იგივე SE-ზე (Search Engine). შესაბამისად, სემანტიკურად გამართული მარკაპს ბოტები უფრო ეფექტურად ამუშავებენ და ძიების შედეგებშიც ჩვენი ვებსაიტი უკეთ ჩნდება.

სემანტიკური თეგები ასევე გვეხმარება Accessibility-ის (a11y) გაუმჯობესებაში. a11y გულისხმობს ისეთი ვებგვერდის შექმნას, რომელიც ყველასათვის მარტივი და ხელმისაწვდომია, მათ შორის შეზღუდული შესაძლებლობების მქონე პირებისთვის. ბრაუზერში შეგვიძლია დავაინსტალიროთ სხვადასხვა აპლიკაცია ან ექსტენშენი, რომელიც ეხმარება მომხარებელს ვებგვერდის აღქმასა და გამოყენებაში, მაგალითად:

• ეკრანის წამკითხველი (screen reader).
• ფერების კონტრასტის შემცვლელი.
• კლავიატურით ნავიგაცია.
• და სხვა.

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

გარდა ამისა, სემანტიკურად გამართულ კოდზე მუშაობაც უფრო მარტივია.

რომელია სემანტიკური ელემენტი?

მაგალითად, სემანტიკური ელემენტებია:

• <p> პარაგრაფი, რომელიც გამოხატავს ტექსტის ნაწილს.
• <h1> - <h6> სათაური, რომელიც აჩვენებს ტექსტის მნიშვნელობას.
• <table> ცხრილი, რომელიც განსაზღვრავს სტრუქტურირებულ მონაცემებს.
• <ul> - დაუნომრავი (unordered) სია, რომელიც განსაზღვრავს ელემენტთა ჯგუფს.
• <ol> - დანომრილი (ordered) სია, სადაც ელემენტებს აქვს კონკრეტული თანმიმდევრობა.
• <a> - ბმული, რომელიც აერთიანებს ვებსაიტების სხვადასხვა ნაწილებს.
• <img> - გამოსახულება (სურათი, გიფ და სხვა).

მაგალითად არასემანტიკური ელემენტები:

• <span> ტექსტური ინლაინ კონტეინერი, რომელსაც არ აქვს კონკრეტული შინაარსობრივი მნიშვნელობა (ასევე i, b და მსგავსი თეგები).
• <hr> ჰორიზონტალური ხაზი, რომელიც მხოლოდ ვიზუალურად გამოიყენება.
• <br> ხაზის გადასატანად (break line).

სტრუქტურული სემანტიკური ელემენტები

უკეთესი წარმოდგენა რომ შევიქმნათ, განვიხილოთ შემდეგი მაგალითები:

header

<header> - განსაზღვრავს გვერდის ან სექციის სათავეს.

<header>
  <a href="https://iswavle.com">Iswavle</a>
  <ul>
    <li>
      <a href="./index.html">მთავარი</a>
    </li>
    <li>
      <a href="./playground.html">ედიტორი</a>
    </li>
    <li>
      <a href="./doc.html">გზამკლევი</a>
    </li>
  </ul>
</header>

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

nav

<nav> - განსაზღვრავს ნავიგაციის მენიუს.

<header>
  <a href="https://iswavle.com">Iswavle</a>
  <nav>
    <ul>
      <li>
        <a href="./index.html">მთავარი</a>
      </li>
      <li>
        <a href="./playground.html">ედიტორი</a>
      </li>
      <li>
        <a href="./doc.html">გზამკლევი</a>
      </li>
    </ul>
  </nav>
</header>

რადგან ჩვენ მკაფიოდ განვსაზღვრეთ სათავის ამ ნაწილის დანიშნულება, მას არამხოლოდ მომხარებელი გაიგებს არამედ ბრაუზერი, a11y პროგრამრები და ბოტები!

main

main - განსაზღვრავს ვებგვედის მთავარ კონტენტს.

<header>
  <!-- ჰედერის კოდი ... -->
</header>
<main>
  <h1>ისწავლე</h1>
  <h2>Web ტექნოლოგიები დამოუკიდებლად</h2>
  <p>ვებგვერდის სტრუქტურა და სტილიზაცია</p>
</main>

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

section

section - განსაზღვრავს გვერდის ცალკეულ სექციას.

<main>
  <section class="banner">
    <h1>ისწავლე</h1>
    <h2>Web ტექნოლოგიები დამოუკიდებლად</h2>
  </section>
  <section class="showcase">
    <p>ვებგვერდის სტრუქტურა და სტილიზაცია</p>
  </section>
</main>

ერთგვერდზე ცალკეული სექციები შეიძლება იყოს:

• ბანერი
• საჩვენებელი ნაწილი
• საკონტაქტო ინფორმაცია
• ფორმა
• და სხვა

aside

aside - განსაზღვრავს გვერდითა ინფორმაციას.

<main>
  <aside>
    <nav>
      <ul>
        <li>
          <a href="./index.html">მთავარი</a>
        </li>
        <li>
          <a href="./playground.html">ედიტორი</a>
        </li>
        <li>
          <a href="./doc.html">გზამკლევი</a>
        </li>
      </ul>
    </nav>
  </aside>
  <section class="banner">
    <h1>ისწავლე</h1>
    <h2>Web ტექნოლოგიები დამოუკიდებლად</h2>
  </section>
</main>

ასე, შინაარსობრივად, მივიღეთ მარცხენა მხარეს ნავიგაცის მენიუ და მარჯვენა მხარეს მთავარი კონტენტი.

article

article - განსაზღვრავს სტატიის კონტეინერს.

<main>
  <!-- წინა მაგალითის კოდი -->
  </aside>
  <section class="banner">
    <h1>ისწავლე</h1>
    <h2>Web ტექნოლოგიები დამოუკიდებლად</h2>
  </section>
  <article>
    <h3>HTML & CSS</h3>
    <h4>ვებგვერდის სტრუქტურა და სტილიზაცია</h4>
    <img src="/assets/images/html-css.png" alt="HTML & CSS ლოგო" />
    <p>...</p>
  </article>
</main>

ამ თეგებშია მოქცეული ის ტექსტი, რომელსაც ახლა კითხულობთ!

footer

footer - განსაზღვრავს გვერდის ან სექციის სქოლიო ნაწილს.

<main>
  <!-- ... წინა მაგალითის კოდი -->
  </article>
  <footer>
    © 2025 Educata
  </footer>
</main>

div

div - არის არასემანტიკური კონტეინერი, რომელიც ხშირად გამოიყენება სხვადასხვა კონტენტის შესაკრავად.

<div>
  <h3>HTML & CSS</h3>
  <h4>ვებგვერდის სტრუქტურა და სტილიზაცია</h4>
</div>

div ძირითადად გამოიყენება ვიზუალური ბლოკების გამოსაყოფად და სტილების მისანიჭებლად.

ტექსტური სემანტიკური ელემენტები

  (pre)
  h1 {
    color: #1890ff;
  }

რატომ არის strong ან em სემანტიკური ელემენტი და b ან i არა?

• <strong> გამოიყენება მნიშვნელოვანი ტექსტის აღსანიშნად, რაც ეკრანის მკითხველს აძლევს საშუალებას, ტექსტი უფრო მკაფიოდ და ხაზგასმით წაიკითხოს.
• <em> ნიშნავს აქცენტს, რაც ჩვეულებრივ ხმოვანი ინტონაციით გამოიხატება, თუ ეკრანის ამკითხველს ვიყენებთ.
• <b> (Bold) – უბრალოდ მუქად აჩენს ტექსტს, შინაარსობრივი მნიშვნელობის გარეშე.
• <i> (Italic) – ტექსტს დახრილ ფორმატში აჩვენებს, თუმცა არა სემანტიკური მიზეზით, არამედ მხოლოდ ვიზუალური ეფექტისთვის.

რადგან strong და em-ს ვიზუალური დანიშნულების გარდა გააჩნიათ ფუნქციონალური გამოყენება, ამის გამო არიან სემანტიკური ელემენტები.

სხვა სემანტიკური ელემენტები

კიდევ ბევრი სემანტიკური ელემენტი არსებობს, რომლებსაც სხვადასხვა სტატიებში განვიხილავთ:

• მედია ელემენტები
• ფორმის ელემენტები

შეჯამება

ამ სტატიაში განვიხილეთ სემანტიკური ელემენტების არსი, სემანტიკური ელემენტები და მათი გამოყენება.