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>
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
suMi
  • 1,536
  • 1
  • 17
  • 30

2 Answers2

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>
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Kijan Maharjan
  • 1,031
  • 7
  • 14
  • 5
    You should really point out (by suggesting this way) that: using this solution you cannot have other Anchor elements inside the article. – Roko C. Buljan Jul 14 '16 at 06:51
  • 1
    Good point @RokoC.Buljan. A JS solution (click event on
    ) would be helpful in that case
     – Anupam Jan 10 '20 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. – Stijn de Witt Apr 26 '20 at 11:52
  • Ah I'm getting old. Since HTML 5 wrapping `a` around block level elements is actually allowed, according to [this answer](https://stackoverflow.com/a/1828032/286685). That's great news! It makes this answer completely valid! Do note that the link may still not contain nested links or buttons etc. – Stijn de Witt Apr 26 '20 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.

suMi
  • 1,536
  • 1
  • 17
  • 30
  • 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 – Kijan Maharjan Jul 14 '16 at 06:57
  • @KijanMaharjan that was just a typo in the sample code. – suMi Jul 15 '16 at 11:00
  • Ooh, a snippet in a code block. What will they think of next. – Mr Lister Jul 22 '16 at 18:17