[Draft Idea/Spec/Proposal] Clickable Images

Hi Community!

Currently, when we want to make clickable images, we do this:

before.html

<!DOCTYPE html>
<html>
<body>

<span>Open image link in a new tab: 
 <a href="http://www.google.com" target="_blank">
  <img src="images.jpg" />
 </a>
</span>
</body>
</html>

Notes

  1. The image is inside the anchor tag

after.html

<!DOCTYPE html>
<html>
<body>
<span>Open image link in a new tab: 
  <img src="images.jpg" href="http://www.google.com" target="_blank" />
</span>
</body>
</html>

Reasons

  1. In my view not having an href and target attribute within images is something semantically wrong - because it’s something you should have and you don’t.
  2. It’s necessary to create a kind of workaround in the html or use a library for javascript… because the html specification itself does not have this feature.
  3. Most of the mechanisms I use don’t allow <a> inside <img/> </a> - this is blocked! - So… an alternative to solve this would be if the img tag had the target and href attribute
  4. This allows the html in my view to be more hypertext

Notes

  1. These views are observations and not criticisms.

Reference

What mechanisms? <img> inside <a> is perfectly normal. Why would any system not allow it?

2 Likes

Hi! Sites like github don’t allow this within markdown.

sample.md

 <a href="http://www.google.com" target="_blank">
  <img src="images.jpg" />
 </a>

Notes

I found it interesting to open these issues here and on Github. I don’t know if it’s a Github-only issue or if the HTML should be something like this.

Image links seem to work fine on GitHub GitHub - simevidas/image-link-test

1 Like

works!