Three ways to link a card

1. The whole card is one link

A screen reader announces

"link, Where a Link Goes How an href becomes a full URL, fragments, and schemes beyond HTTP. Linking 02 · Read more": every word in the card, in one breath, every time.

2. The heading is the link, stretched over the card

A screen reader announces

"link, What a Click Does", inside a heading. The description is read as ordinary text after it. The cost: the card's text cannot be selected with the mouse, because the link's box sits over it.

3. A link inside the card link (invalid)

What was written:

<a href="/interaction/linking/trust/">
  <h3>Links You Can Trust</h3>
  <p>Section: <a href="/interaction/linking/">Linking</a> · Read more</p>
</a>

What the parser builds (inspect the card in DevTools to see it):

<a href="/interaction/linking/trust/">
  <h3>Links You Can Trust</h3>
</a>
<p><a href="/interaction/linking/trust/">Section: </a><a href="/interaction/linking/">Linking</a> · Read more</p>

The parser ends the card link before the paragraph, and gives the paragraph its own copy of the card link to hold the text before the inner link. One card link became two links to the same page, and "· Read more" is now not a link at all. Tab through the card to count them.