A clickable anchor tag without content

To answer the question can a content less anchor element be clickable, or along those lines I made the code bellow.

<!DOCTYPE html>
<html>
  <body>
    <a 
        href="https://www.freecodecamp.org/"
        style="display: block;
        width: 672px;
        height: 456px;
        background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMbwu2mAfI_B95MJ_rZqQxupVWx6tYek3-ZqArcfbd47XEId9ffmvi6Xnn&s=10)"
    ></a>
  </body>
</html>

The answer is yes.

3 Likes

Oh, this is a wonderfully clever way to do this! Is the image used here transparent, so it looks like an invisible link?

Though I would lovingly point out that this wouldn’t be a user friendly thing to do on a live site, what a delightful and weird experiment! I love weird!

1 Like

You could also wrap the anchor tag around an image tag, so the image becomes your clicky-thingy (technical term). So:

FreeCodeCamp Logo

1 Like

I just made the anchor a block and gave it a background image with inline style. And because of it’s width and height it can be clicked. So the anchor literally have no child element/content.

And yes it’s gonna be a very user unfriendly menace.

Yeah that can definitely be done, and is a better way of doing it. But the image then would become the content, thus the anchor will have a content.

I would suggest using HTML picture element or image element compared to CSS unless necessary.
using the Power of Least Power principle

Yeah that’s always a better idea but, the whole point of this was to make a clickable anchor tag with absolutely no content, adding image or picture element will have them as it’s content so it won’t really be content less.

You got me curious though: where did that idea come from? Like, of content less anchor?

In the very first stream some one asked if it was posible to make a clickable anchor tag without anything in it. It got me curious. I had already made some anchor tags with display block, so I thought that might work with nothing in it, and tried it out. It worked so now I am explaining it to everyone.

hmm cool, I saw de bg image and thought maybe it is gonna be sort of overlay or have a :hover, but I can totally relate to the curiosity ^^

I think it was me who asked it so thanks for actually finding out a method to do it!