შესვლა

HTML › დამწყები › სიები

სია ნავიგაციისთვის

მარტივი⏱ 6 წთ+20 XP👑 Pro#HTML#nav#მენიუ#ნავიგაცია#aria-current

რას ისწავლი

  • რატომ იწერება საიტის მენიუ ბმულების სიად
  • რას აკეთებს <nav> ელემენტი
  • როგორ მონიშნო, რომელ გვერდზე იმყოფება მომხმარებელი

მენიუ = ბმულების სია

ნებისმიერი საიტის თავში არის მენიუ: „მთავარი“, „ჩვენ შესახებ“, „კონტაქტი“. ეკრანზე ის ხშირად ჰორიზონტალურ ზოლად გამოიყურება, მარკერების გარეშე, და სულაც არ ჰგავს სიას. მაგრამ თავისი შინაარსით ის ბმულების სიაა. ამიტომ თითქმის ყველა საიტზე მენიუ ასე იწერება:

HTML
<nav>
  <ul>
    <li><a href="index.html">მთავარი</a></li>
    <li><a href="about.html">ჩვენ შესახებ</a></li>
    <li><a href="gallery.html">გალერეა</a></li>
    <li><a href="contact.html">კონტაქტი</a></li>
  </ul>
</nav>

ჰორიზონტალური განლაგება, მარკერების მოშორება და ფერები მოგვიანებით CSS-ით გაკეთდება. HTML ამბობს მხოლოდ იმას, რაც მნიშვნელოვანია: ეს ოთხი ბმულის სიაა. ასე აგებული მენიუ ტელეფონზეც მარტივად გადაკეთდება: ვიწრო ეკრანზე CSS-ს შეუძლია იგივე სია ვერტიკალურად ან „ჰამბურგერ“ ღილაკის ქვეშ აჩვენოს, HTML-ის შეუცვლელად.

nav ელემენტი

<nav> (navigation, ნავიგაცია) ამბობს: „აქ საიტის მთავარი ნავიგაციის ბმულებია“. ეკრანზე ის არაფრით გამოირჩევა, მაგრამ ეკრანის წამკითხველის მომხმარებლებს ძალიან ეხმარება: მათ შეუძლიათ ერთი ღილაკით პირდაპირ მენიუზე გადახტნენ, ან, პირიქით, გამოტოვონ ის და პირდაპირ შინაარსზე გადავიდნენ. წარმოიდგინე, რომ ყოველ გვერდზე იძულებული ხარ, ერთი და იგივე ათი ბმული მოისმინო, სანამ ტექსტამდე მიხვალ. <nav> ამ პრობლემას აგვარებს.

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

რომელ გვერდზე ვარ

კარგი მენიუ გიჩვენებს, სად ხარ ახლა: მიმდინარე გვერდის ბმული სხვანაირად გამოიყურება. ამის ჩასაწერად არსებობს ატრიბუტი aria-current="page":

HTML
<li><a href="about.html" aria-current="page">ჩვენ შესახებ</a></li>

ეკრანის წამკითხველი ასეთ ბმულს გამოაცხადებს როგორც „მიმდინარე გვერდი“, ხოლო CSS-ში შეგიძლია ის, მაგალითად, გაამუქო ან ხაზი გაუსვა. aria- ატრიბუტები სპეციალურად ხელმისაწვდომობისთვის შეიქმნა: ისინი დამხმარე ტექნოლოგიებს ისეთ ინფორმაციას აწვდის, რომელიც ჩვეულებრივ HTML ელემენტებში არ ჩანს.

ქვემენიუ

თუ მენიუს პუნქტს ქვეპუნქტები აქვს, გამოიყენე წინა თავებში ნასწავლი ჩადგმული სია: შიდა <ul> მშობელი <li>-ის შიგნით.

სცადე თავად

გაუშვი. ეს მენიუ ჯერ ჩვეულებრივ სიად გამოიყურება, CSS-ს ჯერ არ ვიყენებთ. ნახე, რომელ ბმულს აქვს aria-current, და გადაიტანე ის „გალერეაზე“.

HTML · სცადე თავად

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

  • მენიუ ბმულებით, მაგრამ სიის გარეშე. ოთხი ბმული ზედიზედ ეკრანზე იგივეა, მაგრამ წამკითხველისთვის სია უფრო ინფორმაციულია: „სია, ოთხი პუნქტი“.
  • ყველა ბმული <nav>-ში. მხოლოდ მთავარი ნავიგაცია.
  • aria-current ყველა ბმულზე. ის მხოლოდ ერთ, მიმდინარე გვერდის ბმულს უნდა ჰქონდეს.

სავარჯიშო

ააწყე საიტის მენიუ სამი გვერდისთვის: მთავარი (index.html), ჰობი (hobby.html), კონტაქტი (contact.html). მიმდინარე გვერდი იყოს „ჰობი“. მენიუს ქვეშ დაწერე ამ გვერდის <h1>.

HTML · სცადე თავად
💡 მინიშნება

<nav><ul> და სამი <li><a>. „ჰობის“ ბმულს დაუმატე aria-current="page".

✅ ამოხსნის ნახვა
HTML
<nav>
  <ul>
    <li><a href="index.html">მთავარი</a></li>
    <li><a href="hobby.html" aria-current="page">ჰობი</a></li>
    <li><a href="contact.html">კონტაქტი</a></li>
  </ul>
</nav>
<h1>ჩემი ჰობი</h1>

მინი-ქვიზი

1რა არის საიტის მენიუ თავისი შინაარსით?

2რისთვისაა <nav>?

3რას აღნიშნავს aria-current="page"?

შეჯამება

  • საიტის მენიუ ბმულების სიაა: <nav><ul><li><a>.
  • <nav> მთავარ ნავიგაციას აღნიშნავს და ეკრანის წამკითხველს ეხმარება.
  • მიმდინარე გვერდის ბმულს aria-current="page" მიეცი.
  • ჰორიზონტალური მენიუ და მარკერების მოშორება CSS-ის საქმეა.
📝 ჩემი შენიშვნა