Как сделать кнопку ссылкой
Оформлять ссылку как стандартную кнопку нежелательно: ссылка по определению указывает на ресурс, а нажатие кнопки обычно инициирует действие. Но если задача возникла, имеет смысл хотя бы решать её правильно.
Правильно
Синтаксически корректное («валидное») и кроссбраузерное решение — заключить кнопку в простейшую форму. В атрибут action формы следует поместить URL-адрес, на который должна вести «кнопка-ссылка». Для работы формы в устаревших браузерах (IE8 и ниже) следует добавить кнопке атрибут type=:
<form action="/example/">
<button type="submit">Кнопка-ссылка</button>
</form>
«Кнопка-ссылка» в примере ведёт на страницу с адресом /example/.
Если требуется открывать ссылку в новом окне или фрейме, можно, как и у обычных ссылок, использовать атрибут target элемента FORM:
<form action="/example/" target="_blank">
Демо
Строка запроса
Строка запроса — часть URL-адреса после первого вопросительного знака, содержащая GET-параметры в виде пар name=value (имя=значение), разделённых символом &.
Если адрес, на который должна указывать ссылка, содержит строку запроса, следует для каждого GET-параметра добавить в форму скрытое поле с соответствующими атрибутами name и value:
<form action="/example/">
<input type="hidden" name="foo" value="bar" />
<input type="hidden" name="lorem" value="ipsum" />
<button type="submit">Кнопка-ссылка</button>
</form>
Данная форма ведёт на страницу /example/?foo=bar&lorem=ipsum.
Chromium/
В браузерах на основе движков Chromium/
<form action="/example/">
<button type="submit">Кнопка-ссылка</button>
</form>
приведёт на адрес /example/? вместо ожидаемого /example/.
Кент Тамура (Kent Tamura) из команды разработчиков Chromium говорит, что это соответствует текущим спецификациям HTML и URL.
Обойти это можно с помощью автоматического серверного перенаправления (редиректа) с адреса, оканчивающегося вопросительным знаком, на такой же адрес без воспросительного знака.
Ограничения по сравнению с реальной ссылкой
- У пользователя нет возможности узнать, куда ведёт ссылка-кнопка, до щелчка по ней.
- Пользователь не может по своему желанию открыть ссылку-кнопку в новой вкладке или в новом окне.
Неправильно
Кнопка внутри ссылки
Нередко элемент BUTTON просто помещают внутрь ссылки:
<a href="/example/"><button>Кнопка-ссылка</button></a>
Это работает во всех современных браузерах, но согласно HTML5 это синтаксически некорректно («невалидно»): ссылка не должна содержать интерактивные элементы. Кроме того, такая ссылка не работает в Internet Explorer (IE) ниже 9-й версии.
Демо
Кнопка с JS-обработчиком щелчка
Порой используется кнопка с JavaScript-обработчиком события щелчка:
<button>Кнопка-ссылка</button>
Но такая кнопка не работает при выключенном JavaScript, её невозможно открыть в новой вкладке или новом окне, и возможны проблемы с индексацией поисковиками, не исполняющими JavaScript-код.
Демо
Нестандартные расширения CSS
Описанные ниже возможности нестандартные, и использовать их не рекомендуется.
Firefox и Chromium
Firefox версий 81 и ниже и браузеры на основе движка Chromium (Chrome, Opera 15+, Vivaldi, Яндекс.Браузер) прошлых версий поддерживали нестандартные префиксированные варианты свойства appearance, значение button которых позволяло оформить как кнопку произвольный элемент, в том числе ссылку:
A.example {
-moz-appearance: button; /* Firefox */
-webkit-appearance: button; /* Chromium */
}
Демо
Мелодичная инструментальная музыка
Internet Explorer, Edge и спецификация
В браузерах Microsoft — Internet Explorer (IE) и Edge — возможность недоступна.
В спецификации CSS Basic User Interface Module Level 4 значение button свойства appearance не предусмотрено.
Разница между кнопками и ссылками в UX и SEO
Кнопки часто просят ставить вместо ссылок просто потому, что такой элемент дизайна нравится больше. В этом материале мы поговорим о разнице между кнопками и ссылками сразу в двух плоскостях — UX и SEO.
Кнопки и ссылки в UX
В UX у ссылок и кнопок разный функционал. Ссылки —
Правильная ссылка оформляется с тегом <a>, атрибутом href и выглядит как текст без плашки. Например, вот так в html коде выглядит внутренняя ссылка одной из публикаций нашего блога.
<p>Напоминаем, что в 2020 году в <a href=»https://nowmedia.ru/blog/seo-teper-i-v-instagram/» target=»_blank»> Instagram США, Канады и нескольких европейских странах заработал поиск по ключевым словам </a></p>
Кнопка отвечает за какое-либо действие: отправить товар в корзину, прикрепить документ, согласиться, отказаться, открыть форму и пр. Более того, кнопка может отображать состояние формы, будучи активной или неактивной, но никогда не переводит пользователя на другую страницу, сайт или место в документе.
Кнопки оборачивают атрибутом <button> и оформляют плашкой с прямыми или скругленными углами. И вот как кнопка выглядит на сайте и в html.
Почему это так важно? Потому что сайты мы делаем не для себя, а для пользователей. Интернет-магазины — для покупателей, b2b ресурсы — для инвесторов и дистрибьюторов, государственные платформы — для граждан. И все они привыкли к функционалу кнопок и ссылок. У пользователей давно сформировались определенные паттерны, и чем больше этих паттернов учитывается в интерфейсе, тем удобней и дружелюбнее воспринимается сайт.
Кнопки и ссылки в SEO
С SEO еще интереснее…В документах расширенной оптимизации Google черным по белому написано: «Роботы Google могут переходить только по ссылкам в корректно оформленных тегах <a> с действительными URL».
Другие форматы ссылок не поддерживаются. Это значит, что обернутая в <button> ссылка не сканируется, не обрабатывается, а значит и не передает вес страницы-донора странице-рецепиенту. То есть все усилия по внутренней оптимизации — мимо.
Совсем недавно эту тему затронул и Джон Мюллер, которому задали вопрос про специфику сканирования ссылок с button и a href. Сотрудник Google подтвердил, что кнопки не имеют URL-адреса и не являются ссылками, а значит поисковик не сканирует их и не обрабатывает каким-либо другим способом.
Что в очередной раз подтверждает правило — не перемудри! И даже если ссылки кажутся слишком простыми и скучными, у поисковиков и пользователей совсем другое мнение.
Дальше: Про заказные видеоотзывы и здоровый скептицизм
Как создать HTML-кнопку в качестве ссылки
Существует множество навыков, которые вы освоите, изучая HTML для начинающих. Тема HTML и то, как сделать гиперссылку, иногда сбивает людей с толку, но есть много доступных вариантов, если вы хотите добавить ссылку HTML-кнопки.
Возможно, вы захотите добавить ссылки в виде HTML-кнопок, поскольку они облегчают вашим посетителям навигацию по веб-сайту.
Добавив кнопку HTML в качестве ссылки, вы можете улучшить архитектуру своего веб-сайта, что может быть лучше для целей SEO.
Когда вы создаете свой веб-сайт, вам следует подумать об использовании гиперссылки HTML для улучшения вашей архитектуры. Вы можете использовать для создания прямых пользователей на новую вкладку, ту же страницу или даже новое окно, в зависимости от того, как вы настроили кнопку.
Если вы хотите добавить кнопку со ссылкой в формате HTML, какие варианты доступны? Хотя это может показаться сложной техникой оформления веб-страницы, на самом деле это довольно просто.
Узнайте больше о том, что вам нужно сделать, если вы хотите, чтобы ваш веб-сайт был максимально привлекательным для поисковых систем и посетителей, и постарайтесь избежать нескольких распространенных ошибок HTML.
Есть несколько причин, по которым вы можете захотеть добавить HTML-ссылки, но главная причина в том, что они лучше для поисковых систем и ваших посетителей. Есть несколько примеров использования, когда добавление HTML-ссылок на ваш веб-сайт может быть полезным.
Переход к другим областям веб-сайта
Возможно, вы захотите облегчить своим посетителям переход к другим областям веб-сайта с помощью элемента HTML. Например, вы можете добавить кнопку или вкладку, которая перенаправляет посетителей на вашу страницу контактов.
Или вы можете добавить кнопку, которая направляет посетителей к определенному продукту или услуге. Кнопка облегчает вашим посетителям поиск того, что они ищут.
Это может быть особенно полезно, когда кнопка хорошо контрастирует с цветом фона на вашем сайте, чтобы она лучше выделялась. Другими элементами навигации, на которые следует обратить внимание при разработке тегов кнопок, являются размер и стиль шрифта, а также их расположение на странице.
Переход на другой веб-сайт
Если вы считаете, что существует другой веб-сайт с полезной информацией, вы можете добавить кнопку, которая перенаправляет посетителей на новую страницу.
Возможно, вы даже захотите включить HTML-ссылку в сообщения электронной почты, которые вы отправляете своим клиентам.
Таким образом, вы можете заставить их перейти на ваш сайт или другую страницу. Или вы можете добавить кнопку, которая направляет посетителей на страницу в социальной сети, связанную с вашей компанией.
Архитектура веб-сайта Boost
Если вы размещаете ссылки на своем веб-сайте, вы также можете включить архитектуру веб-сайта. Поисковые системы могут увидеть, что вы разместили кнопки на своем веб-сайте, и это может повысить ваш рейтинг в результатах поиска. Это может сделать ваш сайт более заметным.
Добавить обратные ссылки
Возможно, вы захотите включить обратные ссылки на определенные места. Обратные ссылки полезны, потому что они могут помочь вам повысить авторитет вашего домена. Если вы повысите авторитет своего домена, вы сможете улучшить результаты своей кампании по поисковой оптимизации.
Вот несколько примеров причин, по которым вы можете захотеть разместить HTML-ссылку на своем веб-сайте. Вы можете значительно облегчить веб-сайтам и пользователям поиск того, что они ищут.
Если вы хотите добавить ссылку-кнопку на свои веб-страницы, чтобы направлять посетителей на желаемый целевой URL, как вы можете это сделать?
Оживите свой бренд с помощью собственного веб-сайта. Спроектируйте с нуля, подключите домен, проанализируйте трафик и оптимизируйте для SEO.
Зарегистрироваться
Вы можете использовать этот код, чтобы добавить ссылку на Mailchimp в свой контент. Вы можете поэкспериментировать с различными стилями, чтобы добавить различные типы ссылок к содержимому, упрощая пользователям переход на разные сайты и страницы.
Обтекание кнопок
Вы также можете захотеть обернуть текст вокруг кнопки, чтобы пользователям было проще понять, что она делает. Есть разные способы сделать это, и вы можете поиграть с размерами, чтобы получить правильный текст.
После ввода кода кнопки код обтекания текстом может выглядеть примерно так:
Вы можете использовать числа, чтобы изменить размеры обтекания текстом в соответствии с вашими потребностями.
Это отличный вариант, если вам нужно поделиться дополнительной информацией о том, что делает кнопка, или если вы хотите изменить стиль кнопки.
Использование JavaScript
Несмотря на то, что существует множество различных способов добавления кнопки с помощью HTML в Интернете, вы можете обнаружить, что проще добавить кнопку на свой веб-сайт с помощью кода JavaScript.
Некоторые шаги, которые необходимо выполнить, если вы хотите использовать JavaScript для добавления кнопки с надписью «Нажмите здесь», включают:
- Сначала вы вызываете document.createElement(«button»). После этого вам нужно присвоить возвращаемый элемент переменной, которую вы назовете btn.
- После этого вы назначите строку «Нажмите здесь» функции или свойству btn.innerHTML.
- Наконец, используйте document.body.appendChild(), чтобы связать новый элемент кнопки с конкретным
Попробуйте протестировать приведенный выше код. Может быть проще создать кнопку с помощью JavaScript, но вы также можете поиграть с некоторыми другими параметрами.
Если вы сможете применить некоторые из этих советов для своего веб-сайта, вы сможете повысить коэффициент конверсии и улучшить видимость, повысив рейтинг результатов поиска. Конечно, вы можете сделать своих посетителей счастливыми, если упростите им поиск того, что им нужно.
Проводите посетителей по сайту с помощью HTML-кнопок
Очевидно, что если вы добавите кнопку со ссылкой HTML, посетителям будет проще найти то, что им нужно. Это может сделать их счастливыми, а вам будет проще повысить коэффициент конверсии и достичь своих целей. Если вы хотите упростить получение максимальной отдачи от своего HTML-кода, вам нужно использовать Mailchimp, чтобы помочь вам.
С Mailchimp вы получаете доступ к большому количеству функций, которые могут помочь вам с вашими HTML-шаблонами электронной почты или HTML-форматами электронной почты.
Помните, что вам необходимо включить ссылки на ваш веб-сайт, потому что это также может улучшить архитектуру вашего веб-сайта. Облегчив своим посетителям поиск того, что им нужно, вы можете повысить рейтинг результатов поиска и привлечь больше людей на свой веб-сайт.
Подумайте о том, чтобы поиграть с несколькими из вышеперечисленных вариантов добавления кнопок на ваш веб-сайт, особенно со ссылками. Затем посмотрите, стало ли вашим посетителям легче ориентироваться на вашем сайте. Это может иметь значение в вашей цифровой маркетинговой кампании.
Оживите свой бренд с помощью собственного веб-сайта. Спроектируйте с нуля, подключите домен, проанализируйте трафик и оптимизируйте для SEO.
Зарегистрироваться
Как создать HTML-кнопку, действующую как ссылка | by W3docs
Иногда нам нужно создать HTML-кнопку, которая действует как ссылка (т. е. при нажатии на нее пользователь перенаправляется на указанный URL-адрес).
Есть несколько методов, мы представим 3 из них. Выберите один из следующих способов, чтобы добавить ссылку на кнопку HTML.
Хорошо. Пойдем!
а) В тег HTML
Пример
Название документа
Попробуйте сами
Это может не сработать, если кнопка находится внутри тега
b) Для тега внутри HTML-элемента
Попробуйте сами
Ссылки не будут работать при отключенном JavaScript, и поисковые системы могут игнорировать такие вид ссылок.
а) Атрибут действия
Название документа
Попробуйте сами
Чтобы открыть ссылку в новой вкладке, добавьте атрибут target=»_blank».
Название документа
Попробуйте сами
Поскольку формы нет и данные не отправлены, это может быть семантически неверно. Тем не менее, эта разметка действительна.
b) Атрибут формы HTML5.
Пример
Название документа