I do have the following code in my HTML:
<img src="#" alt="image alternative text" />
What does src="#" mean? Because in HTML, I cannot have empty src attribute for an image tag. And if we do not have that attribute, visual studio 2012 will throw a suggestion.
Thanks
When you don't want any image to be loaded using src attribute (probably load the image dynamically later), you need to set src empty. But when you do that, browsers still send calls to server.
Browser behavior for empty src (Source: http://developer.yahoo.com/performance/rules.html)
Internet Explorer makes a request to the directory in which the page
is located. Safari and Chrome make a request to the actual page
itself. Firefox 3 and earlier versions behave the same as Safari and
Chrome, but version 3.5 addressed this issue[bug 444931] and no longer
sends a request. Opera does not do anything when an empty image src is
encountered.
To avoid the unnecessary call to server, instead of using empty src, src="#" could be used which forms a hash url and hash urls are not sent to server.
Let's say base url is : http://mysite.com/myapp/
src="" -> Absolute url: http://mysite.com/myapp/
src="#" -> Absolute url: http://mysite.com/myapp/#
Most people use it as a placeholder for links just so that there are no errors when the code compiles. If a programmer gave you some code with the "#" as a placeholder, they probably want you to interchange it with a web URL.
As with the href attribute of an anchor element, <img src="#"> is roughly equivalent to <img src="thecurrenturl#" ..> (but see the fiddle example for why it's not identical).
As it is written src will never refer to a valid image resource but, presumably, something/someone can change the URL later or otherwise manipulate the element. Since the src attribute is required1, substituting in such a valid "dummy" value appeases tools like the Visual Studio editor.
This fiddle shows the behavior which can be observed by using the DOM src property.
1 "The src attribute must be present, and must contain a valid non-empty URL .."
More than likely just a placeholder subject to change dynamically based off of an event listener (or like #FabricioMatte suggested, a lazy loading technique.) It could also be just a placeholder to bypass any potential errors.
In src="#", the attribute value is a reference to the start of the document at the current base URL, according to the URL standard, STD 66 aka RFC 3986. You would need rather special arrangements to make that actually work as a reference to an image.
Why anyone would use such an attribute is a different question, and a yet another question is what is the problem that the construct is supposed to address.
Related
I'm having a mystery here. The issue itself is worked around by now, but I still can't see the actual cause: On our image sharing site Pixabay.com we recently implemented the srcset attribute for img tags on search results. You can see that in action here: https://pixabay.com/photos/
A typical img tag in there looked like this:
<img src="/image__180.jpg" srcset="/image__180.jpg 1x, /image__340.jpg 2x" alt="...">
It worked very well - for about 99% of all users. However, a few reported to see the issue depicted in this screenshot:
Some 30-50 images loaded correctly on the page, while the others resulted in broken images. We realized, our NGINX log contained a few errors like this:
open() "/.../image__180.jpg" srcset="/image__180.jpg 1x, /image__340.jpg 2x" failed (2: No such file or directory)
Apparently, for an unknown reason, the client requested the whole expression (value of src+"srcset"+value of srcset) as image path, which of course resulted in an error 404.
We played around a bit and realized, first providing the srcset and then the src attribute on the img tags solves the issue. No more error logs, no more complaints.
<img srcset="/image__180.jpg 1x, /image__340.jpg 2x" src="/image__180.jpg" alt="...">
I couldn't find any reports of this behavior anywhere on the web. But I'd like to learn more. Here's the discussion on Pixabay with several users reporting the issue: https://pixabay.com/en/forum/help-me-please-11/pixabay-technical-difficulties-1474/?pagi=2
Do you have an explanation?
There is absolutely no way for a browser to screw this up normally. HTML parsers are rock-solid, they don't randomly eat extra bytes for an attribute.
This is definitely a proxy or some other MITM screwing with the markup somehow. I suggest dropping in some JS that quickly examines all the src attributes on the page and checks if any contain "srcset", and if so, logging as much information as you can about the UA or whatever, so you can try to find a commonality between them.
Suspect it's probably some weird proxy examining/rewriting source, using a regex like /image.*.jpg/ and rewriting it back URL-escaped. That'll catch everything from the start of your src image up to the final .jpg in your srcset, and escape all the spaces and quotes between them so you get a single big src attribute value.
Alternately, since this is apparently delivered over HTTPS, which reduces the chance of proxy rewriting, it may be a badly-behaved extension.
Anyone has idea, how to produce valid HTML5 when images are displayed with AngularJs ng-scr directive?
What I have discovered?
"src"- attribute is required on img-tags
It can't be empty
Console reports 404 error if I set src attribute data with angular binding, cause it tries to load image before Angular has initialized
Why I want valid HTML?
Reason is simple. Strange HTML errors (missing end tags, open tags etc..) causes strange behavior in our project where we have LOTS of views. Ensuring periodically that source is valid, makes code less unstable.
From this post stems a genious hack:
<img ng-src="modelImage" src="//:0">
...much easier to remember from the top of your head than an image URL ;)
ngSrc: any string which can contain {{}} markup.
i have 2 errors coming up on firefox. Theses errors are shown below.
1-there is no attribute "property". This refers to the line below:
<meta property="og:title" content="blahblahblah"/>
This is to do with linking it to social networks i.e facebook etc
2-there is no attribute onerror. This refers to the line below:
<img src="281.jpg" width="125" height="125" onerror="onImgErrorSmall(this)"/>
This basically displays a default image if the actual image dose not show up.
the question really is, i know these are not valid attributes but how can i get around them, if anyone has any ideas id be grateful.
For the meta tag there is no property attribute
For the img tag there is no attribute called onerror
No way to get around them as they are not part of the html markup
Live with them or remove - they will never validate against a web standard
You pasted stuff into a wysiwyg editor directly from Microsoft Office or OpenOffice document.
These properties are proprietary.
You should clean up or remove the markup before pasting. (Most of wysiwyg editors in use today have this function (a.k.a. paste from Word))
This link may be able to help you out.
onerror is only supported by the "browser" that Microsoft makes.
I have an image that I will dynamically populate with a src later with javascript but for ease I want the image tag to exist at pageload but just not display anything. I know <img src='' /> is invalid so what's the best way to do this?
Another option is to embed a blank image. Any image that suits your purpose will do, but the following example encodes a GIF that is only 26 bytes - from http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />
Edit based on comment below:
Of course, you must consider your browser support requirements. No support for IE7 or less is notable. http://caniuse.com/datauri
While there is no valid way to omit an image's source, there are sources which won't cause server hits. I recently had a similar issue with iframes and determined //:0 to be the best option. No, really!
Starting with // (omitting the protocol) causes the protocol of the current page to be used, preventing "insecure content" warnings in HTTPS pages. Skipping the host name isn't necessary, but makes it shorter. Finally, a port of :0 ensures that a server request can't be made (it isn't a valid port, according to the spec).
This is the only URL which I found caused no server hits or error messages in any browser. The usual choice — javascript:void(0) — will cause an "insecure content" warning in IE7 if used on a page served via HTTPS. Any other port caused an attempted server connection, even for invalid addresses. (Some browsers would simply make the invalid request and wait for them to time out.)
This was tested in Chrome, Safari 5, FF 3.6, and IE 6/7/8, but I would expect it to work in any browser, as it should be the network layer which kills any attempted request.
These days IMHO the best short, sane & valid way for an empty img src is like this:
<img src="data:," alt>
or
<img src="data:," alt="Alternative Text">
The second example displays "Alternative Text" (plus broken-image-icon in Chrome and IE).
"data:," is a valid URI. An empty media-type defaults to text/plain. So it represents an empty text file and is equivalent to "data:text/plain,"
OT: All browsers understand plain alt. You can omit ="" , it's implicit per HTML spec.
I recommend dynamically adding the elements, and if using jQuery or other JavaScript library, it is quite simple:
http://api.jquery.com/appendTo/
http://api.jquery.com/prependTo/
http://api.jquery.com/html/
also look at prepend and append. Otherwise if you have an image tag like that, and you want to make it validate, then you might consider using a dummy image, such as a 1px transparent gif or png.
Use a truly blank, valid and highly compatible SVG, based on this article:
src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E"
It will default in size to 300x150px as any SVG does, but you can work with that in your img element default styles, as you would possibly need in any case in the practical implementation.
I haven't done this in a while, but I had to go through this same thing once.
<img src="about:blank" alt="" />
Is my favorite - the //:0 one implies that you'll try to make an HTTP/HTTPS connection to the origin server on port zero (the tcpmux port?) - which is probably harmless, but I'd rather not do anyways. Heck, the browser may see the port zero and not even send a request. But I'd still rather it not be specified that way when that's probably not what you mean.
Anyways, the rendering of about:blank is actually very fast in all browsers that I tested. I just threw it into the W3C validator and it didn't complain, so it might even be valid.
Edit: Don't do that; it doesn't work on all browsers (it will show a 'broken image' icon as pointed out in the comments for this answer). Use the <img src='data:... solution below. Or if you don't care about validity, but still want to avoid superfluous requests to your server, you can do <img alt="" /> with no src attribute. But that is INVALID HTML so pick that carefully.
Test Page showing a whole bunch of different methods: http://desk.nu/blank_image.php - served with all kinds of different doctypes and content-types. - as mentioned in the comments below, use Mark Ormston's new test page at: http://memso.com/Test/BlankImage.html
As written in comments, this method is wrong.
I didn't find this answer before, but acording to W3 Specs valid empty src tag would be an anchor link #.
Example: src="#", src="#empty"
Page validates successfully and no extra request are made.
I found that simply setting the src to an empty string and adding a rule to your CSS to hide the broken image icon works just fine.
[src=''] {
visibility: hidden;
}
if you keep src attribute empty browser will sent request to current page url
always add 1*1 transparent img in src attribute if dont want any url
src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="
I've found that using:
<img src="file://null">
will not make a request and validates correctly.
The browsers will simply block the access to the local file system.
But there might be an error displayed in console log in Chrome for example:
Not allowed to load local resource: file://null/
Building off of Ben Blank's answer, the only way that I got this to validate in the w3 validator was like so:
<img src="/./.:0" alt="">`
I personally use an about:blank src and deal with the broken image icon by setting the opacity of the img element to 0.
<img src="invis.gif" />
Where invis.gif is a single pixel transparent gif. This won't break in future browser versions and has been working in legacy browsers since the '90s.
png should work too but in my tests, the gif was 43 bytes and the png was 167 bytes so the gif won.
p.s. don't forget an alt tag, validators like them too.
I know this is perhaps not the solution you are looking for, but it may help to show the user the size of the image before hand. Again, I don't fully understand the end goal but this site might help: https://via.placeholder.com
It's stupid easy to use and allows to show the empty image with the needed size.
Again, I understand you did not want to show anything, but this might be an elegant solution as well.
<img src="https://via.placeholder.com/300" style='width: 100%;' />
Simply, Like this:
<img id="give_me_src"/>
The SRC and HREF attributes are used to include some external entities like an image, a CSS file, a HTML file, any other web page or a JavaScript file.
Is there a clear differentiation between SRC and HREF? Where or when to use SRC or HREF? I think they can't be used interchangeably.
I'm giving below few examples where these attributes are used:
To refer a CSS file: href="cssfile.css" inside the link tag.
To refer a JS file: src="myscript.js" inside the script tag.
To refer an image file: src="mypic.jpg" inside an image tag.
To refer another webpage: href="http://www.webpage.com" inside an anchor tag.
NOTE: #John-Yin's answer is more appropriate considering the changes in the specs.
Yes. There is a differentiation between src and href and they can't be used interchangeably. We use src for replaced elements while href for establishing a relationship between the referencing document and an external resource.
href (Hypertext Reference) attribute specifies the location of a Web resource thus defining a link or relationship between the current element (in case of anchor a) or current document (in case of link) and the destination anchor or resource defined by this attribute. When we write:
<link href="style.css" rel="stylesheet" />
The browser understands that this resource is a stylesheet and the processing parsing of the page is not paused (rendering might be paused since the browser needs the style rules to paint and render the page). It is not similar to dumping the contents of the css file inside the style tag. (Hence it is advisable to use link rather than #import for attaching stylesheets to your html document.)
src (Source) attribute just embeds the resource in the current document at the location of the element's definition. For eg. When the browser finds
<script src="script.js"></script>
The loading and processing of the page is paused until this the browser fetches, compiles and executes the file. It is similar to dumping the contents of the js file inside the script tag. Similar is the case with img tag. It is an empty tag and the content, that should come inside it, is defined by the src attribute. The browser pauses the loading until it fetches and loads the image. [so is the case with iframe]
This is the reason why it is advisable to load all JavaScript files at the bottom (before the </body> tag)
update : Refer #John-Yin's answer for more info on how it is implemented as per HTML 5 specs.
apnerve's answer was correct before HTML 5 came out, now it's a little more complicated.
For example, the script element, according to the HTML 5 specification, has two global attributes which change how the src attribute functions: async and defer. These change how the script (embedded inline or imported from external file) should be executed.
This means there are three possible modes that can be selected using these attributes:
When the async attribute is present, then the script will be executed asynchronously, as soon as it is available.
When the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing.
When neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.
For details please see HTML 5 recommendation
I just wanted to update with a new answer for whoever occasionally visits this topic. Some of the answers should be checked and archived by stackoverflow and every one of us.
I think <src> adds some resources to the page and <href> is just for providing a link to a resource(without adding the resource itself to the page).
HREF: Is a REFerence to information for the current page ie css info for the page style or link to another page. Page Parsing is not stopped.
SRC: Is a reSOURCE to be added/loaded to the page as in images or javascript. Page Parsing may stop depending on the coded attribute. That is why it's better to add script just before the ending body tag so that page rendering is not held up.
Simple Definition
SRC : (Source). To specify the origin of (a communication); document:
HREF : (Hypertext Reference). A reference or link to another page, document...
SRC(Source) -- I want to load up this resource for myself.
For example:
Absolute URL with script element: <script src="http://googleapi.com/jquery/script.js"></script>
Relative URL with img element : <img src="mypic.jpg">
HREF(Hypertext REFerence) -- I want to refer to this resource for someone else.
For example:
Absolute URL with anchor element: Click here
Relative URL with link element: <link href="mystylesheet.css" type="text/css">
Courtesy
A simple definition
SRC: If a resource can be placed inside the body tag (for image, script, iframe, frame)
HREF: If a resource cannot be placed inside the body tag and can only be linked (for html, css)
You should remember when to use everyone and that is it
the href is used with links
<link rel="stylesheet" href="style.css" />
the src is used with scripts and images
<img src="the_image_link" />
<script type="text/javascript" src="" />
the url is used generally in CSS to include something, for exemple to add a background image
selector { background-image: url('the_image_link'); }
after going through the HTML 5.1 ducumentation (1 November 2016):
part 4 (The elements of HTML)
chapter 2 (Document metadata)
section 4 (The link element) states that:
The destination of the link(s) is given by the href attribute, which must be present and must contain a valid non-empty URL potentially surrounded by spaces. If the href attribute is absent, then the element does not define a link.
does not contain the src attribute ...
witch is logical because it is a link .
chapter 12 (Scripting)
section 1 (The script element) states that:
Classic scripts may either be embedded inline or may be imported from an external file using the src attribute, which if specified gives the URL of the external script resource to use. If src is specified, it must be a valid non-empty URL potentially surrounded by spaces. The contents of inline script elements, or the external script resource, must conform with the requirements of the JavaScript specification’s Script production for classic scripts.
it doesn't even mention the href attribute ...
this indicates that while using script tags always use the src attribute !!!
chapter 7 (Embedded content)
section 5 (The img element)
The image given by the src and srcset attributes, and any previous sibling source element's srcset attributes if the parent is a picture element, is the embedded content.
also doesn't mention the href attribute ...
this indicates that when using img tags the src attribute should be used aswell ...
Reference link to the W3C Recommendation
If you're talking HTML4, its list of attributes might help you with the subtleties. They're not interchangeable.
They are not interchangeable - each is defined on different elements, as can be seen here.
They do indeed have similar meanings, so this is an inconsistency. I would assume mostly due to the different tags being implemented by different vendors to begin with, then subsumed into the spec as is to avoid breaking backwards compatibility.
They don't have similar meanings. 'src' indicates a resource the browser should fetch as part of the current page. HREF indicatea a resource to be fetched if the user requests it.
From W3:
When the A element's href attribute is
set, the element defines a source
anchor for a link that may be
activated by the user to retrieve a
Web resource. The source anchor is the
location of the A instance and the
destination anchor is the Web
resource.
Source: http://www.w3.org/TR/html401/struct/links.html
This attribute specifies the location
of the image resource. Examples of
widely recognized image formats
include GIF, JPEG, and PNG.
Source: http://www.w3.org/TR/REC-html40/struct/objects.html
I agree what apnerve says on the distinction. But in case of css it looks odd. As css also gets downloaded to client by browser. It is not like anchor tag which points to any specific resource. So using href there seems odd to me. Even if its not loaded with the page still without that page cannot look complete and so its not just relationship but like resource which in turn refers to many other resource like images.
src is to used to add that resource to the page, whereas href is used to link to a particular resource from that page.
When you use in your webpage, the browser sees that its a style sheet and hence continues with the page rendering as the style sheet is downloaded in parellel.
When you use in your webpage, it tells the browser to insert the resource at the location. So now the browser has to fetch the js file and then loads it. Until the browser finishes the loading process, the page rendering process is halted. That is the reason why YUI recommends to load your JS files at the very bottom of your web page.