Атрибут href в HTML

Содержание
Илон Маск рекомендует:  Cеть передача сокетов между процессами

Атрибут href

Значения

Значение по умолчанию: нет.

Синтаксис

Обязательный атрибут: обязателен для ссылок.

Пример HTML: применение атрибута href

Поддержка версиями HTML

Версия: HTML 4.01 HTML 5 XHTML 1.0 XHTML 1.1
Поддержка: Да Да Да Да

Поддержка браузерами

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Да Да Да Да Да
Илон Маск рекомендует:  background-blend-mode в CSS

Copyright © 2010-2015 seodon.ru Все права защищены.

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

Код ссылки (тег ) | HTML

Простой генератор ссылок

Атрибут ссылки href

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

Подробнее о том, что такое ссылка и где находится адресная строка браузера

href=»URL»> анкор
Пример: href=»http://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html#the-a-element»> стандарт w3.org
Результат: стандарт w3.org

Всегда ли URL в ссылке начинаются с http://?

В теге a URL можно сокращать согласно установленным правилам. Сокращённую ссылку называют относительной. Она приведёт на страницу относительно точки отправления.

Пример: /2013/01/absolute-relative-links.html«> подробнее про относительные ссылки
Результат: подробнее про относительные ссылки
Установленная на http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html приведёт на http://shpargalkablog.ru/2013/01/absolute-relative-links.html
Установленная на https://ru.wikipedia.org/wiki/Ссылка приведёт на /2013/01/absolute-relative-links.html

Когда используется слеш (символ /) в конце URL

Эти страницы для поискового робота являются разными. Они содержание друг друга (подробнее).

Из них выбирается основная. На Шпаргалке блоггера со слешем ( http://shpargalkablog.ru/ ), так как предполагается что будет продолжение, допустим, http://shpargalkablog.ru/2010/ . С второстепенной следует настроить перенаправление на основную с помощью 301 редиректа или rel=»canonical» . Если ссылка будет иметь вид то посетитель или, в случае rel=»canonical» только поисковый робот, сначала попадёт на http://shpargalkablog.ru , а потом его перебросит на http://shpargalkablog.ru/ .

Можно уменьшить время ожидания загрузки веб-документа, если пользователя сразу перемещать на нужную страницу. Чтобы не допускать ошибок, желательно копировать URL из адресной строки браузера.

Веб-документы, имеющие окончание, скажем, .html , .png , .css , считаются конечным файлом и косую черту после них писать не желательно. То есть

Ссылка к заданному месту текста

На странице каждое значение идентификатора ( id ) должно употребляться только один раз. В CSS селектор id распознаётся благодаря хэшу (символ # ) перед значением идентификатора.

Если в адресной строке браузера к URL без пропусков добавить селектор идентификатора, то страница без перезагрузки сама прокрутится к тегу. С помощью скрипта можно сделать переход от ссылки до якоря (тег, к которому нужно перейти) плавным.

анкор
Пример:
href=»URL#имя_закладки»> анкор
Пример: href=»http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#tut»> ссылка к закладке №1
Результат: ссылка к закладке №1
Пример: href=»#tut»> относительная ссылка к закладке №1
Результат: относительная ссылка к закладке №1
Пример: href=»http://shpargalkablog.ru/2014/03/table-of-contents-html5.html#ul»> ссылка к первому заголовку другой страницы «Как сделать список из вопросов, кликнув на один из которых, автоматически перемещаешься на его ответ»
Результат: ссылка к первому заголовку другой страницы «Как сделать список из вопросов, кликнув на один из которых, автоматически перемещаешься на его ответ»

В CSS есть псевдокласс :target , который отвечает за внешний вид элемента, чей селектор присутствует в URL.

Пример:

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

Пример:

Если в атрибуте href оставить только символ решётки, то при нажатии на ссылку человек попадёт к началу страницы. Сей элемент с помощью CSS стилей можно зафиксировать на экране и благодаря JavaScript показывать не сразу, а только после прохождения первого экрана (см. подробнее как это сделать).

href=»#»> анкор
Пример: href=»#»> наверх
Результат: наверх

Поисковые системы не рассматривают дубликатами друг друга URL вида

Ссылка для отправки почты

В качестве URL следует указать mailto:адрес_электронной_почты . Несколько адресов можно перечислить через запятую. Параметры cc=копия , bcc=скрытая_копия , subject=тема , body=письмо не являются обязательными и объединены с помощью & .

href=»mailto:email?cc=копия&bcc=скрытая_копия&subject=тема&body=письмо»> анкор
Пример: mailto:n.mitra@yandex.ru«> n.mitra@yandex.ru
Результат: n.mitra@yandex.ru
Пример: mailto:n.mitra@yandex.ru,n.mitra@yandex.ru?subject=Вопрос по коду ссылки«> служба поддержки
Результат: служба поддержки
Пример: href=»mailto:?subject=Код ссылки в html&body=http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html»> поделитесь ссылкой с друзьями
Результат: http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html»>поделитесь ссылкой с друзьями

Звонок по телефону

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

href=»tel:номер»> анкор
Пример: href=»tel:+79030000000″> Позвонить
Результат: Позвонить

Ссылка на скачивание файла

download=»имя_файла»> анкор
Пример: download> скачать иконку смайлика
Результат: скачать иконку смайлика
Пример: download=»smaylik»> скачать иконку смайлика с именем файла «smaylik»
Результат: скачать иконку смайлика с именем файла «smaylik»

Открыть ссылку в новом окне, новой вкладке, фрейме

Как сделать изображение ссылкой? Как сделать кликабельную картинку в HTML?

В качестве анкора нужно использовать HTML код картинки. Предварительно изображение нужно загрузить на хостинг сайта или в социальную сеть (ВКонтакте, Google+ и т.п.), чтобы у рисунка появился свой адрес в интернете — URL.

* на странице есть указанный код ссылки * на странице есть фрейм, который содержит другой фрейм со страницей, на которой есть указанный код ссылки
target=»_self»> анкор
target=»_self»> показать смайлик в текущей вкладке или текущем iframe
показать смайлик в текущей вкладке или текущем iframe
target=»_parent»> анкор
target=»_parent»> показать смайлик в текущей вкладке или во фрейме-родителе
показать смайлик в текущей вкладке или во фрейме-родителе
target=»_top»> анкор
target=»_top»> показать смайлик в текущей вкладке
показать смайлик в текущей вкладке
target=»_blank»> анкор
target=»_blank»> показать смайлик в новой вкладке или в новом окне (зависит от настроек браузера пользователя)
показать смайлик в новой вкладке или в новом окне (зависит от настроек браузера пользователя)
target=»name»> анкор
target=»raz»> показать смайлик в iframe с указанным name
показать смайлик в iframe с указанным name

Нельзя обязать браузер открыть ссылку в новой вкладке, а не в новом окне.

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

Ссылка «Сохранить в закладки браузера» (HTML)

rel может иметь несколько значений, разделённых пробелом, например, rel=»nofollow noreferrer» . У whatwg.org список значений несколько больше. В таблице указаны только те, которые имеют практическое применение, так как часто устройства учитывают лишь тег link : rel=»prefetch» в Mozilla Firefox [developer.mozilla.org] и Google Chrome [developers.google.com], rel=»next» и rel=»prev» для Google [support.google.com].

rel=»sidebar»> анкор
rel=»sidebar»> добавить страницу в закладках браузера
добавить страницу в закладках браузера
rel=»noreferrer»> анкор
rel=»noreferrer»> не будет показан URL, с которого пришёл пользователь
не будет показан URL, с которого пришёл пользователь

Закрыть ссылку в nofollow

Поисковые системы рекомендуют закрывать в nofollow

  1. ссылки на сайты с некачественным содержимым (нарушающие авторское право (плагиат), содержащие вредоносные программы (вирусы), материал только для взрослых, связанный с наркотиками, с элементами насилия и т.п.),
  2. платные ссылки.

Тех, кто ослушается ждёт понижение в выдаче. Поэтому ссылки, оставленные посетителями (например, в комментариях) или требуют проверки, или автоматически закрываются nofollow .

Не нужно закрывать в nofollow абсолютно все внешние ссылки. Не нужно закрывать в nofollow внутренние ссылки, допустим, расположенные в меню. Если есть необходимость, то их лучше скрыть от поисковиков с помощью Ajax.

rel=»nofollow»> анкор
Пример: rel=»nofollow»> не передает ни PageRank, ни текст ссылки
Результат: не передает ни PageRank, ни текст ссылки

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

title=»всплывающая_подсказка_с_поясняющим_текстом»> анкор
Пример: title=»про атрибут title: можно ли поменять его внешний вид, учитывается ли он поисковыми системами»> наведи на меня
Результат: наведи на меня

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

HTML анкор ссылки

Ссылка может содержать как блочные, так и строчные элементы.

Пример:
Пример: строчный: ссылкой является только текст
Результат: строчный: ссылкой является только текст
Пример:
Результат:

Ссылка в CSS коде

Пример: Что такое псевдоклассы в CSS
Результат: Что такое псевдоклассы в CSS

Как изменить цвет ссылки

Пример: style=»color: #ff0000;»> ссылка красного цвета
Результат: ссылка красного цвета

В атрибуте style нельзя работать с псевдоклассами, то есть, скажем, нельзя изменить цвет конкретной ссылки при наведении курсора мышки. Поэтому нужно установить значение атрибута id (для одной ссылки) или class (для нескольких) и прописать стиль либо в отдельном файле .css либо в теге style .

Пример: > ссылка коричневого цвета, при наведении зелёного
Результат: ссылка коричневого цвета, при наведении зелёного

Значение свойства color может быть указано ключевым словом, например, red , green (список поддерживаемых [developer.mozilla.org]) или в форматах RGB и HSL. Узнать код цвета: #ff0000

Подчёркивание ссылки

За подчёркивание текста отвечает свойство text-decoration , элемента — border-bottom .

Пример: style=»text-decoration: none; border-bottom: 1px dashed;«> подчеркивание ссылки пунктиром
Результат: подчеркивание ссылки пунктиром
Пример: подчеркивание ссылки появляется только после наведения на неё
Результат: подчеркивание ссылки появляется только после наведения на неё
Пример: красивые текстовые ссылки
Результат: трам-пам-пам красивые текстовые ссылки трам-пам-пам-пам-пам

20 комментариев:

Tulyka Делаю всё также, как написано здесь. Вроде бы всё правильно: и якорь с латинским именем находится в нужном месте и ссылка на него сделана в соответствии с требованиями. Публикую сообщение и пытаюсь посмотреть что же у меня в итоге вышло? В итоге, ничего не вышло. Для проверки результата, жму на ссылку, в надежде оказаться в нужном месте текста (или блога), а меня, с просматриваемой страницы блога, выкидывает назад, в редактор сообщений. Почему так? NMitra Да, вспомнила об особенности Blogger. Зайдите снова в редактируемое сообщение, но на вкладку «Изменить HTML» (или «HTML» для нового редактора), там подчистите хэш-ссылку до знака #. И не заходя на вкладку «Создать» сохраните.

Blogger считает, что пользователь ошибся, размещая href без полного URL и исправляет ошибку.

Я редко пользуюсь вкладкой «Создать», поэтому уж подзабыла. Tulyka Я об этом тоже подумала, но уже после того, как написала Вам. Так оно и есть: если делаешь хэш-ссылку, то в визуальный редактор «Создать» нельзя даже и на секундочку заглянуть, до тех пор, пока не сохранишь сообщение с уже готовыми ссылками.
Наконец-то, получилось. ) Спасибо! LVE NMitra, подскажите, пожалуйста:
1. Как вы выделяете в тексте код? Например когда приводите в пример строки кода, то слева от него вы ставите вертикальную линию. Как это задать в html или css?

2. Нет ли возможности сделать подсветку синтаксиса, в приводимых примерах кода html, css и пр.? NMitra 1) http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html

2) стили можно использовать любые, например, http://shpargalkablog.ru/2011/09/cytata-html.html NMitra stas_dayan, это не URL, а анкор. Мне такую красоту не нужно в комментариях не нужно )) scooter kak sozdati fon NMitra С помощью стилей CSS. Например, так

анкор NMitra В комментариях стили не пропускаются. Анонимный Здравствуйте NMitra!

Вопрос про хэш-ссылки. По умолчанию браузер при переходе по хэш-ссылке показывает ее содержимое в самом верху окна.
У меня в самом верху меню закреплено с помощью position:fixed;
и поэтому начало нужного текста при переходе по хэш-ссылке (а это обычно подзаголовок) не видно.
То есть посетитель теряется и не понимает куда его привела хэш-ссылка.

Как бы каким-то скриптом сделать так, чтобы когда браузер видит, что переход идёт по хэш-ссылке, он как бы
отматывал страницу пониже на заданное число пикселей? И якорь бы вылезал из под шапки (меню).

А если бы еще этот якорь как-нибудь при переходе подсвечивался. ну там бекграунд#FF0000 это было бы круто:)

С уважением, Владимир NMitra Здравствуйте, шикарный вопрос! Пока не готова дать на него ответ NMitra Владимир, есть ответ http://jsfiddle.net/NMitra/7g9mn63b/2/ Анонимный NMitra, спасибо!

Отличное решение. Простой css, и всё работает (кроме background — ну и ладно). А в инете предлагаются большие скрипты, которые у меня все равно не получается подключить)

Что означает формулировка “#!” в href атрибуте ссылки?

Недавно в одном коде нашёл строчку:

Что за зверь такой #! ? Сам я нагуглить не смог, прошу вашей помощи. Спасибо.

2 ответа 2

Это не html тэг, а просто часть пути, ведущая на site.com/main. Зверь ‘#!’ это hashbang, который использует тот же Angular для замены html5 history api (это на тему того, что гуглить). Сам же # в урле — это просто якорь на какой-то участок указанной страницы, см например здесь.

update: ссылка на перевод оф. документации angular, где можно посмотреть параграф «Hashbang и режим HTML5»

«#!/main» — это значение атрибута href, а не «непонятный html тег»

HTML код ссылки: тег ..

Обязательным параметром у ссылки является только href=»URL» , т.е. адрес ссылки. Между открывающим тегом и закрывающим тегом пишется анкор ссылки, который может состоять из слов, символов, объектов (картинки и прочее).

Пример . Html код ссылки:

Преобразуется на странице в следующее:

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

Ссылки html вебмастера на профессиональном языке называют гиперссылками.

Атрибуты и свойства тега

1. Атрибут target=»параметр» , который может принимать следующие значения:

  • _blank — открывает страницу в новом окне
  • _self — загружает страницу в текущее окно
  • _parent — загружает страницу во фрейм-родитель
  • _top — отменяет все фреймы и загружает страницу в полном окне браузера

Пример с target

В этом случае мы получим ту же ссылку, что и в первом примере, но перейдя по ней, страница откроется в новом окне.

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

2. Атрибут title=»подсказка» позволяет прописать подсказку, которая высветится при наведении курсора на ссылку. Это нужно для более точного описания ссылки. Атрибут тайтл поможет пользователю убедиться в том, что по ссылке он найдет нужную информацию, а для поисковой системы это дополнительный ключевые слова для страницы, на которую ведет ссылка.

Пример с подсказкой title

Преобразуется на странице в следующее:

В данном случае подсказка высвечивается стандартным способом. Однако можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »

3. Атрибут задает класс стиля для ссылки. О классах Вы уже знаете из предыдущего урока (стили в html). Для тега a стили имеют небольшие отличия. Объясню все нюансы на следующем примере.

Преобразуется на странице в следующее:

  • a.класс:visited стиль для ссылки, который пользователь уже посетил. Это позволяет пользователю не заходить на одну и ту же страницу дважды, даже если у ссылки на эту страницу будут разные анкоры.
  • a.класс:link стиль для тех ссылок, которые ещё не посещал пользователь (можно не указывать приписку «:link», поскольку a.класс — делает то же самое).
  • a.класс:hover стиль ссылки при наведении курсора. Обычно для этого стиля делают другой цвет, а также подчеркивание, чтобы дать пользователю понять, что ссылка стала активной.

4. Атрибут rel=»параметр» — определяет отношения между текущим документом и документом, на который ведет ссылка. Этот атрибут носит важное значение для поисковых машин, но браузерами никак не трактуется. Может принимать следующее значения:

4.1. nofollow — означает то, что вес по ссылке не будет передаваться (робот не будет переходить по ссылке). Например:

Визуально никаких отличий Вы не заметите, однако для поисковых систем эта ссылка не будет передавать вес. Поэтому мой совет для всех: закрывайте все внешние ссылки атрибутом rel=»nofollow» , чтобы сохранить вес на Вашем сайте.

4.2. canonical — в случае множества дублей на сайте, указывает главную страницу среди всех дублей

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

Как сделать ссылку на адрес почты

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

Сделать ссылку с адресом электронной почты легко. Для этого есть специальное слово mailto:

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

Элемент link HTML содержит связанную с документом информацию: альтернативные версии, авторы, авторские лицензии, иконки и т.д. Он должен содержать атрибут rel или itemprop , но не оба сразу. Атрибут href также является обязательным.

Когда атрибут itemprop отсутствует, этот элемент может быть объявлен только в разделе head . В противном случае он может быть объявлен в другом месте.

Примеры

В следующем примере предоставляется информация о документе с помощью элемента link с различными типами гиперссылок:

Атрибуты

Специальные атрибуты

Этот атрибут тега link в HTML содержит адрес ( URI ) связанного ссылкой ресурса. Он указывает браузеру, куда переходить по ссылке.

Наличие этого атрибута является обязательным. Если он отсутствует или имеет значение, которое не является допустимым URI , элемент не определяет ссылку.

CROSSORIGIN

Указывает, должен ли запрос к внешнему серверу предоставлять учетные данные CORS или нет. Допустимы два значения ( без учета регистра ):

  • anonymous : CORS запросы к элементу будут содержать установленный флаг « omit credentials «;
  • use-credentials : CORS запросы к элементу не будут содержать установленный флаг « omit credentials «.

Атрибут HTML link rel содержит разделенный пробелами список типов ссылок, указывающий, какое значение связанный ссылкой ресурс имеет для документа ( содержащего ссылку ).

Элемент link должен содержать либо атрибут rel , либо атрибут itemprop , но не оба сразу. Атрибут href также является обязательным.

MEDIA

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

HREFLANG

Этот HTML link tag указывает язык, который будет использоваться в связанном ссылкой ресурсе ( указан в атрибуте HREF ).

Тип контента ( или Internet Media Type ), который должен содержать связанный ресурс.

SIZES

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

Этот атрибут тега link в HTML должен объявляться только, когда присутствует атрибут rel и он имеет значение « icon «. Иначе ситуации его использование является недействительным.

CHARSET

Кодировка символов целевого ресурса. Этот атрибут является устаревшим и в HTML5 уже не используется. Вместо него разработчикам рекомендуется использовать HTTP-заголовки Content-Type , чтобы предоставить информацию о наборах символов в документах и других ресурсах.

Значение текущего документа ( содержащего ссылку ) для связанного ссылкой ресурса.

Этот атрибут HTML link tag является устаревшим и в HTML5 уже не используется. Разработчикам рекомендуется заменить его атрибутом rel .

Данная публикация представляет собой перевод статьи « LINK ELEMENT » , подготовленной дружной командой проекта Интернет-технологии.ру

Ссылки с пустым href, атрибут title

На страницах с фотокарточками есть ссылки, которые ведут на предыдущую и следующую фотографии. Как быть с этой ссылкой, например, на последней фотокарточке? Ведь нет никакой следующей фотографии. Можно удалить ссылку целиком, а можно поступить иначе.

Когда мы удаляем атрибут href у ссылки, то лучше оставить подсказку о том, почему мы это сделали. Также подсказки помогают разъяснить назначение непонятных ссылок и ссылок-изображений. Подсказку можно добавить с помощью атрибута title . Например:

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

Теперь давайте доработаем навигацию на последней странице галереи.

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

Как создать ссылку в HTML-документе. Тег A — его синтаксис и атрибуты

Ссылки (или гиперссылки) пронизывают Интернет как кровеносные сосуды. Не будь ссылок – не было бы Интернета.

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

URL или «адрес» страницы в Интернет

Каждый HTML документ в Сети имеет свой «точный адрес». Его называют «УРЛом», от англ. URL — Uniform Resource Locator

Структура URL часто видна в адресной строке браузера. Он включает в себя:

  1. Название протокола – http:// или https://
  2. Домен сайта,
  3. папка или путь к папке, где этот документ находится,
  4. Имя файла (может быть не всегда).

Благодаря такому «точному адресу» и стало возможным ссылаться на этот документ из текста другого документа.

Тег и его базовый синтаксис

Надеюсь, слово «синтаксис» вас уже не пугает ��

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

Внутри самого тега-контейнера стоит текст (хотя может быть и картинка), который и является текстом ссылки. Его ещё называют «Анкор» или просто — Якорь.

Абсолютная и относительная ссылка

В примерах выше, были использованы абсолютные ссылки. Такие, которые содержат полный URL документа.

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

Схема, когда применена относительная ссылка

Пример: ссылка из документа first.html ведёт на файл second.html, который находится в папке news

Относительная ссылка на каталог, уровнем выше текущего

Эта ссылка ведёт на файл first.html в «родительском» каталоге, т.е. на один уровень выше.

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

Атрибуты тега . Как открыть документ по ссылке в новом окне

Для того, что бы документ по ссылке открывался в новой вкладке браузера, нужно использовать атрибут target="_blank"

Атрибут ссылки target=»_blank»

Не злоупотребляйте им. Не нужно делать внутренние ссылки сайта с этим атрибутом. Пользователя будут раздражать «плодящиеся окна».

Вообще, с этим атрибутом target – целая история. Есть ещё целый ряд его значений, но все они используются сегодня крайне редко.

Это потому, что они предназначены для работы с сайтом на фреймах, ныне не популярных и, с приходом HTML5, уходящими в прошлое.

Заголовок ссылки. Атрибут title для тега

Ещё один полезный атрибут — title="Текст, поясняющий куда ведёт эта ссылка"

Как видите, браузер выводит его как всплывающую подсказку. А ещё, его учитывают и поисковые системы.

Подсказка из атрибута для ссылки title

Атрибут гиперссылки nofollow. Запрет передачи «траста» сайта по ссылке

Есть ещё один неоднозначный атрибут для ссылок rel="nofollow"

Он говорит Поисковым Системам, что документ по ссылке, возможно, не заслуживает доверия. При этом показатели доверия («траста») с сайта Источника, не передаются на сайт по ссылке.

Тема о «трасте» и ссылочном ранжировании ещё впереди, но если коротко, то «участь» сайтов в ВЫДАЧЕ Поисковых Систем зависит также и от количества ссылок, ведущих на этот сайт. Чем их больше, чем более авторитетные сайты ссылаются – тем больше доверие к сайту по ссылке.

В некоторых случаях, стоит «экранировать» ссылки этим атрибутом. Например, если вы пишите отрицательный отзыв о каком-либо сервисе.

Внутренняя ссылка или якорь внутри документа

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

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

При создании такого якоря вместо атрибута href используют атрибут name

Синтаксис при создании якоря:

При создании ссылки, в конце URL добавляют через знак # – имя «якоря»:

Переход будет точно к этому месту, т.е. браузер поместит это место в своей верхней видимой части.

Часто, в длинных документах, в самом низу ставят такую ссылку «Наверх».

… совершив путешествие по миру ароматных зерен, нашли самые высококачественные из тех, которыми славятся Африка, Азия, Центральная и Южная Америка . Поэтому сегодня в кофейнях бренда Coffee bean вы встретите лучшие кофейные сорта от признанных мировых производителей.

Из другого документа можно также выйти к этому месту, если добавить в конце URL через знак #имя_якоря

Якорь ссылки – картинка

Ссылкой может быть и любая картинка.

По умолчанию, ссылки подчёркиваются браузером сплошной синей чертой, а ссылки-картинки приобретают синюю рамку.

Ссылки-картинки приобретают синюю рамку

Что бы избавится от неё – в файл CSS для сайта добавляют простое правило:

Это указание сделать нулевую толщину бордюра у всех ссылок-картинок.

Продолжение

В следующем посте, я расскажу о почтовых ссылках, их атрибутах и методах «предохранения» от злобных спамеров ��

Эта статья целиком посвящается тегу IMG (англ. image — изображение) и его атрибутам. Вставка картинки…

Обновлено! Вебинар состоялся! Сервис вполне работает. Следите за анонсами новых вебинаров на этом блоге. Я…

Будучи преподавателем ВЕБ дизайна, я не раз слышал о двух подходах к изучению основ создания…

В чём разница между url, href и src?

URL Адрес - Адреса применяются для указания пути к файлу, например, для установки фоновой картинки на странице. Для этого применяется ключевое слово url(), внутри скобок пишется относительный или абсолютный адрес файла.

Атрибут href - Задает адрес документа, на который следует перейти.

Атрибут src - Указывает адрес файла (URL), который будет загружаться во фрейм. Это может быть HTML-документ, изображение или серверная программа.

Очень жаль, потому что в сети очень много информации на этот счет.

url - адрес, путь.
src , href - атрибуты тега.

Гиперссылка — что это такое, как сделать ссылку и вставить в HTML код (href, target blank и другие атрибуты тега a)

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

Но для того, чтобы правильно создавать гиперссылки и вставлять их в код вебстраниц (например, своего сайта), необходимо изучить соответствующую область языка гипертекстовой разметки (что это?), поскольку эти элементы образуются с помощью HTML-тега a, который имеет атрибуты, позволяющие модернизировать ссылку до нужного вида.

Итак, сегодня мы разберем, из каких частей состоит гиперссылка, каким образом использование атрибута target blank дает возможность открывать страницу в новом окне (вкладке), как любую картинку делать ссылкой и много других важных подробностей. Кроме всего прочего, эта информация продвинет вас в изучении языка HTML.

Что такое гиперссылка и можно ли ее называть ссылкой?

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

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

Как я уже упоминал, гиперссылка образуется в языке HTML посредством тега a, однако, это касается лишь видимых ссылок, которые доступны на веб-странице пользователям.

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

Например, с помощью служебных гиперссылок возможно отображение иконки favicon для сайта. Их можно увидеть только в составе HTML-кода (для этого нажмите комбинацию клавиш Ctrl+U для любой открытой в браузере страницы):

Сейчас пока оставим в покое служебные линки и рассмотрим общую закономерность создания гиперссылок. Общее заключается в том, что все они имеют обязательный атрибут href, в качестве значения которого указывается адрес документа (URL). Ссылка HTML может вести как на внутреннюю страницу сайта, так и на внешний документ.

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

Как сделать гиперссылку в HTML с помощью href

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

Это содержимое называется анкором и может быть представлено в виде текста или изображения (о том, как сделать картинку ссылкой, поговорим подробнее ниже). Как я уже отмечал, анкор будет кликабельным. Рассмотрим пример гиперссылки с текстовым содержанием. Вот как будет выглядеть ее конструкция в HTML-коде:

А вот так та же HTML ссылка будет отображаться на веб-странице в браузере:

Помимо HTTP может быть использован защищенный протокол HTTPS. Линк не обязательно должен вести на вебстраницу. Все зависит от значения href, в качестве которого может быть указан путь до какого нибудь файлика:

Таким образом, можно создать ссылку на скачивание файла, который запакован в архив:

На вебстранице данный линк примет такое обличье:

Браузер "понимает", что объект с расширением .zip может быть предназначен только для скачивания, что и предлагает сделать юзеру.

Кстати, путь до любого файла иногда указывается через ФТП (тут об этом протоколе сведения). Тогда в URL адресе, который применяется в качестве параметра атрибута href, следует просто заменить протокол HTTP (HTTPS) на FTP. Ссылка на файл будет выглядеть следующим образом:

Но и это не все. Подобным образом создается ссылка на электронную почту с использованием псевдо-протокола mailto для быстрого доступа к средству написания письма:

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

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

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

Я привел в пример только самые распространенные протоколы, входящие в состав URL, который, в свою очередь, является параметром атрибута href при формировании гиперссылки. Кроме HTTP (HTTPS), FTP и mailto существуют и другие для решения задач более узкого профиля. Возможно, мы их рассмотрим поподробнее в других публикациях.

Виды гиперссылок

А теперь попробуем классифицировать линки по тем или иным признакам.

По области их действия:

1. Внешние — ведут на страницы, располагающиеся вне сайта, на котором они проставлены;

2. Внутренние — связывают вебстраницы, находящиеся в пределах одного веб-ресурса.

1. Текстовые — ссылки в виде слова, словосочетания или фрагмента текста

2. Графические — в этом случае анкором гиперссылки является изображение (в том числе миниатюра), баннер, кнопка и т.п.

По типу URL, выступающего в качестве значения атрибута href:

1. Абсолютные, которые содержат явное указание протокола передачи данных (например, HTTP) и доменное имя сайта (в этой статье все о доменах).

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

2. Относительные, одним из вариантов создания которых будет путь, указанный относительно корневой папки веб-сайта (отсюда и название этого вида гиперссылок). При этом из URL адреса будет изъят протокол (HTTP) и домен сайта:

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

Атрибуты тега a

Теперь посмотрим, какие еще атрибуты, кроме обязательного href, существуют, и как они могут повлиять на создание гиперссылки. Наиболее полные данные в этом отношении, так сказать, "из первых рук" вы можете найти на официальном сайте Международного Консорциума W3C, на котором актуальная информация появляется быстрее всего.

Я решил предоставить вам страничку со спецификацией по тегу a в соответствии с версией HTML5, которую принимают все популярные браузеры (хотя на разных стадиях разработки уже находятся модификации 5.1 и 5.2 языка гипертекстовой разметки):

На этой странице даны все необходимые ссылки и пояснения для каждого элемента. Обратите внимание, что кроме атрибутов, предназначенных конкретно тегу a, для него могут быть прописаны универсальные (глобальные) атрибуты, которые подходят для всех HTML-тегов.

К сожалению, вся информация здесь доступна только на английском, поэтому даю на всякий случай возможность изучить ее на русском (тут и тут) на очень качественном сайте.

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

Среди всех атрибутов тега a есть, например, rel, одно из значений которого nofollow предназначено исключительно для поисковых систем и позволяет настроить значимость ссылки. Вебмастера используют rel="nofollow" для того, чтобы запретить роботам Яндекса и Google переходить по гиперссылкам и, соответственно передавать ее текст, PageRank и тИЦ.

Target blank — как открыть ссылку в новой вкладке

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

  • _blank — открывает страницу в новой вкладке браузера;
  • _self (значение по умолчанию) — открывает вебстраницу в текущей вкладке;
  • _parent — загружает страничку в родительский фрейм;
  • _top — этот параметр отменяет все созданные фреймы и загружает страницу в полном окне веб-браузера.

Мы пока рассмотрим два первых параметра target, остальные, касающиеся фреймов, требуют более глубокого осмысления, поэтому их разберем в соответствующей статье.

Итак, по умолчанию при переходе по гиперссылке страница, на которую она ведет, будет открываться в той же вкладке, что и вебстраница, где находится данный гиперлинк. Это определяет значение «_self», которое обычно не указывается, поскольку является параметром по умолчанию. Взгляните на код гиперссылок ниже следующего вида:

Они являются полностью идентичными и инициируют открытие веб-страницы в текущей вкладке. Если же вы хотите, чтобы странички открывались в новой вкладке при переходе по ссылкам, то следует добавить при формировании линка атрибут target с параметром blank:

Хотя некоторые вебмастера и сеошники считают, что лучше, если посетителю дать возможность выбора (то есть не прописывать target blank), ведь при необходимости в новой вкладке страницу можно открыть и с помощью контекстного меню (подвести курсор к линку, щелкнуть правой кнопкой мышки и нажать на соответствующий пункт):

Причем, как видите, в этом случае у юзера преимущество в том, что есть возможность открыть вебстраницу не только в новой вкладке, но и в новом окне (такой вариант нельзя реализовать посредством HTML, только с помощью скриптов).

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

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

Кроме этого, открытие страницы в соседней вкладке очень удобно с точки зрения юзабилити (здесь о создании комфортных условий для пользователей на сайте). Юзер перебирается по гиперссылке на вебстраничку, получает дополнительную информацию и, как ни в чем не бывало, продолжает изучение основного материала.

Для создания объективной картины следует добавить, что применение «target="_blank"» к любым внешним ссылкам, оказывается, таит в себе некоторую угрозу безопасности. Если кому интересно, то можете почитать вот эту статью на Хабре, где даны рекомендации по устранению проблем при использовании target blank, а также представлены альтернативные варианты реализации задачи по открытию вебстраницы в новой вкладке.

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

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

Как создать хеш-ссылки, якоря и зачем они нужны?

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

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

У меня для каждой такой гиперссылки прописан еще и «target="_blank"», поэтому эта же страничка будет открыта в новой вкладке, но уже на нужном месте. Это создает дополнительный комфорт для посетителей при изучении материала.

Оформляются подобные линки довольно просто. Для начала нужно создать якорь (anchor), проставив в необходимом месте страницы соответствующую метку в виде идентификатора ID, являющегося одним из глобальных атрибутов, применяемых к любому HTML-тегу.

Благодаря универсализму ID подобные метки-якоря можно установить практически в любом месте вебстраницы. Поскольку обычно текст разделяется на абзацы, то их можно применить и к тегу параграфа p. Я в основном проставляю якоря к подзаголовкам H2 и H3, которыми статьи разделены на логические части:

Отметив таким образом все нужные места в HTML коде, далее создаем гиперлинки на них. Для этого в конце после последнего слэша «/» в URL (являющегося, как вы уже знаете, значением атрибута href) прописываем последовательно знак решетки «#» и имя метки (ID):

Причем, если подобная якорная ссылка проставлена на той же странице, что и якоря, то часть урла до последнего слеша перед решеткой включительно может быть опущена и в качестве параметра href использованы только «#» плюс наименование ID (в сущности, это один из вариантов относительной ссылки):

То есть при составлении оглавления мануала для оптимизации HTML кода вы вполне можете воспользоваться этим облегченным вариантом. Если в качестве URL вы поставите лишь один знак решетки, без названия идентификатора, то с места, где находится такая ссылка, страничка будет прокручиваться до конца вверх:

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

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

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

Если ему требуется повторять такие действия неоднократно, то он сможет быстро определять, какие ссылки он уже нажимал, а какие нет. Такая опция заложена практически в каждом браузере. Нет нужды объяснять, насколько это удобно и сколько времени экономит.

По умолчанию и без применения средств CSS гиперссылки выделены подчеркиванием и тремя вариантами цвета, каждому из которых соответствует свой атрибут для тега body:

  • link — задает цвет гиперлинка на вебстранице (по умолчанию синий, который в шестнадцатеричной системе обозначается #0000ff);
  • alink — цвет активной гиперссылки на тот промежуток времени, пока она обрабатывается веб-браузером (красный #ff0000);
  • vlink — цвет посещенной юзером ссылки (фиолетовый, #800080).

Как же заменить цвета ссылок, отображаемых браузерами для вашего сайта? Ну, для простого HTML-сайта, где странички формируются вручную (а полнофункциональных ресурсов такого рода в современных реалиях, думаю, практически не осталось, разве что простенькие дневники и лендинги) нужно просто найти открывающий тег и прописать для него нужные параметры (кстати для обозначения цвета можно использовать и его название), например:

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

Для большинства тем WordPress (тут о действиях с шаблонами WP, а тут об их структуре), например, это может header.php. Необходимо внимательно изучить фрагмент, относящийся к . В современных темах там, скорее всего, указан код функции body_class(), которая выводит стилевое оформление всей страницы, включая гиперссылки:

А в этом случае, увы, все сложнее. Простая вставка значений link, alink, vlink ничего не даст, надо будет еще отменить установленные стили для гиперссылок в файле style.css. Вот так.

Чтобы убрать нижнее подчеркивание, можно воспользоваться одним из универсальных HTML атрибутов style, который применяется как один из вариантов для подключения свойств CSS к HTML документу. В качестве его параметра нужно указать «text-decoration none»:

В итоге получаем получаем гиперссылку без подчеркивания. Но такой способ рекомендуется не ставить на поток, поскольку это утяжеляет файл, что негативно сказывается на скорости загрузки страницы (конечно, выигрыш незначительный, но..курочка по зернышку клюет). Лучше использовать более оптимальный вариант в виде создания отдельного файла style.css со стилевыми свойствами.

Как сделать картинку ссылкой в HTML

Эта операция не должна вызвать больших сложностей. Здесь надо воспользоваться тем, что тег img, который в HTML отвечает за вывод изображений, является строчным элементом, а значит, может быть задействован в качестве анкора, если его поместить между тегами и :

В результате картинка становится кликабельной и ведет на соответствующую страницу:

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

Затем выделяете полученный код картинки и нажимаете кнопку «link» редактора, после чего в появившемся окне вставляете нужный скопированный гиперлинк:

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

Что такое href= "#" и почему он используется?

На многих сайтах я вижу ссылки с href="#" . Что это значит? Для чего он используется?

О гиперссылках:

Основное использование якорных тегов - - это гиперссылки. Это в основном означает, что они вас куда-то отправят. Для гиперссылок требуется свойство href , поскольку оно определяет местоположение.

А хэш - # внутри гиперссылки указывает идентификатор элемента html, которому нужно прокручивать окно.

href="#some-id" будет прокручиваться до элемента на текущей странице, например

href="//site.com/#some-id" переместится на site.com и прокрутится до идентификатора на этой странице.

Прокрутите вверх:

href="#" не указывает имя идентификатора, но имеет соответствующее местоположение - верх страницы. Щелчок якоря с помощью href="#" переместит положение прокрутки вверх.

Это ожидаемое поведение в соответствии с документацией w3.

Заполнители гиперссылок:

О тегах привязки:

Еще один вопрос, который вам может быть интересно: "Почему бы просто не оставить свойство href?". Общий ответ, который я слышал, заключается в том, что свойство href требуется, поэтому оно должно присутствовать на якорях. Это ЛОЖЬ! Свойство href требуется только для привязки, чтобы фактически быть гиперссылкой! Прочитайте от w3. Итак, почему бы просто не оставить это место для заполнителей? Браузеры отображают стили по умолчанию для элементов и изменят стиль по умолчанию тега привязки, который не имеет свойства href. Вместо этого он будет рассматриваться как обычный текст. Это даже изменяет поведение браузера относительно элемента. Строка состояния (внизу экрана) не будет отображаться при наведении на якорь без свойства href. Лучше всего использовать значение href-заполнителя на якоре, чтобы убедиться, что оно рассматривается как гиперссылка.

Посмотрите эту демонстрацию, демонстрируя различия в стиле и поведении.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL