http://site.ru/shopПочему мы усложнили задачу, будет ясно в конце данной статьи.
1. Абсолютные ссылки (absolute)
href="http://sites.ru/shop/" — ссылка на главную страницу магазина
href="http://sites.ru/shop/t-shirts/t-shirt-life-is-good/" — cсылка на страницу товара2. Относительные ссылки (relative)
При использовании относительных ссылок за точку отсчета каждый раз берется отправная страница.
href="t-shirts/t-shirt-life-is-good/" — ссылка с главной страницы на страницу товара
href="../../" — ссылка со страницы товара на главную страницуЗдесь можно сделать первый вывод. Хотя относительные адреса выглядят короче абсолютных, однако абсолютные адреса предпочтительнее, так как одну и ту же ссылку можно применять в неизменном виде на любой странице сайта, на какой бы глубине она не находилась.
Промежуточные варианты
Выше мы рассмотрели два крайних случая: чисто абсолютные и чисто относительные ссылки. Однако имеются и другие варианты ссылок. Прежде нужно сказать, что в этом мире всё относительно. Это касается и ссылок. Говоря о том, что ссылка абсолютная, нужно всегда указывать: относительно чего. Для краткости договоримся все промежуточные варианты ссылок, которые мы рассмотрим ниже, называть с помощью следующей конструкции «адрес относительно ...», хотя по сути все они будут абсолютными. Первые два варианта ссылок (1 и 2) будем по-прежнему называть просто «абсолютными» и «относительными».
3. Адрес относительно протокола (protocol-relative)
href="//sites.ru/shop/" — главная страница магазина
href="//sites.ru/shop/t-shirts/t-shirt-life-is-good/" — страница товараGoogle рекомендует переходить именно на адреса без указания протокола. Однако, неизвестно, как долго будет длиться переходный период, так как сейчас считается, что http:// и https:// — это разные сайты
4. Адрес относительно корневой папки домена (root-relative)
href="/shop/" — главная страница магазина
href="/shop/t-shirts/t-shirt-life-is-good/" — страница товараЭто хороший выбор, если все страницы сайта находятся в пределах одного домена. При переносе сайта на другой домен, вам не придется делать массовую замену домена в ссылках.
5. Адрес относительно главной страницы сайта (base-relative)
В HTML есть тег <base>. Он задает базовый адрес, который будет автоматически добавляться ко всем относительным ссылкам и якорям. Ставить этот тег нужно в разделе <head>. В качестве базового адреса мы укажем URL главной страницы:
<base href="http://sites.ru/shop/">
href="" — главная страница магазина
href="t-shirts/t-shirt-life-is-good/" — страница товараКо всем преимуществам предыдущего варианта адресов, здесь добавляется еще одно — теперь сайты можно безболезненно переносить не только на любой домен, но и в любую подпапку, так как название подпапки исчезло из href. Это удобно для разработки — вы собираете сайт в любой подпапке веб-сервера своего рабочего компьютера, и, когда, сайт готов, просто переносите файлы сайта на хостинг.
Остается только привыкнуть к тому что, хотя адреса и записаны, как относительные, ведут они себя как абсолютные. Особенно нужно помнить о якорях, так как привычная конструкция href="#comments" теперь производит переход не в пределах текущей страницы, а переводит на главную страницу, так как впереди будет автоматически приписан URL главной страницы. Теперь впереди хеша нужно явно прописывать адрес текущей страницы: href=«t-shirts/t-shirt-life-is-good/#comments».
Что касается «настоящих» абсолютных ссылок (1, 3, 4), то они работают как обычно — тег base не оказывает на них никакого действия. Действие элемента base распространяется только на html-документ, но не касается относительных URL внутри css, js, svg и др. файлов.
Заключение
Какой вариант ссылок использовать, решать вам, так как в каждом случае нужно учитывать и другие факторы. Я для внутренних ссылок использую адреса относительно главной страницы сайта (5.base-relative). Для внешний ссылок и рассылок с сайта лучше использовать абсолютные ссылки (1.absolute).
Комментарии (28)
alexey-m-ukolov
18.09.2016 14:38А нельзя в base не указывать последний слеш и ставить его в начале путей? Тогда они будут выглядеть как абсолютные.
RouR
18.09.2016 15:15href="../../" — ссылка со страницы товара на главную страницу
href="/"
vladalivan
18.09.2016 15:27+1По этой ссылке вы попадете на главную страницу, так сказать, портала http://site.ru/
В этой же статье описан более сложный случай, а именно: на портале имеется независимый сайт (интернет-магазин), который лежит в папке http://site.ru/shop
Ernado
18.09.2016 17:56+4Безотносительно примера, в таком случае лучше вынести магазин на отдельный поддомен.
amakhrov
19.09.2016 06:44Наши СЕОшники говорят, что поддиректории лучше для SEO, чем поддомены.
Быстрый гуглинг выдает кучу обсуждений по этому вопросу — видать, тема и правда спорная. Но вроде, превалирующая рекомендация — поддиректории.
Kostushko
18.09.2016 15:20-2Ссылки на сайте должны быть только абсолютными, в этом случае когда контент с сайта скопируют у вас есть небольшой шанс что ссылки на ваш сайт останутся. Конечно при копировании ссылки на источник могут быть удалены, изменены, но практика показывает что ссылки в том или ином виде остаются неизменными достаточно часто. Никакой значимой пользы от относительных ссылок нет (перенос сайта на другой домен вариант настолько редкий и настолько просто обходится простой заменой что его не разумно учитывать).
vladalivan
18.09.2016 15:21+1Не совсем понятно как будет копироваться контент. Например, если просто копи-пастить в WYSIWYG редактор, то там будут стоять уже абсолютные ссылки.
А если говорить о ботах, то они учитывают и хост, и base, так как, на мой вгляд, самый распространенный вариант ссылок отнюдь не абсолютный, а root-relative то есть, href="/shop/".
vintage
18.09.2016 16:39-11Использовать ссылки вида
http://sites.ru/shop/?/t-shirts/t-shirt-life-is-goodи не морочить никому голову.
Keyten
18.09.2016 22:05+7Удивительная тенденция на хабре последнее время — создавать посты с тем, что есть в любом учебнике по HTML.
Надо бы написать статью, что за тег <a>, и зачем в нём нужен target.
0Ilya
19.09.2016 00:09+2Тоже заметил, в последнее время прямо наплыв статей, в которых разъясняется элементарщина, в частности по вебу.
Такое чувстсво, что на хабре в песочнице статей годных мало, поэтому модераторы закрывают на это глаза.
Boomburum
19.09.2016 00:13+1Что плохого в том, что рассказываются основы? Когда кто-то приходит на секцию по боксу, его тоже неделю-две заставляют со скакалками прыгать, и никто же не говорит «что это за саранча тут записалась». Флажок «Tutorial» в том числе говорит о том, что статья — обучающая.
vladalivan
19.09.2016 08:17Согласен статья элементарная. Я ее сначала написал для себя, чтобы разложить все по полкам у себя в голове. Но главное решить для себя нетривиальный вопрос «root-lelative(4) vs base(5)». Надеюсь сообщество поможет мне разобраться.
LeonidZ
19.09.2016 22:35+2У меня правила следующие:
— отдельный проект — отдельный домен/субдомен
— в рамках проекта все ссылки root-relative
— между проектами только абсолютные (естественно)
— подгрузка сторонних javascript только protocol relative
— никогда ни при каких условиях не использовать base
mittus
18.09.2016 23:30+1Использую по проектам абсолютные ссылки по четвертому примеру. Если нужно сделать http://sites.ru/shop/, то добавляю рядом с папкой основного сайта папку shop, направляю на нее shop.site.ru и не имею никаких проблем с если так можно выразиться, вложенными проектами. С CMS, которые используют относительные пути, тег base, либо абсолютные из первого примера не дружу, так как возникают нюансы при синхронизации между локальной и рабочей версиями.
vanxant
base уже сто лет в обед, это вообще для фреймов придумывали. Не юзайте эту каку
alexey-m-ukolov
Почему?
Antelle
Попробуйте вставить в страничку с base svg с clippath (что будет). Некоторые библиотеки тоже начинают криво работать.
vladalivan
Это, как раз, частный случай, особенностей якоря. В вашем коде стоит: clip-path=«url(#myClip)». Я сделал тестовую страницу специально с папкой на уровень ниже, и добавил имя папки в url: clip-path=«url(svg/#myClip)». Теперь, ваша картинка работает: http://blox.ru/svg/.
Нужно всегда держать в голове особенность применения якорей с тегом base. Например, Angular JS в режиме HTML5 также использует base, и программисты столкнулись по началу с трудностями.
Antelle
Я не утверждал, что исправить нельзя.
Именно из-за этого и появляются не самые приятные проблемы. Поэтому я поддерживаю первый комментарий.
vladalivan
Cамое простое решение — вынести svg-код в файл ".svg", где base уже не действует.
vanxant
Меняется логика работы путей. Я не говорю хуже/лучше, но она становится другой.
Соответственно, весь ваш код, и на сервере и в браузере, должен об этом знать. Включая все либы, сторонние ресурсы и т.д.
Особенно если у вас красивые человеко-понятные урлы, где параметры передаются в урле же, а то и во фрагменте.
Типа /products/t-shirts/#page2
Happy debugging, как говорится.
vladalivan
1.
Если библиотека не поддерживает стандарты HTML5, то это несерьезная библиотека.
2.
А в чем проблема с параметрами и хешами в ЧПУ?
href="/shop/t-shirts/?a=1&b=2
href="/shop/t-shirts/#comments
это обычные ссылки.
vanxant
При чём здесь HTML5? Base — это из очень, очень лохматых времён ещё до HTML4. Тогда многие сайты представляли собой просто набор html-файлов и картинок без всякой динамики, которую часто заменяли фреймы. При переносе такого «сайта» из папки в папку на этом или другом же сервере нужно было или менять все ссылки на всех страницах и прописывать новые урлы (а с учётом качества поддержки, кхм, «стандартов» в те времена это была не самая тривиальная операция для машинной обработки), либо один раз прописать/поправить base в файле корневого фреймсета.
Бэкенд про base в общем случае ничего не знает. От веб-сервера приходит путь от корня сайта, и задача вычленить текущий base лежит на бэкенде. Что хуже, бекенд должен выдать в ответ html, в котором все ссылки приведены с учётом base, который устанавливается «где-то выше». Т.е. каждая вьюха, компонент или что там у вас рендерит html кроме своих непосредственных параметров должно знать, а какой там на этой странице base. Я могу ошибаться, но сильно вот не уверен, что какой-нибудь Yii или другие современные фреймворки с их декомпозицией в такое умеют.
vladalivan
Да, ошибка, оказывается base был уже с HTML3
vladalivan
Мы много лет пользуемся ссылками на основе base в нашей CMS — проблем пока не было, кроме одной. Програмисты, не знающие о том, что в CMS используется base, спотыкаются при первой попытке использования якоря, потом всё идет нормально.