Relative URIs in html anchors - recommended/preferred way - html

<file_name>
link
<slash><file_name>
link
<dot+slash><file_name>
link
Which of these is recommended/preferred?
Do any of them impact the speed of retrieval?
What are the pros and cons when using either of them?
There's an extensive article on URLs by skorks here: What Every Developer Should Know About URLs, but it does not give answers to any of my questions.

There is no specific recommendation.
The retrieval speed has no bearing on how the URI is constructed.
The only thing that you need to consider is whether the linking page and the page you are linking to are part of a group of pages - if you move them together then if your links are in style 2 they will break. If file.html will always be on the root of the site, then moving this file will make no difference.
I don't see the point of style 3.

Number 2 is NOT the same as the others, because it resolves to the root of the website and not the current folder.
This question sounds suspiciously like micro-optimization to me, and the answer is fairly simple: The browser resolves the paths when a link is encountered, using the current URL or the <base href="..." /> if one is provided. Therefore there is absolutely no difference.

Option 1 and 3 produce the exact same HTTP GET request. Option 2 is different because a path starting with / will try to retrieve the file from the root rather than the current path.

There's no reasonable difference between them in terms of speed/retrival.
- First and third are the same case: the resource named file.html resides in the same directory of the current file.
- In the second option "/file.html" means the file is located in the webroot of your application.
Here is explained w3school

Related

How to link to html in a folder not directly connected

I am creating a website with simple HTML+CSS. How do I create a hyperlink (href) in an HTML file, to an HTML file in a folder, that is not directly related.
See picture. If I want to insert a link in HTML 4 to HTML 3.
I know one can use ..\HTML2.html to go back in parent folder, but what is the best way here?
Typing / points to the relative root directory. So you can just do HTML 3 and it should take you to HTML3.
You can also use HTML 3 as you seem to know.
General recommendation would be to pick the closest path. If it's from the root, then select the first. If it's from a relative point from where you are, then the second.
Considering your drawing, I assume that node 1 is the root so the simplest way would be: .\html3.html

Is it bad practise to start links with "/" in html?

My website code sample:
<a href=/post/64/page-name><img src=/img-folder/2015/09/image.jpg></a>
<div id=cont2><a href=/post/64/page2>page 2 link</a></div>
My first question is, can I start links just with /? Is it a bad practise? because all website sources that I looked it starts with www.website.com/... not just /
Second question is quotes. It is not needed since html 2.0, but is it important in the example above?
My website is having some problems on google to show correctly... may it be because this problems?
It isn't bad practice. A URL starting with / is merely a relative URL that's relative the the base path. You're using it just fine.
Another example usage is when you want to reference a CSS or JavaScript file and you're deep down into the path.
<script src="/scripts/main.js"></script>
Then, no matter where the user is on your site, they'd always request http://example.com/scripts/main.js. Where example.com is your site's domain.
Additionally: Always quote attribute values. (attribute="value" and not attribute=value).
/ means start of where you are currently. So if your resource is located under same directory, you are allowed to use / to start with. If you refer to external resources, you can't use / to start. (E.g. www.google.com means google website, while /www.google.com means folder under your current directory named www.google.com, like http://localhost/www.google.com)
Quotes are needed when you use white-space in your attributes values (e.g. class="my super classs-name that has white-space" | class=my super classs-name that has white-space).
My website is having some problems on google to show correctly SEO stuff. What problems? Your page is not under first page of Google search? It's separate topic about that.
It is not forbidden. When you start your link with slash / it just a path relative to base element.
You can read more about BASE element here: http://www.w3.org/TR/html4/struct/links.html#h-12.4
For example, if you are already at: http://example.com/folder/index.html
/posts/index.html would link to: http://www.example.com/posts/index.html
posts/idnex.html would link to http://www.example.com/folder/posts/index.html
if you reference external sources you have to add the full path/adress
if you reference local resources its up to you.(more or less) take a llok at How to properly reference local resources in HTML?
You should use either double " or single ' qoutations - thats a good practise at least.
But you dont have to if there is no whitespace.
When you start your link with "/" its mean that you start from the root directory.
Example: Your website is in the directory /web/html.
When you now start your link with "/" its goes to the root folder. In this case the web folder.
I know this is old and answered, but it came up on Google when I was searching for something similar, so I just wanted to add to the answers.
Sometimes, when I need to do something real quick with simple HTML site that doesn't require a server, I usually just open index.html in Terminal to quickly preview the page in browser. However when you open your site like that, using the leading slash to load resources (ie. /js/main.js) won't work. That's because when you load your website by opening a file in your browser, the browser takes the root of your drive as the base path for your website.
So if you have your files like this for instance:
drive/Users/username/Documents/www/index.html
drive/Users/username/Documents/www/js/main.js
And you reference your script like this:
<script src="/js/main.js"></script>
The browser will think you're actually pointing here (if you open the file directly in browser):
drive/js/main.js
Because / in this case means drive and not the website's root (www in this case) folder as it would on a server.
Nope, it is not a bad habit to put '/' when starting links. But not having a quote in every html attribute? I don't think so. But i would suggest to put quote(") in every html attribute for it to be more readable.

"Removing" .html from the end of site address

I want people to be able to type in this:
http://www.example.com/store
Instead of, say... this:
http://www.example.com/store.html
Is there some file somewhere that I can change so the user is redirected the "non-.html" address to the .html one? I would imagine that users would much rather type in the "non-.html" address than the other one.
I have full access to the site, so whatever needs to be changed can be changed. I just don't know how to do it.
You can do it. You are looking at "URL Rewriting" in .htaccess file. There are many different techniques for doing it. Have a look at this example.
Hope that helps.
http://www.example.com/store/index.html would be one solution. If you visit example.com/store, your browser would automatically load the index.html file.
You need to Google/Bing URL Rewriting within the context of the framework and web server you are using. This is a very large topic since every framework/server combination has a different way of achieving what you want.
If you aren't using a web framework, or you don't know what an .htaccess file is, the simplest way might be to do it with directories. If you create a root-level directory named "store" and move store.html into it as index.html, like this:
/
--store/
----index.html <- used to be "store.html"
then the url http://site.com/store should work like you want it to.

Return previous folder in URL

If my path is "http://www.example.com/folder1/folder2/" how can I return to "http://www.example.com/folder1/"
I've tried
Back
Which get me back to "http://www.example.com/" and not the previous folder. Any clue on how to do it ?
EDIT
I have a
<base href="http://www.example.com/" />
in the head, could it be because it try to go down 1 folder from that base ?
Back
Should work if you drop the trailing slash. Don't really know why it wouldn't work with it but if it's not working, try that...
EDIT Just tested and both versions worked for me in IE8 - what browser are you using to test it?
Another Edit
If you use a <base> tag, all relative hrefs will be relative the href attribute specified as the <base> (thats the point of it). If your base is the root of the site, like http://www.example.com/, links that try to step down a directory won't make any sense, since there's nowhere lower to go, and they will just point to the root directory. However, if the base is the root of the site, there's probably no point in having one at all, since this is, effectively, the default - it would only make a difference if you were working from a higher level directory.
If the base is not the root, but somewhere higher (like http://www.example.com/somedirectory/) there is a point in the base declaration, but you have to make a decision - something would have to be specified absolutely. So if you have done it because you want to refer to all your images as just file.jpg instead of /somedirectory/file.jpg, you either need to change your image references to the absolute /somedirectory/file.jpg, or have your 'navigation links' like the one shown in the question specified absolutely. You can't do both.
I would say (although I don't know much about the rest of your site and how it was built) that your best bet is to scrap the <base> in order to allow for relative navigation links, but the choice is yours...

referring to .css and images from script-generated HTML

I have a site with static HTML pages in the home directory. These HTML pages use relative paths to refer to images, css, and links i.e.
<img src="images/myimg.gif">
and
Contact Us
I also have a monolithic script whose URL is, i.e. http://mysite.com/myScript which uses "extra path info" to select functions... i.e. http://mysite.com/myScript/products shows a list of products. So in HTML generated from the script I need to refer to images, css and links like this:
<img src="../images/myimg.gif">
and
Contact Us
The problem is now I want to start moving common HTML into include files, (e.g. common header and footer), but the fact that the script and the static HTML refer to relative resources in different ways is complicating matters.
I don't want to use absolute paths because that messes up my colleague's work when she tries to work on the pages in DramWeaver, and it also makes the site less flexible.
What's the best way to solve this issue? One idea I had was to use URL rewriting in Apache to allow the URL to http://mysite.com/products to really use http://mysite.com/myScript/products but I don't have experience with URL rewriting so I don't know how easy that would be. Another idea I had was to use the META BASE attribute in HTML but I don't like the fact that I would have to hard-code that into every HTML page, and it would have to have the full URL hard-coded (e.g. http://mysite.com/) into each one. Any advice?
Can't you refer to your images with a slash at the beginning so all files linked to are from the root, no matter how deep you are in the directory structure you are? E.g:
<img src="/images/myimg.gif" />
EDIT:
You could use $_SERVER to get the path then use substr_count to count the number of slashes in the path. Add as many ../'s as you need based on that number. Would that work for you?