Списки, кнопки и ссылки встречаются на каждой странице, и новички часто путают их роли: делают кнопку из ссылки, ссылку из div, а меню — из набора абзацев. Между тем у каждого из этих элементов своё назначение, и правильный выбор влияет на доступность, поведение с клавиатуры и корректную работу страницы. Разобраться в этом — значит перестать «имитировать» интерфейс и начать строить его правильно.

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

Что уже умеем / что добавим

Вы освоили структурные семантические теги. Теперь наведём порядок на уровне отдельных интерактивных элементов. В сквозном проекте мы правильно оформим меню как список ссылок и добавим настоящую кнопку призыва к действию.

Что вы узнаете в рамках статьи

• Когда использовать ссылку a, а когда кнопку button.
• Почему меню правильно верстать списком.
• Как оформить навигацию как список ссылок.
• Чем плохи «фальшивые» кнопки и ссылки из div.
• Как выбор элемента влияет на доступность.

Ключевые термины

• Ссылка (a) — переход на другой адрес или страницу.
• Кнопка (button) — запуск действия на текущей странице.
• Список (ul/ol) — перечень однотипных элементов.
• Интерактивный элемент — элемент, с которым пользователь взаимодействует.
• Фокус с клавиатуры — возможность выбрать элемент клавишей Tab.

Ссылка или кнопка

Это главный вопрос, в котором путаются чаще всего. Правило простое и надёжное. Ссылка a нужна, когда пользователь куда-то переходит — на другую страницу, на внешний сайт, к разделу страницы. У неё обязателен атрибут href. Кнопка button нужна, когда происходит действие на текущей странице — отправка формы, открытие модального окна, добавление в корзину.

<a href="/contacts">Наши контакты</a>
<button>Добавить в корзину</button>

Ориентир такой: если после нажатия меняется адрес в строке браузера — это ссылка; если что-то происходит прямо здесь — это кнопка. Выбор не косметический: браузер и скринридеры по-разному их объявляют и обрабатывают, а ссылка ещё и работает по-особому (открытие в новой вкладке, копирование адреса).

Почему меню — это список

Пункты меню — это перечень однотипных элементов, поэтому семантически правильно верстать навигацию как список ul со ссылками внутри. Так скринридер объявит «список из 4 пунктов» и поможет пользователю сориентироваться.

<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

Может показаться, что маркеры-точки и отступы списка тут лишние, — но их легко убрать стилями (list-style: none), а семантическую пользу списка мы сохраним. Такая разметка навигации — общепринятый стандарт, вы встретите её почти на каждом сайте.

Убираем стили списка

Чтобы список-меню выглядел как ряд ссылок, а не как маркированный перечень, применим уже знакомый Flexbox и уберём стандартное оформление списка:

nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

Свойство list-style: none убирает точки-маркеры, а обнуление margin и padding — стандартные отступы списка. display: flex с gap выстраивает пункты в ряд с промежутками. В браузере вы увидите аккуратное горизонтальное меню — но под капотом это по-прежнему семантически корректный список ссылок. Так совмещают правильную разметку и нужный внешний вид.

Опасность фальшивых элементов

Соблазнительно сделать кнопку из div и повесить на неё вид кнопки — но это плохая практика. Настоящие a и button бесплатно получают важные возможности: их можно выбрать клавишей Tab, нажать с клавиатуры, их правильно объявляет скринридер. div же по умолчанию «мёртв» для клавиатуры и вспомогательных технологий.

<!-- Плохо: фальшивая кнопка -->
<div class="button">Отправить</div>

<!-- Хорошо: настоящая кнопка -->
<button class="button">Отправить</button>

Внешне оба варианта можно сделать одинаковыми, но первый недоступен для тех, кто не пользуется мышью, и непонятен скринридеру. Правило: для действий берите button, для переходов — a, а div оставляйте для группировки и оформления. Это избавит вас от множества скрытых проблем.

Применяем в проекте

Наведём порядок в интерактивных элементах сайта. Оформим навигацию как семантический список ссылок и добавим в шапку настоящую кнопку призыва к действию.

<header class="header">
  <div class="logo">Моя компания</div>
  <nav>
    <ul class="nav">
      <li><a href="#">Главная</a></li>
      <li><a href="#">Услуги</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </nav>
  <button class="button">Оставить заявку</button>
</header>

.nav {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

Обновите страницу: меню выглядит как ровный ряд ссылок, но теперь это правильный список, понятный скринридеру. А рядом появилась настоящая кнопка button — она реагирует на клавиатуру и объявляется как кнопка. Ваша шапка стала не только красивой, но и доступной.

Частые ошибки

• Кнопка вместо ссылки и наоборот.
  Переход — это a с href, действие — это button.
• Меню не списком.
  Навигацию правильно верстать списком ul со ссылками, даже если маркеры убраны.
• Фальшивые элементы из div.
  Они недоступны с клавиатуры и непонятны скринридеру; берите настоящие a и button.
• Забыли обнулить стили списка.
  Чтобы меню не выглядело перечнем, уберите list-style, margin и padding.

Итоги

Отлично — теперь вы не путаете ключевые интерактивные элементы! Вы знаете, что ссылка ведёт к переходу, кнопка запускает действие, а меню правильно строится как список ссылок. И, что важно, вы поняли, почему нельзя подменять их безликими div: настоящие элементы бесплатно дают доступность и работу с клавиатурой. Ваша шапка теперь и выглядит хорошо, и устроена правильно.

Прекрасная работа! В следующем уроке завершим тему семантики важными атрибутами — alt, title и базовыми aria-*, — которые делают страницу ещё доступнее.