4

I'm working on a wordpress customisation where I need an entire article tag to be a link.
Basically when I hover the <article> the background color changes (working) but I cannot figure the html to make that entire tag into a link. I've tried both ways

<a href="mylink">
    <article>
        /*article content: an image, header &text*/
    </article>
</a>

and

<article>
    <a href="mylink">
        /*article content: an image, header &text*/
    </a>
</article>
2
  • There is something wrong if you have to make entire article a link
    – Mr. Alien
    Jul 14, 2016 at 6:40
  • 2
    @Mr.Alien It's pretty common for a blog or shop to have the entire post/product entry as a link Jun 17, 2017 at 19:56

2 Answers 2

2

The first code should work. add class to <a> tag and use css display:block property.

.block{
  display: block;
}
<a class="block" href="mylink">
    <article>
        <img src="http://placehold.it/400/400" alt="" />
    </article>
</a>

4
  • 5
    You should really point out (by suggesting this way) that: using this solution you cannot have other Anchor elements inside the article. Jul 14, 2016 at 6:51
  • 1
    Good point @RokoC.Buljan. A JS solution (click event on <article>) would be helpful in that case
    – Anupam
    Jan 10, 2020 at 17:32
  • Unfortunately, since a is an inline element and article a block element, I think it is actually not valid HTML. I don't think it is legal to nest block elements inside inline elements. However I must agree this solution makes the most sense and I can't think of a better one. One could of course nest the a inside the article, but article typically contains other block elements such as header or h1 etc as well, so I don't think there is a valid HTML way to do it. I am guessing at some point they will drop the rule that inline elements can't contain block elements. Apr 26, 2020 at 11:52
  • Ah I'm getting old. Since HTML 5 wrapping a around block level elements is actually allowed, according to this answer. That's great news! It makes this answer completely valid! Do note that the link may still not contain nested links or buttons etc. Apr 26, 2020 at 11:56
0

Thanks Kijan! your answer almost works. I had to adjust it like this:

    .parent{
	position: relative;
    }
    .block{
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
    }
    <div class="parent">
        <a class="block" href="mylink">
            <article>
                <img src="http://placehold.it/400/400" alt="" />
            </article>
        </a>
    </div>

so basically giving the link a height was essential. and for it to cover the entire article I made it absolute position and take the whole article background. Maybe this helps others.

3
  • Yeah that might be the solution to you by positioning as necessary for your website. Cheers for the solution. BTW if you want to add other link in the block that you might position that item as well for eg: read more button in the post. but you are doing it wrong by placing position relative and absolute both in same class i.e .block Jul 14, 2016 at 6:57
  • @KijanMaharjan that was just a typo in the sample code.
    – suMi
    Jul 15, 2016 at 11:00
  • Ooh, a snippet in a code block. What will they think of next.
    – Mr Lister
    Jul 22, 2016 at 18:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.