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

В нашем справочнике есть целый раздел, посвященный HTML.

Рассмотрим, что они из себя представляют ссылки в HTML в абсолютном и относительном вариантах.

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

Абсолютный и относительный пути в ссылках

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

В таком виде мы вводим ссылки в поисковую строку браузера для получения доступа с объекту. При этом любой URL обязательно начинается с наименования протокола передачи данных и включает имя домена («http://site.ua/»). Именно в подобном виде путь до объекта (веб-страницы или файла) используется в качестве параметра атрибута href при создании абсолютной ссылки с помощью средств HTML для ее последующей вставки в контент заданной странички (документ):

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

Варианты относительных ссылок

Если представленный выше пример полного пути в URL-адресе немного модифицировать, убрав «http:», то как раз получится образец относительного пути:

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

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

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

На его основе таким же образом создается относительная гиперссылка:

Возьмем для наглядности пример с файлом (file1.html).

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

Если файл (в нашем примере file2.html) входит напрямую в состав корневой директории, то путь к нему относительно корня (site.ua) примет такой вид:

Тут самый первый слеш «/» заменяет корневую папку «site.ua/». То есть, при создании перехода на главную страницу сайта с любой его страницы можно использовать короткую конструкцию:

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

Скажем, с абсолютно любой странички проекта можно проставить относительную ссылку на иную страницу с указанием рубрики.

Возьмем для примера такой блог, в котором есть рубрика «HTML» и эта статья внутри рубрики:

А, скажем, относительная ссылка на статическую веб-страницу (которая не принадлежит ни одной рубрике, но входит в состав корневой папки «Блог.com») с любой другой странички в пределах одного проекта может выглядеть так:

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

Теперь давайте рассмотрим еще несколько случаев создания линков относительно текущего веб-документа (файла или web-страницы), а не корня сайта. Здесь один из файлов будет донором (с которого проставлена ссылка), а другой акцептором (на который ведет гиперссылка).

1. Файлы расположены в одной папке:

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

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

Тогда в процессе создания относительной гиперссылки в содержании донора следует прописать дополнительно директорию, где находится акцептор:

Если целевой файл, на который указывает ссылка, находится еще на уровень ниже относительно донорского документа в иерархической структуре (к примеру, располагается в catalog3, который вложен в catalog2), то путь будет таким:

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

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

При таком раскладе перед наименованием файлика необходимо поставить слеш «/» и двоеточие, означающее, что акцептор расположен на один уровень выше:

Если документ, на который ссылаются, находится на целых два уровня выше (скажем, донорский документ пребывает в папке catalog3, которая вложена в catalog2), то HTML код относительной гиперссылки примет следующий вид:

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

4. Есть еще вариант, когда акцептор и донор расположены в разных папках одного уровня:

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

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

Если разница 1 уровень, то относительной ссылкой является такая:

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

Особенности относительных и абсолютных гиперссылок

Если в качестве целевого объекта абсолютной или относительной ссылки указать не файл, а всю директорию, то в конце URL желательно прописывать слеш:

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

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

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

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

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

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

Образец относительного линка в отношении главной: