この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
liタグとaタグの組み合わせは、ナビゲーションメニューなどでよく使われます。
aタグの中にliタグを入れるのは正しいのかについては、よくわからないという方もいるのではないでしょうか。
なぜ、aタグの中にliタグを入れるべきではないのかや、正しい記述方法についても解説します。
それでは始めます。
liタグとaタグの役割
まず、liタグとaタグの役割について解説します。
liタグ
リストの項目を表すタグで、通常はulタグ、olタグ、menuタグ内で使用されます。
HTMLの仕様上、ulタグ、olタグ、menuタグのいずれかの子要素でなければいけません。
aタグ
ハイパーリンクを作成するためのタグです。
HTML5からはaタグ内にブロックレベル要素を含めることができるようになりました。
【結論】aタグの中にliタグを入れるのは間違い
結論をいうと、aタグの中にliタグを入れるのは間違いです。
例えば、以下のコードは間違ったコードです。
<ul>
<a href="https://example.com">
<li>間違ったコード</li>
</a>
</ul>liタグをaタグで囲っています。
上記コードはHTMLの仕様に沿っていない間違ったコードです。
MDNのサイトには以下のように記述されています。
<li>は HTML の要素で、リストの項目を表すために用いられます。この要素は、その項目が属する順序付きリスト (<ol>)、順序なしリスト (<li>)、メニュー (<menu>) のいずれかの子要素として配置する必要があります。
ですので、先ほども記載しましたがliタグは、
HTMLの仕様上、ulタグ、olタグ、menuタグのいずれかの子要素でなければいけません。
下記の間違ったコードでは、liタグはaタグの子要素になっています。
ですので、HTMLの仕様に沿っていないコードになります。
<ul>
<a href="https://example.com">
<li>間違ったコード</li>
</a>
</ul>正しい書き方
では上記に例での正しい書き方はどういった書き方でしょうか。
正しい書き方は以下のように、liタグの中にaタグを書き、リンクにしたい文字をaタグで囲みます。
<ul>
<li>
<a href="https://example.com">
正しいコード
</a>
</li>
</ul>liタグ全体をリンクにしたい場合のおすすめの書き方
liタグの中にaタグを書くのが正しいのですが、このコードでは、クリックできる範囲が狭いという場面もあるかと思います。
その時はliタグ全体をリンクにできるおすすめの書き方があります。
CSSでリンクをブロック要素にする
aタグをブロック要素として表示することで、liタグ全体をクリックできる範囲にすることができます。
例えば以下のコードです。
<ul>
<li>
<a class="click" href="https://example.com">
リンク全体がクリック可能な項目
</a>
</li>
</ul>
.click{
display: block;
width: 100%;
}
コードを解説すると、
display: block; と書くことで、ブロック要素になることで親要素の全幅になります。
このことにより、リンク範囲がliタグ（親要素）全体になります。
display: block; と書いたら、liタグ全体になることがほとんどですが、
width: 100%;と書くことで、リセットCSSや親要素へのスタイルなど予期せぬ影響に影響されることなく、リンク範囲を広げることができます。
参考サイト
https://developer.mozilla.org/ja/docs/Web/HTML/Element/li
https://developer.mozilla.org/ja/docs/Web/HTML/Element/a
まとめ
最後にまとめです。
- ulタグ、olタグ、menuタグのいずれかの子要素でなければいけない。
- liタグの中にaタグを書くのが正しい書き方
- liタグ全体をリンクにしたい場合は、以下のCSSを書くことがおすすめ
- display: block;
- width: 100%;
今回はaタグの中にliタグを入れるのは正しいのかについて書きました。
それではまた〜ノシ
