What's the difference between
<a href="link"><img src="img" /></a>
and
<img src="img" onclick="self.location.href='link'" />
?
The second option will not work without js enabled, what else?
UPD: yep, didn't see wrong quotes.
Asked
Active
Viewed 111 times
-1
Sergey Musiyenko
- 17
- 1
- 6
-
1I'm pretty sure the second won't work *with* JavaScript enabled; it looks like a syntax error. – David Thomas Apr 27 '14 at 16:20
-
1Don't use onclick. That is begging for un-maintainability. It is also semantically incorrect. – Sukima Apr 27 '14 at 16:22
-
@Sukima: Semantically incorrect? – cookie monster Apr 27 '14 at 16:22
-
he meant its suppsoed to be `
` – Banana Apr 27 '14 at 16:23
-
No that is not what I meant. HTML describes the semantics of content, adding logic (i.e. onclick) is not helpful to be in the markup. Separate the concerns. Put the code in a JS file, Style in a CSS file and the structure in the HTML. – Sukima Apr 27 '14 at 16:25
-
@Sukima: The semantics of HTML are described by standards, not by conventions. – cookie monster Apr 27 '14 at 16:27
-
Thanx, guys. It's quite clear now :) – Sergey Musiyenko Apr 27 '14 at 16:32
-
@cookiemonster: http://stackoverflow.com/a/5871830/227176 – Sukima Apr 27 '14 at 16:51
-
@Sukima: Dude, don't post some link as though it has any bearing on reality. If you have something intelligent to say, then say it. Yes, I'm familiar with the *term* "unobtrusive JavaScript". It has nothing to do with HTML semantics, and it is promoted by some people with a religious zealotry. So what's your point? – cookie monster Apr 27 '14 at 17:05
3 Answers
0
all on handlers are javascript based and will only work if javascript enabled.
your second statement is wrong though, its supposed to be
<img src="img" onclick="self.location.href='link'" />
and both are the same except that one is html and other is javascript.
there are benefits for both versions, but the result is the same.
Banana
- 7,424
- 3
- 22
- 43
0
From user experience there's no difference between both methods (if you apply cursor: pointer style to javascript method).
However there's significant differences in different areas.
Semantic. On semantic level you can't know what is intention of having javascript associated. You know that when you use anchor element. Then there's a sure that this element's (and it's children) purpose is to navigate somewhere else.
It leads us to second area - SEO. To properly index you page crawler need to know what's a structure of it and how pages are associated. Crawler do not interpret javascript code. It only use HTML code to analyse your website.
Finally there is accessibility. It's directly associated with semantic. Screen readers, for example, differently behave on anchor element and on image element. They simply will not know that this image is a navigation element. So, some part of your user may not notice that there's an anchor.
My advice is not to use javascript in this context. An anchor element is the best choice.
Pawel Uchida-Psztyc
- 3,735
- 2
- 20
- 41
-3
One difference is that pure html href can not change port number. If you want to link to a different port you must use js.
Niklas Rosencrantz
- 25,640
- 75
- 229
- 424
-
2
-
2There's no need to use javascript only to change port. You can do this via html attribute as well. Difference is on semantic, seo and accessibility level. – Pawel Uchida-Psztyc Apr 27 '14 at 16:25