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

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

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

Якорные метки < a>. Вам нужна открывающая этикетка и закрывающая этикетка. Все, что между ними, — это сам якорь.

Если вы хотите использовать только одно слово в качестве якоря, используйте
Только одно < a> слово< /a> якорная метка.

Чтобы охватить весь абзац, нужно обернуть его меткой < a>

<! - Изображения также можно использовать в качестве якорных элементов и GT
< a> < img src = "http://example.com/image-file.png"/> </a>,.

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

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

Для создания гиперссылки требуется три функции: HREF, цель и загрузка.

Для определения цели гиперссылки требуется атрибут HREF

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

В данном примере < a href = "http://example.com"> Ankara Text</a>,.
Ссылка ведет на сайт < em> www.example.com</em>.

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

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

Например:.

< a href = "#pecify_a_hyperlink_target_href"> Этот первый элемент якоря </a>,.
относится к названию этой части статьи.
< code> id</code> Соответствует элементу заголовка раздела.
< code> mailto</code> Могу ли я использовать ,,,,,
Чтобы создать ссылку, которую можно попробовать запустить на компьютере
Почтовая программа компьютера по умолчанию. Попробуйте!
< a href="mailto: [email protected]"> свяжитесь</a> с нами!
Нажмите на ссылку ниже, чтобы открыть окно уведомления JavaScript.
 < a> Нажмите на ссылку, что< /a> произойдет.

Элементы HREF просты в использовании. Но это нечто большее — он позволяет узнать о цели.

Установите местоположение и откройте ссылку: цель.

Получите ссылку MailTo, созданную в примере выше. Его исходный код:.

< a href="mailto: [email protected]"> свяжитесь</a> с нами!

Хотя ссылка полезна, способ ее открытия не идеален. В зависимости от настроек браузера и компьютера HyperLink может перенаправлять пользователей на почтовые службы, такие как Gmail или Yahoo! Почта. Однако это вынуждает их отказаться от наших ресурсов.

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

Приглашаем вас < href = "mailto: [email protected]"
 target = "_ blank" rel = "noopener"> contact</a> us!

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

Определить ресурс для скачивания: скачать

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

Атрибут HREF также используется для определения якоря, который запускает загрузку. Расположение загружаемого файла.

Пример применения:.

Создайте ссылку, которая будет отображаться в браузере
< a href = "http://example.com/file.ext" download = "example_file" > скачать файл </a>
 Характеристики <code> href</code>; определяют, какой файл используется
 Для получения
< code> download</code>, чтобы указать имя файла для загрузки.

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

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

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

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

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

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

Внешние ссылки важны по ряду причин.

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

При использовании внешних ссылок не связывайтесь напрямую с конкурентами. Не забудьте применить target = » _blank ». При открытии внешней ссылки в новой вкладке браузера пользователь остается на сайте.

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

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

Подробнее < a href="http://example.com"> Нажмите здесь </a>

Однако лучше не использовать такие анкеры. Этому есть несколько причин:.

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

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

Если вы хотите получить больше трафика на свой сайт
< a href = "http://www.google.com/" target = "_ blank" rel = "noopener" >,.
 Поисковые системы </a > ,,
 Проверьте < a href = "/seo/" > seo </a> наше руководство,.
 Вы найдете советы о том, как улучшить рейтинг вашего сайта.

Первая ссылка сообщает детектору поисковой системы и пользователю, что http: //www.google.com связан с ключевым словом 'search engine'. Вторая ссылка информирует пользователя о том, что страница по соответствующему URL /SEO / связана с ключевым словом 'SEO Guidelines'.

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

Absolute URL — который содержит полное (абсолютное) описание ссылки. К ним относятся протокол (HTTP), полное доменное имя и путь к файлу.

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

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

< a href = "/product/blue-product/" > Перейдите на страницу Blue Product Page! < /a>,.
< a href = ". / blue-product/"> blue Миграция на страницу продукта! </a>,.

Первая пенсия гласит. 'Перейти на самый нижний уровень дерева и найти в этом каталоге продуктов и открыть в этой папке blue-product'. Второй аннуитет гласит: 'Перейти в папку blue-product и найти в этом каталоге продуктов и открыть в этой папке blue-product'. Blue » Оба якоря указывают на url: http: //example.com/products/blue-product/.

Предположим, вы размещаете ссылку на страницу "О нас", которая является прямым потомком главной страницы. Спросите, как бы вы это сделали:.

< a href "/about-us/" > Узнайте больше о нас. < /a>,.

В данном примере: "Вернитесь на нижний уровень дерева каталогов и найдите папку About-US".

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

< a href "large.php" > Посмотрите все красные продукты, доступные в большом размере! </a>,.

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

Главное, что нужно сделать с соответствующим адресом URL:.

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

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

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

Определяет целевой язык анкора: hreflang.

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

< a href = "http://example.com" hreflang = "es" ></a>, в браузер.
 Может быть использован переход на другой язык
< code> hreflang</ code>.

Типичный RELing

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

Эту статью написал < a href="https://plus.google.com/+onomist Writer".
rel = "автор" < отличный писатель </a>

Существует несколько значений, которые получают характеристику

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

Тип.

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

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

Значение типа должно быть действительным типом IANA. Некоторые из наиболее часто используемых цен — Text/HTML, Text/CSS, Application/JavaScript и MultiPart/Form-Data.

Путеводитель.

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

Связанные