Правильный способ брать ссылки в кавычки

Бывает так, что нужно поставить ссылку на что-то, что пишется в кавычках:

Закавыченные ссылки

Некоторых ребят учили (а некоторые сами догадались), что подчёркнутые кавычки — это уродство. Поэтому делать ссылкой стали лишь то, что в кавычках:

Правильные закавыченные ссылки

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

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

Правильные закавыченные ссылки
Подписаться на блог
Отправить
Запинить
Дальше
44 комментария
Арсен Алиев 2008

А текущая страница еще не является новым сайтом? :)

см.
Зарабатывайте реальные деньги на своём блоге, зарегистрировавшись в «Сапе»!

Ещё у меня есть мусороблог под названием «Вотсоуэвер».

Илья Бирман 2008

e2 пока так не умеет делать автоматически, но научится.

Арсен Алиев 2008

Тогда логичнее было сначала научить, а потом постить ;)

Вадим Макеев 2008

Если уж так для подчёркивания: <a><u>link</u></a>
…то почему не так <font color=«#0000a0»><a><u>link</u></a></font> для цвета каждой ссылки?

Вадим Макеев 2008

Пробую иначе:

Если уж так для подчёркивания: <a><u>link</u></a>
…то почему не так <font color=«#0000a0»><a><u>link</u></a></font> для цвета каждой ссылки?

extremus 2008

Отличная идея!

Волька 2008

И волки целы, и овцы сыты. Идея что надо!

Сергей 2008

Я просветлён.

Артём Сапегин 2008

Красивое решение, спасибо!

Павел Ушаков 2008

Просто и со вкусом.

Александр Зайцев 2008

Вот бы красиво это всё сверстать.

Илья Бирман 2008

У меня свёрстано красиво.

Терещенков Константин 2008

Присоединяюсь.

Timurka 2008

Спасибо Илья, рассудил.

Anatoly Rr 2008

[turn занудство on]
Поддерживаю Александра и Вадима. Хотя, конечно, «красиво» — понятие субъективное и растяжимое, всё же подчёркивать или не подчёркивать кавычки — дело отображения, а не содержания. Если бы можно было просто в css прописать, что, мол, <a>«Бла-бла-бла»</a> отображается так как нам надо, то вот это, на мой взгляд, было бы красиво, т. е. отвечало бы принципу мух и котлет.

С другой стороны, может быть, вариант <a>«<u>Бла-бла-бла</u>»</a> — наиболее красивый из доступных сейчас. Это делает его самым красивым, но отнюдь не красивым. :)
[turn занудство off]

А вообще круто!

Николай Гурьянов 2008

Илья, с кавычками проблема чаще возникает несколько другая, когда по смыслу в ссылку нужно заключить несколько слов, включая слово в кавычках. Далеко ходить не надо, достаточно посмотреть на главную Ленты.ру. Сергей Чемезов <начало_ссылки>отказался входить в совет директоров «Норникеля»<конец_ссылки>. Или, например, портфолио какой-нибудь фирмы: Закончена разработка <ссылка>интерфейса «Трансгидрофокатора»</конец>.

smmurf 2008

Ну можно и более красиво, на мой взгляд, совмещать кавычки и ссылки. Только способ будет работать только в браузерах, для IE придется подставлять костыли.
<q class=«link»><a href=«#»>Текст ссылки</a></q>

Илья Бирман 2008

Костыли — это ведь так красиво, ага.

smmurf 2008

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

Роман Добровенский 2008

Сейчас подумалось, что было бы красивее вставлять <u>...</u> через JavaScript. Тогда по крайней мере на стороне сервера сохранится принцип мухи-котлеты. Хотя это уже мелочи конечно же.

PRikOL 2008

слишком сложно.

PRikOL 2008

и, следуя вашей логике, скобки, содержащие ссылку, следует тоже делать частью ссылки?
это же бред.

Артём Поликарпов 2008

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

Павел Власов 2008

А вот такая простая вёрстка.

a { text-decoration: none; border-bottom: 1px solid; }
a:before { content: ’«’; border-bottom: 1px solid white; }
a:after { content: ’»’; border-bottom: 1px solid white; }

Читайте <a href=«#»>Капитанскую дочку</a> штоле!

Сам сабж мне нравится — этот вариант выглядит наиболее органично. А чёрные или подчёркнутые кавычки левые какие-то. Сейчас это уже кажется очевидным :-)

Павел Власов 2008

Из минусов: адепты церкви шестого осла кавычек не увидят (и фиг с ними) и border в качестве underline выглядит менее красиво.

Сергей 2008

Такая ссылка выглядит некрасиво в RSS — кавычки получаются тоже подчёркнутыми.

tiaurus 2008

В пути за Артемием?

Andrew Marcus 2008

Неплохая идея. Буду юзать ;-)

Александр 2009

@Павел Власов:
К сожалению псевдотеги before и after не поддерживает IE, вполоть до 8-й версии. Попробовал такой хак:
a{zoom:1;behavior:expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = ’<span style=«border-bottom: 1px solid white»>«</span>’ + this.innerHTML + ’<span style=»border-bottom: 1px solid white«>»</span>’) : ’’);}

Кавычки отображает, но подчеркивает. Не знаете как исправить?

Волька 2009

Александр, для подчеркивания текста лучше использовать не border-bottom, а text-decoration:
style=«text-decoration: none;»

Александр 2009

@Волька:
Текст подчеркивает underline, а none как раз используется. См. вариант Павла Власова.

Я делал и так:
a { text-decoration: none; border-bottom: 1px solid; }
a:before { content: ’\00AB’; text-decoration: none; }
a:after { content: ’\00BB’; text-decoration: none; }
a{zoom:1;behavior:expression(!this.isInserted«»==«»true ? this.isInserted=(this.innerHTML = ’<span style=«text-decoration: none»>«</span>’ + this.innerHTML + ’<span style=»border-bottom: 1px solid white«>»</span>’) : ’’);}

... и так:
a { text-decoration: underline }
a:before { content: ’\00AB’; text-decoration: none; }
a:after { content: ’\00BB’; text-decoration: none; }
a{zoom:1;behavior:expression(!this.isInserted«»==«»true ? this.isInserted=(this.innerHTML = ’<span style=«text-decoration: none»>«</span>’ + this.innerHTML + ’<span style=»text-decoration: none«>»</span>’) : ’’);}

И еще много как. Не работатет. У кого есть вариант для всех броузеров?

Илья Бирман 2009

Ребята, ку-ку!

У меня есть вариант для всех браузеров!

Александр 2009

Такая реализация: <a href=«#» class=«nounderline»><u>Текст_ссылки-начало</u> «<u>текст_ссылки в кавычках</u>»<u> текст_ссылки конец</u>...</a> лично мне, не очень нравится. Гораздо удобнее кажется такой подход: <a href=«#» class=«u»>Текст_ссылки-начало <span>«</span class=»nounderline«>текст_ссылки в кавычках<span class=»nounderline«>» </span>текст_ссылки конец<span class=«nounderline»>...</span></a>.

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

Подход с after и before мне понравился (текст не виден и не индексируется поисковиками). Но погуглив решения на CSS для IE я не нашел. Решение на Яве из #26 сообщения работает. Со стилями разберемся.

Дмитрий Зимин 2009

Следствием закона Фиттса является конструкция <a>Читайте «Капитанскую Дочку»</a>, так что это не аргумент.

Возможное восприятие предложенного варианта мозгом человека:

  1. «черное неподчеркнутое — текст»
  2. «синее подчеркнутое — ссылка»
  3. «синее неподчеркнутое — ыыыыыыыы»
Дмитрий Кадыков 2009

Но если нужно ссылкой сделать всю фразу, например <a>Читайте «Капитанскую дочку»</a> — кавычки по-любому придется подчеркнуть.

bes island 2009

У меня свёрстано красиво.

Не согласен.

Александр Киссель 2009

Дмитрий Кадыков, неправильно делать ссылкой так, как вы предлагаете. Правильно делать ссылкой именно «Капитанскую дочку».

Андрей 2009

У меня свёрстано красиво.

Я тоже не согласен. У вас сверстано безграмотно, и то, что это работает во всех браузерах, включая морально и технически устаревший ИЕ 6, никак не аргумент в пользу этого метода.

Илья Бирман 2009

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

Забавно, что свои, предположительно крайне важные и неоспоримые критерии красивой вёрстки, вы предпочли сохранить в тайне.

Андрей 2009

А про валидную верстку вы, видимо, вообще не слышали. http://validator.w3.org/check?uri=http://ilyabirman.ru

Илья Бирман 2009

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

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

Андрей 2009

!!Доводы оппонента в споре нужно не оценивать, а либо опровергать, либо принимать.!!

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

Так вот, критерий следующий: HTML — это язык разметки гипертекста. Разметки. А не раскраски, утолщения или подчеркивания. То, что HTML позволяет использовать теги <font>, <u> и им подобные, не означает, что использовать их грамотно. Потому что это нарушает логику разметки и представления.

!!Вы используете слово «видимо» не по назначению!!

Это почему же?

!!берётесь делать выводы о знаниях собеседниках на основании своих крайне скудных представлений о возможной области применений этих знаний!!

Не понял, что вы хотите сказать этой фразой.

!!Например, вы слышали о валидной вёрстке, и из самого этого факта делаете вывод о её необходимости.!!

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

!!Валидную вёрстку я в гробу видал.!!

Ваше право.

!!Настолько очевидно лишённому всякого смысла занятию я посвещать своё время не готов.!!

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

P.S. У вас можно здесь цитирование по-человечески делать, есть тег или бб-код?

Илья Бирман 2009

Андрей, вы демонстируете как неумеение слушать, так и неумение спорить.

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

Давайте попробуем ещё раз: вы прочитаете, что я вам написал, и, если у вас будет что ответить, вы ответите. Комментарии, представляющие собой цитаты с подстрочными замечаниями, я буду удалять; найдите в себе силы внятно сформулировать свои взгляды, не обращаясь к сказанному мною.

Андрей 2009

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

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

Небольшое экскурс в историю HTML. Язык HTML был создан в начале 90-ых годов Бернерсом-Ли на основе SGML, который, в свою очередь, произошел от GML. Так вот, еще GML был создан таким образом, что смысловое значение элемента документа отделялось от внешнего вида. Логика документа (разметка) — это обязательная часть документа, а внешний вид должен был контролироваться с помощью внешних файлов стилей.

Но, бурное развитие интернета в середине 90-ых годов привело к тому, что средств HTML 2.0 стало не хватать. Тогда Майкрософт и Нетскейп начали добавлять в свои браузеры так называемые «расширения» языка HTML, не понимая или не желая понимать, в чем разница между логикой и представлением. Часть нововведений нашла свое отражение в HTML 3.2. Например, это атрибуты background, color и теги <font>.

В 1996 W3C утвердила спецификацию CSS — таблиц стилей, призванную прекратить бардак и вернуть HTML его первоначальное назначение — определять смысл элементов документа, а не их внешний вид. Однако, время «браузерных войн» и эпоха HTML 3.2 наложила свой отпечаток как на движки браузеров, вынужденные поддерживать «расширения» HTML, так и на умы веб-мастеров, привыкших смешивать воедино логику и представление.

Чем вы, Илья, и занимаетесь.

Илья Бирман 2009

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

Я как могу пытаюсь донести до вас эту мысль, но до вас всё не доходит.

В вашей голове царит невероятная каша из понятий. Валидный код имеет весьма условное отношение к разделению разметки и оформления. Кроме того, польза такого разделения очевидна далеко не всегда. В веб-дизайне не существует задачи «сделать валидный сайт» или «сделать сайт, в коде которого оформление было бы отделено от разметки». Вообще ровным счётом никого не волнует, какой язык из какого вырос и для чего создавался — это просто некий материал для вводной лекции по веб-дизайну, не более того. Сотовый телефон вот создавался, чтобы звонить, а сегодня на нём играют в ходилки-стрелялки. Мало ли?

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

Кстати, вы ни разу не упомянули ХТМЛ 5 — первый случай в истории веб-стандартизации, когда за дело взялись трезвые люди с чистыми мозгами. Логика, идеи и ценности создателей ХТМЛ 5 мне намного ближе, чем ваши.

Александр Зайцев 2009

Ну и спор развязался.

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

А иногда фигню говорит. Например, input type=«search» он не любит, или лэйблы надо в блочный элемент засовывать.

Андрей 2009

Илья, то, что вы знаете эту историю, говорит отнюдь не в вашу пользу. Одно дело, когда человек чего-то не знает, и потому совершает ошибки — это простительно. Но когда человек сознательно «не придает значения и не делает выводов» — это уже совсем другое дело.

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

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

А по поводу валидного кода, вы вообще-то должны знать, зачем он нужен. А нужен он для того, чтобы гарантировать одинаковое отображение страницы во всех браузерах (ИЕ, разумеется, браузером не считается). Сейчас все идет к тому, чтобы однозначно стандартизировать HTML и CSS, и уже довольно скоро наступит время, когда не будет такого понятия, как «отладка верстки под браузер». Не будет для тех, кто будет верстать по стандартам. Если же вы «в гробу видали валидную верстку», то есть, попросту говоря, плевать хотели на мнение и рекомендации людей, создавших и развивающих HTML и CSS, то вы точно так нелепы, как водитель, который скажет, что он в гробу видал правила дорожного движения. А что, дорога есть — еду, как хочу. В браузере страница показывается — верстаю, как хочу.

Илья Бирман 2009

Андрей, вы очень смешной :-) Жертва маркетологов-сектантов, пропагандирующих лишённые смысла ценности. Примера из жизни вам что-то так и не удалось привести — оно и понятно, примеров из жизни не существует в природе.

Думаю, вы занимаетесь веб-разработкой не очень долго, года 2-3 отсилы, а может и того меньше.

Покажите какой-нибудь сайт, который вы сделали? Чтобы валидацию проходил.

Евгений Гетманенко 2009

Ваши слова: «с точки зрения следствий закона Фиттса кавычки должны быть частью ссылки.» Правила набора кавычек слитно с обрамляемым текстом достаточно, чтобы утверждать, что кавычки — часть внутреннего текста (но не ссылки). Чтобы сделать их частью ссылки, достаточно включить их в область, на которую может нажать пользователь (закатать в <a>). Кавычки под цвет ссылок без подчеркивания первым названным свойством могут ввести в заблуждение любого пользователя тем, что они — часть ссылки, а вторым — что не являются. Результат: кавычки под цвет ссылки ухудшили информативность фрагмента текста с ссылкой.

По-простому: ваше правило — ни два, ни полтора, формальное умножение 0,(3)×3, в котором получается несуществующая условность 0,(9), красиво и бесполезно. Часто, цвет ссылок гармонирует с цветом окружающего текста, поэтому ради красоты менять цвет кавычек нет серьезной необходимости — достаточно оставить как есть. Есть такие великие слова из которых всё ясно: «простота — необходимое условие прекрасного.» Мне интересно читать этот блог и наблюдать за вашими рассуждениями, но в этом посте вы написали правило, которое стоит придержать просто как идею.

Илья Бирман 2009

Над тем, что вы говорите про цвета, действительно, стоит ещё поразмыслить :-) Спасибо.

Андрей 2009

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

Евгений Гетманенко 2009

Конструкция:

<a href=«music-player/» class=«nou»>«<u>Проигрыватель</u>»</a>

…ужасна. Можно взять кавычки в <span>, я так и сделал (да-да, я попробовал так на своем сайте и забросил эту идею), но разница в цвете для посещенных ссылок может стать проблемой.

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

«Валидную вёрстку я в гробу видал.» Я тоже, если считать, что IE6 — это гроб. Правильная верстка там выглядит действительно неважно. Стремиться к корректной верстке — должно быть верным ориентиром для хорошего верстальщика; ну что вам стоит прописать доктайп и поставить «/» перед закрытием непарного тега, Илья? Андрей, кстати, — программист, а не жертва маркетологов, техническая сторона ему важна, может, поэтому слишком надавил в этом вопросе.

Илья Бирман 2009

Вы жонглируете какими-то словами, и мне не удаётся уловить, какой же за ними скрывается смысл.

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

Утверждения о том, что что-то «ужасно», что-то «надо писать», чего-то «нет», а что-то «должно быть верным ориентиром» вы не подтверждаете ни рассуждениями, ни фактами. Ваша точка зрения при таком уровне её поддержки — вами же — ничего не стоит.

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

Евгений Гетманенко 2009

Моя точка зрения «при таком уровне её поддержки» ничего не стоит. Про непарные теги вы правы.

Дмитрий Зимин 2009

Чтобы сделать их частью ссылки, достаточно включить их в область, на которую может нажать пользователь (закатать в <a>)

Не очень удачная идея, Евгений. Получается, что мы создаем активную область, но не информируем пользователя об этом (маскируем ссылку под текст). Это может доставить пусть и мелкие, но неприятности. Все же вариант с исключением кавычек из ссылки самый оптимальный по трудозатратам и производимому эффекту. Собственно, привет от Монтескье (http://ilyabirman.ru/meanwhile/2003/04/25/2/) :-)

Мои книги