header და footer

რას ისწავლი

• რა იწერება <header>-ში და რა <footer>-ში
• რატომ ჯობს ისინი <div class="header">-ს
• რომ თავი და ძირი მხოლოდ მთელ გვერდს კი არა, მის ნაწილებსაც შეიძლება ჰქონდეს

გვერდის თავი: header

თითქმის ყველა საიტს ზემოთ ერთნაირი ზოლი აქვს: ლოგო, საიტის სახელი, ხშირად მენიუ და ძებნა. ეს ზოლი ყველა გვერდზე მეორდება. HTML-ში ის <header> ელემენტში იწერება:

<header>
  <img src="/icons/icon-192.png" alt="" width="40">
  <strong>ბიტის ბლოგი</strong>
  <nav>
    <ul>
      <li><a href="index.html">მთავარი</a></li>
      <li><a href="posts.html">სტატიები</a></li>
    </ul>
  </nav>
</header>

ლოგოს alt აქ ცარიელია, რადგან მის გვერდით საიტის სახელი უკვე ტექსტად წერია: იგივეს ორჯერ წაკითხვა ზედმეტია. ყურადღება მიაქციე: <header> არ არის <head>! <head> დოკუმენტის უხილავი ნაწილია (<title>, <meta>), <header> კი ხილული ზოლი <body>-ში.

გვერდის ძირი: footer

გვერდის ბოლოს ჩვეულებრივ წერია: ვინ შექმნა საიტი, საავტორო უფლებები, კონტაქტი, ბმულები წესებსა და კონფიდენციალურობაზე. ეს <footer>-შია:

<footer>
  <p>© 2026 ბიტის ბლოგი</p>
  <p><a href="contact.html">კონტაქტი</a> · <a href="privacy.html">კონფიდენციალურობა</a></p>
</footer>

რატომ არა div

<div class="header"> ეკრანზე ზუსტად ისეთივე იქნებოდა. მაგრამ <header> და <footer> ბრაუზერს და დამხმარე პროგრამებს ეუბნება, რა არის ეს ნაწილები. ეკრანის წამკითხველის მომხმარებელს შეუძლია ერთი ღილაკით გადახტეს „ბანერზე“ (გვერდის თავზე) ან „შინაარსის ინფორმაციაზე“ (ძირზე), და არ მოუწიოს მთელი გვერდის მოსმენა. ბრაუზერის „კითხვის რეჟიმი“ თავს და ძირს ავტომატურად ტოვებს და მხოლოდ მთავარ ტექსტს აჩვენებს. საძიებო სისტემებიც უკეთ იგებენ, სად არის მთავარი შინაარსი.

თავი და ძირი ნაწილებისთვის

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

<article>
  <header>
    <h2>როგორ ვისწავლე HTML</h2>
    <p>ავტორი: ბიტი · 12 მაისი</p>
  </header>
  <p>ყველაფერი ერთი აბზაცით დაიწყო…</p>
  <footer>
    <p>თეგები: HTML, სწავლა</p>
  </footer>
</article>

<article> ერთი დამოუკიდებელი სტატიაა: მას ამ მოდულის ბოლოს ისწავლი. აქ მთავარია, რომ გვერდზე შეიძლება რამდენიმე <header> და <footer> იყოს, თითო ყოველ ნაწილს.

ერთი შეზღუდვა: <header>-ის ან <footer>-ის შიგნით სხვა <header> ან <footer> არ ჩაისმის.

სცადე თავად

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

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

• <header> და <head>-ის არევა. <head> უხილავია და <body>-ს წინ დგას. <header> ხილული თავია <body>-ში.
• <header> ყველა სათაურისთვის. თუ მხოლოდ ერთი სათაური გაქვს, <h2> საკმარისია. <header> მაშინ ღირს, როცა თავი რამდენიმე ელემენტისგან შედგება.
• ჩადგმული header. <header> სხვა <header>-ის ან <footer>-ის შიგნით არ იწერება.

<header>
  <strong>საჯარო სკოლა №1</strong>
  <nav>
    <ul>
      <li><a href="index.html">მთავარი</a></li>
      <li><a href="news.html">სიახლეები</a></li>
      <li><a href="contact.html">კონტაქტი</a></li>
    </ul>
  </nav>
</header>
<p>კეთილი იყოს თქვენი მობრძანება ჩვენი სკოლის საიტზე!</p>
<footer>
  <p>© 2026 საჯარო სკოლა №1</p>
  <p>ქუთაისი, სკოლის ქუჩა 1</p>
</footer>

მინი-ქვიზი

შეჯამება

• <header> გვერდის ან ნაწილის თავია: ლოგო, სათაური, მენიუ.
• <footer> ძირია: საავტორო უფლებები, კონტაქტი, დამატებითი ბმულები.
• ისინი div-ს ჯობს: ეკრანის წამკითხველი და ბრაუზერი იგებენ, რა არის ეს ნაწილები.
• <header> ≠ <head>. სტატიებს შეიძლება საკუთარი header და footer ჰქონდეთ.