რა არის სემანტიკა ვებ-განვითარების კონტექსტში?

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

სემანტიკური მარკირების ძირითადი უპირატესობები:

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

HTML5-ში სემანტიკური ტეგების მაგალითები:

• <header>: წარმოადგენს შესავალს ან ნავიგაციას მთელი დოკუმენტის ან გარკვეული სექციისთვის.
• <nav>: წარმოადგენს ბმულების ჯგუფს ნავიგაციისთვის.
• <main>: წარმოადგენს დოკუმენტის ძირითად შინაარსს.
• <article>: წარმოადგენს დასრულებულ, დამოუკიდებელ შინაარსის ფრაგმენტს, რომელიც შეიძლება იყოს დამოუკიდებლად გავრცელებული (მაგალითად, ბლოგის ჩანაწერი, სიახლე).
• <section>: წარმოადგენს დამოუკიდებელ სექციას დოკუმტში.
• <aside>: წარმოადგენს შინაარსს, რომელიც ირიბად არის დაკავშირებული ძირითადი შინაარსთან (მაგალითად, გვერდითი პანელი).
• <footer>: წარმოადგენს დოკუმენტის ან გარკვეული სექციის ქვედა ნაწილს.
• <figure> და <figcaption>: წარმოადგენს მედია ელემენტს (სურათი, დიაგრამა და ა.შ.) და მის აღწერას.
• <time>: წარმოადგენს თარიღსა და დროს.

სემანტიკური და არასემანტიკური მიდგომების შედარება:

არასემანტიკური მიდგომა	სემანტიკური მიდგომა
გამოყენება <div> და <span> ყველაფრისთვის	გამოყენება სპეციფიკური ტეგების (<header>, <nav>, <article>)
სტრუქტურის აღწერა კლასებით (class="header")	ტეგების გამოყენება, რომლებიც ბუნებრივად აღწერენ სტრუქტურას
დამოკიდებულება CSS-ზე სტრუქტურის გაგებისთვის	სტრუქტურა გასაგებია HTML კოდიდან

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

<!-- non-semantic.html -->
<div class="header">
  <div class="logo"></div>
  <div class="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</div>
<div class="content">
  <div class="article">
    <h2>Title</h2>
    <p>Content...</p>
  </div>
</div>
<div class="footer">
  <p>&copy; 2023</p>
</div>

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

<!-- semantic.html -->
<header>
  <img src="logo.png" alt="Logo">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Title</h2>
    <p>Content...</p>
  </article>
</main>
<footer>
  <p>&copy; 2023</p>
</footer>

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