A clickable anchor tag without content

Web Development Bootcamp
1

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
2

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
3

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
4

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.

5

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.

6

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

7

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.

8

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

9

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.

10

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 ^^

11

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

12

Oh I asked this question in the Eastern stream. Thanks for answering! I saw it too late though, haha. Though, what happens when you make an element a block? Like does it become similar to div?

13

Yeah it becomes similar to div.

You can specify it’s height, width, borders, margins, paddings, and other block ellement specific properties with no restriction and it makes the element render in a new line.

1 Like