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

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> используется для группировки ссылок, которые предназначены для навигации по сайту или внутри текущего документа. Это могут быть основные меню, второстепенные меню, хлебные крошки, списки страниц и другие навигационные элементы.

Синтаксис

    
      <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 для улучшения внешнего вида и удобства использования.

1

Задача

Модуль 1: Web Core, 6 уровень, 1 лекция

Недоступна

Якорные ссылки

Якорные ссылки

Открыть

1

Задача

Модуль 1: Web Core, 6 уровень, 1 лекция

Недоступна

Меню сайта

Меню сайта

Открыть