როდის უნდა გამოიყენოს HTML-ის მარკაფტში <div> და <span> ტეგები?

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

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

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

div-ის გამოყენების მაგალითი:

<!-- საიტის სათაურის სექციის ჯგუფირება -->
<div class="header">
  <h1>ლოგო</h1>
  <nav>
    <ul>
      <li>ლინკი 1</li>
      <li>ლინკი 2</li>
    </ul>
  </nav>
</div>

<!-- ძირითადი შიგთავსის ჯგუფირება -->
<div class="main-content">
  <article>
    <h2>სტატიის სათაური</h2>
    <p>სტატიის შიგთავსი...</p>
  </article>
</div>

span-ის გამოყენების მაგალითი:

<p>ეს ჩვეულებრივი ტექსტია და მასში <span class="highlight">გამოკვეთილი</span> სიტყვა არსებობს.</p>

<style>
  .highlight {
    color: blue; /* სტილის გამოყენება მხოლოდ სიტყვაზე "გამოკვეთილი" */
    font-weight: bold;
  }
</style>

ამ ტეგებს უნდა გამოიყენოს შესაბამისი სემანტიკური კლასი ან იდენტიფიკატორი, კოდის უკეთ წაკითხვადობის და შენარჩუნების მიზნით, ასევე სტილიზაციის და DOM-ის მენიპულაციისთვის. მნიშვნელოვანია, თავიდან აიცილოთ div და span-ის გადამეტებული გამოყენება, სადაც უფრო სემანტიკური HTML5 ტეგები, როგორიცაა header, footer, article, nav, section უფრო შესაბამისია.