Основная навигация (nav) [Модуль 8: Семантические элементы HTML5]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Навигация — это скелет любого сайта. Она помогает пользователям ориентироваться и находить нужную информацию. В этой серии заданий мы на практике создадим полноценный навигационный блок, пройдя путь от самых основ до более продвинутых техник. Мы начнем с создания правильной структуры с помощью семантических тегов, таких как `<nav>`. Затем добавим в него список ссылок, научимся выделять активный пункт меню с помощью CSS-класса и даже добавим иконку со специальным атрибутом для улучшения доступности. Каждое задание — это маленький шаг к пониманию того, как строятся удобные и функциональные меню на сайтах. Вам не придется придумывать контент, только синтаксис — все тексты и ссылки уже на месте. Приготовьтесь закрепить знания и увидеть, как из простых тегов рождается важный элемент интерфейса!

Список тем

Создание основного контейнера навигации

id: 37865_nav-task-01-container

Любая навигационная панель на сайте должна быть обернута в специальный семантический тег. Это помогает поисковым системам и скринридерам понять структуру страницы. Ваша задача — создать этот основной контейнер для нашего меню.

CSS

/* Общие стили для навигации */
.main-nav {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 8px;
  font-family: sans-serif;
}

/* Стили для списка внутри навигации */
.main-nav ul {
  list-style: none; /* Убираем маркеры списка */
  margin: 0;
  padding: 0;
  display: flex; /* Располагаем элементы в ряд */
  justify-content: space-around; /* Равномерно распределяем */
}

                     <input1 class="main-nav">
  <ul>
    <li>Главная</li>
    <li>Каталог</li>
    <li>Контакты</li>
  </ul>
</input2>

HTML

<input1 class="main-nav">
  <ul>
    <li>Главная</li>
    <li>Каталог</li>
    <li>Контакты</li>
  </ul>
</input2>

Для обозначения основного навигационного блока в HTML используется тег `<nav>`. Вам нужно вписать имя этого тега в оба поля, чтобы создать открывающий и закрывающий теги.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Добавление неупорядоченного списка

id: 37865_nav-task-02-ul

Классическая навигация представляет собой список ссылок. Самый подходящий тег для группировки таких элементов — это тег неупорядоченного списка. Добавьте его внутрь нашего `<nav>`.

CSS

.main-nav {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 8px;
  font-family: sans-serif;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

                     <nav class="main-nav">
  <input1>
    <li>Главная</li>
    <li>Каталог</li>
    <li>Контакты</li>
  </input1>
</nav>

HTML

<nav class="main-nav">
  <input1>
    <li>Главная</li>
    <li>Каталог</li>
    <li>Контакты</li>
  </input1>
</nav>

Для создания неупорядоченного (маркированного) списка используется тег `<ul>` (Unordered List). Он должен находиться внутри тега `<nav>` и оборачивать элементы списка `<li>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Создание элементов списка

id: 37865_nav-task-03-li

Теперь, когда у нас есть контейнер-список, нужно добавить в него сами пункты меню. Каждый пункт должен быть обернут в свой собственный тег элемента списка.

CSS

.main-nav {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 8px;
  font-family: sans-serif;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

                     <nav class="main-nav">
  <ul>
    <li>Главная</li>
    <input1>Каталог</input2>
    <li>Контакты</li>
  </ul>
</nav>

HTML

<nav class="main-nav">
  <ul>
    <li>Главная</li>
    <input1>Каталог</input2>
    <li>Контакты</li>
  </ul>
</nav>

Каждый пункт в списке `<ul>` должен быть обернут в тег `<li>` (List Item). Вам нужно добавить открывающий и закрывающий теги для пункта 'Каталог'.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Превращаем пункты в ссылки

id: 37865_nav-task-04-a-tag

Пункты меню бесполезны, если на них нельзя нажать. Чтобы сделать текст кликабельным и ведущим на другую страницу, его нужно обернуть в тег ссылки. Сделайте пункт 'Главная' ссылкой.

CSS

.main-nav {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 8px;
  font-family: sans-serif;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

.main-nav a {
  text-decoration: none; /* Убираем подчеркивание */
  color: #333;
  padding: 5px 10px;
}

                     <nav class="main-nav">
  <ul>
    <li><input1 href="#">Главная</input2></li>
    <li>Каталог</li>
    <li>Контакты</li>
  </ul>
</nav>

HTML

<nav class="main-nav">
  <ul>
    <li><input1 href="#">Главная</input2></li>
    <li>Каталог</li>
    <li>Контакты</li>
  </ul>
</nav>

Для создания гиперссылок используется тег `<a>` (anchor). Текст ссылки должен находиться между открывающим `<a>` и закрывающим `</a>` тегами.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Добавление адреса для ссылки

id: 37865_nav-task-05-href

Тег `<a>` не будет работать без специального атрибута, который указывает браузеру, куда нужно перейти при клике. Добавьте этот обязательный атрибут к ссылке 'Каталог'.

CSS

.main-nav {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 8px;
  font-family: sans-serif;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

.main-nav a {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
}

                     <nav class="main-nav">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a input1="#">Каталог</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

HTML

<nav class="main-nav">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a input1="#">Каталог</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

Чтобы указать адрес назначения для ссылки, используется атрибут `href` (hypertext reference). Его значением обычно является URL-адрес. В данном случае мы используем '#', что означает ссылку на текущую страницу.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Выделение активного пункта меню

id: 37865_nav-task-06-active-class

Часто на сайтах текущая страница подсвечивается в меню. Это делается с помощью CSS. Чтобы стили применились только к одному элементу, ему нужно добавить специальный класс. Сделайте пункт 'Профиль' активным.

CSS

.main-nav {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 8px;
  font-family: sans-serif;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

.main-nav a {
  text-decoration: none;
  color: #333;
  padding: 8px 12px;
  border-radius: 5px;
  transition: background-color 0.2s;
}

/* Стиль для активного пункта */
.main-nav a.active {
  background-color: #007bff;
  color: white;
}

                     <nav class="main-nav">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a input1="active" href="#">Профиль</a></li>
    <li><a href="#">Выход</a></li>
  </ul>
</nav>

HTML

<nav class="main-nav">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a input1="active" href="#">Профиль</a></li>
    <li><a href="#">Выход</a></li>
  </ul>
</nav>

Чтобы применить к элементу определенный набор стилей, используется атрибут `class`. В данном задании вам нужно добавить атрибут `class` со значением `active` для ссылки 'Профиль'.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Навигация с иконкой

id: 37865_nav-task-07-icon-nav

Иногда в навигации вместо текста используют иконки. Для этого внутрь ссылки помещается изображение. Добавьте иконку для ссылки 'Настройки', используя тег для вставки изображений и атрибут для указания пути к файлу.

CSS

.main-nav {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 8px;
  font-family: sans-serif;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.main-nav a {
  display: block;
  padding: 5px;
}

.main-nav img {
  width: 24px;
  height: 24px;
  display: block;
}

                     <nav class="main-nav">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Сообщения</a></li>
    <li>
      <a href="#">
        <input1 input2="https://naytikurs.ru/img/11s.svg" alt="Настройки">
      </a>
    </li>
  </ul>
</nav>

HTML

<nav class="main-nav">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Сообщения</a></li>
    <li>
      <a href="#">
        <input1 input2="https://naytikurs.ru/img/11s.svg" alt="Настройки">
      </a>
    </li>
  </ul>
</nav>

Для вставки изображения используется тег `<img>`. У него есть обязательный атрибут `src` (source), в котором указывается URL картинки. Также не забывайте про атрибут `alt` для альтернативного текста.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Доступность для навигации с иконкой

id: 37865_nav-task-08-aria-label

Ссылка, содержащая только иконку, непонятна для пользователей скринридеров. Чтобы исправить это, нужно добавить специальный атрибут, который опишет назначение ссылки. Добавьте такой атрибут к ссылке с иконкой.

CSS

.main-nav {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 8px;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.main-nav a {
  display: block;
  padding: 8px;
  margin: 0 5px;
  border: 1px solid transparent;
}

/* Добавим рамку при фокусе для наглядности */
.main-nav a:focus {
  border-color: #007bff;
  border-radius: 4px;
}

                     <nav class="main-nav">
  <ul>
    <li>
      <a href="#" input1="Поиск по сайту">
        <img src="https://naytikurs.ru/img/12s.svg" alt="">
      </a>
    </li>
  </ul>
</nav>

HTML

<nav class="main-nav">
  <ul>
    <li>
      <a href="#" input1="Поиск по сайту">
        <img src="https://naytikurs.ru/img/12s.svg" alt="">
      </a>
    </li>
  </ul>
</nav>

Для улучшения доступности интерактивных элементов, у которых нет видимого текстового описания, используется атрибут `aria-label`. Его значением должна быть строка, описывающая действие элемента. Например: `aria-label="Перейти в настройки"`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку