абсолютные или относительные? / Хабр
Имеется в виду: какие адреса использовать для переходов внутри сайта? Допустим, мы хотим создать на домене site.ru с уже работающим сайтом другой подсайт, файлы которого будут находиться в папке shop. URL этого подсайта будет такой: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).Абсолютные и относительные ссылки в HTML
Статьи HTML
В нашем справочнике есть целый раздел, посвященный HTML.
Рассмотрим, что они из себя представляют ссылки в HTML в абсолютном и относительном вариантах.
Так как гиперссылка, которая неразрывно связана с гипертекстом, является частным случаем ссылки, то в ракурсе рассматриваемой нами темы эти термины можно считать тождественными.
Абсолютный и относительный пути в ссылках
Основным отличительным признаком любой ссылки является наличие URL адреса, который чаще всего содержит
http://site.ua/category1/single-page1 http://site.ua/catalog1/file1.html
В таком виде мы вводим ссылки в поисковую строку браузера для получения доступа с объекту.
При этом любой URL обязательно начинается с наименования протокола передачи данных и включает имя домена («http://site.ua/»). Именно в подобном виде путь до объекта (веб-страницы или файла) используется в качестве параметра атрибута href при создании абсолютной ссылки с помощью средств HTML для ее последующей вставки в контент заданной странички (документ):
<a href="http://site.ua/category1/single-page1">анкор</a> <a href="http://site.ua/catalog1/file1.html">анкор</a>
Абсолютные гиперссылки можно теоретически использовать везде, но на практике их применяют чаще тогда, когда нужно сослаться на внешний веб-ресурс, а относительные более эффективны при переходах в пределах одного сайта, поскольку они короче и не загромождают HTML код.
Варианты относительных ссылок
Если представленный выше пример полного пути в URL-адресе немного модифицировать, убрав «http:», то как раз получится образец относительного пути:
//site.ua/category1/single-page1 //site.ua/catalog1/file1.html
ua/category1/single-page1
//site.ua/catalog1/file1.htmlЕсли же привлечь средства HTML, то можно создать ссылку относительно протокола:
<a href="//site.ua/category1/single-page1">анкор</a> <a href="//site.ua/catalog1/file1.html">анкор</a>
Такой вариант вполне работает не только в пределах домена, но и на сторонних веб-страницах, причем независимо от того, какой протокол (HTTP или HTTPS) установлен для конкретного сайта. Поэтому на практике данный вид относительных ссылок с успехом можно применить, к примеру, в случае перевода веб-проекта на безопасный протокол HTTPS.
Пойдем далее и вдобавок к названию протокола уберем еще и двойной слеш вместе с доменным именем. Получится другая вариация относительного пути:
/category1/single-page1 /catalog1/file1.html
На его основе таким же образом создается относительная гиперссылка:
<a href="/category1/single-page1">анкор</a> <a href="/catalog1/file1.html">анкор</a>
Возьмем для наглядности пример с файлом (file1.
html).
Такой линк будет работать только лишь в том случае, если файл расположен в папке (каталоге), которая, в свою очередь, находится в составе корневой директории вебсайта. То есть, путь до файла (в составе URL, который служит параметром атрибута href) будет указан относительно корня веб-ресурса:
Если файл (в нашем примере file2.html) входит напрямую в состав корневой директории, то путь к нему относительно корня (site.ua) примет такой вид:
<a href="/file2.html">анкор</a>
Тут самый первый слеш «/» заменяет корневую папку «site.ua/». То есть, при создании перехода на главную страницу сайта с любой его страницы можно использовать короткую конструкцию:
<a href="/">анкор</a>
Тот же самый принцип работает и при проставлении линков с одной веб-страницы проекта на другую. Образцом может служить тот же блог WordPress, где есть главная страница, статические и привязанные к определенным рубрикам (категориям) веб-страницы записей.
Скажем, с абсолютно любой странички проекта можно проставить относительную ссылку на иную страницу с указанием рубрики.
Возьмем для примера такой блог, в котором есть рубрика «HTML» и эта статья внутри рубрики:
<a href="/html/absolute-and-relative-links-in-html/">Форми</a>
А, скажем, относительная ссылка на статическую веб-страницу (которая не принадлежит ни одной рубрике, но входит в состав корневой папки «Блог.com») с любой другой странички в пределах одного проекта может выглядеть так:
<a href="/kontakty/">Контакти</a>
Итак, мы выяснили, что гиперлинки именно относительно корневой папки обычно и используются на практике, когда необходимо сослаться с одной страницы сайта на другую.
Теперь давайте рассмотрим еще несколько случаев создания линков относительно текущего веб-документа (файла или web-страницы), а не корня сайта. Здесь один из файлов будет донором (с которого проставлена ссылка), а другой акцептором (на который ведет гиперссылка).
1. Файлы расположены в одной папке:
В этом случае относительная ссылка будет содержать только лишь название документа, который является акцептором (обратите внимание, что знак слеша тут опущен, так как путь указывается не относительно корня, а вполне конкретной папки):
<a href="file2.html">анкор</a>
2. Файлы находятся в разных директориях, причем документ, на который необходимо сослаться, располагается внутри каталога, находящегося в одной папке, содержащей донор:
Тогда в процессе создания относительной гиперссылки в содержании донора следует прописать дополнительно директорию, где находится акцептор:
<a href="catalog2/file2.html">анкор</a>
Если целевой файл, на который указывает ссылка, находится еще на уровень ниже относительно донорского документа в иерархической структуре (к примеру, располагается в catalog3, который вложен в catalog2), то путь будет таким:
<a href="catalog2/catalog3/file3.html">текстовий фрагмент</a>
И так далее, в зависимости от количества вложенных друг в друга директорий.
3. Теперь разберем обратную ситуацию, когда документ-акцептор располагается на уровень (или несколько) выше донорского файла:
При таком раскладе перед наименованием файлика необходимо поставить слеш «/» и двоеточие, означающее, что акцептор расположен на один уровень выше:
<a href="../file1.html">анкор</a>
Если документ, на который ссылаются, находится на целых два уровня выше (скажем, донорский документ пребывает в папке catalog3, которая вложена в catalog2), то HTML код относительной гиперссылки примет следующий вид:
<a href="../../file1.html">анкорний текст</a>
Как вы, наверное, поняли, подобных уровней может быть сколько угодно много, все зависит от файловой структуры вашего веб-проекта. Чем больше уровней между акцептором и донором, тем большее количество двоеточий и слешей необходимо указать.
4. Есть еще вариант, когда акцептор и донор расположены в разных папках одного уровня:
Для того, чтобы сформировать относительный гиперлинк, нужно перейти на один уровень выше (catalog), а в пути указать директорию документа, на который будем ссылаться:
<a href="../catalog1/file1.html">анкорний текст</a>
5. Ну и теперь самый сложный случай. Это когда документ, содержащий относительную ссылку, и файл, на который она ведет, располагаются в разных папках, причем директория с донором находится на один или несколько уровней выше папки с акцептором:
Если разница 1 уровень, то относительной ссылкой является такая:
<a href="../../catalog1/file1.html">анкорний текст</a>
Это только основные примеры относительных ссылок, на самом деле их гораздо больше. Но главное — понять суть алгоритма их создания. Тем более, что все другие вариации будут просто производными от выше указанных.
Особенности относительных и абсолютных гиперссылок
Если в качестве целевого объекта абсолютной или относительной ссылки указать не файл, а всю директорию, то в конце URL желательно прописывать слеш:
<a href="http://site.
ua/wp-content/uploads/">text</a>
<a href="/wp-content/uploads/">anchor</a>Тем самым вы указываете серверу, что необходимо открыть для просмотра весь каталог, а не конкретный файл. Если же опустить значок «/» и оформить гиперссылку вот так:
<a href="http://site.ua/wp-content/uploads">text</a> <a href="/wp-content/uploads">anchor</a>
…. то серверный обработчик сначала начнет поиски файла «uploads», именно в таком виде (без расширения), а уже затем отыщет папку с таким именем. Проставив сразу же слеш, вы сэкономите ресурсы сервера, на котором располагается сайт.
Также необходимо иметь ввиду, что в целях безопасности содержимое любого рабочего каталога сайта должно быть скрыто. Поэтому веб-сервер обычно сконфигурирован таким образом, чтобы воспрепятствовать отображению его файлов. Например, вместо этого может быть показан пустой индексный файл index.php либо index.html (в браузере это будет просто белая страница).
Я настоятельно рекомендую проверить, так ли обстоит дело на вашем сайте. Например, если у вас веб-проект под управлением WordPress, то изучите соответствующий материал, повествующий о базовых настройках защиты при использовании в том числе этого метода (правда, в современных версиях WP данная ситуация уже под контролем, но проверка не помешает).
В общем-то, принцип создания абсолютных и относительных ссылок действует и в отношении стандартных веб-страниц сайта. Но, поскольку львиная доля вебмастеров (особенно это касается владельцев полномасштабных веб-ресурсов, а не одностраничников) использует для управления веб-ресурсом CMS, то здесь есть некоторые нюансы.
Что касается главной страницы, то абсолютная ссылка на нее включает доменное имя, которое является названием корневой папки в соответствии с файловой структурой сайта на сервере:
<a href="https://site.ua/">Home</a>
Образец относительного линка в отношении главной:
<a href="/">Home</a>
php — Как заставить HTML-ссылку быть абсолютной?
спросил
Изменено 1 год, 9 месяцев назад
Просмотрено 59 тысяч раз
На моем веб-сайте пользователи могут указать URL-адрес в своем профиле.
Этот URL может быть http://www.google.com или www.google.com или google.com .
Если я просто вставлю в свой PHP-код $url , ссылка не всегда будет абсолютной.
Как сделать тег a абсолютным?
- php
- html
- привязка
- относительный путь
- абсолютный путь
Если вы укажете префикс URL // , он будет считаться абсолютным. Например:
Google .
Имейте в виду, что будет использоваться тот же протокол, с которым обслуживается страница (например, если URL-адрес вашей страницы https://path/to/page , результирующий URL-адрес будет https://google.com ) .
Используйте протокол, предпочтительно http://
google.com">Google
Попросите пользователей ввести URL-адрес в этом формате или объединить http://, если он не добавлен.
Если вы укажете URL-адрес только с префиксом // , он будет использовать тот же протокол, с которым обслуживается страница.
Недавно мне пришлось сделать что-то подобное.
если (strpos($url, 'http') === false) {
$url = 'http://' .$url;
}
В принципе, если URL-адрес не содержит «http», добавьте его в начало строки (префикс).
Или мы можем сделать это с помощью RegEx 9http[s]*:\/\/[\w]+/i»; если (!preg_match($http_pattern, $url, $match)){ $url = ‘http://’ .$url; }
Спасибо @JamesHilton за указание на ошибку. Спасибо!
3Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google Зарегистрироваться через Facebook Зарегистрируйтесь, используя электронную почту и парольОпубликовать как гость
Электронная почтаТребуется, но не отображается
Опубликовать как гость
Электронная почтаТребуется, но не отображается
Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.
HTML заставляет гиперссылку URL рассматриваться как не относительная (абсолютная)
спросил
Изменено 1 год, 11 месяцев назад
Просмотрено 17 тысяч раз
У меня есть список URL-адресов, введенных нашими пользователями для веб-сайтов различных клиентов… Я загружаю этот список с сервера в сетку для просмотра пользователями… Я сделал URL-адреса кликабельными, обернув их HTML-тег href… проблема в том, что иногда пользователь вводит URL-адреса без http:// или www. префикс, поэтому браузер рассматривает их как относительные URL-адреса, что никогда не бывает так, потому что все эти веб-сайты предназначены для наших клиентов и все они внешние.
Есть ли способ заставить эти URL-адреса рассматриваться как абсолютные, а не относительные?
Вот пример:
google.com
Если вы попробуете это, то увидите, что браузер предположит, что это относительный путь, чего быть не должно.
Спасибо
Решение:
Я решил проверить наличие ‘//’ (потому что я не знаю, что это за протокол — может быть http или https), и если он не найден, я предполагаю, что это http веб-сайт, и я добавляю URL-адрес с префиксом — так что, короче говоря, нет способа заставить браузер рассматривать гиперссылки как абсолютные
- html
- url
- href
- относительный путь
- абсолютный путь
Почему вы не выполняете предварительную обработку ввода и не добавляете http:// при необходимости?
Это — это относительный URI.
Если вы хотите сделать ссылку на http://google.com/ , то вам нужно сделать ссылку именно на нее.
Вы можете модерировать URI, которые вы оборачиваете, или попытаться алгоритмически угадать, предназначалась ли она для относительной ссылки или нет.
Обратите внимание, что вы не можете с уверенностью предположить, что должно быть www. , так как использование этого для веб-сайтов является просто соглашением, которое больше не строго соблюдается.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google Зарегистрироваться через Facebook Зарегистрируйтесь, используя электронную почту и парольОпубликовать как гость
Электронная почтаТребуется, но не отображается
Опубликовать как гость
Электронная почтаТребуется, но не отображается
Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.