Что такое ссылка и как сделать гиперссылку в HTML
20 Дек, 2011 
Комментариев 32
Здравствуйте, уважаемые читатели блога blogibiznes.ru! Как известно, для успешной раскрутки сайта и повышения его позиций в результатах поисковой выдачи, необходимо проводить качественную SEO оптимизацию сайта. Понятие “поисковая оптимизация“, которая, в свою очередь, делится на внутреннюю и внешнюю, неразрывно связано с такими понятиями, как “внутренние и внешние ссылки сайта”. Поэтому, нам очень важно знать, сколько ссылок должно быть на сайте, как проверить их количество, как убрать лишние ссылки с сайта и закрыть их от индексации, как наращивать ссылочную массу и т.д. Чтобы ответить на все эти и другие вопросы, касающиеся внутренних и внешних ссылок, давайте, для начала, разберемся, что такое ссылка (или гиперссылка) в HTML.
В этой статье я расскажу, что такое ссылка, как сделать гиперссылку в HTML на сайте, как открыть ссылку в новом окне, как создать ссылку на адрес электронной почты (e-mail) и как сделать ссылкой картинку. Коснемся, также, таких понятий, как html-теги и атрибуты гиперссылок, анкор ссылки, html якорь (anchor) и хеш-ссылки. Итак, начнем.
Что такое ссылка (гиперссылка).
Ссылка, или гиперссылка – это базовый элемент HTML-документа (текстовый или графический), содержащий в себе скрытый адрес, позволяющий связать в одно целое две части одного или разных документов.
Таким образом, гиперссылка, ведущая на другую часть того же самого документа или на другую страницу в пределах одного сайта, называется внутренней. Это очень важный элемент внутренней оптимизации сайта.
Внешняя ссылка служит для связи документов, находящихся на разных сайтах в пределах всей сети интернет и используется для наращивания ссылочной массы при внешней оптимизации.
При нажатии на гиперссылку происходит переход к заданному документу, который будет открыт в активном окне веб-браузера или в новом окне.
Если гиперссылка ведет на веб-страницу или файл, которых не существует (удалены, перемещены) или ее адрес указан неверно, то такая ссылка называется битая. Битых ссылок на сайте быть не должно, так как они вводят посетителей в заблуждение и, перейдя, по такой ссылке человек уже вряд ли вернется на Ваш сайт. Подробнее, о том, почему появляются битые ссылки, как их искать и исправлять, мы поговорим в отдельной статье. А сейчас продолжим.
Как сделать ссылку (гиперссылку) в HTML на сайте.
Сделать ссылку на другую страницу своего или другого сайта очень легко. Для создания гиперссылки надо указать браузеру, что является ссылкой и указать адрес документа, на который она будет вести. Делается это с помощью HTML-тега и обязательного атрибута href:
1 |
<a href="URL">Текст_ссылки (анкор)</a> |
Здесь URL – это адрес документа, на который следует перейти. А текст гиперссылки, расположенный между тегами и , называется анкором ссылки и виден посетителю веб-страницы. Кроме того, что текст ссылки (анкор) информирует читателя, куда будет осуществлен переход, он еще очень важен в поисковой оптимизации (SEO), так как служит одним из определяющих факторов, влияющих на ранжирование Вашего сайта по ключевым словам, содержащимся в этом анкоре. Обычно такой вид ранжирования называют ссылочным.
URL-адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса начинаются с указания протокола (обычно http) и имени сайта, например:
1 |
<a href="https://blogibiznes.ru/chto-takoe-seo-optimizatsiya-sayta.html">Абсолютная ссылка</a> |
Они используются для указания документа на другом сайте (внешняя ссылка).
Допускается делать абсолютные ссылки и внутри одного сайта, однако правильнее использовать для создания внутренней ссылки относительные адреса, которые выглядят короче. Но, анализируя различные сайты, я заметил, что подавляющее большинство веб-мастеров делают внутренние ссылки с абсолютными адресами. Тут есть свой плюс, так как, если у Вас скопируют страницу, то таким образом Вы получите рабочие обратные внешние ссылки.
Как видите, с абсолютными ссылками все просто. Вот с относительными сложнее, поскольку при их создании надо понимать, какое значение атрибута href надо указать, так как оно зависит от исходного расположения документов. Как я уже говорил, никто с этим особо не заморачивается и делает все ссылки на сайте абсолютными. Однако, если Вам интересно подробнее узнать, как правильно создавать относительные ссылки для сайта, могу порекомендовать статью Дмитрия, автора блога ktonanovenkogo.ru. Более подробного и понятного объяснения я еще не встречал.
Для примера, покажу, как будет выглядеть ссылка, ведущая к файлу относительно корня сайта (просто отсекаем все, что слева от третьего слеша в аналогичной абсолютной ссылке):
1 |
<a href="/chto-takoe-seo-optimizatsiya-sayta.html">Относительная ссылка</a> |
Ну а относительная ссылка на главную страницу сайта будет выглядеть так:
1 |
<a href="/">На главную</a> |
Продолжим о том, как делать гиперссылки. Часто можно видеть, как при наведении на ссылку, всплывает текстовая подсказка. Делается это с помощью атрибута title:
1 |
<a title="Всплывающая подсказка" href="https://blogibiznes.ru">Текст ссылки (анкор)</a> |
Цвета и оформление всплывающего текста зависят только от настроек операционной системы и браузера.
Ну вот, как создать ссылку надеюсь понятно. А как вставить гиперссылку в текст веб-страницы сайта? Для этого надо перейти в режим HTML-редактора и просто скопировать туда созданный нами HTML-код.
Как открыть ссылку в новом окне.
По умолчанию, при переходе по ссылке новый документ будет открыт в текущем окне. Однако, при просмотре сайтов лично мне это не удобно. Читая статью и переходя по ссылке, мне удобно, чтобы страница открывалась в новом окне и я мог в любой момент продолжить чтение предыдущей статьи. Другая причина открыть ссылку в новом окне это то, что при переходе на чужой сайт, велика вероятность того, что читатель уже не вернется назад. Особенно, если он совершит несколько переходов и просто не вспомнит, где он был несколько минут назад.
Открыть ссылку в новом окне нам поможет атрибут target тега . По умолчанию он имеет значение _self, которое обычно не прописывается. Для того чтобы открыть документ в новом окне, изменяем значение атрибута target на _blank:
1 |
<a href="https://blogibiznes.ru" target="_blank">Новое окно</a> |
Что делать, если при посещении чужого сайта, где ссылки открываются в текущем окне, Вы хотите открывать их в новом? Надо просто щелкать по ним не кнопкой, а колесиком мыши. В этом случае новая страница откроется в новом окне.
Как сделать ссылку на e-mail (адрес электронной почты).
Создавая почтовую ссылку, надо указать адрес e-mail, используя стандартный протокол передачи электронной почты mailto:
1 |
<a href="mailto:[email protected]">Текст ссылки на e-mail</a> |
При щелчке по этой ссылке откроется программа для работы с электронной почтой, установленная у Вас по умолчанию, где уже будет заполнено поле “Кому”. Чтобы автоматически заполнялась и тема письма, надо сделать ссылку на e-mail такого вида:
1 |
<a href="mailto:[email protected]?subject=тема_письма"›Текст ссылки на e-mail</a>
|
Вместо слов “тема_письма” надо написать нужную тему и, обязательно, латинскими буквами. Делаем это потому, что многие браузеры и почтовые программы плохо работают с кириллицей и есть шанс увидеть в теме письма всякие кракозябры. Используя этот не хитрый совет, Вы сможете создать ссылку на e-mail, не боясь ненужных сюрпризов.
Как сделать картинку ссылкой.
Чтобы сделать любую картинку ссылкой, в HTML применяется тег , используемый для вставки изображений, который прописывается вместо анкора ссылки:
1 |
<a href="https://blogibiznes.ru"><img title="Перейти на главную страницу блога blogibiznes.ru" src="https://blogibiznes.ru/image/Top.jpg" alt="Главная страница блога blogibiznes.ru" /></a>
|
Здесь атрибут title – это всплывающая подсказка, а текст, прописанный в атрибуте alt (альтернативный источник информации), будет появляться на странице, если показ изображений отключен в браузере. Если атрибут title служит, в первую очередь, для удобства читателей, то по атрибуту alt поисковые системы пытаются понять, что изображено на картинке. Рекомендуется прописывать в эти теги ключевые слова, что будет иметь большое значение в поисковой оптимизации. Ведь никто не отменял поиска по картинкам.
Как сделать гиперссылку (html якорь) на одной HTML-странице.
Выше мы уже рассматривали, как создать ссылку на страницу сайта, не важно внутреннюю или внешнюю. Но иногда, приходится делать гиперссылки в пределах одной веб-страницы. Зачем? Ну, например, для того, чтобы при чтении очень длинного текста, у нас была возможность быстрого перехода к какой-либо его части. Или это пригодится тогда, когда в начале статьи Вы публикуете по пунктам ее содержание. Тогда, нажав на нужный пункт, Вы мгновенно перейдете к интересующему Вас материалу. Делаются такие переходы с помощью заранее установленных в теле статьи меток-закладок, называемых html якорями (anchor, не путать с текстовым анкором) и специальных хеш-ссылок.
Для создания якоря сначала делаем закладку с любым именем (используются только латинские буквы, цифры, дефис и подчеркивание), задаваемым с помощью атрибута name тега :
1 |
<a name="Имя якоря"></a>
|
Между тегами и ничего не пишем, чтобы якорь не был виден в тексте.
Теперь надо сделать хеш-ссылку на якорь, где в качестве значения атрибута href пишем символ решетки (# – октоторп или хеш) и выбранное Имя якоря:
1 |
<a href="#Имя якоря">Текст ссылки на html якорь-закладку</a> |
Чтобы ссылка просто вела вверх на начало страницы, пишем в нужном месте такой код:
1 |
<a href="javascript:scroll(0,0);">Вверх</a> |
Другой вариант для прокрутки страницы вверх я подсмотрел у того же Дмитрия на сайте ktonanovenkogo.ru. В этом случае ставим обычную хеш-ссылку, но после символа решетки (#) никакое имя якоря не пишем:
1 |
<a href="#">Вверх</a> |
Если вставить первый или второй вариант ссылки в картинку, то можно использовать такой метод для создания кнопки “Наверх”. Например, так:
1 |
<a href="javascript:scroll(0,0);"><img class="aligncenter size-full wp-image-1393" title="Кнопка Наверх" src="https://blogibiznes.ru/wp-content/uploads/2011/12/Top.jpg" alt="Кнопка Наверх_Top" width="100" height="100" /></a>
|
Дмитрий КтоНаНовенького советует еще один способ установки закладок в тексте веб-страницы, без использования html якорей. Для этого делаем закладку из любого HTML-тега, имеющегося на странице, прописывая ему универсальный атрибут id. Например, делаем закладку из тега заголовка h3:
1 |
<h3 id="Имя якоря">Текст заголовка</h3> |
Текст заголовка
Хеш-ссылку прописываем также, как и в предыдущем случае:
1 |
<a href="#Имя якоря">Текст ссылки на html якорь-закладку</a> |
Важно в атрибуте id первым символом имени якоря прописывать латинскую букву, потом можно использовать любые другие разрешенные символы.
Давайте, для примера, вернемся к заголовку “Как сделать гиперссылку в HTML“, а потом продолжим.
Можно использовать хеш-ссылки для перехода на нужное место не только в пределах одной страницы, но и для перехода на другую страницу сайта. Для этого мы устанавливаем html якорь в нужном месте на нужной странице, а в саму хеш-ссылку перед символом решетки прописываем адрес этой страницы. Например:
1 |
<a href="https://blogibiznes.ru/chto-takoe-seo-optimizatsiya-sayta.html#Имя якоря">Текст ссылки на html якорь-закладку</a> |
Для примера, перейдите по ссылке “поисковая оптимизация” вверху этой страницы и Вы попадете в новой статье сразу к слову SEO.
Виды и цвет гиперссылок в HTML.
Любая гиперссылка на HTML-странице по умолчанию находится в одном из трех состояний:
- Не посещенная ссылка – имеет синий цвет и подчеркивание.
- Активная ссылка – принимает красный цвет во время между щелчком мыши по ссылке и началом загрузки новой страницы. Понятное дело, в таком состоянии она находится совсем недолго.
- Посещенная ссылка – меняет свой цвет на фиолетовый после перехода по ней.
Изменить цвет гиперссылок в html-документе можно при помощи тега и следующих его атрибутов:
- Link – цвет не посещенных ссылок.
- Alink – цвет активной ссылки.
- Vlink – цвет посещенных ссылок.
Все приведенные атрибуты можно объединять:
1 |
<body link="#1122cc" vlink="#6611cc" alink="#d14836">
|
Надеюсь, теперь понятно, как создать гиперссылку на HTML-странице и на e-mail, как сделать картинку ссылкой, что такое текстовые анкоры, хеш-ссылки и html якоря, какие бывают html-теги и атрибуты ссылок. Я постарался, насколько смог, подробно рассказать, что такое ссылки в HTML и какие они бывают. Напомню, что вставка гиперссылок в текст производится только в режиме HTML.
Таких длинных статей еще писать не приходилось, более 10 000 символов. Но на этом тема ссылок не исчерпана, продолжение следует.
Если для Вас была полезна эта статья, просьба понажимать на кнопочки соц.сетей ниже. До новых встреч на страницах blogibiznes.ru!
Понравилась статья? Нажимай на кнопки:
Спасибо за полезную статью. Все пытаюсь разобраться в тонкостях SEO оптимизации сайта, но пока с большим трудом. Пока только научилась вставлять ссылки с помощью специальной вставки в меню панели инструментов. Надеюсь со временем освою все остальное.
Никто сразу всего не знает. Надо все изучать, и SEO в том числе, тем более, что информации в интернете хватает. Главное теорию совмещать с практикой.
Интересно, теперь буду знать)
Хорошо, подробно, понятно всё изложено. Этот материал, первое, что осваиваешь из всего разнообразия HTML-кода. Когда какое-то время не пользуюсь, приходится опять в памятке смотреть. Ваша статья очень будет полезна тем, что всегда подглядеть можно, если подзабылось, напутал что-то при создании ссылки.
Очень нужная и очень важная инструкция, особенно для новичков. Вспоминаю себя, когда первый свой сайт делала… всех знакомых измучила вопросами по ссылкам.
Очень полезная статья. Я уже во всем этом разобрался пару месяцев назад, но, когда искал информацию,перелопатил множество сайтов. Эту бы статью мне прочесть тогда…
Поэтому и написал о ссылках, собрав всю информацию в одном месте. Вернее, это далеко не все, только самые общие понятия. Но, все же, достаточно для понимания принципа работы с гиперссылками.
Особенно советую обратить внимание на создание хеш-ссылок, очень полезная вещь для удобства читателей.
Спасибо, очень актуальная информация, и главное, что все собрано в одном месте, не нужно искать по разным источникам и книгам. Я в свое время тоже перелопатил множество книг, изучая все эти вещи.
Очень подробная информация…однако для непрофессионала не очень много дающая, к сожалению…
Да чего уж тут не понятного? А кто совсем в этом не разбирается, то можно вставлять простые ссылки через визуальный редактор, даже не видя кода.
Спасибо, в этой статье узнал как сделать гиперссылку в HTML!!!
Уроки на самом деле очень полезные, так что продолжайте нас радовать качественным материалом.
Полезный сайт. Все классно. Спасибо.
Спасибо за полезную статью, буду знать как делать гиперссылки в HTML!
Вау, вот это работа проделана…
супер.
Олег, вы удивляете
Вот только согласна с Оксаной, для людей обычных пользователей, кто не хочет лезть в дебри, вставка ссылок через редактор – оптимальный вариант
Я это все учила, когда ещё не умела делать сайты. Начала с изучения html кодов. Но уже и подзабыла, редактор нас разбаловал.
Олег, скажите мне пожалуйста, зашла я на DiNews, а там у меня 10 внешних ссылок. И все принадлежат сайтам, которые написали у меня комментарии, хоть делай их неактивными. Но это же не дело. Скажите пожалуйста, как мне их закрыть?
Лариса, это у Вас виджет комментаторов в футере. В нем все ссылки открытые. Я пока с темой Striking не знаком, ничего сказать не могу. Но если ссылки в виджете в настройках шаблона закрыть нельзя, то просто уберите этот виджет. А ТОП комментаторов можно вывести с помощью плагина.
На самом деле хороший пост, особенно для новичков. Так как всё написано внятно.
а если мне просто ссылку на сайт надо сделать в подписи почтового агента мозилла…(((?
Любую ссылку в письме можно сделать с помощью визуального редактора. А подпись можно вообще настроить так, чтобы она автоматически вставлялась во все отправленные письма.
Конкретно про почтовый агент Мозилла не скажу, не пользуюсь.
Очень полезная страничка – полез за одним, нашел то, что искал еще давненько, но так и не нашел. Респект.
Классно. Я наконец поняла, как картинку делать ссылкой. Давно хотела.
Спасибо за статью, что написано простым “языком” и всё понятно!
А мне не понравилось, я вписываю код, а он не работает.
Какой код и куда?
Все сделала как описано. На сайте появляется текст ссылки, но не нажимается. Просто нерабочий текст. А почему? Уже все перепробовала. Может на форумах это сначала проверяется?
А где вы пытаетесь вставить ссылку? Это возможно только в HTML редакторе. На форумах обычно ссылки вставляются с помощью bb-кодов.
Помогите!!! Надо срочно вставить ссылку в документ на интернет страничку.
Ну а в чем проблема? Делайте ссылку по 1 примеру из статьи, только подставьте свой адрес и анкор (текст ссылки).
Я до сих пор не нашла применение якорям. С какой целью их ставят?
Это очень удобно, когда длинный текст и надо сделать навигацию по подзаголовкам. Опять же, блок “Содержание” в начале статьи. Или, когда надо сослаться на другую страницу, но сразу на конкретный раздел, например, в середине.
Отличная статья, все понятно и просто!
Спасибо админу!