Жми сюда!

				<a href="http://example.com/">Ссылка</a>
			

• Основа гипертекста, лучший друг поисковика
• Переход между документами самым явным образом
• Привычна и удобна, как ничто другое

Главное — адрес

				<a href="http://example.com/#section-3">Раздел №3</a>
			

Ссылка на страницу и объект на ней

				<section id="section-3">
				    …
				</section>
				
			

				<a href="http://example.com/#section-3">Раздел №3</a>
			

Ссылка на страницу и объект на ней

				<section>
				    <a name="section-3"></a>
				</section>
			

				<ul>
				    <li><a href="/">Главная</a></li>
				    <li><a>Каталог</a></li>
				    <li><a href="/about/">О компании</a></li>
				</ul>
			

Чисто логическая ссылка, без адреса

Если у ссылки нет адреса, внутреннего, внешнего или логического, то это не ссылка: не <a href=""> и даже не <a>

Ведь пользователь может…

• Кликнуть с модификатором и открыть в фоновой вкладке
• Перетянуть на панель закладок или на рабочий стол
• Кликнуть правой кнопкой и скопировать адрес
• Взаимодействовать с помощью расширений и программ

Когда ссылка — ссылка

				<a href="#anchor">Псевдоссылка</a>
			

• Переход по якорю к объекту в пределах той же страницы
• Изменение стилей объекта с помощью псевдокласса :target
• Любое взаимодействие с конкретным блоком на странице

Главное для всего типа — локальность

				<a href="http://example.com/login"
				    onclick="login()">Войти
				</a>
			

• Действие на странице с реальным фолбеком
• При отсутствии JavaScript всё работает по ссылкам
• Попап регистрации, асинхронный запрос…

				<span class="pseudo-link">Псевдонессылка</span>
			

• Нет адреса и фолбека — внутреннего или внешнего
• Становится очень похожей на кнопку, но тише и проще
• Подстановка текста в форму, выпадушки, лайки…

Существует договорённость…

				.pseudo-link {
				    border-bottom:1px dotted;
				    }
			

• Стиль dotted выглядит чище, чем dashed
• Цвет можно не указывать, он наследуется от текста
• Можно рисовать пунктир картинкой и даже градиентом

				<input type="submit" value="Кнопка">
				<input type="button" value="Кнопка">
				<input type="image" src="…">
			

• Действия, связанные с отправкой данных, некоторым процессом
• Самый привычный системный элемент: ДА или НЕТ?!
• Делать лапу cursor:pointer совсем не нужно

				<button type="button">Кнопка</button>
				<button type="submit">Кнопка</button>
				<button type="reset">Кнопка</button>
			

Универсальный элемент для использования вне форм

				<a href="#" onclick="fire()">
				    Бах!
				</a>
			

Берём, значит, ссылку и вешаем обработчик

				<a href="javascript:fire()">
				    Бдум!
				</a>
			

Можно задействовать пустой атрибут

				<a href="javascript:void(0)" onclick="fire()">
				    Ды-дыщ!
				</a>
			

Или даже всё сразу!

				<span class="b-link b-link_pseudo_yes i-bem"
				      onclick="return {"b-link":{}}">
				    <span class="b-link__inner">ещё</span>
				</span>
			

С виду правильно, но есть настоящая ссылка «Все сервисы»

				<a href="http://www.google.ru/intl/ru/options/"
				   onclick="gbar.tg(event,this)" aria-haspopup="true">
				    <span id="gbztms1">Ещё</span>
				</a>
			

Всё очень правильно, есть даже ARIA для выпадушки

				<a class="rhcFooterSelectorButton"
				   href="#" aria-haspopup="true" aria-expanded="false"
				   aria-owns="u5urfy_47" aria-controls="js_5">
				   Ещё<i class="img sp_4yc81c sx_3f849e"></i>
				</a>
			

Решётка, то есть, простите, диез…

				<a href="javascript:void(0);" class="mlr-psd_lnk">
				    <u id="mailru-webagent">Показать все поля</u>
				    <i class="mr_arrow"><b></b></i>
				</a>
			

Void!

				<a data-action="mailbox.check">
				    <img class="b-ico b-ico_check-mail" src="…">
				    <span class="b-toolbar__item__label">Проверить</span>
				    <span class="b-toolbar__item__selected …
				</a>
			

Сссылка-нессылка

				<div class="T-I J-J5-Ji nu T-I-ax7 L3" role="button"
				     tabindex="0" style="-webkit-user-select:none"
				     aria-label="Refresh" data-tooltip="Refresh">
				    <div class="asa">
				        <span class="J-J5-Ji ask">&nbsp;</span>
				    </div>
				</div>
			

				<input type="submit"
				       class="b-mail-button__button" tabindex="10">
			

Всё хорошо

				<a class="button-a js-send" tabindex="1"
				   href="#" role="submit" title="Ctrl+Enter"
				   id="mailru-webagent-gen-35">
				   Отправить
				</a>
			

Дали в руки якоря…

				<div id=":ga" class="T-I J-J5-Ji Bq nS T-I-KE L3"
				     role="button" tabindex="2"
				     style="-webkit-user-select:none">
				    <b style="-webkit-user-select:none">Send</b>
				</div>
			

Грубо и прямо

				<button id="send_post"
				     onclick="wall.sendPost()">Отправить</button>
				<span class="post_like_link fl_l"
				     id="like_link4483_747">Мне нравится</span>
			

				<a class="fl_r pv_close_link"
				     onclick="Photoview.hide(0)">Закрыть</a>
			

				<a href="#" class="tweet-button btn">Твитнуть</a>
			

				<a href="#" class="with-icn js-toggle-rt">
				    <span class="undo-retweet" title="Отменить ретвит">
				        Ретвиты</span>
				    <span class="retweet" title="Ретвитнуть">
				        Ретвитнуть</span></b></a>
			

Вадим Макеев, Opera Software

• pepelsbey.net
• @pepelsbey и @ODevRel_ru
• pepelsbey@opera.com

Презентация: pepelsbey.net/pres/push-it