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
yahoo(要素全体)
google

javascript(onclick)を利用する方法

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

sample
この記事は役に立ちましたか?
  • 役に立った(5)
  • もっと詳しい情報が必要(1)
  • 情報が古かった(1)
  • 目的の情報では無かった(3)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする