This question already has answers here:
Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
(56 answers)
Closed 9 years ago.
I stumbled upon the following snippet in a source code of a web site.
<link href="#" id="colour-scheme" rel="stylesheet">
What does this do?
Without a base element, it does not do anything, except consume the browser’s resources a little. By URL specifications, # as a URL is a reference to the start of the document at the current base URL. Since the tag would have to be in an HTML document, it would fail (either because the document is served with an HTML media type or after the browser has in vain tried to parse HTML with a CSS parser).
If you use a base tag that sets the base URL to one that refers to a CSS document, it would technically work, e.g.
<!doctype html>
<title>Demo</title>
<base href="http://www.cs.tut.fi/~jkorpela/basic.css">
<link href="#" id="colour-scheme" rel="stylesheet">
<h1>Hello world</h1>
This would be rather abnormal, really, and it would effectively prevent you from using relative URLs otherwise in the document. So this is just a theoretical possibility, rather than what’s really going on.
Probably href="#" is just a placeholder here, to be overwritten by JavaScript code, or something. It’s bad coding style for several reasons. It would be better to omit the href attribute (even though this is technically invalid in HTML5) and have one inserted dynamically.
This does actually absolutely nothing except staying on the same page.
This comes from the Anchors that allow to jump on a part of a page (More specifically, on an id).
This is usually written to say that some link should be introduced here, because of its no-effectness. When you're coding a website, it's often useful to show links, even if the page the link refers to isn't yet existing. This is very often meant to be a temporary solution.
As specified in Ryan's and Tom's answers, it could also be to be used to load dynamically the CSS files.
Using a # in a link tag is commonly used to allow you to use javascript with later on if the URL is unknown or doesn't need to be set by default.
Example:
HTML
<link href="#" id="colour-scheme" rel="stylesheet">
JS
document.getElementById("colour-scheme").href="red.css";
This allows you to set the URL of the stylesheet in JS rather than statically set the location.
Probably some stylesheet that is to be loaded later on.
href = uri
This attribute specifies the location of a Web resource, thus defining a link between the current element (the source anchor) and the destination anchor defined by this attribute.
Using a hash (#) as the reference is often done by developers yet to include the actual reference when it's not known, however if this is on a live website it may be that JavaScript is being used to load a stylesheet based on the users colour-scheme choice. Before they've made that choice no colour scheme is required so no reference is given, hence the #.
Generally we use to call our css file for example below. Suppose I have a html file and I want to call my external css file, at that time I need to use . For more information please check this link http://www.w3schools.com/tags/att_link_href.asp
My Guess, as per the html link tags its mainly used to link the external files like
href="theme.css"
Since you are using href="#" it would not do anything / serve any purpose.
<link href="#" id="colour-scheme" rel="stylesheet">
href : This is to specify the location of the CSS file you want to import in your web page
when using href="#" it won't import any CSS file.
Related
Web developers have to use <link> tag in embedding a CSS style sheet into a web page. Sometimes when managing styles, developers break down their style code into several style sheets to gain maximum code re-usability and efficiency.
However a html file or even a css file should reduce its size as possible as smaller files load quickly into user devices. When linking several style sheets, many tutorials show this way.
<link rel="stylesheet" href="stylesheet1.css">
<link rel="stylesheet" href="stylesheet2.css">
<link rel="stylesheet" href="stylesheet3.css">
But the size of the html file can be reduced if all 3 style sheets can be embed using one link tag like this.
<link rel="stylesheet" href="stylesheet1.css stylesheet2.css stylesheet3.css">
Is this possible? Does browsers support embedding several style sheets in one link tag?
No it's not possible to include multiple files in one <link> tag.
In your CSS-file, you can daisy-chain them into another file however using #import.
Lets say you have these files:
style.css
table.css
button.css
You can then in style.css do:
<!-- Including one css file into other -->
#import "table.css";
#import "button.css";
And in HTML import them all like this:
<link rel="stylesheet" href="style.css" />
However you can use popular and powerful bundling tools such as Webpack that will bundle both your Javascript and CSS files.
The short answer is: No. because href attribute of link tag must be a URL string so you can't reference multiple URL.
But this kind of optimization can take place into your build system. In these build pipelines you can have multiple css or js file in your development environment but in production you may have only one optimized (chunked or minified) file for each.
Check out Parcel as a beginner-friendly web application bundler
Also for more advance options you can use
https://gulpjs.com
or
https://webpack.js.org
I think it is not possible to define more than one file in a single "href" attribute.
Also for each "href" there is its own relation define in the "rel" attribute.
you can read more about the link attributes on the following link:
https://www.w3schools.com/jsref/dom_obj_link.asp
No, it is not possible to add two or more stylesheets with one link tag.
no it's not possible,
If you do, you will receive a link error you can see it in network tab in chrome
chrome screenshot
I've got <link rel="icon" type="image/png" href="myimage.png" />, why doesn't it work? It gives me the blank/new document icon in the favicon.
Does it have to be an icon.
Does it have to be from a URL?
It worked previously but it's stopped now, I might have changed something, but I don't think so, I didn't update anything, add any gadgets or anything, it just stopped working.
I have tried a few things such as using URL or an .ico instead of PNG, and I've looked online too, but I can't figure it out. It could be because I'm hosting the site file in a google drive sync but I doubt it somehow.
Thanks. In case anybody needed it, I've got the code on paste bin: http://pastebin.com/Wzc9zLea << HTML and CSS
You need to meet the specifications => PNG/GIF/ICO, 8- or 24-bit colors, and size 16x16 or 32x32, which your image doesn't meet at all. By the way, why do you wrap your code with <a> tags?
P.S. - You might want to remove 'shortcut.'
To answer your questions, whether it has to be an icon–I think you mean whether it has to be a .ico or a .png file, and that depends on the browser. As a general rule, most of the time it can be a png, no problem. For much more detail, check out this SO answer.
As for whether it has to be "from a URL", that's tough to give a yes/no answer to because it's a bad question. If you mean, does it have to be from an external URL accessed via the HTTP protocol, then no, it doesn't. It can be a file path and that works just fine. Anything that requires a URL will generally take a file path no problem.
Side notes:
As I mentioned in my comment, there's no need to wrap your code in <a> tags, and it may be screwing with your code.
Some people are saying you don't have a closing <head> tag, but I see it just fine, so not sure what that's all about.
Your favicon should be saved as a .ico filetype. Place the NAME.ico in the root of wherever your website is. You can go to this site http://www.favicon.cc/ and have your .png made into a favicon. Then just put it into the root and you're set.
It varies depending on the browser and these days the device (tablet, smartphone, etc). But at a minimum, your favicon link should be constructed as follows:
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
Currently, your file reference is relative to URI, meaning that if you have pages deeper than one level below your document root, your code is going to break. To illustrate, here's an example:
If you visit http://example.com, the browser will look for your favicon file at http://example.com/myicon.png.
If you visit http://example.com/mycategory/myarticle.html, the browser will look for your favicon file at http://example.com/mycategory/myicon.png, which won't be found.
See the problem? So either use an absolute path to your favicon file:
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
or make the path relative to your document root:
<link rel="icon"
type="image/png"
href="/myicon.png">
Looking at the HTML you posted, another obvious problem that stands out is poorly structured (invalid) HTML. Remove the first four lines in your HTML document:
1. HTML
2. <a>
3. <!DOCTYPE html>
4.
The first line is just text and will confuse browsers trying to determine the document type of the page being loaded. The second line is a valid HTML element but it needs to exist within parent
<html>
<body>
...
</body>
</html>
elements. The third line isn't a valid declaration and looks like a stab in the dark, and the fourth is a blank line. If you don't actually know what HTML standard you're coding to, it's probably best to simply omit the DOCTYPE declaration and simply let the browser guess the standard to use because this WILL affect how your HTML is interpreted (and rendered). I don't know if it's universally true, but I think most browsers will fall back to the loosest HTML standard in the absence of a defined DOCTYPE.
One final thought. If you're new to HTML and/or don't have any sort of formal education/training, take some time to go through online tutorials. http://www.w3schools.com is a basic resource that can help you better understand the language.
I have a website made with cakephp. Most of the links in it, and asset paths, are absolute (start with "/").
We're having some problems with our hosting provider and some domains are messed up, including the one for this website. I've managed to access it through another domain, but now the website instead of being on the document root of the domain (as it was with its original domain), it inside a few folders (so something like mydomain.com/folder1/folder2/folder3/my_index.php).
Is there an easy way I can make all those links/paths that now start with "/" point to the folder that I want (for example mydomain.com/folder1/folder2/folder3/) instead of what happens now? (they point to mydomain.com)
Yes, you want the <base> HTML tag. Use it like such:
<head>
<base href="http://mydomain.com/folder1/folder2/folder3/">
</head>
You can also make all your links open in a new window by adding a target="_blank" attribute to the base tag.
MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
I am developing this site, it got my CSS file, and also have references to other CSS files for plugins (like treeview for example).
The problem is that in CSS the plugin as it modifies the the elements for example, in my file and also modify this element.
The browser is considering the plugin CSS and not mine.
How can I force the browser to use my tag to CSS for example.
Can not just remove the CSS plugin because there are other tags that you must configure it.
It would be better to reverse the order by wich the files are loaded.
However, if that is not an option, you can add " !important" to the CSS property you want to take precedence (ex: "margin:0px !important").
After that, unless some other file has that keyword too, it won't matter in wich order the files are loaded.
This is very useful sometimes, but it is not a best practise.
If I'm understanding your question it gas to do with when you are including the CSS files in your HTML documents.
Example: in mystyles.css you have #myelement{margin:0} and in plugin.css #myelement{margin:20px}
If plugin.CSS is brought in your HTML doc after mystyles.CSS, plugin.css take precedence.
link href="mystyles.CSS"
link href="plugin.CSS"
Sounds like you want to reverse the order to
link href="plugins.CSS"
link href="mystyles.CSS"
Now #myelement will have a 0px margin.
Hope that helps.
Might be a silly question, just wanted to know do the following ways on including CSS have any impact on the server response time. If yes, which is the better method and how
Way 1 :
<link rel='stylesheet' href='css/some.css'/>
Way 2 :
<link rel='stylesheet' href='http://www.somesite.com/css/some.css'/>
No, your browser converts any URL into an absolute URL before making the request, so it won't make any difference.
Depends. If you want to have the same website to run in the dev, test as well as prod environments without changing code, you'd like to use relative paths. Instead of that you can also specify a <base> element so that you only need to specify the domain only once -if necessary dynamically using a server-side language.
Another thing to take into account when hardcoding the protocol (the http: part) is that you would like to use at least protocol-relative URL's when your website may switch between HTTP and HTTPS regulary. A CSS file which is hardcoded on http://example.com/style.css may cause security complaints in most webbrowsers about "unsafe content". In such case you'd like to use relative paths such as style.css or if you persist in using the full domain name, use //example.com/style.css instead. This by the way also applies on all other resources like Javascripts and (CSS) images.