Как сделать одиночную ссылку или кнопку?

наверх

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

Кнопка наподобие такой часто носит рекламный характер, например, «Кликни, чтобы купить» или «Кликни для загрузки» (ссылка на интересную статью).

Как правильно сделать такую кнопку? Как и многое в web-разработке, правильного или неправильного ответа нет. Ниже приведено несколько различных методов создания такой кнопки.

Одиночный Anchor Tag

Возможно, это самый просто способ сделать кнопку:

<a href="#">Let's Do This</a>

Это простой якорь без всякой обертки вокруг тега. Никаких html элементов вокруг ссылки. Не самый элегантный вариант, но зато будет работать.

Ссылка внутри параграфа

Некоторые люди не любят голые ссылки, поэтому вы можете обернуть ее в тег <p></p>:

<p><a href="#">Let's Do This</a></p>

Выглядит так себе, не так ли? Я не думаю, что это очень плохо, но это может причинит некоторые проблемы. Лучше все-таки сделать без обертки.

Одиночный пункт неупорядоченного списка

По некоторым причинам, я обычно пишу следующий код:

<ul class="button">
	<li><a href="#">Let's Do This</a></li>
</ul>

Я узнал, что навигационные ссылки лучше стилизовать, как неупорядоченные списки и поэтому я использовал этот метод для одиночной ссылки. Но что это за список, если тут всего одна ссылка?

<button> элемент

Это, вероятно, наиболее популярный метод:

<button>Let's Do This</button>

Это намного правильней с точки зрения семантики и выглядит намного приятней, согласны?

Минус лишь в том, что если не работает JavaScript или кнопка не привязана к форме, то тогда ничего происходить не будет. Но я думаю, что <button> элемент великолепная часть функционала, которая работает, если JavaScript включен. И в этом случае мы можем добавлять кнопку динамически через JavaScript. Люди с отключенным JavaScript-ом просто не увидят кнопку.