What links to use: absolute or relative?
I mean: what addresses to use for navigation within the site? Suppose we want to create on the site site.ru with an already working site another subsite whose files will be located in the shop folder. The URL for this site will be:
Why we have complicated the task will be clear at the end of this article.
When using relative links, the starting page is taken as a reference point each time.
')
Here you can make the first conclusion. Although relative addresses look shorter than absolute ones, absolute addresses are preferable, since the same link can be used unchanged on any page of the site, no matter what depth it is.
Above, we have considered two extreme cases: purely absolute and purely relative references. However, there are other options links. First you need to say that everything in this world is relative. This also applies to links. Saying that the link is absolute, you should always indicate: with respect to what. For brevity, we will agree on all intermediate link options that we will discuss below using the following construction “address relative to ...”, although in fact they will all be absolute. The first two options of references (1 and 2) will continue to be called simply “absolute” and “relative”.
Google recommends switching to addresses without specifying a protocol. However, it is not known how long the transition period will last, since it is now considered that http: // and https: // are different sites
This is a good choice if all pages of the site are within the same domain. When transferring a site to another domain, you do not have to make a massive replacement of the domain in the links.
HTML has a <base> tag. It sets the base address, which will automatically be added to all relative links and anchors. You need to put this tag in the <head> section. As the base address, we specify the URL of the main page:
To all the advantages of the previous version of addresses, one more is added here - now sites can be transferred without pain to not only any domain, but also to any subfolder, since the name of the subfolder has disappeared from href. This is convenient for development - you collect the site in any subfolder of the web server of your work computer, and when the site is ready, simply transfer the site files to the hosting.
It remains only to get used to the fact that, although the addresses are written down as relative, they behave as absolute. Especially you need to remember about anchors, as the usual construction href = "# comments" now makes a transition not within the current page, but transfers to the main page, as the URL of the main page will be automatically assigned ahead. Now in front of the hash you need to explicitly register the address of the current page: href = "t-shirts / t-shirt-life-is-good / # comments".
As for the "real" absolute links (1, 3, 4), they work as usual - the base tag has no effect on them. The base element applies only to the html document, but does not apply to relative URLs inside css, js, svg, and other files.
What option links to use, you decide, because in each case need to take into account other factors. For internal links I use addresses relative to the main page of the site (5.base-relative). For external links and newsletters from the site it is better to use absolute links (1.absolute).
http://site.ru/shop Why we have complicated the task will be clear at the end of this article.
1. Absolute links (absolute)
href="http://sites.ru/shop/" — href="http://sites.ru/shop/t-shirts/t-shirt-life-is-good/" — c 2. Relative References (relative)
When using relative links, the starting page is taken as a reference point each time.
')
href="t-shirts/t-shirt-life-is-good/" — href="../../" — Here you can make the first conclusion. Although relative addresses look shorter than absolute ones, absolute addresses are preferable, since the same link can be used unchanged on any page of the site, no matter what depth it is.
Intermediate options
Above, we have considered two extreme cases: purely absolute and purely relative references. However, there are other options links. First you need to say that everything in this world is relative. This also applies to links. Saying that the link is absolute, you should always indicate: with respect to what. For brevity, we will agree on all intermediate link options that we will discuss below using the following construction “address relative to ...”, although in fact they will all be absolute. The first two options of references (1 and 2) will continue to be called simply “absolute” and “relative”.
3. Address relative to the protocol (protocol-relative)
href="//sites.ru/shop/" — href="//sites.ru/shop/t-shirts/t-shirt-life-is-good/" — Google recommends switching to addresses without specifying a protocol. However, it is not known how long the transition period will last, since it is now considered that http: // and https: // are different sites
4. Address relative to the root folder of the domain (root-relative)
href="/shop/" — href="/shop/t-shirts/t-shirt-life-is-good/" — This is a good choice if all pages of the site are within the same domain. When transferring a site to another domain, you do not have to make a massive replacement of the domain in the links.
5. Address relative to the main page of the site (base-relative)
HTML has a <base> tag. It sets the base address, which will automatically be added to all relative links and anchors. You need to put this tag in the <head> section. As the base address, we specify the URL of the main page:
<base href="http://sites.ru/shop/"> href="" — href="t-shirts/t-shirt-life-is-good/" — To all the advantages of the previous version of addresses, one more is added here - now sites can be transferred without pain to not only any domain, but also to any subfolder, since the name of the subfolder has disappeared from href. This is convenient for development - you collect the site in any subfolder of the web server of your work computer, and when the site is ready, simply transfer the site files to the hosting.
It remains only to get used to the fact that, although the addresses are written down as relative, they behave as absolute. Especially you need to remember about anchors, as the usual construction href = "# comments" now makes a transition not within the current page, but transfers to the main page, as the URL of the main page will be automatically assigned ahead. Now in front of the hash you need to explicitly register the address of the current page: href = "t-shirts / t-shirt-life-is-good / # comments".
As for the "real" absolute links (1, 3, 4), they work as usual - the base tag has no effect on them. The base element applies only to the html document, but does not apply to relative URLs inside css, js, svg, and other files.
Conclusion
What option links to use, you decide, because in each case need to take into account other factors. For internal links I use addresses relative to the main page of the site (5.base-relative). For external links and newsletters from the site it is better to use absolute links (1.absolute).
Source: https://habr.com/ru/post/310286/
All Articles