The issue arises when you don't have a trailing slash.
xyz.com/name/
with a trailing slash is conventionally a directory
xyz.com/name
without a trailing slash is conventionally a file
Relative links from xyz.com/name
will resolve relative to the root directory xyz.com/
because name
is assumed to be a file within the root directory. This could break not only anchors but images and stylesheet links as well.
If name
is a directory, some servers will automatically redirect to name/
. Since yours doesn't, you could set it up to do so (either directly on the server via httpd.conf
or via a .htaccess
file in the root web directory.) This will prevent the aforementioned linking issues as well as prevent duplicate content from both URLs (an SEO concern.)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*[^/])$ /$1/ [L,R=301]
More information and explanation can be found in the article "Should You Have a Trailing Slash at the End of URLs?" as well as by performing a web search for trailing slash in URL.
An alternative to redirecting is to use the <base>
HTML element in the <head>
, which specifies the base URL to use for all relative URLs in a document.
Caution: this can break in-page anchors. Using <base href="/name/">
on xyz.com/name/other.html
, the link <a href="#some-id">in-page anchor</a>
points to xyz.com/name/#some-id
. However, it's not necessary to use <base>
in every page, only in index.html
.