სემანტიკური HTML — ი

ზემოთ ნაჩვენებია ძირითადი ელემენტები რომელთა გამოყენებით შეგვიძლია კოდი სწორად და მარტივად დავაორგანიზოთ, მაგრამ ხშირია შეთხვევა როდესაც მათი იგნორირება ხდება და ძირითად ელემენტად <div> — ი არის გამოყენებული, თქვენ უნდა გახსოვდეთ რომ მას მნიშვნელობა არ გააჩნია და ის მხოლოდ მაშინ უნდა იქნას გამოყენებული როცა უკანასკნელი არჩევანია, მსგავსი ელემენტია ასევე <span>.

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

HTML Semantic Elements

მოდი დავწეროთ არასემანტიკური კოდი და შემდეგ ვცადოთ მისი გასწორება.

<div id="wrapper">
  <div id="header">
    <div>My Website</div>
  </div>
  <div id="content">
    <div id="main">
      <p>Welcome to my website!</p>
      <p>Here you will find all sorts of interesting things.</p>
    </div>
    <div id="sidebar">
      <h3>Recent Posts</h3>
      <a href="#">Post 2</a>
      <a href="#">Post 2</a>
      <a href="#">Post 2</a>
    </div>
  </div>
  <div id="footer">
    &copy; My Website 2023
  </div>
</div>

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

<header>
  <h1>My Website</h1>
</header>
<main>
  <section>
    <h2>Welcome to my website!</h2>
    <p>Here you will find all sorts of interesting things.</p>
  </section>
  <aside>
    <h2>Recent Posts</h2>
    <ul>
      <li><a href="#">Post 1</a></li>
      <li><a href="#">Post 2</a></li>
      <li><a href="#">Post 3</a></li>
    </ul>
  </aside>
</main>
<footer>
  &copy; My Website 2023
</footer>

ალბათ დამეთანხმებით რომ ამ პატარა მაგალითშიც კი კოდი უფრო გარჩევადი გახდა, კოდის ზრდასთან ერთად მისი სტრუქტურირება სულ უფრო და უფრო მნიშვნელოვანი გახდება, გარდა ამისა კოდის სემანტიკური სტრუქტურა მნიშვნელოვანია SEO ოპტიმიზაციისა და Web accesebility — ის კუთხითაც, ის სტრუქტურირიებული სახით არამარტო ჩვენთვის არამედ სხვა და სხვა პროგრამებისთვისაც ბევრად მარტივი გასარჩევი ხდება.

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

Semantic HTML

მადლობა წაკითხვისთვის და სიამოვნებით გიპასუხებთ კითხვებზე თუკი სურვილი გექნებათ ❤