HTML: Как сделать стрелочку?

Сегодня утром мне задали интересный вопрос: «Как на сайте сделать стрелочки?»

Решение 1. (не фонтан)

Можно с дизайнерского макета вырезать картинку с фоном или прозрачную и вставить её прямо на страницу. Это изображение можно поставить в текст через тег img. В чем подвох?
Такая картинка будет дополнительным HTTP-запросом, а хорошие веб-разработчики не любят лишних обращений к серверу.
Можно поместить картинку в спрайт и вместо img использовать какой-нибудь другой тег.

Решение 2. (семантичное)

Любая стрелочка на что-то указывает.
Если это ссылка, то она подсказывает, что дальше будет переход на другую страницу или будет что-то более интересное. А в математической логике есть символ следования. На мой взгляд, для таких интерфейсных решений он подходит лучше всего.

Где-то я уже разбирался с этими символами, но забыл где. Теперь у меня будет шпаргалка.

В таблице специальных символов HTML предусмотрены следующие стрелочки:

Обычные стрелки:

←  ← Стрелка влево  (←)
↑  ↑ Стрелка вверх (↑)
→  → Стрелка вправо (→)
↓  ↓ Стрелка вниз (↓)
↔  ↔ Двунаправленная стрелка (↔)
↵  ↵ Стрелка вниз и влево (↵)
(очень напоминает знак на клавише enter или перевод строки)

Двойные стрелки:

⇐  ⇐ Двойная стрелка влево (⇐)
⇑  ⇑ Двойная стрелка вверх (⇑)
⇒  ⇒ Двойная стрелка вправо (⇒)
⇓  ⇓ Двойная стрелка вниз (⇓)
⇔  ⇔ Двойная стрелка влево и вправо (⇔)

WDG документация

Кстати, если символы не отображаются — нужно сменить кодировку на UTF-8

<meta http-equiv="Content-Type"
      content="text/html; charset=utf-8"/>

или

<meta charset="UTF-8">

Leave a Reply