Типы адресации ссылок в HTML. Что такое относительный и абсолютный путь страницы?

типы адресации ссылок в html. что такое относительный и абсолютный путь страницы?

Проблема адресации страниц

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

В реальной жизни при поиске пути до места назначения, вы можете остановить прохожего и спросить у него дорогу. К примеру, его ответ будет таков, - «Идите прямо, затем сверните направо». Это яркий пример использования относительной ссылки, то есть путь до места назначения задается относительно текущего положения. В HTML такой прием используется для ссылок на внутренние страницы сайта.

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

Заметка
Правильный выбор типа адресов может упростить администрирование страниц сайта в дальнейшем. Например, если вы используете абсолютные пути для ссылок на внутренние страницы, то при смене домена (имени сайта) они станут нерабочими.

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

Допустим, доменом вашего сайта является test-site.ru. Его директории имеют структуру как на рисунке, расположенном ниже. У нас есть папка pages для хранения HTML-страниц и папка public_html  являющаяся корневой. От корневой папки ведется отсчет и все, что находится выше, не доступно через браузер.

Структура директорий для примера адресации страниц сайта
рис 1. Cтруктура директорий

Для использования относительных ссылок отредактируем файл index.html, находящийся в корневой папке. Добавим в него три ссылки на второстепенные страницы, лежащие в папке pages, при этом пути будут указаны в формате «путь_до_файла/имя_файла.html».

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Добавление относительных ссылок в index.html</title>
    </head>
    <body>
        <h3>Вы можете осуществить переход на следующие страницы:</h3>
        <a href="pages/first-page.html">Первая страница</a><br>
        <a href="pages/second-page.html">Вторая страница</a><br>
        <a href="pages/third-page.html">Третья страница</a><br>
    </body>
</html>

Относительные пути не требуют указания домена сайта (test-site.ru). URL-адрес начинается с той директории, в которой расположен редактируемый файл. Чтобы страница index.html сослалась сама на себя, нужно добавить в атрибут href значение index.html, без указания каких либо директорий.

Теперь отредактируем страницы, расположенные в папке pages. Добавим в них ссылки с относительными путями на файл index.html. Для этого адрес должен быть указан в формате «../index.html».

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Добавление ссылки на главную страницу</title>
    </head>
    <body>
        <h3>Вернитесь обратно, нажав на ссылку:</h3>
        <a href="../index.html">Обратно на главную</a>
    </body>
</html>

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

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

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

С абсолютными путями все проще. Они должны иметь полный набор идентифицирующих данных ресурса: указание протокола, имени домена, доменной зоны и пути к файлу на сервере. Подробный разбор таких адресов дается в статье «что такое URL-адрес?». Для примера, абсолютная ссылка может выглядеть следующим образом <a href="https://test-site.ru/directory/page.html"></a>.

Последние публикации