Разделяешь ли подход что ссылки используются только для перехода куда-либо

Мой подход к использованию ссылок в веб-разработке

Как опытный фронтенд-разработчик, я не разделяю жёсткий подход, что теги <a> должны использоваться исключительно для навигации. Такой взгляд устарел и не соответствует современным требованиям к доступности, семантике и пользовательскому опыту. Рассмотрим эту тему подробнее.

Семантика и доступность — ключевые аспекты

Согласно спецификации HTML5, элемент <a> представляет собой гиперссылку, которая может вести на другую страницу, часть текущей страницы или любой URL-адрес. Однако его основная семантическая роль — обозначение интерактивного элемента, который выполняет действие при активации.

<!-- Классическая навигационная ссылка -->
<a href="/about">О компании</a>

<!-- Ссылка, открывающая модальное окно -->
<a href="#modal" class="modal-trigger">Открыть условия</a>

<!-- Ссылка для скачивания файла -->
<a href="/document.pdf" download>Скачать PDF</a>

Современные use-cases выходят за рамки навигации

1. Триггеры для модальных окон и попапов

   // Использование ссылки для открытия модального окна
   document.querySelectorAll('.modal-link').forEach(link => {
     link.addEventListener('click', (e) => {
       e.preventDefault();
       openModal(link.getAttribute('data-modal-id'));
     });
   });
   

2. Якорные ссылки для навигации по странице

   <a href="#section-features">Перейти к возможностям</a>
   <!-- Прокручивает к элементу с id="section-features" -->
   

3. Ссылки для действий без перезагрузки страницы

   <!-- В SPA-приложениях ссылки часто обрабатываются маршрутизатором -->
   <a href="/user/profile" data-router-link>Профиль пользователя</a>
   

Критические соображения для правильного использования

Когда использовать ссылки:

• Любое действие, которое меняет URL (даже через History API)
• Элементы, которые визуально воспринимаются как кликабельные
• Интерактивные элементы, которые должны быть доступны с клавиатуры
• Действия, которые логически ведут "куда-то" (к новому состоянию интерфейса)

Когда использовать кнопки:

• Действия, которые отправляют формы
• Операции, не меняющие URL или глобальное состояние
• Элементы управления в пределах текущего контекста

Практический пример из реального проекта

// React-компонент со смешанным использованием
const UserActions = ({ userId }) => {
  return (
    <div className="user-actions">
      {/* Ссылка для перехода к профилю */}
      <a href={`/user/${userId}`} className="profile-link">
        Просмотр профиля
      </a>
      
      {/* Кнопка для локального действия */}
      <button 
        onClick={() => setUserStatus(userId, 'active')}
        className="action-button"
      >
        Активировать
      </a>
      
      {/* Ссылка как триггер модального окна */}
      <a 
        href="#delete-confirm" 
        className="modal-trigger"
        onClick={(e) => {
          e.preventDefault();
          openDeleteModal(userId);
        }}
      >
        Удалить пользователя
      </a>
    </div>
  );
};

Важность правильной реализации

1. Доступность: Ссылки по умолчанию получают фокус клавиатуры и имеют встроенную семантику
2. Поведение браузера: Правильные ссылки поддерживают средний клик, открытие в новой вкладке
3. SEO: Поисковые системы лучше индексируют контент, связанный через семантические ссылки
4. Прогнозируемость: Пользователи ожидают определённого поведения от ссылок

Заключение

Вместо жёсткого разделения "ссылки только для навигации", я придерживаюсь контекстно-зависимого подхода:

• Анализирую, что делает элемент с точки зрения пользователя
• Оцениваю требования доступности
• Учитываю ожидаемое поведение (открытие в новой вкладке, история браузера)
• Тестирую с помощью клавиатуры и скринридеров

Современная веб-разработка требует гибкости, но с сохранением принципов семантики и доступности. Ссылки могут выполнять различные функции, главное — делать это осознанно и с учётом всех последствий для пользовательского опыта.