Главная
HTML-тег <a>
Характеристики
- Тип: строчный, интерактивный, семантический
- Назначение: Создание гиперссылок для перехода на другие страницы или части текущей страницы.
- Родители: Любые HTML-теги, которые могут содержать строчные элементы.
- Потомки: Текст и любые строчные HTML-теги.
- Глобальные атрибуты: все
- Атрибуты событий: все
Атрибуты
- href — URL, на который будет вести ссылка.
- target — где открывать ссылку (_blank, _self, _parent, _top).
- rel — определяет отношения между текущим документом и документом по ссылке.
- download — предлагает загрузку файла, если ссылка ведет на файл.
Пример использования
<a id="myLink" href="https://example.com" target="_blank">Перейти на пример сайта</a>
Использование в JavaScript
// Получение элемента по ID
const linkElement = document.getElementById('myLink');
// Изменение атрибута href
linkElement.href = 'https://example.com';
// Добавление класса
linkElement.classList.add('new-class');
// Изменение текста ссылки
linkElement.innerHTML = 'Новая ссылка';
Рекомендации по обеспечению доступности (a11y)
- Используйте понятный и описательный текст ссылки, указывающий, куда она ведет
- Избегайте неясных фраз, таких как «нажмите здесь» или «узнать больше», это затрудняет понимание назначения ссылки
- Обеспечьте, чтобы текст ссылки был понятен вне контекста для пользователей экранных читалок
- Не включайте глаголы в текст ссылки, если действие не является основной задачей этой ссылки
- При ссылке на документ указывайте тип документа и его размер, если возможно
- Не используйте выражения вроде «ссылка на», так как экранные читалки уже сообщают, что это ссылка
- Держите текст ссылки кратким, но информативным
- Используйте уникальные тексты ссылок для разных назначений, чтобы избежать путаницы
- Не используйте URL в качестве текста ссылки
- Размещайте наиболее релевантную информацию в начале текста ссылки для облегчения поиска
- Убедитесь, что атрибут href содержит корректный URL или якорь
- Ссылки должны быть доступны для клавиатурной навигации
- Используйте target="_blank" только при необходимости открытия в новой вкладке. Добавляйте rel="noopener noreferrer" для предотвращения потенциальных уязвимостей.
- Отсутствие атрибута href может привести к тому, что ссылка не будет распознана вспомогательными технологиями
- Если действие не связано с переходом по URL, используйте <button> вместо <a>
Полезные ссылки