aタグの中でaタグを利用する方法

HTMLを記述していて表現状div等をaタグで囲いその中でaタグを利用したい状況がありました。

しかし、単純にaタグの中にaタグを記述するとHTMLの規約上禁止されている構文となり思ったような表現ができませんでした。

色々調べてみると禁止されているとはいえいくつか実現する方法があったので紹介します。

全て方法においてSEO的に不利になる可能性が高いので注意してください。

objectタグを利用する方法

いちばん手間がかからない方法で出来るのがこの方法です。
aタグの中にあるaタグをobjectタグで囲むことで実現可能です。
ただし、本来のobjectタグの利用目的ではないのでSEO的に不利になる可能性があります。

sample

cssのpositionを利用する方法

次の方法はcssで重なりを作り実現する方法です。
aタグの中にaタグが入らないようにして、「position」と「z-index」を利用して重ねる方法です。
この方法でもaタグの対象が本来の対象と違い要素が存在しないaタグとなっている為SEO的に不利になる可能性があります。

sample

javascript(onclick)を利用する方法

javascriptを利用する方法もあります。
aタグ中にaタグを利用せずにjavascriptのonclickで「location.href」命令を利用して実現する方法です。
説明HTMLではaタグのかわりにspanタグを利用して実現しています。
この方法でもaタグを利用しないという理由でSEO的に不利になる可能性があります。

sample