Need more info on nested links

Support
#1

Hi,

Could you please provide references and/or additional info on how to make nested links in different Cornerstone Elements? Or is it absolutely not allowed in HTML 5?

Often we need to make a Grid or Flexbox with the looper or some other container type which by itself uses <a> tag to link to a related single post or whatever. And inside that container block / card we might have buttons, links or other nested <a> elements which should link user to another source. It doesn’t seem like it can be solved easily with z-index. Are there any guides, docs or forum threads which explain the nested links with specifics related to different CS Containers / Elements usage? If there are any differences at all, or maybe there is a common way to handle all of them in the same fashion with jQuery / CSS or whatever?

Thank you for this in advance.

#2

Hello John,

Thanks for writing to us.

It seems you’re looking to create nested links using Cornerstone elements. If by ‘nested links’ you mean placing one clickable/link-enabled Cornerstone element inside another link-enabled element, that would ultimately produce HTML like:

<a href="/page-1">
    <div>
        <a href="/page-2">Another link</a>
    </div>
</a>

Please note it is not valid HTML5. The HTML specification explicitly states that an <a> tag must not contain another <a> tag or other interactive content as a descendant.

Hope it helps
Thanks

#3

Thanks @prakash_s,

That is what I wanted to reconfirm. So we should avoid using <a> for a container like a card wrapper <div> or any other which contains other elements like buttons which have their own <a> tags or even the same page scroll links.

#4

You are most welcome, John