Ссылки внутри страницы подчеркнутые слова в тексте: О ссылках в вёрстке

Содержание

О ссылках в вёрстке

Гиперссылка — базовый элемент экранной вёрстки.

Гиперссылка, или просто ссылка, выглядит как цветная подчёркнутая надпись, которая при нажатии мыши открывает другую страницу в том же самом окне браузера. Ссылка может также указывать на отдельный элемент страницы. Но нежелательно ссылаться на элементы уже открытой страницы, так как это приводит к дезориентации читателя — он-то думает, что попал на другую страницу. В исключительных случаях ссылка открывает новое окно или вкладку.

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

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

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

Базовые элементы вёрстки
Заголовок
Текст
Иллюстрация
Элемент управления
Гиперссылка
Подпись

Ссылка должна быть информативна, её текст должен обозначать, что за ней скрывается. Выделенные в ссылке слова бросаются в глаза первыми в сплошном тексте. Поэтому желательно, чтобы для принятия решения о переходе было необязательно читать текст вокруг ссылки.

Что плохого в нарушении этих правил, объясняется тут, там и здесь.

А. Лебедев. Секреты хорошего гипертекста
О расстановке ссылок в новостях

Ссылка — это вид текстового выделения, а в бюро применяется принцип «выделение склоняется». Предлоги, союзы и другие слова, которые обычно приклеиваются неразрывными пробелами, включаются в ссылку

(и выделяются) вместе со словами, к которым они относятся. Например, ссылка будет стоять на всём словосочетании «в совете», а не только со слова «совет», как диктует логика программиста.

Ссылка с трудом терпит переносы. Многострочные ссылки плохо выглядят, как любые выделенные надписи и заголовки:

При переносе в сплошном тексте разные слова ссылки могут оказаться в разных сторонах страницы, и тогда становится сложно определить, относятся ли они к одной или разным ссылкам:

Как свёрстано

Как воспринимается

Поэтому желательно сокращать длинные заголовки новостей, а при выделении частей текста не давать словам внутри ссылок переноситься на разные строки:

Как ко всем другим элементам, в отношении ссылок действует рекомендация «смешать комки»:

Плохо

Графомания, на первый взгляд, отражает мелодический полифонический роман, но не рифмами. Нарративная семиотика откровенна. Стилистическая игра отражает холодный цинизм, именно поэтому голос автора романа не имеет никаких преимуществ перед голосами персонажей. Структура просветляет диалогический контекст, и это придает ему свое звучание, свой характер.

Хорошо

Графомания, на первый взгляд, отражает мелодический полифонический роман, но не рифмами. Нарративная семиотика откровенна.

Полифонический роман
Откровенная семиотика
Об авторе романа
Голоса персонажей

Хорошо организованная вёрстка состоит из однородных блоков подобных элементов:

Ссылки могут быть сгруппированы в строку — горизонтальное меню:

Альфа Бета Гамма Дельта Эпсилон

Или в вертикальный список:
Полифонический роман
Откровенная семиотика
Об авторе романа
Голоса персонажей
Стилистическая игра

Минимально допустимое расстояние между соседними ссылками, как между элементами управления — примерно два пробела:

См. также: Альфа Бета Гамма

В вертикальных списках действуют те же правила. Дополнительные расстояния между ссылками помогают отличить многострочные ссылки друг от друга и не промахнуться мышью или пальцем.

- См. также:
- Альфа
- Бета —
  гамма
- Эпсилон

Ссылка — это выделение
О знаках препинания в выделении
Письмо Илье Бирману

P. S.

Это был понедельничный совет о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

text-decoration | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6. 0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Значение по умолчанию	none
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Синтаксис

text-decoration: [ blink || line-through || overline || underline ] | none | inherit

Значения

blink: Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию.
line-through: Создает перечеркнутый текст (пример).
overline: Линия проходит над текстом (пример).
underline: Устанавливает подчеркнутый текст (пример).
none: Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
inherit: Значение наследуется у родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-decoration</title>
  <style>
   a { 
    text-decoration: none; /* Убираем подчеркивание у ссылок */
   }
   a:hover { 
    text-decoration: underline; /* Добавляем подчеркивание 
                                   при наведении курсора мыши на ссылку */
   }
  </style> 
 </head> 
 <body>
  <p><a href="1.html">Стратегическое нападение</a></p>
 </body>
</html>

Объектная модель

[window. ]document.getElementById(«elementID»).style.textDecoration

[window.]document.getElementById(«elementID»).style.textDecorationBlink

[window.]document.getElementById(«elementID»).style.textDecorationLineThrough

[window.]document.getElementById(«elementID»).style.textDecorationNone

[window.]document.getElementById(«elementID»).style.textDecorationOverLine

[window.]document.getElementById(«elementID»).style.textDecorationUnderline

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit. Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена.

Текст

CSS по теме

text-decoration

Статьи по теме

Свойства ссылок
Свойства текста
Ссылки без подчеркивания

Рецепты CSS

Как добавить подчеркивание к заголовку?
Как изменить вид ссылки при наведении на нее курсора мыши?
Как убрать подчеркивание у ссылок?

Должны ли все ссылки быть подчеркнуты?

Вторник, 1 мая 2007 г.

Ссылки на веб-страницы являются основным средством навигации пользователей по веб-сайтам. Если пользователи не замечают или не думают, что ссылки кликабельны, они могут не использовать ссылки.

Подчеркивание плюсов

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

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

Является ли текст кликабельным ?
Или это только подчеркивается?

Минусы подчеркивания

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

Сигнал выбора ссылки должен быть однозначным; его также следует последовательно использовать на всем сайте.

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

На практике

В приведенном ниже примере более крупный текст заголовка «Шаблоны и примеры» выделен синим цветом, и ему предшествует более крупный маркер. В нашем тестировании удобства использования мы обнаружили, что люди без колебаний нажимали на текст «Шаблоны и примеры».

Этот подход был реализован на домашней странице Usability.gov, потому что она насыщена текстом; кроме того, подчеркивание всех ссылок снижает удобочитаемость сайта. Когда мы протестировали сайт с пользователями, мы обнаружили, что текст заголовка с увеличенным маркером и синим текстом обозначает кликабельность.

Заключение

Ссылки должны быть организованы и представлены таким образом, чтобы пользователи могли интуитивно чувствовать «кликабельность». Конкретное решение, подчеркнутое или нет, менее важно, чем постоянное использование того или другого. Например, если подчеркивание нежелательно, это можно сделать с помощью (несвязанного) маркированного текста под заголовком с синим текстом.

Ссылки

Bailey, RW (2000, октябрь). Доступность ссылок .

Бейли Р.В., Кояни С. и Налл Дж. (2000 г., 7 сентября). Юзабилити-тестирование нескольких веб-сайтов с медицинской информацией, технический отчет Национального института рака. Бетесда, Мэриленд.

Кларк, Дж. (2002). Тип и цвет. Кларк Дж. Создание доступных веб-сайтов (стр. 199–218). Индианаполис, Индиана: Новые всадники.

Эванс, М. (1998). Веб-дизайн: руководство для эмпириков. Неопубликованная магистерская диссертация. Сиэтл: Вашингтонский университет.

Фаркас, Д.К. и Фаркас, Дж. Б. (2000). Рекомендации по проектированию веб-навигации. Технические коммуникации, 47(3), 341-358.

Линч, П.Дж. и Хортон, С. (2002). Руководство по веб-стилю (второе издание). Нью-Хейвен, Колорадо: Издательство Йельского университета.

Нильсен, Дж. (1990, март). Искусство навигации по гипертексту. Сообщения ACM, 33(3), 296-310.

Спул, Дж. М., Скэнлон, Т., Шредер, В., Снайдер, К., и ДеАнджело, Т. (1997). Юзабилити веб-сайта: руководство для дизайнера. Северный Андовер, Массачусетс: разработка пользовательского интерфейса.

Таллис, Т.С. (2001). Извлеченные уроки веб-юзабилити. Технический отчет Центра прикладных технологий Fidelity. Верные Инвестиции.

Как использовать подчеркнутый текст для улучшения взаимодействия с пользователем — Smashing Magazine

10 минут чтения
UX, Удобство использования, Доступность
Поделиться в Twitter, LinkedIn

Об авторе

Ник Бабич — разработчик, технический энтузиаст и любитель UX. Последние 10 лет он работал в индустрии программного обеспечения, специализируясь на… Больше о Ник ↬

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

( Эта статья поддерживается Adobe .) Подчеркивание — это горизонтальная линия непосредственно под частью текста. В нашем повседневном опыте мы подчеркиваем, чтобы выделить ключевые части текста, иногда рисуя подчеркивание вручную под печатным текстом. Но подчеркивания занимают свое место в мире цифрового дизайна. На самом деле, подчеркнутый текст стал одной из самых распространенных и узнаваемых особенностей нашего онлайн-опыта. Когда мы видим подчеркнутое слово или предложение на веб-странице, мы сразу же предполагаем, что это ссылка.

В этой статье я объясню концепцию подчеркивания и дам несколько советов о том, как использовать его для улучшения работы в Интернете.

Исторический контекст

Текст подчеркивался задолго до изобретения Интернета. Он использовался полиграфистами для выделения важных частей текста:

(Большой предварительный просмотр) (Изображение предоставлено: Marcin Wichary)

Он использовался в рекламе:

Реклама Wrigley’s Spearmint (1915)

Мы находим его даже в ближайшем окружении. :

Некоторые дорожные знаки с важной информацией содержат подчеркнутый текст. (Большой превью) (Изображение предоставлено Тайлером Б.)

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

Больше после прыжка! Продолжить чтение ниже ↓

Когда Тим Бернерс-Ли впервые представил концепцию Всемирной паутины в 1991 году, он заявил: «[Всемирная паутина] состоит из документов и ссылок». С тех пор ссылки стали фундаментальным элементом онлайн-опыта, связующим звеном, скрепляющим сеть.

Набор инструментов первых веб-дизайнеров был слишком ограничен — только простые шрифты и ограниченное количество цветов (цветные мониторы отображали только 16 цветов, и многие из них были черно-белыми). Но выделение ссылок другим стилем было необходимо, чтобы первые пользователи могли понять, какие элементы на странице важны. Самым простым решением было подчеркнуть. С тех пор подчеркивание текста стало стандартным украшением гиперссылок HTML. И хотя за последние 30 лет дизайнеры пробовали разные стили для ссылок, многие веб-дизайнеры по-прежнему предпочитают подчеркивание.

Гиперссылка, подчеркнутая синим цветом, является одним из наиболее широко понимаемых соглашений в Интернете. (Большой предварительный просмотр) (Изображение предоставлено Cern)

Подчеркнутые ссылки имеют несколько основных преимуществ:

Знакомство
Подчеркивание является одним из наиболее широко известных соглашений в Интернете. Подчеркивание дает сильно воспринимаемую возможность кликабельности — подавляющее большинство пользователей понимают, что подчеркнутый текст — это ссылка.
Scannabilty
Подчеркнутый текст — отличная визуальная подсказка, гарантирующая видимость ссылки при сканировании текста. Когда мы сканируем страницы по вертикали, любая горизонтальная линия пересекает линию нашего обзора. Подчеркивание направляет пользователей к важной информации при беглом просмотре.
Специальные возможности
Когда для различения кликабельных элементов используется только цвет, у некоторых групп пользователей (например, у дальтоников) могут возникнуть проблемы с идентификацией ссылок. Согласно WCAG 2.0, цвет не должен быть единственным визуальным индикатором потенциального действия. Если вы хотите, чтобы ваш веб-сайт был доступным, вам придется добавить к ссылкам еще одну визуальную подсказку, и подчеркивание является логичным выбором.

Несмотря на все свои преимущества, подчеркивание может в некоторых отношениях мешать работе пользователя:

Удобочитаемость
Прерывистый характер подчеркивания отлично подходит для беглого просмотра, но может повлиять на удобочитаемость. Исследование Гамбургского университета показывает, что подчеркивание отрицательно влияет на читабельность текста. Основываясь на исследовании, избегайте подчеркивания, когда основной целью содержания является понимание.
Эстетика
Подчеркивания добавляют визуальный шум к тексту и общему дизайну. Большое количество подчеркиваний, разбросанных по всему блоку текста, может создать перегруженный вид.

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

Не подчеркивайте текст, который не является ссылкой

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

Будьте краткими

Старайтесь, чтобы связанные фразы были короткими, от трех до пяти слов. Все, что больше, загромождает текст.

Сделать текст привязки осмысленным

Текст привязки — это интерактивный текст в ссылке. Оно должно быть описательным — пользователи должны иметь возможность предсказать, что они получат, когда нажмут на ссылку. По этой причине избегайте якорного текста, такого как «нажмите здесь», потому что он почти ничего не говорит о содержании ссылки и заставляет пользователей искать дополнительную информацию о том, на что именно они будут нажимать. Ссылки «Нажмите здесь» также делают веб-сайт менее доступным для людей, использующих программы чтения с экрана. Большинство программ чтения с экрана пишут «ссылка» перед каждой ссылкой. Например, ссылка «автомобили» будет прочитана JAWS как «ссылка на автомобили». Таким образом, вы можете ожидать, что JAWS будет читать ссылку «нажмите здесь» как «ссылка, нажмите здесь», что совершенно неинформативно.

Согласно «Руководству для начинающих поисковых систем» Google, крайне важно помещать слова, предвосхищающие целевую страницу, в начале текста ссылки.

Само по себе «нажмите здесь» совершенно бессмысленно. Вторая ссылка устанавливает ожидание того, что пользователь получит, когда нажмет на ссылку. (Большой предварительный просмотр)

Создание ссылок последовательно

Согласованность — это ключ к обучению пользователей тому, как выглядят ссылки на вашем веб-сайте. Не должно быть ситуации, когда некоторые ссылки на вашем сайте подчеркнуты, а некоторые нет. Различные визуальные обозначения, используемые на разных страницах, могут легко запутать посетителей. Выберите дизайн ссылки и придерживайтесь его.

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

Все ссылки в статье подчеркнуты (см. пример «David de Rueda») (Большой предварительный просмотр)

Тем временем CNN Sport использует цвет для визуального различения ссылок:

Все ссылки в статье визуально разделены другим цветом (см.

«ЧИТАЙТЕ: Внутри Кодокана — духовного дома дзюдо»). (большой превью)

Избегайте сбоев дессендера

Сбой дессендера, пожалуй, вторая по значимости проблема, вызванная подчеркиванием (после беспорядка). Это происходит, когда символы, содержащие нисходящие элементы (например, строчные p, g, j, y и q), не учитываются, а подчеркивание касается форм букв. Это может привести к загромождению, некрасивому виду и сделать текст менее разборчивым.

Нисходящие элементы y, g и p превращаются в подчеркивание, что ухудшает разборчивость.

Хорошее подчеркивание располагается ниже базовой линии и пропускает выносные элементы. Скрытие подчеркивания под определенными символами не только улучшит читаемость, но и будет выглядеть более изысканно:

Вот пример подчеркнутого текста в Adobe XD. Подчеркивание используется только там, где оно не касается глифа или близко к нему. (Большой предварительный просмотр)

Как предотвратить проблему сбоя спускаемого аппарата. Ссылки в Интернете оформлены с помощью свойства CSS text-decoration: underline по умолчанию. К сожалению, это свойство не принимает во внимание потомки.

Среди решений, решающих эту проблему, самым простым является CSS-свойство text-decoration-skip . Он указывает, какие части содержимого элемента должны быть пропущены при оформлении текста. Он контролирует все линии оформления текста, нарисованные элементом, а также любые линии оформления текста, нарисованные его предками.

Свойство text-decoration-skip пока не поддерживается во всех браузерах. Альтернативы (например, box-shadow ) стоит изучить, если ваш текст трудно читать без него.

Обновление : 8 ноября 2017 г. свойство было переименовано/заменено на text-decoration-skip-ink: с auto в качестве начального значения в Chrome 64.

Если ваш браузер поддерживает text-decoration-skip , вы заметите, что нижестоящие элементы (например, y и p) имеют вокруг себя небольшое пустое пространство.

Цвет

Цвет — мощный инструмент в арсенале дизайнера. Его можно использовать, чтобы отличать ссылки от другого текста.

Избегайте окрашивания неинтерактивного текста

Избегайте окрашивания текста, если это не ссылка, поскольку посетители могут легко спутать цветной текст со ссылкой.

Должны ли ссылки быть синими?

Не обязательно. По словам Якоба Нильсена, «оттенки синего дают самый сильный сигнал для ссылок, но другие цвета работают почти так же». Однако, если вы можете свободно выбирать цвет для ссылок, лучше всего подойдет синий. Это по-прежнему цвет с самым сильным восприятием кликабельности — опытный веб-пользователь ассоциирует «синий и подчеркнутый» со ссылками. И у цвета есть одно существенное преимущество перед другими: он наиболее доступен для людей с цветовым дефицитом (его видят люди, страдающие протанопией и дейтеранопией).

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

Использование разных цветов для посещенных и не посещенных ссылок

Визуальное разделение посещенных и не посещенных ссылок облегчит путешествие пользователя, поскольку пользователи смогут отслеживать, что они видели. Два цвета должны быть вариантами или оттенками одного и того же цвета, чтобы они были четко связаны. Цвет непосещенных ссылок должен быть более насыщенным, а цвет посещенных ссылок немного тусклее.

Не подчеркивать списки ссылок

Для списков, в которых каждый элемент является ссылкой, можно не подчеркивать. В этом случае планировка четко указывает на функцию помещения.

Нет необходимости добавлять подчеркивание для каждого элемента в этом списке. (Изображение предоставлено wiseGEEK) (Большой предварительный просмотр)

Заключение

Ссылки делают Интернет таким, какой он есть. В своей классической книге по юзабилити «Не заставляйте меня думать » Стив Круг пишет: «Поскольку большая часть того, что люди делают в Интернете, — это поиск следующей вещи, на которую нужно нажать, важно сделать очевидным, что является кликабельным.