Html внешние ссылки пример

Анкоры и ссылки: как они работают в HTML

Гиперссылки — одна из фундаментальных технологий, которые делают интернет информационной магистралью. Понимание того, как использовать анкоры, является основным аспектов, который нужно освоить в HTML.

Элемент анкора

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

Чтобы ссылка охватывала весь абзац, нужно обернуть его в теги .

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

Наиболее важные атрибуты

Для создания гиперссылок необходимы три атрибута: href, target и download.

Укажите цель гиперссылки: href

Атрибут href используется для указания цели или адресата для анкора. Он применяется для определения URL-адреса, к которому должен привязываться анкор.

В этом примере текста анкора ссылка ведет на URL-адрес www.example.com .

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

• Использовать для создания прямой ссылки на любой элемент веб-страницы, которому был присвоен идентификатор.
• Для связи с ресурсом, используя протокол, отличный от http.
• Для запуска скрипта.

Этот первый элемент анкора ссылается на заголовок этого раздела статьи. Используя id, мы можем назначить для раздела элемент заголовка. Мы можем использовать протокол mailto, чтобы создать ссылку, которая будет пытаться запустить на вашем компьютере почтовую программу, используемую по умолчанию. Давайте попробуем! Нам бы хотелось, чтобы вы связались с нами! Если вы нажмете ссылку ниже, появится окно оповещения JavaScript. Нажмите ссылку, чтобы увидеть, что произойдет .

Элемент href прост в использовании. Но можно получить намного больше, познакомившись с атрибутом target.

Укажите место для открытия ссылки: target

Рассмотрим ссылку mailto, которую мы создали в предыдущем примере. Ее исходный код:

Ссылка полезна, но способ ее открытия не идеален. В зависимости от настроек браузера и ПК гиперссылка может перенаправить пользователей на сайты таких почтовых сервисов, как Gmail или Yahoo! Mail. Но из-за этого они посетители покинут наш ресурс.

Чтобы решить эту проблему, используйте атрибут target со значением _blank.

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

Укажите ресурс для загрузки: download

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

Атрибут href также применяется при создании анкора, который инициирует загрузку. Он указывает на место размещения загружаемого файла.

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

Атрибут href в приведенном выше примере указывает на реальный файл. Когда загрузка будет завершена, его имя будет Example_File.ext, где .ext - это формат файла. Нет необходимости включать расширение файла в значение, присваиваемое атрибуту download. Оно будет идентифицировано и добавлено к имени загруженного файла.

Внутренние и внешние ссылки

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

Создание внутренних ссылок важно по нескольким причинам:

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

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

Внешние ссылки важны по нескольким причинам:

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

При использовании внешних ссылок не ссылайтесь на прямых конкурентов. И не забывайте применять атрибут target="_ blank". Открывая внешние ссылки в новой вкладке браузера, пользователи продолжают оставаться на вашем сайте.

Никогда не говорите «Нажмите здесь»

Конечно, вы видели и ссылки, которые выглядят примерно так:

Но лучше не использовать такие анкоры. Для этого существует несколько причин:

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

Текст анкора должен быть кратким и идентифицировать ключевые слова, относящиеся к веб-странице. Два примера правильно выбранного текста ссылки:

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

Первая ссылка сообщает поисковым роботам и пользователям, что сайт http://www.google.com имеет отношение к ключевому слову «поисковые системы». Вторая ссылка сообщает, что страница, расположенная по относительному URL-адресу /seo/, связана с ключевым словом «руководство по SEO».

Абсолютные и относительные URL-адреса

Абсолютные URL-адреса - это те, которые содержат полное (абсолютное) описание адреса ссылки. Они включают в себя протокол (http), полное имя домена и путь к файлу.

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

Например, если мы находимся по адресу: http://example.com/products/red-product/, и хотим сослаться на страницу синего товара, можно использовать любой из следующих анкоров:

Перейти к странице синего товара! Перейти к странице синего товара!

Первый синтаксис говорит следующее: «Перейдите на самый нижний уровень дерева, найдите в нем каталог product, а в нем откройте папку blue-product. Второй синтаксис говорит следующее: «Перейдите в родительский каталог для red-product и в нем вы найдете папку blue-product". Оба анкора указывают на URL-адрес: http://example.com/products/blue-product/.

Предположим, что нужно разместить ссылку на страницу «About Us», которая является прямым потомком главной. Вот как можно это сделать:

В этом примере говорится следующее: «Вернитесь к самому нижнему уровню дерева каталогов, а затем найдите папку about-us».

Предположим, что мы снова находимся по адресу http://example.com/products/red-product/, и хотим разместить ссылку на страницу подкатегории. Она располагается в каталоге /red-products /category.

Приведенный выше URL-адрес заставляет браузер искать в текущей папке файл large.php и преобразовать его в URL-адрес - http://example.com/products/red-product/large.php.

Главное об относительных URL:

• Если URL-адрес начинается с «/», то мы заставляем браузер искать указанный файл или папку на самом нижнем уровне дерева каталогов.
• Если URL-адрес начинается с «../», то мы указываем браузеру на необходимость вернуться на один уровень вверх в дереве каталогов.
• Если URL-адрес начинается с имени файла или папки, то мы указываем браузеру искать ресурсы в текущем файле.

Другие полезные атрибуты анкора

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

Укажите язык целевого анкора: hreflang

Этот необязательный атрибут сообщает браузеру язык документа, на который ведет ссылка. Например, если нужно сообщить браузеру, что целевой источник написан на испанском, мы будем использовать в качестве значения hreflang соответствующий код языка в формате ISO 639-1 .

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

Атрибут rel

Атрибут rel используется для описания отношений между анкором и целевым источником. Например:

Существует несколько значений, которые принимает атрибут rel:

• rel="nofollow": используйте это значение, если ссылаетесь на ресурс, но не хотите передавать ему ссылочный вес своего сайта. Например, если ссылаетесь на спамовый сайт в качестве примера того, чего не нужно делать.
• rel="alternate": если сайт имеет больше одной версии, используйте это значение для идентификации связанного ресурса в качестве альтернативной версии текущей страницы.
• rel="bookmark": это значение используется для определения URL-адреса, который является постоянным и может использоваться для закладки.
• rel="help": идентифицирует связанный ресурс как файл справки для страницы с этим значением.
• rel="license": используйте этот атрибут для ссылки на лицензию авторских прав.
• rel="next": используйте это значение для ссылки на следующий документ из серии.
• rel="prev": используйте это значение для ссылки на предыдущий документ из серии.
• rel="noreferrer": если хотите разместить ссылку на внешний сайт, но не хотите, чтобы целевой источник знал, кто на него ссылается, используйте это значение.

Атрибут type

Необязательный атрибут type используется для идентификации типа интернет-носителя или MIME типа целевого документа. Например, при создании ссылки на сайт можно добавить атрибут type="text/html", чтобы сообщить браузеру, что ссылка указывает на HTML-документ.

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

Значение type должно быть допустимым типом IANA. Некоторые из наиболее часто используемых значений: text/html, text/css, application/javascript и multipart/form-data.

Навигация

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

Связанные элементы

Название элемента	Атрибуты	Примечания
link	href rel media title type	Элемент используется для определения отношения между HTML-документом и внешним ресурсом. Он чаще всего применяется для определения взаимосвязи между документом и внешними таблицами стилей CSS.
anchor	hreflang download target title href name	Элемент используется для создания гиперссылки на другую веб-страницу или другое место на той же веб-странице.
base	target href	Элемент используется для определения базового адреса, от которого можно создать все относительные URL, отображаемые на веб-странице. Если имеет атрибут target, атрибут target, то он будет использоваться как атрибут по умолчанию для всех гиперссылок, отображаемых в документе.

Источник