Html relative absolute src

Use absolute paths instead of relative to link to css, js, and media files

There are multiple ways to link to page assets such as CSS and javascript files, images and other media files.

You can use relative paths and link relative to the page. You can use absolute paths and link relative to the website root. There are also ways to link relative to the “home directory” and resolve paths on the server side.

Which way is the best? Relative paths are the simplest, but as the website scales, maintenance can quickly become an issue. I recommend using absolute paths for medium- to large-sized websites. If you want to know why read on.

Example Say that we have this simple website structure:

index.html IMAGES |-- BANNERS |-- image.jpg CONTACT |-- index.html |-- LOCATIONS |-- index.html |-- LOSANGELES |-- index.html

Relative path Here is how we would create a

relative link to the image from all of the html files: From index.html: From contact/index.html: From contact/locations/index.html: From contact/locations/losangeles/index.html:

Absolute path To create an

absolute link, we would do like this in all files: Note that we have added a forward slash at the beginning of the image path. This will resolve to the website root.

Moving the image in the folder structure Now what happens if we want to move the image from

images/banners to contact/locations/images?

Relative path For the relative paths, we are faced with some more or less complicated calculations. Here is how we would do in our example:

index.html: From: To: contact/index.html: From: To: contact/locations/index.html: From: To: contact/locations/losangeles/index.html: From: To:

Absolute path Here the change is the same for all files: From:

To:

Easier to move assets with absolute paths Unless you are using your IDE or some other tools to do the calculations for you, updating relative paths can quickly become a nightmare, with lots of broken links as a result. With absolute paths, you only need to change one pattern to another. This can easily be done with a global search and replace. Since the file paths look exactly the same in all files, you can be sure to not miss anything. The new path is going to work everywhere, no matter where in the file structure it is used.

Including HTML widgets on multiple pages Even if the previous scenario creates issues when using relative paths, it is still possible to get away with. In the case when we want to include an HTML widget on multiple pages it is simply impossible. Say that you have a Contact widget containing your photo and a short description that you want to include on every page of your website. This can be easily achieved using

server-side includes (SSI) or .NET controls. In this case the link to your photo is going to be the same, and there will be no way for you to alter it relative to the page where your Contact widget is included. The easiest solution here is to use an absolute path.

What are the drawbacks of using absolute paths?

Need to run on a web server Absolute paths will not work if you preview the page with

file:// protocol. If you have a really small website, or if you want to send the website to a client and let them preview it locally, you are stuck with relative paths. Another thing to consider is that an absolute path starts from the website root. If you have separate websites in subdirectories on the main website, your paths should still start with the root website. For example, a website located at /subsite will have to prepend all paths with /subsite/ , for example /subsite/images/image1.png A workaround for this would be a rewrite rule translating / to /subsite .

Harder to move the entire website Say that you want to move the whole website to another directory, for example from

/subsite1 to /subsite2. If you used relative paths, you could simply move everything to the new directory and all the links will work right away. In the case of absolute paths, you would have to run a global search and replace and replace /subsite1 with /subsite2 .

Some additional notes A word about “home variable” in .NET. You can use “tilde” (

~ ) to link to the website’s “home directory”, for example ~/images/banners/image.jpg . The problem with this approach is that this directive is resolved on the server side, which means that it doesn’t work on static HTML elements, or in CSS or javascript files.

Related

One comment

What is your view on fully-qualified absolute paths? For example, instead of “/Subdirectory/Page.html” use the full URL: “https://website.com/Subdirectory/Page.html”. Obviously this would need to run on a server, but I think there are a number of advantages. For example having full URLs makes it easier for web-scrapers to navigate within the site without needing complicated logic to resolve goofy relative URLs (is there an easy way to handle relative urls in a web scrapping program? I’m not aware of one). Appending the domain name to an absolute but scheme-less URL is easy enough, that’s still not enough for RSS feeds, and may not work well with some accessibility tools. Also, fully-qualified URLs make it easy for other sites to quote sections of content without breaking or needing to modify any links. Seems to me the only downside of including the full URL with scheme and domain is that all the links in third-party caches and web archives would continue to point to your website rather than to pages within the cached version; however, it seems to me that as long as all of the URLs are fully qualified, automating replacement of the domain names is a pretty simple task for them.

Leave a Reply Cancel reply

Categories

Stay in Touch

Recent Posts

Источник

Absolute Relative URL & HTML Base Tag (A Simple Guide)

Welcome to a tutorial on absolute and relative URLs, also the use of the HTML tag. Getting “missing” images and files on your web page? Made sure that the path is “correct”? Well, don’t be surprised, the URL is a common confusion among many beginners.

• Absolute URL refers to a “full website address”. For example, http://site.com/images/img.jpg
• Relative URL refers to a “partial address”. For example, images/img.jpg
• Relative URLs are based on the current address. For example, if the current address is http://site.com/page/ , the above relative URL will resolve to http://site.com/page/images/img.jpg
• An HTML tag can be used to change the base URL for relative URLs. For example, with , the above relative URL will resolve to http://site.com/images/img.jpg

That covers the quick basics, but let us walk through this issue a little more and on the use of the tag. Read on!

TLDR – QUICK SLIDES

TABLE OF CONTENTS

HTML BASE TAG & URLs

All right, let us now into the issues with absolute/relative URLs, and on using the HTML base tag.

PART 1) THE URL HASSLE

• All images are placed in http://site.com/assets/ .
• But the current address is http://site.com/products/fruits/ .

To insert images properly:

• Using relative URL –
• Using absolute URL –

As you can see, it is a hassle regardless of relative or absolute URL. This is where a tag can be potentially useful.

PART 2) BASE TAG APPLIES TO ALL RELATIVE URLs

• The tag must be placed in the section, it accepts 2 properties.
  • href – The base URL.
  • target – Optional. To set if links will open up in the same window, same frame, or new tab.

  PART 3) COMMON MISTAKES

  3A) MISSING SLASHES IN BASE URL

  What is wrong with this example? Look closely – http://site.com/assets is missing the trailing slash. For those who are still lost, the image URL will resolve to http://site.com/assetsIMAGE.JPG .

  3B) MULTIPLE BASE TAGS

  So what happens if the images, videos, and audio are all kept in different folders? Some of you guys may be thinking “use multiple tags to change the base URL” – Sorry, but it does not work that way. Only the first tag will be registered, and the rest will be ignored; The first will be “locked” once it is set.

  PART 4) OVERRIDING THE BASE TAG

  The only way to override the tag is to use absolute URLs.

  PART 5) BASE IS MORE TROUBLE THAN HELP

  5A) IT WORKS

  Yes, the tag works. It simplifies the relative URLs to a certain extent.

  5B) IT DOES NOT WORK

  But let us add on to the story, let’s say that we have a products category page at http://site.com/products/ .

  • The intended URLs here are http://site.com/products/CATEGORY/ .
  • But the base changes it to http://site.com/CATEGORY/ .

  Not a big issue, we can just change the URLs to products/CATEGORY/ . But what happens if this navigation menu is dynamically inserted in different pages or even sub-domains? No problem, we can use absolute URLs instead. But the whole point is, causes more confusion with the URLs. Especially in large projects with dynamic HTML templates.

  PART 6) USE SERVER-SIDE SCRIPTS TO MANAGE URLs

  After all these examples, I have an important confession to make – I really hate the tag. It may seem useful at first, but it eventually ends up messing up all the URLs. So my recommendation, avoid using it at all costs. The better alternative is to use server-side scripts to help you manage the URLs. In PHP for example:

  Yep, this is the smarter way to handle things. Can’t go wrong with absolute URLs, you will be happier without the confusion.

  EXTRA BITS & LINKS

  That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

  LINKS & REFERENCES

  INFOGRAPHIC CHEAT SHEET

  

  THE END

  Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

  Leave a Comment Cancel Reply

  Search

  Breakthrough Javascript

  

  Take pictures with the webcam, voice commands, video calls, GPS, NFC. Yes, all possible with Javascript — Check out Breakthrough Javascript!

  Socials

  About Me

  

  W.S. Toh is a senior web developer and SEO practitioner with over 20 years of experience. Graduated from the University of London. When not secretly being an evil tech ninja, he enjoys photography and working on DIY projects.

  Code Boxx participates in the eBay Partner Network, an affiliate program designed for sites to earn commission fees by linking to ebay.com. We also participate in affiliate programs with Bluehost, ShareASale, Clickbank, and other sites. We are compensated for referring traffic.

  Источник

  HTML File Paths – Absolute vs Relative URLs

  Understanding the file path of your web project is going to be extremely important to developing your skill set as a web developer. A file path describes the location of a file in a website’s folder structure.

  Getting your file path correct is important because it will determine how you link to pages, documents, images and files in your website or another website.

  The code example above demonstrates a link to the About Page that’s in the same folder as the current page.

  The code example above demonstrates a link to the Services Page that’s in a folder called pages which is in the current folder.

  The code example above demonstrates the location of the Photo being in the IMG folder that’s located in the root directory of the website.

  The code example above demonstrates the Contact Page being located one level up from the current folder.

  If you are familiar with the Command Line, you will often see a single . or two ..
  What this means is that the single . is the current folder and the double .. is the level above.

  Absolute File Paths

  An Absolute File Path is the full URL to an asset on your website.

  

  Relative File Paths

  A Relative File Path points to an asset, relative to the current page.

  

  When Should You Use Absolute or Relative file paths?

  Let’s break it down like this, if you are linking to content on your website, it’s often best to use a Relative file path. If you’re linking to an external source or website, then use an Absolute URL.

  When it comes to server side programming, you can dynamically set a default path and use a function to reference it but that’s for another tutorial.

  Источник