Теги навігації

2.1 Якірні посилання

Навігація всередині HTML-сторінки допомагає користувачам швидко переходити до різних розділів документа. Це особливо корисно для довгих сторінок з великою кількістю контенту. У HTML існує декілька способів реалізації такої навігації, включаючи використання якірних посилань, атрибуту id, а також навігацію за допомогою JavaScript.

Якірні посилання — це найпоширеніший спосіб навігації всередині сторінки. Вони дозволяють користувачам переходити до певних частин документа за допомогою якірних тегів.

Приклад використання:

Створення якорів за допомогою атрибута id:

    
      <h2 id="section1">Section 1</h2>
      <p>Content of section 1...</p>
      <h2 id="section2">Section 2</h2>
      <p>Content of section 2...</p>
      <h2 id="section3">Section 3</h2>
      <p>Content of section 3...</p>
    
  

Створення посилань на якорі:

    
      <nav>
        <ul>
          <li><a href="#section1">Go to Section 1</a></li>
          <li><a href="#section2">Go to Section 2</a></li>
          <li><a href="#section3">Go to Section 3</a></li>
        </ul>
      </nav>
    
  

Навігація із використанням атрибута name

Атрибут name також можна використовувати для створення якорів, хоча його використання менш поширене і вважається застарілим.

Приклад

    
      <a name="top"></a>
      <p>Top of the page...</p>
      <a name="bottom"></a>
      <p>Bottom of the page...</p>
      <nav>
        <ul>
          <li><a href="#top">Go to Top</a></li>
          <li><a href="#bottom">Go to Bottom</a></li>
        </ul>
      </nav>
    
  

2.2 Скролінг із використанням JavaScript

JavaScript надає більш гнучкі можливості для навігації всередині сторінки. За допомогою методів scrollIntoView, scrollTo, та інших можна реалізувати плавний скролінг до різних елементів сторінки.

Приклад використання:

Цей код плавно прокручує сторінку до зазначеного елемента при натисканні на кнопку.

    
      <button onclick="scrollToSection('section1')">Go to Section 1</button>
      <button onclick="scrollToSection('section2')">Go to Section 2</button>
      <button onclick="scrollToSection('section3')">Go to Section 3</button>

      <h2 id="section1">Section 1</h2>
      <p>Content of section 1...</p>
      <h2 id="section2">Section 2</h2>
      <p>Content of section 2...</p>
      <h2 id="section3">Section 3</h2>
      <p>Content of section 3...</p>
    
  

    
     // Функція для плавного прокручування до певної секції сторінки
      function scrollToSection(sectionId) {
        // Знаходимо елемент за його ID
        document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
      }
    
  

2.3 Тег <nav>

Тег <nav> в HTML5 призначений для визначення розділу сторінки, що містить навігаційні посилання. Цей тег допомагає семантично позначити навігаційні блоки, що покращує структуру вебсторінки і робить її більш доступною як для користувачів, так і для пошукових систем.

Тег <nav> використовується для групування посилань, які призначені для навігації по сайту або всередині поточного документа. Це можуть бути основні меню, другорядні меню, breadcrumbs, списки сторінок та інші навігаційні елементи.

Синтаксис

    
      <nav>
        <!-- Навігаційні елементи -->
      </nav>
    
  

Приклад використання

    
      <header>
        <h1>Мій сайт</h1>
        <nav>
          <ul>
            <li><a href="#home">Головна</a></li>
            <li><a href="#about">Про нас</a></li>
            <li><a href="#services">Послуги</a></li>
            <li><a href="#contact">Контакти</a></li>
          </ul>
        </nav>
      </header>
    
  

Пояснення

• Тег <header>: використовується для створення заголовка сторінки, який включає навігаційне меню
• Тег <nav>: містить список посилань, які ведуть до різних розділів сторінки
• Тег <ul> і <li>: використовуються для створення списку навігаційних посилань
• Тег <a>: визначає самі посилання, за якими користувачі можуть переходити на інші частини сторінки чи сайту

2.4 Застосування тега <nav>

Тег <nav> використовується для групування навігаційних посилань, таких як:

• Основне меню сайту
• Другорядні меню
• Breadcrumbs
• Посилання на сторінки пагінації
• Інші навігаційні посилання

Основне меню сайту

    
      <nav>
        <ul>
          <li><a href="#home">Головна</a></li>
          <li><a href="#about">Про нас</a></li>
          <li><a href="#services">Послуги</a></li>
          <li><a href="#contact">Контакти</a></li>
        </ul>
      </nav>
    
  

Другорядне меню

    
      <nav>
        <ul>
          <li><a href="#faq">Часті питання</a></li>
          <li><a href="#support">Підтримка</a></li>
          <li><a href="#privacy">Політика конфіденційності</a></li>
        </ul>
      </nav>
    
  

Breadcrumbs

    
      <nav aria-label="breadcrumb">
        <ol>
          <li><a href="/home">Головна</a></li>
          <li><a href="/category">Категорія</a></li>
          <li>Поточна сторінка</li>
        </ol>
      </nav>
    
  

Переваги використання тега <nav>

Семантична розмітка

Використання тега <nav> допомагає пошуковим системам та технологіям для людей з обмеженими можливостями краще розуміти структуру сторінки. Це робить сайт більш доступним і покращує його SEO.

Покращення структури сторінки

Тег <nav> чітко розділяє навігаційні елементи від основного контенту, що робить розмітку сторінки більш логічною і структурованою.

Легкість стилізації

Навігаційні елементи, розміщені в тегу <nav>, легко стилізувати за допомогою CSS для покращення зовнішнього вигляду та зручності використання.