Чем отличается абсолютная ссылка от относительной

Всё, что вы хотели знать об адресации ссылок.

Абсолютные и относительные ссылки в Excel

Итак, в числе тех распространенных IT-инструментов, в которых применяются абсолютные и относительные ссылки, — программа Excel. Элемент первого типа представляет собой фиксированный (не меняющийся при копировании содержимого ячейки в другое место таблицы) набор координат ячеек, которые определены в формуле. То есть при использовании абсолютной ссылки перемещение ячейки A1 в любую сторону не влияет на содержание формулы — координаты прописанных в ней ячеек не изменятся. Формула будет оставаться в том виде, в котором вписана пользователем в таблицу Excel изначально.

Отметим, что для того, чтобы зафиксировать «абсолютность» ссылки, в формуле необходимо проставить знак $ перед каждой координатой. Запись в ячейке, таким образом, будет выглядеть как = $A$1+$A$2.

В свою очередь, относительная ссылка — это набор координат ячеек в формуле, меняющихся при копировании в другое место таблицы ячейки, в которую вписана формула. То есть если изначально в ячейке A1 записана формула = B1+B2, то в случае с использованием относительной ссылки при копировании данной ячейки на клетку, расположенную правее, — на A2, формула автоматически изменится на = B2+B3.

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

к содержанию ↑

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

Абсолютная ссылка — это адрес ресурса целиком. Обычно такие ссылки ставят на сторонние ресурсы и надеются, что адрес не изменится.

Например:

https://htmlacademy.ruhttps://htmlacademy.ru/blog/boost/tools/chrome-devtools-2

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

Что такое абсолютная ссылка?

Это обычный линк, в котором указывается протокол (http/https), имя домена и по необходимости расположение целевой страницы: https://nextype.ru/ и в HTML это «Некстайп». Если нам нужно направить пользователя на конкретный раздел с портфолио — то https://nextype.ru/works/ и в HTML «Наши работы».

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

Что такое ссылка?

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

Она содержит в себе:

  • url-адрес на который вы хотите ссылаться;
  • элемент, с помощью которого делается переход (это может быть текст, который еще называют анкором, картинка, или сам url).

Каждая ссылка имеет такой вид:

  1. тег <a> оборачивает текст, который вы хотите превратить в ссылку (это сокращение от слова “anchor” c англ. якорь).
  2. атрибут href определяет адрес страницы, куда должна привести ваша ссылка.
  3. закрывающийся тег </a> для окончания ссылки.

Ссылки в структуре веб-страницы

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

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

Важно, чтобы переход по относительной ссылке осуществлялся с веб-страницы, расположенной на том же сайте, где размещен файл. То есть если на портале http://www.page1.com размещается страница с относительной ссылкой вида /page1234.html, то браузер, после того как пользователь кликнет по данной ссылке, начнет загружать файл по адресу http://www.page1.com/page1234.html.

Если, в свою очередь, разместить ее, к примеру, на портале http://www.page2.com, то браузер начнет загружать страницу http://www.page2.com/page1234.html. Поэтому веб-мастеру нужно быть внимательным с размещением относительных ссылок — главное, чтобы им соответствовал реальный файл на сервере.

Под абсолютной ссылкой в веб-странице понимается, в свою очередь, полный адрес файла, выглядящий как http://www.page.com/page1.html. Браузер будет обеспечивать переход к файлу только по этому адресу и никакому другому. Абсолютную ссылку можно встроить в веб-страницу, расположенную на любом сайте, — переход по ней на указанный файл всегда будет корректным.

к содержанию ↑

Относительные ссылки

То, куда ведут относительные ссылки, зависит от расположения текущей страницы. Посмотрим на примере:

Предположим, мы загрузили страницу по такому адресу:

https://htmlacademy.ru/blog/frontend/html/index.html

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

Ссылка на файл в той же папке

1.htmlhttps://htmlacademy.ru/blog/frontend/html/1.html

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

Ссылка на файл в папке ниже текущей

directory/3.htmlhttps://htmlacademy.ru/blog/frontend/html/directory/3.html

Файл в дочерней папке относительно текущей. Перед именем файла через / пишем название папки.

dir1/dir2/5.htmlhttps://htmlacademy.ru/blog/frontend/html/dir1/dir2/5.html

Страница находится на две папки ниже текущей.

Ссылка относительно корня сайта

/2.html https://htmlacademy.ru/2.html

Файл расположен в корневой папке сайта. Для ссылки относительно корня используется /. Такая ссылка сработает только на веб-сервере — с локальными файлами на компьютере это не сработает.

/dir1/dir2/4.pnghttps://htmlacademy.ru/dir1/dir2/4.png

Файл на два уровня ниже корня сайта.

Ссылка на папку выше текущей

../6.htmlhttps://htmlacademy.ru/blog/frontend/6.html

На одну папку «вверх» относительно текущей. Для «подъёма» используется синтаксис ../.

../../7.htmlhttps://htmlacademy.ru/blog/7.html

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

Комбинированная ссылка

../../../dir1/dir2/8.htmlhttps://htmlacademy.ru/dir1/dir2/8.html

На три папки вверх и на две папки вниз относительно текущей — поднялись до корня и последовательно спустились в папки dir1 и dir2.

Все приведённые примеры одной картинкой:

Схема ссылок

Для чего нужны абсолютные ссылки на сайте

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

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

Что будет, если ошибиться

Файл, на который вы ссылаетесь, не загрузится — появится ошибка 404. Если так случилось, можно посмотреть через Chrome DevTools, что с адресом.

Ещё можно по незнанию поставить ссылку на файл на своём компьютере, а потом удивляться, почему не грузятся картинки. Такое в 1998 произошло на сайте Microsoft Game Studios. Разработчики оставили ссылку на файл на диске H:/.

Страница сайта Microsoft Game StudioОбратите внимание на текст ссылки

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

Не делайте плохо, делайте хорошо

Разберитесь в нюансах вёрстки с HTML Academy — знакомство с HTML и CSS бесплатное.

Начать учиться

Рейтинг
( 1 оценка, среднее 5 из 5 )
Загрузка ...