HTML HREFS - confused...

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Hi all,

I've read till I am blue in the face examples and thoughts on proper use of
the HREF tag.

My prblem is thus.

I develop and test locally and post the development to a website like most
of us...

my local development 'index.html' exists at...



My webpage exists at

How do i use HREF for local links i.e. graphics in the root/GFX folder they work on both my development area and my website without
changing them everytime I upload them online. I'm really confused.... does
BASE HREF have a part to play?

My webpages are developed dynamically through php so I need them to work
through that too...

Andy Mak

Re: HTML HREFS - confused...

Domestos wrote:

Quoted text here. Click to load it

HREF *attribute*, not tag...

Quoted text here. Click to load it

a) Use relative URLs, e.g. in document 'foo/bar.html' use
'../gfx/myself.jpeg' to access 'gfx/myself.jpeg'. Not the best solution,
because you have to track the 'directory depth' of the document in order to
get the right number of '../' in the URL. And if you move a document to a
different directory...

b) Configure your local webserver to use virtual hosts, setup a local domain
(if you only work on one computer, editing /etc/hosts or hosts.txt
somewhere below C:\windows should be sufficient), so you can access the
local version via something like 'http://mywebsite-dev/index.html'. Then
you can use URLs relative to the document root, e.g. '/img/myself.jpeg', no
matter how deep you are in the directory structure.

I prefer b)...

Quoted text here. Click to load it

This should not make a difference.

Benjamin Niemann
Email: pink at odahoda dot de
WWW: /

Re: HTML HREFS - confused...

Domestos wrote:
Quoted text here. Click to load it

There's no such thing as an HREF tag!  You probably mean the "href" and
"src" attributes of elements such as <A> and <IMG>.

Quoted text here. Click to load it

Your local directory structure should mirror that of your web server;
you could also make use of <BASE href="[whatever]">, but it's not
normally necessary.

If you wanted to use a local directory "P:\Web design" for your work,
for example, then that would be equivalent to the root directory of
your site up at " ".  So your index page would be
"P:\Web design\index.html" locally, and
" " remotely.

To get images and so on to work correctly, use relative URLs.  Thus if
you have an image file locally at "P:\Web design\images\foo.jpg", then
when editing index.html you'll use HTML that's something like this:
<IMG src="images/foo.jpg" height="74" width="83" alt="whatever"
When you upload your image you'll then make sure that it goes into a
directory named "images" on your web server.

If the HTML file isn't in your project's root directory, then you'll
need to prefix the image's URL with "../" for every directory you're
down the ladder.  For example, to insert an image stored locally at
"P:\Web design\resources\images\bar.jpg" into an HTML file stored
locally at "P:\Web design\marketing\sales\new06.html", then you'll
use code something like this:
<IMG src="../../../images/foo.jpg" height="74" width="83"
alt="whatever" title="fred">

By doing it this way, your pages will display as intended both locally
and remotely.  You'll have to keep count of how many folders you're
going up or down the ladder, although if you're using a decent HTML
editor it should handle this for you.

BTW, I've used Microsoft Windows paths above for the local paths, but
it should be obvious enough how to convert them to something meaningful
if you're using a Linux-based system or whatever else.


Re: HTML HREFS - confused...

Domestos wrote:

Quoted text here. Click to load it

You probably have trouble with "URIs" rather than href itself.

href and src are used confusingly in HTML. <img> has src, <a> has href.
 Try thinking of them as src for "Stuff I'm using right now on this
page" and href for "Stuff I might use, if the use selects that link and
goes somewhere"

href is an attribute, not a tag.  In this newsgroup we care.

Quoted text here. Click to load it

URIs (roughly) come in three sorts. Absolute, relative, and

A page of
might use any of the following URIs to point to an image in the same




They all work equally well, but their portability (robustness when the
source page is moved) varies. They all break if you move the image

Absolute always points to the same site. Doesn't care where you use it
from. Handy for referring to external sites, and will keep working
between your "dev" and "live" sites.

Relative is what you should use instead for referring to assets on your
own site. It "follows" whichever host you're currently loading the page
from. It also follows the page's directory around (handy for lots of
directories and images kept with their pages).

Root-relative paths are relative for the host, but absolute for the
path on that host. For moving servers they work like relative URIs, but
for moving pages around they keep pointing to the same place on the
server.  Handy for "site furniture" that's shared between many pages,
rather than the page-specific assets.

In general, set your server up with an "images" directory (or somesuch
name) and keep the shared stuff in there (logos, page background)
referring to it with root-relative URIs.

Use lots of directories and lots of default pages (index.htm or
equivalent).  Make most page URIs of the form
" /" and don't bother specifiying the
default page name.

Place page-specific images into the directory with their page. Use
relative URIs (probably just "mullet.jpg") to refer to them from the
<img src="" > attribute..

Only use absolute URIs for external links <a href=" " >

Always use absolute URIs for external links.

Quoted text here. Click to load it

That's not your site, is it ?    Use "" if you want an
example, otherwise use the real site so that we can see the real

If "" really is your work, then it's cluelessness beyond
_any_ help whatsoever. Technical "shiny things" grabbing of the newset
toy in the box, used for an _entirely_ inappropriate purpose  (the AJAX
nav menu)

Re: HTML HREFS - confused...

Andy Dingley wrote:
Quoted text here. Click to load it

When will people learn that the user shouldn't be seeing link addresses
of the sort " /#"?!  The only link that's
different is the link "back" to the home page!

Rather amusingly, the site uses the slogan "Experts in Direct


Site Timeline