В собственной HTML-вставке ссылка предназначена для перехода, а кнопка — для действия. Внешне они могут быть похожи, но семантика влияет на управление клавиатурой и ожидания посетителя. Нарисованный прямоугольник с обработчиком мыши не заменяет эти элементы автоматически.
Выберите по результату
В учебном примере «Посмотреть проекты» открывает другую страницу — это ссылка. «Показать пояснение» меняет текущее содержание — это кнопка. «Отправить форму» тоже действие, но оно должно быть связано с конкретной формой и её обработкой.
Не ставьте href="#" на каждую операцию ради внешнего вида. Такая ссылка обозначает переход к фрагменту страницы и может сдвинуть экран. Если перехода нет, используйте кнопку и настройте действие.
Пример ссылки
В T123 из категории «Другое» можно добавить обычный HTML. Для маршрута к реально существующему разделу используйте:
<a href="/projects">Посмотреть проекты</a>Замените путь на фактический опубликованный адрес. Ссылка уже поддерживает клавиатурное действие и привычное открытие через браузер. CSS можно оформить отдельно, сохраняя заметный фокус.
Пример локального действия
Следующий учебный пример раскрывает пояснение внутри собственной вставки. Он не отправляет данные и не управляет формами Tilda.
<button type="button" id="pp-note-button"
aria-expanded="false" aria-controls="pp-note">
Показать пояснение
</button>
<p id="pp-note" hidden>Для проекта подготовьте тексты и изображения.</p>
<script>
(() => {
const ppButton = document.getElementById('pp-note-button');
const ppNote = document.getElementById('pp-note');
ppButton.addEventListener('click', () => {
const expanded = ppButton.getAttribute('aria-expanded') === 'true';
ppButton.setAttribute('aria-expanded', String(!expanded));
ppNote.hidden = expanded;
});
})();
</script>Кнопка имеет type="button", поэтому не выполняет неожиданную отправку, если окажется внутри формы. aria-expanded сообщает состояние, aria-controls связывает действие с пояснением. Идентификаторы должны быть уникальными на странице: при повторении примера меняйте оба ID и соответствующие ссылки в коде.
Проверьте публикацию
Tilda выполняет код T123 на опубликованной странице, поэтому проверяйте там. Найдите кнопку через Tab и нажмите Enter или Space: пояснение должно раскрываться и скрываться. Проверьте мышь, затем мобильное касание и читаемость текста.
Проверьте, что после действия не происходит перехода на начало страницы и не уходит заявка. Если вставка не работает, найдите ошибку в консоли и сравните ID. Для отката удалите собственную вставку; не изменяйте штатный код формы ради учебного примера.
Стандартные элементы и их назначение описаны в MDN, а ограничения собственных вставок — в справке Tilda. Для готового раскрытия вопросов проще использовать подходящий базовый аккордеон.
Продолжите с видимым фокусом и аккордеоном. Для самостоятельного обучения изучите актуальные программы и условия в разделе курсов Perkova&Perkova.