main და section

რას ისწავლი

• რა არის <main> და რატომ არის ის გვერდზე მხოლოდ ერთი
• როდის გამოიყენო <section> და რატომ სჭირდება მას სათაური
• როგორ გამოიყურება ტიპური გვერდის სრული ჩონჩხი

main: გვერდის გული

ტიპურ გვერდზე სამი დიდი ნაწილია: თავი (<header>), ძირი (<footer>) და მათ შორის მთავარი შინაარსი: ის, რისთვისაც ადამიანი გვერდზე მოვიდა. ახალი ამბების საიტზე ეს სტატიაა, მაღაზიაში პროდუქტი, ამ სკოლაში თავის ტექსტი. მთავარი შინაარსი <main> ელემენტში იწერება:

<body>
  <header>…ლოგო და მენიუ…</header>
  <main>
    <h1>HTML სიები</h1>
    <p>სიები ყველგანაა…</p>
  </main>
  <footer>…© 2026…</footer>
</body>

<main>-ის წესები:

• გვერდზე მხოლოდ ერთი ხილული <main>. მთავარი შინაარსი ერთია.
• მასში არ იწერება ის, რაც ყველა გვერდზე მეორდება: მენიუ, ლოგო, ძირი. მხოლოდ ამ გვერდის უნიკალური შინაარსი.
• ის <header>-ის, <footer>-ის ან <article>-ის შიგნით არ ჩაისმის.

ეკრანის წამკითხველის მომხმარებელი ერთი ღილაკით პირდაპირ <main>-ზე გადახტება, ხოლო ბრაუზერის კითხვის რეჟიმი მის შინაარსს აჩვენებს. ამიტომ <main>-ის სწორად მონიშვნა გვერდის ყველა სტუმარს ეხმარება.

section: თემატური ნაწილი

<main>-ის შიგნით შინაარსი ხშირად რამდენიმე ნაწილად იყოფა: „ჩვენ შესახებ“, „სერვისები“, „კონტაქტი“. ყოველი ასეთი თემატური ნაწილი, რომელსაც საკუთარი სათაური აქვს, <section> ელემენტში შეიძლება ჩაისვას:

<main>
  <h1>პროგრამირების წრე</h1>

  <section>
    <h2>ვინ ვართ</h2>
    <p>ჩვენ ვსწავლობთ HTML-ს, CSS-ს და JavaScript-ს.</p>
  </section>

  <section>
    <h2>როდის ვიკრიბებით</h2>
    <p>ყოველ სამშაბათს, 15:00-ზე.</p>
  </section>
</main>

მთავარი წესი: <section>-ს სათაური სჭირდება (<h2>, <h3>...). თუ ნაწილს სათაურს ვერ მოუფიქრებ, ის, სავარაუდოდ, თემატური ნაწილი კი არა, უბრალოდ ყუთია სტილისთვის, და მისთვის <div> ჯობს.

section თუ div

ეს ორი ელემენტი ხშირად ირევა. მარტივი ტესტი:

• ამ ნაწილს საკუთარი თემა და სათაური აქვს და გვერდის სარჩევში ჩაიწერებოდა? → <section>.
• ის მხოლოდ ვიზუალური ჯგუფია, მაგალითად ფერადი ფონისთვის ან ორი სვეტისთვის? → <div>.

სათაურების მოდულში ისწავლე, რომ სათაურები გვერდის გეგმას ქმნის. <section> ამ გეგმას კიდევ უფრო ნათლად აღნიშნავს: სათაური ამბობს, სად იწყება ნაწილი, <section> კი ამბობს, სად მთავრდება.

სრული ჩონჩხი

ახლა შეგვიძლია ტიპური გვერდის სრული ჩონჩხი ავაწყოთ:

<body>
  <header>
    <nav aria-label="მთავარი მენიუ">…</nav>
  </header>
  <main>
    <h1>გვერდის სათაური</h1>
    <section>
      <h2>პირველი ნაწილი</h2>
      …
    </section>
    <section>
      <h2>მეორე ნაწილი</h2>
      …
    </section>
  </main>
  <footer>…</footer>
</body>

ეს სტრუქტურა თითქმის ყველა თანამედროვე საიტის საფუძველია. CSS-ის მოდულებში ისწავლი, როგორ გადააქციო ის ლამაზ დიზაინად, HTML-ის შეუცვლელად. გახსენი ნებისმიერი დიდი საიტი, მაგალითად ახალი ამბების ან ვიკიპედიის გვერდი, და DevTools-ის Elements ჩანართში მოძებნე <main> და <header>: ნახავ, რომ მათი ჩონჩხი ძალიან ჰგავს ზემოთ მოცემულს.

სცადე თავად

გაუშვი. გვერდს ორი ნაწილი აქვს. დაამატე მესამე <section> სათაურით „კონტაქტი“ და ერთი აბზაცით.

ხშირი შეცდომები

• ორი <main>. მთავარი შინაარსი ერთია.
• მენიუ <main>-ში. მეორდება ყველა გვერდზე, ამიტომ <header>-ში ან <main>-ის გარეთ ეკუთვნის.
• <section> სათაურის გარეშე. თუ სათაური არ აქვს, <div> გამოიყენე.

<header>
  <strong>თავშესაფარი „ოთხი თათი“</strong>
</header>
<main>
  <h1>იპოვე მეგობარი</h1>
  <section>
    <h2>ძაღლები</h2>
    <p>ახლა 12 ძაღლი ეძებს ოჯახს.</p>
  </section>
  <section>
    <h2>კატები</h2>
    <p>8 კატა ელოდება ახალ სახლს.</p>
  </section>
</main>
<footer>
  <p>დაგვიკავშირდი: info@example.com</p>
</footer>

მინი-ქვიზი

შეჯამება

• <main> გვერდის მთავარი, უნიკალური შინაარსია: ერთი გვერდზე, მენიუსა და ძირის გარეშე.
• <section> თემატური ნაწილია და მას სათაური სჭირდება.
• სათაურის გარეშე ვიზუალური ჯგუფისთვის <div> ჯობს.
• ტიპური ჩონჩხი: header → main (section-ებით) → footer.